/* ===== Phone layout: one column, fully centered ===== */
@media (max-width: 690px){

    /* Stop using grid entirely on the header */
    body.single-agent .kw-agent__header{
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 16px !important;
  
      /* nuke any leftover grid props from other styles */
      grid-template-columns: none !important;
      grid-template-areas: none !important;
    }
  
    /* Photo centered */
    body.single-agent .kw-agent__photo{
      margin: 0 auto !important;
      max-width: 260px !important;
    }
  
    /* Name, title, status centered */
    body.single-agent .kw-agent__summary{
      width: 100% !important;
      text-align: center !important;
      margin: 0 auto !important;
    }
    body.single-agent .kw-agent__summary .entry-title{ text-align:center !important; }
    body.single-agent .kw-agent__status{ text-align:center !important; }
  
    /* Contact + review buttons: same width, centered */
    body.single-agent .kw-agent__contact{
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      gap:12px !important;
    }
    body.single-agent .kw-agent__contact .kw-agent-link-row{
      width:100% !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      gap:12px !important;
    }
    body.single-agent .kw-agent__contact > a,
    body.single-agent .kw-agent__contact .kw-agent-link-row a{
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:8px !important;
      width:100% !important;
      max-width:300px !important;
      height:44px !important;
      padding:0 14px !important;
      margin:0 auto !important;
      box-sizing:border-box !important;
      white-space:nowrap !important;
      text-align:center !important;
    }
  
    /* Areas/Specialties container centered */
    body.single-agent .kw-agent__header-details{
      width:100% !important;
      max-width:700px !important;
      margin:0 auto !important;
      display:block !important;
    }
    body.single-agent .kw-agent__header-details > div:first-child{ display:none !important; }
  
    /* Listings: center the container and each card */
    .kw-agent__idx .showcaseidx-results,
    .kw-agent__idx .showcaseidx-listings,
    .kw-agent__idx [class*="results"],
    .kw-agent__idx [class*="listings"]{
      margin-left:auto !important;
      margin-right:auto !important;
      width:100% !important;
    }
    .kw-agent__idx .showcaseidx-results > *,
    .kw-agent__idx .showcaseidx-listings > *,
    .kw-agent__idx [class*="results"] > *,
    .kw-agent__idx [class*="listings"] > *{
      margin-left:auto !important;
      margin-right:auto !important;
    }
  }
  
  /* ========== Mobile gutters + centered listings ========== */
  @media (max-width: 690px){
  
    /* 1) Guaranteed side padding for the whole agent page */
    body.single-agent .kw-agent__container{
      padding-left:16px !important;
      padding-right:16px !important;
      box-sizing:border-box;
    }
  
    /* If the theme collapses inner wrappers, reinforce the gutters there too */
    body.single-agent .kw-agent__main,
    body.single-agent .kw-agent{
      padding-left:16px !important;
      padding-right:16px !important;
      box-sizing:border-box;
    }
  
    /* 2) Listings section: center heading + results */
    body.single-agent .kw-agent__listings h2{
      text-align:center !important;
      margin-left:auto; margin-right:auto;
      margin-bottom: 15px !important;
    }
  
    /* Center the IDX container and give it gutters so cards don't hit the edge */
    body.single-agent .kw-agent__idx{
      margin-left:auto !important;
      margin-right:auto !important;
      width:100% !important;
    }
    body.single-agent .kw-agent__idx .showcaseidx-results,
    body.single-agent .kw-agent__idx .showcaseidx-listings,
    body.single-agent .kw-agent__idx [class*="results"],
    body.single-agent .kw-agent__idx [class*="listings"]{
      margin-left:auto !important;
      margin-right:auto !important;
      width:100% !important;
      padding-left:16px !important;   /* inner gutters */
      padding-right:16px !important;
      box-sizing:border-box !important;
      text-align:center;               /* keeps section labels centered */
    }
  
    /* If cards have a fixed width, center each one explicitly */
    body.single-agent .kw-agent__idx .showcaseidx-results > *,
    body.single-agent .kw-agent__idx .showcaseidx-listings > *,
    body.single-agent .kw-agent__idx [class*="results"] > *,
    body.single-agent .kw-agent__idx [class*="listings"] > *{
      margin-left:auto !important;
      margin-right:auto !important;
    }
  }
  
  /* Space between the listings map and the first listing card */
  body.single-agent .kw-agent__idx .showcaseidx-map,
  body.single-agent .kw-agent__idx .showcaseidx-map-container,
  body.single-agent .kw-agent__idx [class*="map"]{
    margin-bottom: 24px !important; /* tweak to 20–32px if you prefer */
  }
  
  /* ===== Desktop & Tablet Gutters (match the mobile feel) ===== */
  @media (min-width: 691px){
    /* Global page gutters */
    body.single-agent .kw-agent__container,
    body.single-agent .kw-agent__main,
    body.single-agent article.kw-agent{
      padding-left: 24px !important;
      padding-right: 24px !important;
      box-sizing: border-box;
    }
  
    /* Listings section + IDX internals get the same side padding */
    body.single-agent .kw-agent__listings,
    body.single-agent .kw-agent__idx,
    body.single-agent .kw-agent__idx .showcaseidx-results,
    body.single-agent .kw-agent__idx .showcaseidx-listings,
    body.single-agent .kw-agent__idx [class*="results"],
    body.single-agent .kw-agent__idx [class*="listings"]{
      padding-left: 24px !important;
      padding-right: 24px !important;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 25px;
      width: 100%;
    }
  }
  
  /* ===== Listings heading flush with section border; map full-width ===== */
  @media (min-width: 691px){
    /* 1) Remove extra padding on the listings section so the H2 aligns with the border */
    body.single-agent .kw-agent__listings{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    body.single-agent .kw-agent__listings h2{
      margin-left: 0 !important;   /* ensure no stray theme indent */
      margin-bottom: 25px;
      padding-left: 0 !important;
      text-align: left !important;
    }
  
    /* 2) Map should span the full inner width of the bordered section */
    body.single-agent .kw-agent__idx{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    body.single-agent .kw-agent__idx .showcaseidx-map,
    body.single-agent .kw-agent__idx .showcaseidx-map-container,
    body.single-agent .kw-agent__idx [class*="map"]{
      display:block !important;
      width:100% !important;
      max-width:100% !important;
    }
    body.single-agent .kw-agent__idx .showcaseidx-map iframe,
    body.single-agent .kw-agent__idx .showcaseidx-map-container iframe,
    body.single-agent .kw-agent__idx iframe{
      width:100% !important;
      max-width:100% !important;
    }
  }
  
  /* ===== CTAs: stack vertically at ALL breakpoints ===== */
  body.single-agent .kw-agent__contact{
    display: flex !important;
    flex-direction: column !important;   /* <- always a column */
    gap: 12px !important;
  }
  
  /* the two review links are inside a wrapper; stack those too */
  body.single-agent .kw-agent__contact .kw-agent-link-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  /* normalize each button */
  body.single-agent .kw-agent__contact > a,
  body.single-agent .kw-agent__contact .kw-agent-link-row a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  
  /* desktop/tablet: left-align column, give a comfortable fixed width */
  @media (min-width: 691px){
    body.single-agent .kw-agent__contact{ align-items: flex-start !important; }
    body.single-agent .kw-agent__contact > a,
    body.single-agent .kw-agent__contact .kw-agent-link-row a{
      width: 100% !important;
      max-width: 360px !important;  /* adjust if you want wider/narrower */
    }
  }
  
  /* mobile: keep them centered and consistent width */
  @media (max-width: 690px){
    body.single-agent .kw-agent__contact{ align-items: center !important; }
    body.single-agent .kw-agent__contact > a,
    body.single-agent .kw-agent__contact .kw-agent-link-row a{
      width: 100% !important;
      max-width: 300px !important;
    }
  }
  
  /* --- Print: keep it clean --- */
  @media print{
    header, .site-footer, .kw-agent__idx [class*="map"]{ display:none !important; }
    .kw-agent__container{ padding: 0 !important; }
    .kw-agent__photo img{ width:180px; height:180px; object-fit:cover; }
  }
  
  /* Make sure page edges breathe on all breakpoints */
  .kw-agent__container{
    padding-left: 24px;
    padding-right: 24px;
  }
  
  /* ===== Bottom-of-page Mortgage Calculator: card styling ===== */
body.single-agent .mortgage-calculator{
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    max-width: 980px;          /* keep it readable on wide screens */
    margin: 24px auto;         /* space above/below + center */
    box-sizing: border-box;
  }
  
  /* keep the heading tight, and give the disclaimer some breathing room */
  body.single-agent .mortgage-calculator h2{
    margin-top: 0;
  }
  body.single-agent .mortgage-calculator .mortgage-calculator__disclaimer{
    margin-top: 16px;
  }
  
  /* if Showcase IDX wraps it in a .sidx-widget, apply the same card to that too */
  body.single-agent .sidx-widget > .mortgage-calculator{
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
  }
  
  /* ---------- Agent profile layout (match homepage width) ---------- */

/* Light grey outer background */
body.single-agent {
  /* background-color: #f6f8fa; */
  background-color: #ffffff;
}

/* Constrain the Kadence "wrap" on agent pages */
body.single-agent #inner-wrap.wrap {
  max-width: 1240px;              /* same feel as home page */
  margin: 0 auto;                 /* center the whole main column */
  padding: 2rem 1.5rem 3rem;
  box-sizing: border-box;
}

/* Make the agent container a white card inside that wrap */
body.single-agent .kw-agent__container {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  padding: 2rem 2.5rem 3rem;
  box-sizing: border-box;
}

/* Ensure the article fills the card */
body.single-agent .kw-agent__container > .site-main,
body.single-agent .kw-agent__container article.kw-agent {
  width: 100%;
}

/* Header: photo left, info right on desktop; stack on smaller screens */
body.single-agent .kw-agent__header {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: center;
}

body.single-agent .kw-agent__photo img {
  border-radius: 12px;
}

/* Stack header + soften padding on smaller screens */
@media (max-width: 992px) {
  body.single-agent #inner-wrap.wrap {
    padding: 1.5rem 1rem 2rem;
  }

  body.single-agent .kw-agent__container {
    padding: 1.5rem 1.25rem 2rem;
  }

  body.single-agent .kw-agent__header {
    grid-template-columns: 1fr;
  }
}

/* --- Uniform 16:9 thumbnails on the agent blog grid --- */
.kw-agent-blog .post-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;   /* change to 4/3, 3/2, or 1/1 if you prefer */
  width: 100%;
  overflow: hidden;
  border-radius: 12px;    /* style nicety */
  background: #f3f5f7;    /* placeholder backdrop while loading */
}

.kw-agent-blog .post-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;           /* fill the box */
  object-fit: cover;      /* crop nicely without distortion */
}

/* Keep the rest of each card tidy & even */
.kw-agent-blog .entry { display: flex; flex-direction: column; }
.kw-agent-blog .entry-summary { margin-top: .75rem; }

/* Optional: clamp excerpt so rows line up */
.kw-agent-blog .entry-summary p {
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 2–4 lines usually looks best */
  -webkit-box-orient: vertical;
  overflow: hidden;
}