/* =========================================================================
   RESPONSIVE.CSS — breakpoints per spec: 1200+, 992–1199, 768–991, 480–767, <480
   ========================================================================= */

/* ---------- 992–1199px : slightly tighter container ---------- */
@media (max-width: 1199px) {
  :root { --container-padding: 20px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 768–991px : tablets, nav collapses to mobile menu ---------- */
@media (max-width: 991px) {
  .utility-bar { display: none; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }

  .menu-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); background: #fff;
    flex-direction: column; align-items: flex-start; padding: 5rem 1.5rem 2rem;
    transform: translateX(100%); transition: transform 0.2s ease; box-shadow: -6px 0 20px rgba(0,0,0,0.1);
    height: 100vh; overflow-y: auto; z-index: 200;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-menu { flex-direction: column; align-items: flex-start; width: 100%; gap: 0.25rem; }
  .primary-menu li { width: 100%; }
  .sub-menu { position: static; display: none; box-shadow: none; border: none; padding-left: 1rem; }
  .menu-item-has-children.is-open > .sub-menu { display: block; }
  .primary-nav > .btn-primary { margin-top: 1rem; width: 100%; text-align: center; }
}

/* ---------- 480–767px : phones ---------- */
@media (max-width: 767px) {
  section { padding: var(--space-lg) 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .newsletter-row { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { min-width: 0; flex: 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- below 480px ---------- */
@media (max-width: 479px) {
  :root { --container-padding: 16px; }
  .btn { width: 100%; text-align: center; }
  .btn-row { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Prevent horizontal overflow globally. */
html, body { overflow-x: hidden; }

/* TBG V2 responsive refinements */
@media (max-width: 1100px) {
  .primary-menu { gap:.9rem; }
  .primary-menu a { font-size:.88rem; }
  .footer-grid { gap:2rem; }
}
@media (max-width: 991px) {
  .hero-banner,.hero-banner-light { min-height:380px; }
  .hero-banner-content { padding-top:4rem; padding-bottom:4rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-newsletter { grid-template-columns:1fr; gap:1rem; }
  .section-head-row { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 767px) {
  section { padding:3.25rem 0; }
  .hero-banner,.hero-banner-light { min-height:360px; }
  .hero-banner-overlay { background:rgba(15,39,65,.84); }
  .feature-split { gap:2rem; }
  .form-card { padding:1.25rem; }
  .resource-item { align-items:flex-start; flex-direction:column; }
  .resource-item .btn { width:auto; }
  .newsletter-form { flex-direction:column; }
  .newsletter-form input { min-width:0; width:100%; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns:1fr; }
  .hero-banner h1 { font-size:2.35rem; }
}


/* =========================================================================
   TBG v3.1 — desktop + mobile polish
   Collapses the navigation earlier so the green CTA never clips on laptops,
   tightens the Home hero, and improves stacking/card rhythm on small screens.
   ========================================================================= */

/* Laptop / compact desktop: use the mobile drawer before navigation can crowd. */
@media (max-width: 1180px) {
  .utility-bar .container { padding-left:20px; padding-right:20px; }
  .site-header .container { min-height:76px; }
  .menu-toggle { display:block; margin-left:auto; }
  .primary-nav {
    position:fixed; inset:0 0 0 auto; width:min(360px,88vw); height:100dvh;
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:5.5rem 1.5rem 2rem; transform:translateX(100%);
    transition:transform .2s ease; box-shadow:-8px 0 28px rgba(15,39,65,.16);
    overflow-y:auto; z-index:200;
  }
  .primary-nav.is-open { transform:translateX(0); }
  .primary-menu { flex-direction:column; align-items:flex-start; width:100%; gap:.2rem; }
  .primary-menu li { width:100%; }
  .primary-menu > li > a { width:100%; padding:.55rem 0; min-height:42px; }
  .sub-menu { position:static; display:none; width:100%; min-width:0; box-shadow:none; border:0; padding:.25rem 0 .5rem 1rem; }
  .menu-item-has-children.is-open > .sub-menu { display:block; }
  .primary-nav > .btn-primary { width:100%; text-align:center; margin-top:1rem; }
}

@media (min-width:1181px) {
  .site-header .container { min-height:82px; }
  .primary-menu { gap:1.15rem; }
  .primary-menu a { font-size:.91rem; }
  .primary-nav > .btn { padding-left:1.15rem; padding-right:1.15rem; }
}

/* Home and global desktop rhythm. */
@media (min-width:992px) {
  body.home .hero-banner { min-height:430px; }
  body.home .hero-banner-content { padding-top:4rem; padding-bottom:4rem; }
  body.home .hero-copy { max-width:790px; }
  body.home .feature-split { grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); }
  body.home .service-grid .card { height:100%; }
  body.home .resource-summary .card { height:100%; }
}

/* Tablet. */
@media (max-width:991px) {
  .container { width:100%; }
  body.home .hero-banner { min-height:350px; }
  .hero-banner h1 { font-size:clamp(2.25rem,7vw,3.4rem); }
  .hero-banner .hero-sub { font-size:1.05rem; }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-grid .image-card:last-child { grid-column:1 / -1; }
  .testimonial-grid { grid-template-columns:1fr; }
  .testimonial-rich { max-width:760px; margin:0 auto; }
  .resource-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .news-card h3 { font-size:1.15rem; }
}

/* Phones. */
@media (max-width:767px) {
  :root { --container-padding:18px; }
  .site-header .container { padding-top:.7rem; padding-bottom:.7rem; min-height:68px; }
  .site-logo img { height:46px; max-width:170px; }
  .utility-bar { display:none; }

  body.home .hero-banner,
  .hero-banner,
  .hero-banner-light { min-height:0; }
  .hero-banner-content { padding-top:3.25rem; padding-bottom:3.25rem; }
  .hero-banner h1 { font-size:clamp(2rem,11vw,2.8rem); line-height:1.12; margin-bottom:.55em; }
  .hero-banner .hero-sub { font-size:1rem; line-height:1.55; }
  .hero-actions.btn-row { gap:.65rem; }
  .hero-actions .btn { width:100%; }

  section { padding:3rem 0; }
  .feature-split { gap:1.65rem; }
  .split-media { width:100%; }
  .split-media img,.split-media .media-placeholder { aspect-ratio:16/10; }

  .compact-cards { grid-template-columns:1fr; }
  .service-grid { grid-template-columns:1fr; }
  .service-grid .image-card:last-child { grid-column:auto; }
  .image-card > img,.image-card > .media-placeholder { aspect-ratio:16/9; }
  .card,.mini-card { padding:1.25rem; }
  .card-body { padding:1.25rem; }

  .testimonial-image img,.testimonial-image .media-placeholder { aspect-ratio:3/2; }
  .testimonial-body { padding:1.3rem; }
  .testimonial-body p { font-size:.96rem; line-height:1.65; }

  .resource-summary { grid-template-columns:1fr; }
  .section-head-row { gap:.8rem; }
  .section-head-row .btn-link { align-self:flex-start; }

  .form-card { padding:1.1rem; }
  .form-field input,.form-field select,.form-field textarea { width:100%; font-size:16px; }

  .footer-newsletter { padding:1.25rem 0; }
  .footer-newsletter .newsletter-form { width:100%; }
  .newsletter-form button { width:100%; }
}

@media (max-width:479px) {
  :root { --container-padding:16px; }
  .hero-banner-content { padding-top:2.75rem; padding-bottom:2.75rem; }
  .hero-banner h1 { font-size:2.15rem; }
  h2 { font-size:1.65rem; }
  .eyebrow { font-size:.74rem; }
  .site-logo img { height:42px; max-width:150px; }
}

/* About: use a single Karen Barbour portrait without stretching a small headshot. */
.about-karen-photo {
  width:min(100%,420px) !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center top !important;
  margin-inline:auto;
  border-radius:8px !important;
  box-shadow:0 10px 28px rgba(15,39,65,.12);
}
@media (max-width:767px) {
  .about-karen-photo { width:min(100%,360px) !important; }
}

/* =========================================================================
   TBG v3.1.2 — HOME-ONLY desktop width correction
   The staging Home page can inherit a narrow wrapper from an external/page
   style. Scope the correction to body.home so all inner pages remain exactly
   as they are.
   ========================================================================= */
@media (min-width: 992px) {
  body.home {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #fff !important;
  }

  body.home > .utility-bar,
  body.home > .site-header,
  body.home > main#main-content,
  body.home > .site-footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home .utility-bar > .container,
  body.home .site-header > .container,
  body.home main#main-content .container,
  body.home .site-footer > .container {
    width: calc(100% - 48px) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero background stays full width; only the readable copy uses the container. */
  body.home main#main-content > .hero-banner,
  body.home main#main-content > .hero-banner-light {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home main#main-content > section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================================
   TBG v3.1.4 — Home testimonial completion guard
   Keep the two approved reviews balanced and ensure this section cannot
   visually collapse even when one card contains significantly more copy.
   ========================================================================= */
.home-testimonials .testimonial-grid { align-items:stretch; }
.home-testimonials .testimonial-rich { display:flex; flex-direction:column; height:100%; min-width:0; }
.home-testimonials .testimonial-image { flex:0 0 auto; overflow:hidden; }
.home-testimonials .testimonial-image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.home-testimonials .testimonial-body { display:flex; flex-direction:column; flex:1; }
.home-testimonials .testimonial-body cite { margin-top:auto; padding-top:1rem; }
@media (max-width:991px) {
  .home-testimonials .testimonial-grid { grid-template-columns:1fr; }
  .home-testimonials .testimonial-rich { max-width:760px; width:100%; margin-inline:auto; }
}

/* =========================================================================
   TBG v3.1.6 — Home Karen image alignment + image variety
   Home only: keep the two Karen images, show the top of her head cleanly,
   and use a non-Karen image for Experience & Advocacy.
   ========================================================================= */
body.home .hero-banner { background-position: center 4%; }
body.home .home-karen-card-image { object-position: center 2% !important; }

@media (max-width: 767px) {
  body.home .hero-banner { background-position: 68% 3%; }
  body.home .home-karen-card-image { object-position: center 1% !important; }
}

/* TBG v3.1.7: Home-only image crop refinement. Karen hero/card shifted down to keep full head visible; Experience & Advocacy uses approved alternate site image. */

/* TBG v3.1.8 — final Home image placement.
   Keep Karen's head fully visible in hero and Specialized Programs card;
   Experience & Advocacy uses the client-selected 258ffe62 image. */
@media (min-width: 768px) {
  body.home .hero-banner { background-position: 72% top !important; }
  body.home .home-karen-card-image { object-position: center top !important; }
}
@media (max-width: 767px) {
  body.home .hero-banner { background-position: 76% top !important; }
  body.home .home-karen-card-image { object-position: center top !important; }
}

/* TBG v3.2.0: force the approved Home Experience & Advocacy image and bypass lazy/cache substitutions. */
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:6px;
}