/* ================================
   WTN Child Theme — Full Refactor
   Five breakpoint tiers:
   - <480px
   - 480–767px
   - 768–1023px
   - 1024–1439px
   - ≥1440px
   ================================ */

/* ---------- Theme header ---------- */
@font-face{
  font-family:"Cinzel Variable";
  src:url("/wp-content/themes/wtn-child/assets/fonts/Cinzel-VariableFont_wght.ttf") format("truetype");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Libre Baskerville";
  src:url("/wp-content/themes/wtn-child/assets/fonts/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Libre Baskerville";
  src:url("/wp-content/themes/wtn-child/assets/fonts/LibreBaskerville-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Libre Baskerville";
  src:url("/wp-content/themes/wtn-child/assets/fonts/LibreBaskerville-Italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/wp-content/themes/wtn-child/assets/fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/wp-content/themes/wtn-child/assets/fonts/CormorantGaramond-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/wp-content/themes/wtn-child/assets/fonts/CormorantGaramond-Italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
:root{
  --wp--preset--font-family--cinzel:"Cinzel Variable",serif;

  /* Colors */
  --hero:#b38244;
  --frame:#484934;
  --outer:#1b1212;
  --btn:#7a93aa;
  --btn-hover:#6b85a0;
  --text:#fff;

  /* Frame geometry */
  --frame-w:14px;
  --outer-w:18px;

  /* Components */
  --hero-h:56px;

  /* Rhythm */
  --gap-sm:8px;
  --gap-md:12px;
  --gap-lg:16px;
}

/* ---------- Base reset + WP hardening ---------- */
:where(body,.wp-site-blocks,.wp-block,[class*="wp-"]){ font-family:"Libre Baskerville",serif !important; }
/* Keep headings/titles/brand in Cinzel */
:where(h1,h2,h3,h4,h5,h6,.wtn-hero-brand,.wtn-chip,.faq-title,.guest-pill,.audio-block-label,.visit-block-label){ font-family:"Cinzel Variable",serif !important; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; background:#000; color:#fff; }
.wp-site-blocks{ padding:0 !important; --wp--style--block-gap:0 !important; }
.has-global-padding{ padding:0 !important; }
.wp-site-blocks>*{ margin-block-start:0 !important; margin-block-end:0 !important; }
.is-layout-flow,.is-layout-constrained,.is-layout-flex,.is-layout-grid{ gap:0 !important; }
.wtn-outer>*,
.wtn-outer .wp-block-template-part,
.wtn-outer .wp-block-group{ margin-top:0 !important; }

/* ---------- Global structural blocks (static) ---------- */
.wtn-outer{
  box-sizing:border-box; height:100dvh;
  border:var(--outer-w) solid var(--outer);
  background:#000; display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}
.wtn-hero{
  height:var(--hero-h);
  background:var(--hero) !important;
  display:flex; align-items:center;
  gap:var(--gap-md);
  padding:0 12px 0 20px;
  z-index:2;
}
.wtn-hero-right{ margin-left:auto; display:flex; align-items:center; gap:var(--gap-md); }
.wtn-chip{
  display:inline-block; padding:.5rem 1.1rem; border-radius:999px !important;
  background:var(--btn) !important; color:#fff !important; text-decoration:none !important;
  font-variant:small-caps; font-weight:850; letter-spacing:.06em; line-height:1;
  border:1px solid rgba(255,255,255,.25);
}
.wtn-frame{
  box-sizing:border-box;
  height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w)));
  border-left:var(--frame-w) solid var(--frame) !important;
  border-right:var(--frame-w) solid var(--frame) !important;
  border-bottom:var(--frame-w) solid var(--frame) !important;
  position:relative; overflow:auto;
  /* Enable smooth native momentum scrolling on touch devices
     and contain overscroll so outer body (hidden) doesn't interfere */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

/* Home icon via mask (white) */
.wtn-home{ width:40px; height:40px; margin-left:8px; }
.wtn-home img{ display:none !important; }
.wtn-home a{ display:inline-block; width:100%; height:100%; }
.wtn-home a::before{
  content:""; display:block; width:100%; height:100%; background:#fff;
  -webkit-mask:url('/wp-content/uploads/home.svg') no-repeat center/contain;
  mask:url('/wp-content/uploads/home.svg') no-repeat center/contain;
}

/* Brand */
.wtn-hero-brand{ display:flex; align-items:center; gap:.5rem; color:#fff; height:100%; white-space:nowrap; }
.wtn-hero-wt{ font-weight:600; letter-spacing:.01em; line-height:1; }
.wtn-hero-net{ font-weight:280; letter-spacing:.28em; text-transform:uppercase; line-height:1; }

/* Non-home always show home icon and spacing */
.wtn-outer:not(.wtn-homepage) .wtn-home{ display:block !important; }
.wtn-outer:not(.wtn-homepage) .wtn-hero-brand{ margin-left:14px; }

/* ---------- Home page blocks (static) ---------- */
.wtn-cover{ height:100% !important; min-height:0 !important; position:relative; }
.wtn-cover .wp-block-cover__background{ display:none !important; }
.wtn-cover .wp-block-cover__video-background{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.wtn-cover .wp-block-cover__inner-container{ position:relative; height:100%; padding:0 !important; margin:0 !important; z-index:1; }
.wtn-cover .wp-block-cover__inner-container>*{ margin:0 !important; }

.wtn-brand-home{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:100%; text-align:center; max-width:90vw;
}
.wtn-brand-home p{ margin:0; line-height:1; font-family:"Cinzel Variable",serif !important; }
.wtn-brand-home .line1{ font-weight:500; font-size:clamp(40px,10vw,120px); line-height:.9; font-variation-settings:"wght" 500; }
.wtn-brand-home .line2{ font-weight:270; letter-spacing:.36em; text-transform:uppercase; font-size:clamp(22px,6vw,72px); margin-top:.28em; font-variation-settings:"wght" 270; }
.wtn-textshadow{ text-shadow:0 2px 18px rgba(0,0,0,.65); }

.wtn-right{
  position: absolute;
  bottom: 6vh;
  display: flex;
  flex-direction: column;
  gap: clamp(18px,4vh,48px);
  z-index: 2;
}
.wtn-right .wp-block-button:nth-child(1){ transform:translateY(calc(-1 * clamp(8px,3vh,40px))); }
.wtn-right .wp-block-button__link{
  background:var(--btn) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28);
  border-radius:999px; display:block; width:220px; text-align:center;
  font-variant:small-caps; letter-spacing:.06em; font-weight:900; font-size:22px; padding:12px 0;
}
.wtn-right .wp-block-button__link:hover{ filter:brightness(.92); }

/* ---------- Guest + Recent Sermon shared blocks (static) ---------- */
body.page-template-guest .wp-block-template-part[data-area="header"],
body.template-guest .wp-block-template-part[data-area="header"]{ display:none !important; }

.wtn-guest .wtn-frame,
.wtn-recent-sermon .wtn-frame{
  background:url('/wp-content/uploads/roots.svg') center/cover no-repeat;
  position:relative;
}

.guest-wrap,.recent-sermon-wrap{
  position:relative; height:100%; width:100%;
  display:grid; grid-template-columns:1fr; grid-auto-rows:min-content 1fr; row-gap:20px;
  align-items:center; justify-items:center;
}

.audio-player-wrap,
.visit-wrap{ width:100%; display:flex; justify-content:center; align-items:center; min-height:340px; }
.audio-player-wrap,
.visit-wrap {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
/* Ensure the player stays visually above the badge if they ever overlap */
/* Avoid stacking contexts that can clip content on short/narrow screens; let normal flow determine order */
.audio-player-wrap,.visit-wrap{ position:static; z-index:auto; }
.guest-badge{ position:static; z-index:auto; }
.audio-block,
.visit-block{
  background:linear-gradient(135deg,#232b36 60%,#3a4a5a 100%);
  border-radius:28px; box-shadow:0 6px 32px rgba(0,0,0,.18);
  padding:1.2rem 1.5rem; max-width:320px; width:100%;
  display:flex; flex-direction:column; align-items:stretch; border:2px solid #7a93aa; margin:0 auto;
}
.audio-block + .audio-block,
.visit-block + .visit-block {
  margin-top: 32px;
}
.audio-block audio{
  width:100%; max-width:100%; min-width:0; margin:0 auto; background:#222;
  border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.12); display:block;
}
.audio-block-label,
.visit-block-label{
  color:#fff; font-family:"Cinzel Variable",serif; font-size:1.18rem; font-weight:700;
  margin-bottom:1.1rem; letter-spacing:.04em; text-align:center;
}
.audio-block-meta{ color:#fff; text-align:center; font-size:1rem; }

.guest-buttons{ align-self:center; justify-self:center; display:flex; flex-direction:column; gap:18px; margin-left:0; padding-top:3vh; min-height:auto; }
.guest-pill{
  display:inline-block; white-space:normal; width:clamp(220px,70vw,320px);
  padding:1rem 1.1rem; text-align:center; border-radius:999px; background:#7a93aa; color:#fff; text-decoration:none;
  font-family:"Cinzel Variable",serif; font-weight:900; font-variant:small-caps; letter-spacing:.06em; font-size:22px;
  line-height:1.15; border:1px solid rgba(255,255,255,.28); box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.guest-pill:hover{ filter:brightness(.95); }

.guest-badge{ align-self:center; display:flex; align-items:center; justify-content:center; }
.guest-badge img{
  width:min(75vw,480px); height:auto; display:block; position:relative !important;
  left:auto !important; right:auto !important;
  max-height:calc(100vh - var(--hero-h) - 40px); object-fit:contain;
}

.visit-block-content{
  font-family:"Libre Baskerville",serif;
  font-size:1rem;
  line-height:1.5;
}

/* ---------- Core Values pill card (static) ---------- */
.core-pill{
  background:#fff; border-radius:24px; box-shadow:0 4px 32px rgba(0,0,0,.10);
  /* Enlarge overlay: reduce outer gap, increase usable width, keep a small gutter */
  width:calc(100% - clamp(24px, 3vw, 64px));
  max-width:1350px;
  min-height:320px;
  margin:clamp(10px, 1.2vw, 20px) auto;
  padding:clamp(22px, 3.2vw, 48px) clamp(16px, 2vw, 32px);
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; gap:16px;
  /* Constrain height so inner content can scroll and Next stays reachable */
  max-height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w)) - clamp(40px, 12vh, 160px));
}

/* Ensure a slight horizontal gap between the card and the frame borders on core values pages */
.wtn-outer:has(.core-pill) .wtn-frame{
  padding-left:clamp(8px, 1.8vw, 18px) !important;
  padding-right:clamp(20px, 3.2vw, 34px) !important;
}
.core-pill-img{
  width:80%; min-width:160px; max-width:520px; height:auto; object-fit:contain;
  border-radius:18px; box-shadow:0 2px 12px rgba(0,0,0,.08); background:#f5f5f5; display:block; margin:0 auto 1rem auto;
}
.core-pill-content{
  color:#111; font-family:"Libre Baskerville",serif; font-size:1rem; line-height:1.6;
  display:flex; flex-direction:column; text-align:center; width:100%;
  flex:1 1 auto; min-height:0;
  /* Make the content area the scroll container so sticky headers/actions work consistently */
  overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; touch-action:pan-y; overscroll-behavior:contain;
  /* Reserve space at bottom so pinned actions never overlap last line */
  padding-bottom: calc(clamp(72px, 14dvh, 130px) + env(safe-area-inset-bottom, 0px));
}

/* Scroll area for long content inside the card */
.core-pill-scroll{
  /* Let the parent .core-pill-content handle scrolling; keep this area flexible */
  flex:1 1 auto; min-height:0; overflow:visible;
}

/* Let titles scroll normally (avoid overlap on stacked sticky headers) */
.core-pill-content > h2,
.core-pill-content > h3{
  position:static; top:auto; z-index:auto; background:none; margin-top:0;
}

/* In-pill actions (Next button inside card) */
.core-pill-actions{
  width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;
  /* Pin to bottom of the card; align with inner padding */
  position:absolute; left:0; right:0; bottom:clamp(8px, 2.2vw, 18px); z-index:2;
  gap:12px; margin-top:0; padding-top:0;
  padding-left:clamp(16px, 2vw, 32px); padding-right:calc(clamp(16px, 2vw, 32px) + 8px);
  background:none;
}
.core-pill-actions .wtn-chip{ white-space:nowrap; }

/* ---------- FAQ page (static + behavior) ---------- */
.faq-wrap{ width:100%; max-width:100%; margin:40px 0 60px; padding:0 16px; box-sizing:border-box; display:flex; justify-content:center; }
.faq-inner{
  width:100%; max-width:1000px; background:#181818; border-radius:18px; box-shadow:0 4px 32px rgba(0,0,0,.18);
  padding:28px 16px 24px; box-sizing:border-box;
}
.faq-title{ font-family:"Cinzel Variable",serif; font-size:2rem; font-weight:700; margin-bottom:24px; text-align:center; color:#fff; }

.faq-accordion{
  max-width:100%; width:100%; margin:24px 0 0; padding:0 clamp(10px, 2.5vw, 22px); box-sizing:border-box;
  display:flex; flex-direction:column; align-items:stretch; gap:18px;
}
.faq-item{ width:100%; display:flex; flex-direction:column; align-items:stretch; background:none; border-radius:0; overflow:visible; box-shadow:none; }
.faq-question{
  width:100%; margin:0; background:var(--btn); border:none; outline:none; color:#fff;
  font-family:"Cinzel Variable",serif; font-size:1.15rem; font-weight:900; text-align:left;
  padding:.5em 1em; cursor:pointer; border-radius:999px; transition:background .2s,color .2s;
  box-sizing:border-box; font-variant:small-caps; letter-spacing:.04em; line-height:1.2; box-shadow:0 2px 0 rgba(0,0,0,.10); position:relative; z-index:2;
}
.faq-question:hover,.faq-question.active{ background:var(--btn-hover); color:#fff; }
.faq-num{ display:inline-block; margin-right:.5em; font-size:1.1em; font-weight:900; }
.faq-answer{
  max-height:0; overflow:hidden; background:#8ea7bc; color:#fff; font-size:1rem;
  padding:0 1rem; width:100%; margin:.2em 0 0; border-radius:18px; border:none;
  box-shadow:0 6px 24px rgba(0,0,0,.10); font-family:"Libre Baskerville",serif; font-weight:400; text-align:left;
  transition:max-height .3s cubic-bezier(.4,0,.2,1), padding .3s; box-sizing:border-box; letter-spacing:.01em; line-height:1.5; position:relative; z-index:1;
}
.faq-answer.open{ max-height:none; overflow:visible; padding:1.1em 1rem 1.2em; }

/* ---------- Core Values Articles: two-column DIE/LIVE layout (>=1024px) ---------- */
.core-article-columns{ width:100%; display:block; }
.core-article-col{ width:100%; }
/* Headings for DIE/LIVE rows */
.core-article-heading{
  font-weight:900;
  text-align:left; /* mobile & narrow default */
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:.22em;
}
.core-article-heading a{ text-decoration:inherit; }

@media (min-width:1024px){
  .core-article-columns{
    display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(16px,2.8vw,36px); row-gap:0;
    align-items:start; justify-items:stretch;
  }
  /* Column text alignment: left column (DIE) right-aligned, right column (LIVE) left-aligned */
  .core-article-columns > .core-article-col:first-child{ text-align:right; }
  .core-article-columns > .core-article-col:last-child{ text-align:left; }

  /* Paragraphs inherit alignment from their column */
  .core-article-col p{ margin:.22rem 0; text-align:inherit; }

  /* Headings inherit alignment and keep compact spacing */
  .core-article-col .core-article-heading{ margin:0 0 .35rem 0; text-align:inherit; }
}

/* Allow FAQ pages to scroll the frame with subtle gradient */
.wtn-outer:has(.faq-accordion) .wtn-frame{
  overflow-y:auto; overflow-x:hidden;
  /* Use the same background as Guest pages */
  background:url('/wp-content/uploads/roots.svg') center/cover no-repeat;
}

/* ---------- 404 ---------- */
.wtn-404{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:4vh 3vw;
}
.wtn-404 h1{ margin:0 0 .5em; font-size:clamp(24px,6vw,54px); line-height:1.1; }
.wtn-404 p{ margin:0; font-size:clamp(14px,3.8vw,22px); }
.wtn-404 a{ color:#fff; text-decoration:underline; }
.wtn-404 a:hover{ text-decoration:none; }
.error404 .wtn-hero-wt{ font-size:clamp(22px, calc(var(--hero-h) * 0.95), 66px); }
.error404 .wtn-hero-net{ font-size:clamp(16px, calc(var(--hero-h) * 0.62), 42px); letter-spacing:.34em; }

/* =====================================================================
   BREAKPOINTS
   Each section explicitly addresses: Global/Hero, Home, Guest/Recent Sermon,
   Core Pill, FAQ, and 404 where relevant.
   ===================================================================== */

/* ---------- <480px ---------- */
@media (max-width:479px){

  /* Global/Hero */
  :root{ --hero-h:52px; }
  .wtn-hero{ padding:0 10px 0 14px; }
  .wtn-home{ width:36px; height:36px; margin-left:6px; }
  /* Hide only the hero's right-side chip; keep other chips (e.g., Next) visible */
  .wtn-hero-right{ display:none !important; }
  .wtn-outer:not(.wtn-homepage) .wtn-hero-brand{
    font-size:14px; max-width:calc(100% - 64px); overflow:hidden; text-overflow:ellipsis;
  }
  .wtn-guest .wtn-hero-wt,.wtn-recent-sermon .wtn-hero-wt{ font-size:clamp(18px, 5.2vw, 22px); }
  .wtn-guest .wtn-hero-net,.wtn-recent-sermon .wtn-hero-net{ font-size:clamp(12px, 3.8vw, 16px); letter-spacing:.26em; }

  /* Home */
  .wtn-brand-home{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .wtn-right{ right: 50%; transform: translateX(50%) scale(0.95); align-items: center; }
  .wtn-right .wp-block-button__link{ width:200px; font-size:20px; padding:10px 0; }

  /* Guest / Recent Sermon */
  .guest-wrap,.recent-sermon-wrap{
    display:flex; flex-direction:column; align-items:center; row-gap:8px;
    height:auto !important; min-height:0 !important;
  }
  /* Add inner padding so content can breathe and scroll fully below the player */
  .guest-wrap,.recent-sermon-wrap{ padding:8px 10px 24px; box-sizing:border-box; }
  .wtn-guest .wtn-frame, .wtn-recent-sermon .wtn-frame {
    height: calc(100dvh - var(--hero-h) - (2 * var(--outer-w))) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  .audio-player-wrap,.visit-wrap,.guest-badge{ width:100%; max-width:100vw; display:block; margin:0 auto 12px; text-align:center; }
  .audio-player-wrap,.visit-wrap{ min-height:200px; }
  .guest-badge{ margin-top:8px; }
  .audio-block,.visit-block{
    max-width:92vw; min-width:200px; width:100%;
    padding:.6rem .4rem; border-radius:14px; box-sizing:border-box;
  }
  .audio-block-label,.visit-block-label,.audio-block-meta{ font-size:.93rem; margin-bottom:.4rem; }
  .guest-pill{ width:clamp(160px,62vw,240px); font-size:18px; padding:.75rem .9rem; line-height:1.05; }
  .guest-buttons{ padding-top:2vh; gap:12px; }
  .guest-badge {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100%;
  margin: clamp(12px, 4vh, 28px) auto 0 auto;
    text-align: center;
    padding-top: 0 !important;
  }
  .wtn-recent-sermon .guest-badge img {
    display: block;
    margin: 0 auto 0 auto;
    max-width: 92vw;
    height: auto;
    max-height: none !important;
  }
  .wtn-guest .guest-badge img {
    display: block;
    margin: 0 auto 0 auto;
    max-width: 92vw;
    height: auto;
    max-height: none !important;
  }
  .audio-player-wrap,.visit-wrap {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  margin-bottom: clamp(8px, 3vh, 18px);
  }
  .audio-block,.visit-block {
    margin: 8vw auto 0 auto;
    max-width: 92vw !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  /* Visit */
  .visit-block-content{ font-size:.95rem; }
  .audio-block audio{ width:96%; margin-left:auto; margin-right:auto; }
  body.page-template-guest,body.template-guest{ overflow:auto !important; height:auto !important; -webkit-overflow-scrolling:touch; }
  body.page-template-guest .wtn-outer,body.template-guest .wtn-outer{ height:auto !important; min-height:100dvh !important; }
  body.page-template-guest .wtn-frame,body.template-guest .wtn-frame{ height:auto !important; min-height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w))) !important; }
  body.page-template-guest .guest-wrap,body.template-guest .guest-wrap{ max-height:none !important; overflow:visible !important; }

  /* Core Pill */
  .core-pill{
    /* Ensure a visible gutter from the frame on very small screens */
    margin:clamp(12px, 2.6vw, 18px) auto;
    width:calc(100% - clamp(24px, 5.6vw, 40px));
    padding:clamp(16px, 4.6vw, 36px) clamp(12px, 3.8vw, 24px);
    max-height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w)) - clamp(28px, 10vh, 140px));
  }
  .core-pill-img{ width:82%; }
  .core-pill-content{ font-size:.98rem; text-align:center; }
  /* Content scrolls above a dedicated bottom actions row */
  .core-pill-content{ padding-bottom: calc(clamp(72px, 14dvh, 130px) + env(safe-area-inset-bottom, 0px)); }

  /* FAQ */
  .faq-title{ font-size:1.6rem; }
  .faq-accordion{ padding:0 clamp(8px, 2.6vw, 16px); }
  .faq-question{ width:100%; padding:.4em .8em; font-size:.95rem; letter-spacing:0; text-align:left; }
  .faq-answer{ width:100%; font-size:.95rem; }

  /* 404 */
  .wtn-404{ padding:3vh 4vw; }
}

/* ---------- 480–767px ---------- */
@media (min-width:480px) and (max-width:767px){

  /* Global/Hero */
  :root{ --hero-h:56px; }
  .wtn-hero{ padding:0 16px 0 26px; }
  .wtn-home{ width:44px; height:44px; margin-left:10px; }
  /* Hide only the hero's right-side chip; keep other chips (e.g., Next) visible */
  .wtn-hero-right{ display:none !important; }
  .wtn-outer:not(.wtn-homepage) .wtn-hero-brand{
    font-size:clamp(14px,3.2vw,18px); max-width:calc(100% - 72px); overflow:hidden; text-overflow:ellipsis;
  }
  .wtn-guest .wtn-hero-wt,.wtn-recent-sermon .wtn-hero-wt{ font-size:clamp(20px, 4.8vw, 26px); }
  .wtn-guest .wtn-hero-net,.wtn-recent-sermon .wtn-hero-net{ font-size:clamp(14px, 3.8vw, 20px); letter-spacing:.28em; }

  /* Home */
  .wtn-brand-home{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .wtn-right{ right: 50%; transform: translateX(50%) scale(0.95); align-items: center; }
  .wtn-right .wp-block-button__link{ width:220px; font-size:22px; padding:12px 0; }

  /* Guest / Recent Sermon */
  .guest-wrap,.recent-sermon-wrap{
    display:flex; flex-direction:column; align-items:center; row-gap:18px;
    padding:12px 16px 24px; box-sizing:border-box;
    height:auto !important; min-height:0 !important;
  }
  /* Add subtle inner padding so content doesn't touch the frame edges */
  .wtn-guest .wtn-frame, .wtn-recent-sermon .wtn-frame { padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
  .audio-player-wrap,.visit-wrap {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin-bottom: clamp(8px, 3vh, 18px);
  }
  .guest-badge img{ width:min(82vw,520px); height:auto; max-height:none !important; }
  .guest-badge{ margin-top: clamp(12px, 4vh, 24px); }
  .audio-block,.visit-block{
    max-width:300px; width:100%;
    padding:.7rem .6rem; border-radius:16px;
  }
  /* Ensure the native audio control does not touch the right border */
  .audio-block audio{ width:96%; margin-left:auto; margin-right:auto; }
  .audio-player-wrap,.visit-wrap{ margin-bottom: clamp(16px, 4vh, 40px); }
  .audio-block-label,.visit-block-label,.audio-block-meta{ font-size:.97rem; margin-bottom:.6rem; }

  .guest-pill{ width:clamp(180px,66vw,300px); font-size:19px; padding:.8rem 1rem; }
  .guest-buttons{ gap:14px; }

  /* Visit */
  .visit-block-content{ font-size:1rem; }

  /* Core Pill */
  .core-pill{
    margin:clamp(12px, 2.4vw, 20px) auto;
    width:calc(100% - clamp(28px, 5vw, 44px));
    padding:clamp(18px, 4.2vw, 40px) clamp(12px, 3.2vw, 28px);
    max-height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w)) - clamp(28px, 10vh, 150px));
  }
  .core-pill-img{ width:76%; }
  /* Content scrolls above a dedicated bottom actions row */
  .core-pill-content{ padding-bottom: calc(clamp(72px, 14dvh, 130px) + env(safe-area-inset-bottom, 0px)); }

  /* FAQ */
  .faq-title{ font-size:2rem; }
  .faq-question{ font-size:1.1rem; width:100%; }
  .faq-answer{ width:100%; font-size:1rem; }
}

/* ---------- 768–1023px ---------- */
@media (min-width:768px) and (max-width:1023px){
  /* Global/Hero */
  :root{ --hero-h:64px; }
  .wtn-hero{ padding:0 18px 0 32px; gap:14px; }
  .wtn-home{ width:50px; height:50px; }
  /* Hide only the hero's right-side chip; keep other chips (e.g., Next) visible */
  .wtn-hero-right{ display:none !important; }
  .wtn-outer:not(.wtn-homepage) .wtn-hero-brand{
    font-size:clamp(15px, 2.2vw, 19px);
    max-width:calc(100% - 80px);
    overflow:hidden;
    text-overflow:ellipsis;
    gap:.45rem;
  }
  .wtn-guest .wtn-hero-wt,
  .wtn-recent-sermon .wtn-hero-wt {
    font-size:clamp(18px, 4vw, 32px);
  }
  .wtn-guest .wtn-hero-net,
  .wtn-recent-sermon .wtn-hero-net {
    font-size:clamp(12px, 2.2vw, 22px);
    letter-spacing:.32em;
  }

  /* Home */
  .wtn-brand-home{
    left:6vw; top:72%; transform:none; width:42vw; max-width:680px; text-align:center;
  }
  .wtn-brand-home .line1{ font-size:clamp(36px,6.2vw,84px); }
  .wtn-brand-home .line2{ font-size:clamp(20px,4vw,44px); }
  .wtn-right{ right: 6vw; transform: none; align-items: flex-end; top: 72%; bottom: 8vh; gap:clamp(24px,6vh,72px); }
  .wtn-right .wp-block-button__link{ width:240px; font-size:clamp(22px,2.4vw,30px); padding:14px 0; }

  /* Guest / Recent Sermon */
  .guest-wrap,.recent-sermon-wrap{
    display:grid; grid-template-columns:48% 52%; align-items:center; align-content:center; justify-items:center;
    padding:14px 22px 20px; box-sizing:border-box; column-gap:clamp(16px,3vw,32px);
  }
  .audio-player-wrap,.visit-wrap {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .guest-buttons{ align-items:flex-start; justify-self:start; margin-left:clamp(16px,2.5vw,32px); }
  .guest-badge{ justify-self:center; transform:none; }
  .guest-badge img{ width:clamp(320px,46vw,560px); }

  .audio-block,.visit-block{
    max-width:clamp(160px, 26vw, 280px);
    width:100%;
    padding:.9rem .75rem;
    border-radius:18px;
  }
  .audio-block audio{ width:96%; margin-left:auto; margin-right:auto; }
  .audio-block-label,.visit-block-label{ font-size:1.05rem; }
  .audio-block-meta{ font-size:1rem; }

  .guest-pill{ width:clamp(160px,30vw,220px); font-size:clamp(18px,2.6vw,22px); padding:.9rem 1rem; }

  /* Core Pill */
  .core-pill{
    border-radius:32px;
    max-width:1400px;
    width:calc(100% - clamp(32px, 3vw, 64px));
    /* Keep vertical layout so the content area can be height-constrained and scrollable */
    flex-direction:column; align-items:stretch; gap:24px;
    max-height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w)) - clamp(32px, 12vh, 160px));
    min-height:0; /* allow inner flex child to shrink and scroll */
  }
  .core-pill-img{ width:44%; min-width:225px; max-width:420px; margin:0; }
  .core-pill-content{ text-align:left; font-size:1.12rem; }
  /* Content scrolls above a dedicated bottom actions row */
  .core-pill-content{ padding-bottom: calc(clamp(72px, 14dvh, 130px) + env(safe-area-inset-bottom, 0px)); min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }

  /* FAQ */
  .faq-title{ font-size:2.2rem; }
  .faq-question{ width:100%; font-size:1.22rem; }
  .faq-answer{ width:100%; font-size:1.04rem; }

  /* 404 */
  .wtn-404 h1{ font-size:clamp(28px,5.2vw,52px); }

  /* Visit */
  .visit-block-content{ font-size:1.04rem; }
}

/* ---------- 1024–1439px ---------- */
@media (min-width:1024px) and (max-width:1439px){
  /* Global/Hero */
  :root{ --hero-h:66px; }
  .wtn-hero{ gap:16px; padding:0 20px 0 34px; }
  .wtn-home{ width:calc(var(--hero-h) - 10px); height:calc(var(--hero-h) - 10px); }
  .wtn-hero-right{ display:flex; }
  .wtn-chip{ display:inline-block; }
  .wtn-outer:not(.wtn-homepage) .wtn-hero-brand{
    font-size:clamp(18px,1.9vw,24px); max-width:calc(100% - 120px); overflow:hidden; text-overflow:ellipsis;
  }
  .wtn-outer:not(.wtn-homepage) .wtn-hero-wt{ font-size:clamp(18px,1.9vw,26px) !important; }
  .wtn-outer:not(.wtn-homepage) .wtn-hero-net{ font-size:clamp(16px,1.5vw,22px) !important; letter-spacing:.28em; }

  /* Home */
  .wtn-brand-home{
    left:10vw; top:55%; width:36vw; max-width:640px; text-align:center; transform:none;
  }
  .wtn-brand-home .line1{ font-size:clamp(48px,6.5vw,140px); line-height:.92; }
  .wtn-brand-home .line2{ font-size:clamp(24px,3.8vw,48px); }
  
  .wtn-guest .wtn-frame, .wtn-recent-sermon .wtn-frame {
    height: calc(100dvh - var(--hero-h) - (2 * var(--outer-w))) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  /* Position buttons to bottom right on homepage */
  .wtn-right { 
    position: absolute;
    right: 6vw; 
    bottom: 8vh; 
    left: auto;
    top: auto;
    transform: none; 
    align-items: flex-end;
    width: auto;
    margin: 0;
  }
  .wtn-right .wp-block-button__link{ width:240px; font-size:clamp(24px,2.2vw,32px); }

  /* Guest / Recent Sermon */
  .guest-wrap,.recent-sermon-wrap{ grid-template-columns:40% 60%; align-items:center; align-content:center; justify-items:center; padding:16px clamp(18px,3vw,32px) 22px; box-sizing:border-box; column-gap:clamp(18px,3.2vw,40px); }
  .audio-player-wrap,.visit-wrap {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .guest-buttons{ margin-left:0; align-items:center; justify-self:center; }
  .guest-badge{ transform:none; }
  .guest-badge img{ max-height:calc(100vh - var(--hero-h) - 120px); }

  .audio-block,.visit-block{
    max-width:clamp(220px, 26vw, 340px);
    width:100%;
    padding:1rem .9rem;
    border-radius:20px;
  }
  .audio-block audio{ width:96%; margin-left:auto; margin-right:auto; }
  .audio-block-label,.visit-block-label{ font-size:1.12rem; }
  .audio-block-meta{ font-size:1.02rem; }

  .guest-pill{ width:clamp(180px,30vw,240px); }

  /* Core Pill */
  .core-pill{
    width:calc(100% - clamp(36px, 3.2vw, 72px));
    padding:2vw 1.6vw;
    max-height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w)) - clamp(36px, 12vh, 180px));
  }
  .core-pill-content{ font-size:1.2rem; }
  .core-pill-actions{ justify-content:flex-end; }

  /* FAQ */
  .faq-title{ font-size:2.4rem; }
  .faq-question{ font-size:1.28rem; }
  .faq-answer{ font-size:1.08rem; }

  /* Visit */
  .visit-block-content{ font-size:1.08rem; }
}

/* ---------- ≥1440px ---------- */
@media (min-width:1440px){
  /* Global/Hero */
  :root{ --hero-h:70px; }
  .wtn-hero{ padding:0 20px 0 36px; }
  .wtn-home{ width:calc(var(--hero-h) - 8px); height:calc(var(--hero-h) - 8px); }
  .wtn-outer:not(.wtn-homepage) .wtn-hero-brand{
    font-size:clamp(20px,1.5vw,26px); max-width:calc(100% - 140px);
  }

  /* Home */
  .wtn-brand-home{
    left:8vw; top:50%; width:34vw; max-width:720px; transform:none; text-align:center;
  }
  .wtn-brand-home .line1{ font-size:clamp(56px,6.2vw,160px); line-height:.9; }
  .wtn-brand-home .line2{ font-size:clamp(28px,3.5vw,52px); }
  
  /* Position buttons to bottom right on homepage */
  .wtn-right { 
    position: absolute;
    right: 6vw; 
    bottom: 8vh; 
    left: auto;
    top: auto;
    transform: none; 
    align-items: flex-end;
    width: auto;
    margin: 0;
  }
  .wtn-right .wp-block-button__link{ width:260px; font-size:clamp(26px,2vw,34px); }

  /* Guest / Recent Sermon */
  .guest-wrap,.recent-sermon-wrap{
    grid-template-columns:40% 60%;
    padding:clamp(12px,2vh,24px) clamp(22px,3.2vw,40px) clamp(16px,2.4vh,28px);
    box-sizing:border-box;
    column-gap:clamp(22px,3.6vw,54px);
    /* center the grid vertically and keep items centered in their cells */
    align-content:center;
    align-items:center;
    justify-items:center;
  }
  .audio-player-wrap,.visit-wrap {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .guest-badge{ transform:none; }
  .audio-block,.visit-block{
    max-width:360px; width:100%;
    padding:.7rem .6rem; border-radius:16px;
  }
  .audio-block audio{ width:96%; margin-left:auto; margin-right:auto; }
  .audio-block-label,.visit-block-label{ font-size:1.18rem; }
  .audio-block-meta{ font-size:1.06rem; }

  /* Core Pill */
  .core-pill{
    max-width:1500px; border-radius:48px;
    width:calc(100% - clamp(40px, 3vw, 80px));
    max-height:calc(100dvh - var(--hero-h) - (2 * var(--outer-w)) - clamp(40px, 12vh, 200px));
  }
  .core-pill-actions{ justify-content:flex-end; }

  /* FAQ */
  .faq-title{ font-size:2.6rem; }
  .faq-question{ font-size:1.35rem; }
  .faq-answer{ font-size:1.12rem; }

  /* Visit */
  .visit-block-content{ font-size:1.12rem; }
}

/* ---------- Final font guard ---------- */
:where(body,.wp-site-blocks,.wp-block,[class*="wp-"]){ font-family:"Cormorant Garamond",serif !important; }