/*
Theme Name: Kadence Child
Description: Child theme of Kadence
Template: kadence
Version: 1.0
*/

@import 'single-agent.css';
@import 'footer.css';

/* ========== Our Agents (Page ID 101) ========== */
/* KW Maroon = #b40101 */
/* Body Background = #f7fafc */

/* Make the page title sit just above the white grid, left-aligned */
header {
  align-items: baseline !important;
  /* height: 100px !important; */
}

/* main {
  border-top: 2px solid blue;
} */
#masthead {
  border-bottom: 2px solid #b40101;
}
/* Primary navigation menu items (Kadence theme) */
#primary-menu li.menu-item a {
  font-weight: 400;              /* keep normal weight by default */
  color: inherit;                /* use current theme text color */
  text-decoration: none;         /* remove default underline */
  transition: all 0.2s ease-in-out;
}

/* Hover/Focus state */
#primary-menu li.menu-item a:hover,
#primary-menu li.menu-item a:focus {
  /* font-weight: 700;              bold */
  color: #b40101 !important;     /* KW maroon */
  text-decoration: underline;    /* underline on hover */
  text-underline-offset: 4px;    /* space below text */
}

/* Optional: Active/current menu item stays maroon + bold */
#primary-menu li.current-menu-item a {
  font-weight: 700;
  color: #b40101 !important;
}

body.page-id-101 .entry-hero {
  background: transparent !important;
  padding-top: 24px !important;
  padding-bottom: 0 !important;
}
body.page-id-101 .entry-hero .entry-title,
body.page-id-101 .entry-title {
  max-width: 1100px;           /* match grid width */
  margin: 0 auto 16px auto !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Grid container */
body.page-id-101 .kw-agent-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 0;
  background: #fff;
  border-radius: 8px;
}

/* Card */
body.page-id-101 a.kw-agent-card {
  display: block !important;
  width: 100% !important;
  max-width: 250px !important;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  background: #fff;
}

/* Image (match your HTML: single underscore) */
body.page-id-101 .kw-agent-card_img {
  width: 100% !important;
  height: 200px !important;
  overflow: hidden;
}
body.page-id-101 .kw-agent-card_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Meta under the image */
body.page-id-101 .kw-agent-card_meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  width: 100% !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Agent Custom Links (used on single pages too) */
.kw-agent__custom-links {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kw-agent__custom-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  width: fit-content;
}
.kw-agent__custom-link:hover {
  background: #800000;
  color: #fff;
  border-color: #800000;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(128, 0, 0, 0.2);
}
.kw-agent__custom-link::before {
  content: "";
  width: 16px; height: 16px; margin-right: 8px;
  background-size: 16px 16px; background-repeat: no-repeat; background-position: center;
  flex-shrink: 0;
}
.kw-agent__custom-link[data-type="reviews"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
.kw-agent__custom-link[data-type="testimonial"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
  .kw-agent__custom-links { margin-top: 12px; gap: 8px; }
  .kw-agent__custom-link { padding: 10px 14px; font-size: 13px; width: 100%; justify-content: center; }
}

/* Our Agents (page 101): left-align the hero title and match grid width */
body.page-id-101 .entry-hero {
  background: transparent !important;
  padding-top: 24px !important;
  padding-bottom: 0 !important;
}

/* Kadence hero uses flex; push content to the left */
body.page-id-101 .entry-hero .entry-hero-inner,
body.page-id-101 .entry-hero .entry-hero-content {
  display: flex !important;
  justify-content: flex-start !important;
}

/* Constrain the header to the same width as the grid and left-align */
body.page-id-101 .entry-hero .entry-header {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 16px auto !important;
}

body.page-id-101 .entry-hero .entry-title {
  margin: 0 !important;
  padding: 0 !important;
  /* text-align: left !important; */
}

/* Our Agents page – align cards left */
body.page-id-101 .kw-agent-grid {
  justify-items: start !important; /* align grid items left */
}

body.page-id-101 .kw-agent-card {
  margin: 0 !important;           /* remove auto-centering */
  justify-self: start !important; /* stick to left of grid cell */
}

body.page-id-101 .entry-content {
  border: 1px solid #DDDDDD;
  border-radius: 20px;
}

/* Our Agents page – align H1 with logo */
body.page-id-101 .entry-hero .entry-header {
  max-width: none !important;   /* remove center constraint */
  margin: 0 !important;         /* no auto centering */
  padding-left: 20px;           /* match logo/menu padding */
  text-align: left !important;
}

body.page-id-101 .entry-hero .entry-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 2.2rem;            /* adjust to taste */
  font-weight: 700;
}

