/*! KH v2.1 — scoped styles + unified mobile (Blog fixes included). Nothing changes unless wrapped in .kh */
:root{
  --kh-ink:#1b1b1b;
  --kh-muted:#4a4a4a;
  --kh-divider:rgba(0,0,0,.08);
  --kh-max:1100px;
  --kh-pad:clamp(12px,3.5vw,28px);
  --kh-r:18px;
  --kh-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Base + resets */
.kh{ font-size:clamp(16px,1.05vw + .25rem,20px); line-height:1.65; color:var(--kh-ink); }
.kh *{ box-sizing:border-box; }
.kh img{ max-width:100%; height:auto; display:block; }

/* Containers & sections */
.kh .kh-container{ max-width:var(--kh-max); margin:0 auto; padding:0 var(--kh-pad); }
.kh .kh-section{ padding:56px 0; border-top:1px solid var(--kh-divider); }
.kh .kh-section:first-child{ border-top:none; }

/* Type */
.kh h1,.kh h2,.kh h3{ line-height:1.2; margin:0 0 .6em; }
.kh h1{ font-size:clamp(28px,2.2vw + .5rem,44px); }
.kh h2{ font-size:clamp(22px,1.6vw + .45rem,34px); }
.kh p{ margin:0 0 24px; color:var(--kh-muted); }

/* Buttons */
.kh .kh-pill{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:40px; padding:6px 12px; border-radius:999px; text-decoration:none;
  color:var(--kh-ink); border:1.5px solid var(--kh-ink); font-size:.95rem;
}
.kh .kh-pill:hover{ background:rgba(0,0,0,.06); }

/* Top nav (compact) */
.kh .kh-topnav{
  display:flex; gap:.5rem; justify-content:flex-end;
  padding:10px 16px;
}

/* --- HOME: hero split --- */
.kh .kh-hero-split{
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr; column-gap:0; align-items:stretch;
}
.kh .kh-hero-split__left{ display:flex; align-items:center; padding-left:var(--kh-pad); padding-right:var(--kh-pad); }
.kh .kh-hero-split__panel{
  background:transparent; border-radius:0; box-shadow:none; padding:16px 0;
  max-width:640px; margin:0 auto; text-align:center;
}
.kh .kh-hero-split__panel h1{
  text-align:center; font-size:clamp(36px,3.2vw + 10px,56px); margin:0 0 16px; font-weight:800;
}
.kh .kh-hero-split__right{ position:relative; }
.kh .kh-hero-split__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; border-radius:0 !important;
}

/* Full-viewport utility */
.kh .kh-viewport{ min-height:100vh; display:grid; align-items:center; }