/* Our Agents (page 101): align H1 with the logo edge */
body.page-id-101 .entry-content-wrap{
  padding-left: var(--global-content-edge-padding) !important;
  padding-right: var(--global-content-edge-padding) !important;
}


/* Our Agents page: align H1 left with logo */
body.page-id-101 .entry-title {
  margin: 0 0 16px 0 !important;   /* no auto centering */
  padding: 0 !important;
  text-align: left !important;
  max-width: none !important;      /* remove width cap */
}

/* Style each blog card container */
.entry-list-item {
  border: 1px solid #CCCCCC;
  border-radius: 20px;
  overflow: hidden;            /* ensures child corners follow radius */
  background: #fff;            /* set background so radius blends */
  padding: 16px;               /* adds space between text and border */
  box-sizing: border-box;
}

/* Optional: remove background from the inner article so it doesn’t overlap */
.entry-list-item article {
  background: transparent !important;
  box-shadow: none !important; /* Kadence sometimes adds shadows */
}

.wp-block-latest-posts__post-title {
  font-size: 15px;
}
/* Base state for the post list */
.wp-block-latest-posts li {
  padding: 0; /* remove padding from li itself */
  margin: 0;
  list-style: none;
}

/* Anchor takes over padding + background */
.wp-block-latest-posts li a {
  display: block;                      /* anchor fills the li */
  padding: 6px 8px;                    /* add spacing inside link */
  text-decoration: none !important;    /* remove underline */
  color: inherit;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  border-radius: 4px;                  /* optional: rounded hover */
}

/* Hover effect */
.wp-block-latest-posts li a:hover {
  background-color: #CCCCCC;
  color: #b40101;                      /* KW maroon */
  text-decoration: none !important;    /* force no underline */
  transform: translateX(2px);          /* subtle slide */
}






/* =========================
   Single Agent layout (post type: agent)
   ========================= */

/* Make the top header a tidy two-column grid */
body.single-agent .kw-agent__header {
  display: grid !important;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 26px;
}

/* Left column: photo */
body.single-agent .kw_agent__photo {
  max-width: 360px;
}
body.single-agent .kw_agent__photo img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  object-fit: cover; /* keeps future non-square images looking good */
}

/* Right column: summary/title/status */
body.single-agent .kw_agent__summary .entry-title {
  margin: 0 0 6px 0 !important;
  line-height: 1.2;
}
body.single-agent .kw_agent__summary .job-title {
  margin: 0 0 8px 0;
  color: #4A5568;
}
body.single-agent .kw_agent__status {
  margin: 8px 0 14px 0;
  font-size: 14px;
}

/* Contact buttons row */
body.single-agent .kw_agent__contact {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
body.single-agent .kw_agent__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: #333;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.single-agent .kw_agent__contact a:hover {
  transform: translateY(-1px);
  border-color: #b40101;
  box-shadow: 0 4px 12px rgba(180,1,1,.12);
  color: #b40101;
}

/* Spacing before the Details/Bio section that follows */
body.single-agent .kw-agent__header + .kw-agent__header-details,
body.single-agent .kw-agent__header + section {
  margin-top: 12px;
}

/* Mobile: stack photo on top, center it a bit narrower */
@media (max-width: 900px) {
  body.single-agent .kw-agent__header {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.single-agent .kw_agent__photo {
    max-width: 280px;
  }
}
@media (max-width: 600px) {
  body.single-agent .kw_agent__photo {
    max-width: 240px;
  }
}



/* ===== Single Agent layout & buttons ===== */
body.single-agent .kw-agent__header{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

/* Photo: perfect square, no distortion */
body.single-agent .kw-agent__photo img{
  width:320px; height:320px;
  object-fit:cover;
  display:block;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Title / job line / status spacing */
body.single-agent .kw-agent__summary .entry-title{ margin:0 0 8px 0; }
body.single-agent .kw-agent__summary .job-title{ margin:0 0 10px 0; }
body.single-agent .kw-agent__status{ margin:6px 0 14px 0; }

/* One unified action row: phone, email, reviews, testimonial */
body.single-agent .kw-agent__contact{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:8px;
}

/* Make links in link-row flow with the others */
body.single-agent .kw-agent__contact .kw-agent__link-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Button look & equal height */
body.single-agent .kw-agent__contact a,
body.single-agent .kw-agent__contact .kw-agent__link-row a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  min-height:42px;
  border:1px solid #d9d9d9;
  border-radius:10px;
  background:#fff;
  color:#1f2937;
  text-decoration:none;
  line-height:1;
  font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease, color .2s ease, background-color .2s ease;
}

body.single-agent .kw-agent__contact a:hover,
body.single-agent .kw-agent__contact .kw-agent__link-row a:hover{
  transform:translateY(-1px);
  border-color:#b40101;
  color:#b40101;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}

/* Make any small icon inside the buttons play nice */
body.single-agent .kw-agent__contact a svg{
  width:16px; height:16px; flex:0 0 16px;
}

/* Responsive: tighten at tablet */
@media (max-width: 980px){
  body.single-agent .kw-agent__header{
    grid-template-columns: 260px 1fr;
    gap:18px;
  }
  body.single-agent .kw-agent__photo img{
    width:260px; height:260px;
  }
}

/* Stack on mobile */
@media (max-width: 680px){
  body.single-agent .kw-agent__header{
    grid-template-columns: 1fr;
  }
  body.single-agent .kw-agent__photo img{
    width:220px; height:220px; margin:0 auto;
  }
  body.single-agent .kw-agent__contact{
    justify-content:flex-start;   /* left-align buttons */
  }
}



/* === SINGLE AGENT: Fix button alignment issues (targeted fix) === */

/* Only target the specific button container, not the whole contact section */
.single-agent .kw-agent__contact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important; /* Changed from stretch to center */
  margin-top: 8px !important;
}

/* Reset and normalize ONLY the buttons */
.single-agent .kw-agent__contact > a,
.single-agent .kw-agent__contact .kw-agent-link-row > a {
  /* Force exact same dimensions */
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  
  /* Reset all padding to be identical */
  padding: 0 16px !important;
  
  /* Layout properties */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  
  /* Typography normalization */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  
  /* Styling */
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Fix the Dashicons icon specifically */
.single-agent .kw-agent__contact .dashicons {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Normalize any other icons */
.single-agent .kw-agent__contact svg,
.single-agent .kw-agent__contact i,
.single-agent .kw-agent__contact span[class*="icon"] {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Star icon for "My Reviews" */
.kw-ico{
  display:inline-block;
  width:16px;               /* keeps icon sizing consistent */
  line-height:1;
  font-size:16px;
  margin-right:8px;
  transform: translateY(-1px); /* optically centers with text */
}



/* Hover states */
.single-agent .kw-agent__contact > a:hover,
.single-agent .kw-agent__contact .kw-agent-link-row > a:hover {
  transform: translateY(-1px);
  border-color: #b40101;
  color: #b40101;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* Ensure the link row div doesn't add extra styling */
.single-agent .kw-agent__contact .kw-agent-link-row {
  display: flex !important;
  gap: 12px !important;
}

/* Make sure header layout is preserved */
.single-agent .kw-agent__header {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
  margin-bottom: 26px !important;
}

/* === SINGLE AGENT: Add proper spacing like the Our Agents page === */

/* Add spacing above the main content area */
.single-agent .site-main {
  padding-top: 40px !important;
}

/* Add spacing between header and content */
.single-agent .entry-content-wrap {
  margin-top: 40px !important;
  padding-top: 30px !important;
}

/* Alternative approach - add margin to the agent container */
.single-agent .kw-agent__container {
  margin-top: 40px !important;
  padding-top: 20px !important;
}

/* Ensure there's breathing room around the entire content */
.single-agent .content-area {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .single-agent .site-main {
    padding-top: 30px !important;
  }
  
  .single-agent .entry-content-wrap {
    margin-top: 30px !important;
    padding-top: 20px !important;
  }
  
  .single-agent .content-area {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ===== Wide, stacked blog cards (Kadence) ===== */

/* 1) One column instead of the theme’s 2–3 column grid */
.blog .kadence-posts-list,
.archive .kadence-posts-list,
.category .kadence-posts-list {
  display: grid !important;
  grid-template-columns: 1fr !important;   /* single column */
  gap: 24px !important;
}

/* 2) Turn each item into a horizontal “card” */
.kadence-posts-list .entry-list-item > article,
.kadence-posts-list .entry-list-item > * {
  display: flex !important;
  gap: 24px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
}

/* 3) Image on the left at a fixed width */
.kadence-posts-list .entry-list-item .post-thumbnail,
.kadence-posts-list .entry-list-item .entry-thumb,
.kadence-posts-list .entry-list-item .entry-figure {
  flex: 0 0 280px;          /* set your preferred thumbnail width */
  max-width: 280px;
}

.kadence-posts-list .entry-list-item .post-thumbnail img,
.kadence-posts-list .entry-list-item .entry-thumb img,
.kadence-posts-list .entry-list-item .entry-figure img {
  width: 100%;
  height: 180px;            /* keep a tidy row height */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 4) Content takes the remaining width */
.kadence-posts-list .entry-list-item .entry-content-wrap,
.kadence-posts-list .entry-list-item .entry-content,
.kadence-posts-list .entry-list-item .content-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* Optional: tidy up big titles inside the cards */
.kadence-posts-list .entry-list-item .entry-title {
  margin: 0 0 8px;
  line-height: 1.2;
}

/* 5) Mobile – stack image above text again */
@media (max-width: 768px) {
  .kadence-posts-list .entry-list-item > article,
  .kadence-posts-list .entry-list-item > * {
    flex-direction: column;
    padding: 16px;
  }
  .kadence-posts-list .entry-list-item .post-thumbnail,
  .kadence-posts-list .entry-list-item .entry-thumb,
  .kadence-posts-list .entry-list-item .entry-figure {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .kadence-posts-list .entry-list-item .post-thumbnail img,
  .kadence-posts-list .entry-list-item .entry-thumb img,
  .kadence-posts-list .entry-list-item .entry-figure img {
    height: auto;
  }
}
/* Kill Kadence equal-height on archive cards */
.blog .kadence-posts-list .entry-list-item > article,
.archive .kadence-posts-list .entry-list-item > article {
  min-height: 0 !important;     /* overrides --global-kadence-posts-min-height */
  height: auto !important;
}

/* Trim internal bottom spacing on content/excerpt */
.kadence-posts-list .entry-list-item .entry-content-wrap,
.kadence-posts-list .entry-list-item .entry-summary {
  margin-bottom: 0 !important;
}
.kadence-posts-list .entry-list-item .entry-summary p:last-child {
  margin-bottom: 0 !important;
}

/* (Optional) slightly tighter gap between stacked cards */
.blog .kadence-posts-list,
.archive .kadence-posts-list {
  gap: 16px !important;   /* was 24px in the wide-card CSS */
}

/* BLOG/ARCHIVE: one post per row */
.blog .kadence-posts-list,
.archive .kadence-posts-list{
  grid-template-columns: 1fr !important;
}

/* ✅ Two-column “media” layout ONLY when a featured image exists */
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail{
  display: grid !important;
  grid-template-columns: 220px 1fr;  /* image | content */
  gap: 20px;
  align-items: start;
  height: auto !important;
  min-height: 0 !important;
}

/* ❗ No thumbnail? Keep it a normal single-column card */
.blog   .kadence-posts-list .entry-list-item > article:not(.has-post-thumbnail),
.archive .kadence-posts-list .entry-list-item > article:not(.has-post-thumbnail){
  display: block !important;
  height: auto !important;
}

/* Kill Kadence’s ratio spacer ONLY on image posts */
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"]::before,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"]::before{
  display: none !important;
}
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"],
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"]{
  padding-top: 0 !important;
  height: 160px !important;          /* tweak 140–200px if you prefer */
  width: 100%;
  margin: 0;
}

/* Make the image fill that fixed height nicely */
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail .kadence-thumbnail-inner,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail .kadence-thumbnail-inner{
  position: static !important;
  height: 100% !important;
}
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail img,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail img{
  position: static !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Tighter spacing between cards */
.blog   .kadence-posts-list .entry-list-item,
.archive .kadence-posts-list .entry-list-item{
  margin-bottom: 24px !important;
}

/* BLOG/ARCHIVE: one post per row */
.blog .kadence-posts-list,
.archive .kadence-posts-list{
  grid-template-columns: 1fr !important;
}

/* ✅ Two-column “media” layout ONLY when a featured image exists */
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail{
  display: grid !important;
  grid-template-columns: 220px 1fr;  /* image | content */
  gap: 20px;
  align-items: start;
  height: auto !important;
  min-height: 0 !important;
}

/* ❗ No thumbnail? Keep it a normal single-column card */
.blog   .kadence-posts-list .entry-list-item > article:not(.has-post-thumbnail),
.archive .kadence-posts-list .entry-list-item > article:not(.has-post-thumbnail){
  display: block !important;
  height: auto !important;
}

/* Kill Kadence’s ratio spacer ONLY on image posts */
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"]::before,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"]::before{
  display: none !important;
}
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"],
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail[class*="kadence-thumbnail-ratio"]{
  padding-top: 0 !important;
  height: 160px !important;          /* tweak 140–200px if you prefer */
  width: 100%;
  margin: 0;
}

/* Make the image fill that fixed height nicely */
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail .kadence-thumbnail-inner,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail .kadence-thumbnail-inner{
  position: static !important;
  height: 100% !important;
}
.blog   .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail img,
.archive .kadence-posts-list .entry-list-item > article.has-post-thumbnail a.post-thumbnail img{
  position: static !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Tighter spacing between cards */
.blog   .kadence-posts-list .entry-list-item,
.archive .kadence-posts-list .entry-list-item{
  margin-bottom: 24px !important;
}

/* ===== Blog/Archive: mobile wrap layout (image floats left) ===== */
@media (max-width: 600px){
  /* turn off any desktop flex rows on small screens */
  .blog .kadence-posts-list .entry-list-item > article,
  .archive .kadence-posts-list .entry-list-item > article{
    display: block !important;
    height: auto !important;
  }

  /* float the thumbnail left so text wraps */
  .blog .kadence-posts-list .entry-list-item > article .post-thumbnail,
  .archive .kadence-posts-list .entry-list-item > article .post-thumbnail{
    float: left;
    display: block;
    width: 38%;
    max-width: 150px;
    margin: 0 14px 8px 0;
    border-radius: 12px;
    overflow: hidden;
  }

  /* if Kadence outputs an <img> inside, make sure it fills nicely */
  .blog .kadence-posts-list .entry-list-item > article .post-thumbnail img,
  .archive .kadence-posts-list .entry-list-item > article .post-thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* let the text wrap and avoid overlapping the float */
  .blog .kadence-posts-list .entry-list-item > article .entry-content-wrap,
  .archive .kadence-posts-list .entry-list-item > article .entry-content-wrap{
    overflow: hidden; /* creates a new block formatting context */
  }

  /* clear the float so each card contains its image */
  .blog .kadence-posts-list .entry-list-item > article::after,
  .archive .kadence-posts-list .entry-list-item > article::after{
    content: "";
    display: block;
    clear: both;
  }

  /* tidier heading sizing/spacing on phones */
  .blog .kadence-posts-list .entry-list-item > article h2.entry-title,
  .archive .kadence-posts-list .entry-list-item > article h2.entry-title{
    margin-top: 0;
    line-height: 1.2;
    font-size: clamp(20px, 5vw, 24px);
  }

  /* optional: slightly tighter inner padding so cards don’t feel cramped */
  .blog .kadence-posts-list .entry-list-item,
  .archive .kadence-posts-list .entry-list-item{
    padding: 16px;
  }
}

/* ===== Blog/Archive: mobile wrap (thumbnail floats left) ===== */
@media (max-width: 700px){

  /* Kill Kadence row/flex on small screens */
  body.blog  #archive-container.kadence-posts-list .entry-list-item > article,
  body.archive#archive-container.kadence-posts-list .entry-list-item > article,
  body.blog  .kadence-posts-list .entry-list-item > article,
  body.archive .kadence-posts-list .entry-list-item > article{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* Float the thumbnail left; let text wrap */
  body.blog  .kadence-posts-list .entry-list-item > article .post-thumbnail,
  body.archive .kadence-posts-list .entry-list-item > article .post-thumbnail{
    float:left !important;
    width:40% !important;          /* adjust 35–45% to taste */
    max-width:150px !important;     /* keeps it reasonable on narrow phones */
    margin:0 14px 8px 0 !important;
    border-radius:12px;             /* match your card look */
    overflow:hidden;
  }
  /* Make sure the image fills the floated box nicely */
  body.blog  .kadence-posts-list .entry-list-item > article .post-thumbnail img,
  body.archive .kadence-posts-list .entry-list-item > article .post-thumbnail img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* Wrap content and clear the float at the end of each card */
  body.blog  .kadence-posts-list .entry-list-item > article .entry-content-wrap,
  body.archive .kadence-posts-list .entry-list-item > article .entry-content-wrap{
    overflow:hidden !important;     /* new BFC so text wraps beside the float */
  }
  body.blog  .kadence-posts-list .entry-list-item > article::after,
  body.archive .kadence-posts-list .entry-list-item > article::after{
    content:""; display:block; clear:both;
  }

  /* Tame huge titles on phones so they don’t look stacked */
  body.blog  .kadence-posts-list .entry-list-item h2.entry-title,
  body.archive .kadence-posts-list .entry-list-item h2.entry-title{
    font-size:22px !important;
    line-height:1.25 !important;
    margin-top:0 !important;
  }
}

/* ===== Blog/Archive – phones: image on top, text below (single column) ===== */
@media (max-width: 600px){

  /* Stop Kadence row/flex on the article itself */
  body.blog  .kadence-posts-list .entry-list-item > article,
  body.archive .kadence-posts-list .entry-list-item > article{
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Cancel any earlier float and make the thumbnail full-width on top */
  body.blog  .kadence-posts-list .entry-list-item > article .post-thumbnail,
  body.archive .kadence-posts-list .entry-list-item > article .post-thumbnail{
    float: none !important;              /* <-- overrides the previous float */
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 12px 0 !important;       /* space below the photo */
    border-radius: 12px;                  /* keep your rounded look */
    overflow: hidden;
  }

  /* Ensure the image fills the thumbnail nicely */
  body.blog  .kadence-posts-list .entry-list-item > article .post-thumbnail img,
  body.archive .kadence-posts-list .entry-list-item > article .post-thumbnail img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Let content flow normally (no BFC/overflow hack) */
  body.blog  .kadence-posts-list .entry-list-item > article .entry-content-wrap,
  body.archive .kadence-posts-list .entry-list-item > article .entry-content-wrap{
    overflow: visible !important;
  }

  /* Friendlier phone title sizing */
  body.blog  .kadence-posts-list .entry-list-item h2.entry-title,
  body.archive .kadence-posts-list .entry-list-item h2.entry-title{
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
  }
}