/* Hero extras */
.kh .main-quote{ margin-bottom:16px !important; font-weight:600; color:#111; }
.kh .main-quote-cite{ font-weight:700; color:#111; }
.kh .hero-note{ text-align:center; font-style:italic; font-size:.95rem; color:#111; max-width:560px; margin:14px auto 0; font-weight:600; }
.kh .kh-btn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:520px; margin:0 auto; }
@media (max-width:520px){ .kh .kh-btn-grid{ grid-template-columns:1fr; } }

/* --- STORY / BLOG / TESTIMONIES --- */
.kh .kh-photo{
  display:block; margin:0 auto 1rem;
  width:auto; height:auto; max-width:960px;
  border-radius:var(--kh-r); box-shadow:var(--kh-shadow);
  background:transparent; object-fit:contain;
}
@media (min-width:992px){
  .kh .kh-photo{ max-height:520px; }
}

/* Neutralize legacy wrappers/figures completely */
.kh .kh-frame,
.kh .story-space,
.kh figure,
.kh figure::before,
.kh figure::after{
  display:contents !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* --- Landing section helper --- */
.kh .kh-viewport-center{
  min-height:calc(100vh - 84px);
  display:grid; place-content:center; gap:10px;
  padding:24px var(--kh-pad);
}
.kh .kh-viewport-center h1{ font-size:clamp(28px,2.3vw + 18px,44px); margin:0 0 6px; }
.kh .kh-viewport-center p{ margin:0 0 10px; font-weight:600; }

@media (min-width:992px){
  .kh .kh-landing-photo{ max-height:360px; max-width:760px; }
}

/* === KH mobile patch v5 (unified + Blog fallbacks) — CONSOLIDATED === */
@media (max-width: 768px){
  /* Hero split → stack image above text */
  .kh .kh-hero-split{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .kh .kh-hero-split__right{
    order: -1; height: 42vh; min-height: 260px; position: relative;
  }
  .kh .kh-hero-split__img{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important;
    border-radius: 0 !important;
  }
  .kh .kh-hero-split__left{ padding: 16px var(--kh-pad) !important; }
  .kh .kh-hero-split__panel h1{ font-size: clamp(24px, 6.2vw, 34px) !important; margin-bottom: 12px !important; }

  /* Mobile-only rounding rules for secondary heroes */
  .kh .kh-hero-split--primary .kh-hero-split__right{ border-radius:0 !important; overflow:visible !important; }
  .kh .kh-hero-split--primary .kh-hero-split__img{ border-radius:0 !important; }
  .kh .kh-hero-split:not(.kh-hero-split--primary) .kh-hero-split__right{ border-radius:var(--kh-r) !important; overflow:hidden !important; }
  .kh .kh-hero-split:not(.kh-hero-split--primary) .kh-hero-split__img{ border-radius:inherit !important; }

  /* All large content images on mobile (default) — tightened */
  .kh .kh-photo,
  .kh .kh-landing-photo{
    display:block !important; width:100% !important; height:auto !important;
    max-height:60vh !important; object-fit:cover !important;
    margin-left:auto !important; margin-right:auto !important;
    border-radius:var(--kh-r) !important; box-shadow:var(--kh-shadow) !important;
  }

  /* Mobile-only rounding for the "Ministry with Children" image */
  .kh img.kids-mobile-img{
    border-radius: var(--kh-r) !important;
    display: block !important;
    width: calc(100% - 24px) !important;   /* match mobile gutters */
    margin: 0 12px 12px !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Mobile image gutter — tightened */
  .kh .kh-photo,
  .kh .kh-landing-photo{
    max-width:calc(100% - 24px) !important;
    margin-left:12px !important; margin-right:12px !important;
  }

  /* ===== BLOG (mobile) — robust selectors ===== */

  /* 1) Treat common blog containers as vertical stacks */
  .kh .blog-card,
  .kh .kh-section > article,
  .kh .kh-section .post,
  .kh .kh-section .entry{
    display:flex; flex-direction:column;
  }

  /* 2) Ensure the image appears first */
  .kh .blog-card img,
  .kh .blog-card picture img,
  .kh .blog-card figure > img,
  .kh .kh-section > article img,
  .kh .kh-section .post img,
  .kh .kh-section .entry img{
    order:-1;
  }

  /* 3) Blog images: avoid cropping + match gutters */
  .kh .blog-card img,
  .kh .blog-card picture img,
  .kh .blog-card figure > img,
  .kh .kh-section > article img,
  .kh .kh-section .post img,
  .kh .kh-section .entry img{
    width:100% !important; height:auto !important;
    object-fit:contain !important; max-height:60vh !important;
    border-radius:var(--kh-r) !important; box-shadow:var(--kh-shadow) !important;
    max-width:calc(100% - 24px) !important; margin:0 12px 10px !important;
  }

  /* 4) Blog buttons: full-width rows and below image */
  .kh .blog-card .kh-pill,
  .kh .kh-section > article .kh-pill,
  .kh .kh-section .post .kh-pill,
  .kh .kh-section .entry .kh-pill{
    width:100%; justify-content:center; order:2;
  }

  /* Sections flow naturally on phones */
  .kh .kh-viewport,
  .kh .kh-viewport-center{ min-height:unset !important; }

  /* Any button grid → single column */
  .kh .kh-btn-grid{
    grid-template-columns:1fr !important; gap:12px !important; max-width:520px; margin:0 auto;
  }

  /* Home About section (mobile): rounded image + tidy text */
  .kh .kh-about-split .kh-hero-img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width: calc(100% - 24px) !important;   /* 12px gutters each side */
    max-height: 48vh !important;               /* don’t dominate the screen */
    object-fit: cover !important;
    border-radius: var(--kh-r) !important;     /* rounded corners */
    box-shadow: var(--kh-shadow) !important;   /* same finish as other photos */
    margin: 0 12px 12px !important;            /* space under the image */
  }
  .kh .kh-about-copy{
    padding: 0 12px !important;
    text-align: center !important;
  }
  .kh .kh-about-copy h2{
    font-size: clamp(22px, 6vw, 28px) !important;
    margin: 6px 0 10px !important;
  }
  .kh .kh-about-copy p{
    margin: 0 0 12px !important;
  }

  /* Home → About (second scroll) — matches actual structure */
  .kh .kh-grid.kh-grid-2{
    grid-template-columns: 1fr !important;     /* stack on phones */
    gap: 12px !important;
  }

  .kh .kh-grid.kh-grid-2 > div{
    width: 100% !important;
  }

  /* Image column */
  .kh .kh-grid.kh-grid-2 > div:first-child img.kh-hero-img{
    display: block !important;
    width: calc(100% - 24px) !important;       /* 12px gutters each side */
    max-width: 520px !important;
    height: auto !important;
    max-height: 54vh !important;
    object-fit: cover !important;
    border-radius: var(--kh-r) !important;     /* rounded corners */
    box-shadow: var(--kh-shadow) !important;
    margin: 0 12px 12px !important;
  }

  /* Text column */
  .kh .kh-grid.kh-grid-2 > div:last-child{
    padding: 0 12px !important;
    text-align: center !important;
  }
  .kh .kh-grid.kh-grid-2 > div:last-child h2{
    font-size: clamp(22px, 6vw, 28px) !important;
    margin: 6px 0 10px !important;
  }
  .kh .kh-grid.kh-grid-2 > div:last-child p{
    margin: 0 0 12px !important;
  }
}  /* ← closes the consolidated mobile media query */

/* === KH tablet patch (769–1024px) — tightened === */
@media (min-width: 769px) and (max-width: 1024px){
  .kh .kh-hero-split{ grid-template-columns: 1.15fr 0.85fr; min-height: 80vh; }
  .kh .kh-hero-split__panel h1{ font-size: clamp(28px, 3.8vw, 42px); }

  /* Landing/hero photos can crop to fill */
  .kh .kh-landing-photo{
    max-width:860px; max-height:50vh; width:100%; height:auto; object-fit:cover;
  }

  /* Content photos should not crop on tablets */
  .kh .kh-photo{
    max-width:860px; max-height:50vh; width:100%; height:auto; object-fit:contain;
  }

  .kh .kh-btn-grid{ grid-template-columns: 1fr 1fr; gap:14px; }
}

/* === KH very-small phones (≤360px) === */
@media (max-width: 360px){
  .kh .kh-hero-split__right{ height:38vh; min-height:220px; }
  .kh .kh-hero-split__panel h1{ font-size:clamp(20px, 7vw, 28px); }
}

/* === KH landscape phones (short height) === */
@media (max-height: 500px) and (max-width: 900px){
  .kh .kh-hero-split__right{ height:34vh; min-height:180px; }
}

/* === KH large desktop polish === */
@media (min-width: 1367px){
  .kh .kh-container{ max-width: calc(var(--kh-max) + 80px); }
}

/* === KH ultra-wide === */
@media (min-width: 1600px){
  .kh .kh-hero-split__panel{ max-width: 720px; }
}

/* === ABOUT split layout helpers === */
.kh .kh-grid{ display:grid; gap:clamp(16px,2.5vw,28px); }
.kh .kh-grid-2{ grid-template-columns: 0.9fr 1.1fr; }
.kh .kh-about-media{ display:flex; justify-content:center; }
.kh .kh-about-copy h2{ margin-top:0; }

@media (min-width: 1025px){
  .kh .kh-hero-img{
    width:100%; max-width:420px; height:auto;
    border-radius:var(--kh-r); box-shadow:var(--kh-shadow); object-fit:cover;
  }
}

@media (max-width: 1024px){
  .kh .kh-grid-2{ grid-template-columns: 1fr; }
}

/* === Desktop-only rounding rules for secondary heroes === */
@media (min-width: 769px){
  .kh .kh-hero-split--primary .kh-hero-split__img{
    border-radius: 0 !important;
  }
  .kh .kh-hero-split:not(.kh-hero-split--primary) .kh-hero-split__right{
    border-radius: var(--kh-r) !important;
    overflow: hidden !important;
  }
  .kh .kh-hero-split:not(.kh-hero-split--primary) .kh-hero-split__img{
    border-radius: inherit !important;
  }
}

/* === KH Testimonies — final minimal rules (keep) === */
.kh.kh-page-testimonies section.banner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  height:auto;
}
.kh.kh-page-testimonies section.banner .image{
  padding:0; background:none; border-radius:0; box-shadow:none;
  max-width:none; width:100%;
}
.kh.kh-page-testimonies section.banner .image img{
  display:block; width:100%; height:auto;
  object-fit:cover; object-position:top center; border-radius:0;
}

/* === Testimonies (desktop) — single source of truth === */
@media (min-width: 769px){
  .kh.kh-page-testimonies .banner.style1{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 32px !important;
    min-height: min(80vh, 820px) !important;
  }

  .kh.kh-page-testimonies .banner.style1 .content{
    width: auto !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .kh.kh-page-testimonies .banner.style1 .image{
    width: 100% !important;
    position: relative !important;
    min-height: min(80vh, 820px) !important;
  }
  .kh.kh-page-testimonies .banner.style1 .image img{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important;
    border-radius: 18px !important;
  }

  /* Buttons row visible & centered */
  .kh.kh-page-testimonies .button-pills-container-horizontal{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 12px auto 24px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}