/* Homepage full-bleed video hero — "worship" edition (Oct 2026, owner reference recording).
   Loaded ONLY by index.html, after css/rf-site.css. Every rule is scoped to .home-hero or
   to the hero so the shared header, navigation, drawer and all other sections/pages are untouched. */

/* --- Frame: full viewport; the fixed 81px header (untouched) sits over the top of it --- */
.home-hero{height:max(640px,100svh);max-height:none;min-height:0;isolation:isolate;background:#0b1322}

/* --- Menu bar on the homepage (owner request, reference behaviour): see-through over the video while
       the page is at the top, solid navy as soon as the visitor scrolls. Only the background changes —
       the menu's links, layout, dropdowns and drawer are untouched. No JS = solid bar as everywhere else. --- */
.site-nav{transition:background-color .35s ease,border-color .35s ease}
html.home-top body:not(.drawer-open):not(.mfm-menu-open) .site-nav{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}

/* --- Media layer: poster first, video fades in only once it is really playing --- */
.home-hero>.home-hero-media{position:absolute;inset:0;z-index:0;display:block}
.home-hero>.home-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.home-hero>video.home-hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;opacity:0;transition:opacity .8s ease}
.home-hero.is-playing>video.home-hero-video{opacity:1}
.home-hero>video.home-hero-video[hidden]{display:none}
/* Visitor-started playback must still be visible under reduced motion (autoplay never happens there). */
@media (prefers-reduced-motion:reduce){.home-hero>video.home-hero-video{display:block;transition:none}}

/* --- Cinematic left-to-right shade (text side dark, congregation side open) --- */
.home-hero>.home-hero-overlay{z-index:1;background:
  linear-gradient(90deg,rgba(9,14,28,.92) 0%,rgba(9,14,28,.80) 30%,rgba(9,14,28,.46) 58%,rgba(9,14,28,.16) 100%),
  linear-gradient(0deg,rgba(9,14,28,.55) 0%,rgba(9,14,28,0) 32%),
  linear-gradient(180deg,rgba(9,14,28,.88) 0,rgba(9,14,28,.66) 90px,rgba(9,14,28,0) 220px)}
.home-hero:after{display:none}

/* --- Copy --- */
.home-hero .home-hero-content{padding-top:calc(81px + clamp(28px,10vh,120px))}
.home-hero .eyebrow.light{color:#f3836d;font-size:12px;letter-spacing:.2em;font-weight:800;margin-bottom:0}
.home-hero .eyebrow.light:before{display:none}
.home-hero .eyebrow.light{gap:0;flex-wrap:wrap}
@media (min-width:601px){.home-hero .eyebrow.light>span{white-space:pre}}
/* Text-cut Fraunces (low optical size): sturdier strokes and ball terminals, as in the reference */
.home-hero h1{font-family:var(--serif);font-weight:400;font-optical-sizing:none;font-variation-settings:'opsz' 12;font-size:clamp(48px,min(calc((100vw - 48px) / 9.1),14vh),132px);line-height:1;letter-spacing:-.045em;margin:clamp(12px,1.8vh,20px) 0 clamp(22px,4vh,40px);max-width:none;color:#fff}
.home-hero h1 .h1-line,.home-hero h1 em{display:block}
/* Owner request: 'Come and encounter' on one line, 'the fire of God.' (coral) on the next (phones wrap naturally) */
@media (min-width:601px){.home-hero h1 .h1-line{white-space:nowrap}}
.home-hero h1 em{font-style:normal;font-weight:400;color:#f3836d}
.home-hero .home-hero-content>p:not(.eyebrow){font-family:'Inter Tight',system-ui,sans-serif;font-size:clamp(17px,1.35vw,26px);line-height:1.6;color:#d6dbe3;max-width:680px;margin:0}

/* --- Buttons: square, uppercase, no arrows --- */
.home-hero .hero-actions{gap:12px;margin-top:clamp(26px,4vh,40px)}
/* rf-site.css forces site-wide buttons to rounded/sentence-case with !important; the hero alone opts out. */
.home-hero .hero-actions .button{min-height:56px;padding:16px 26px;border-radius:0!important;font-family:'Inter Tight',system-ui,sans-serif;font-size:14px!important;font-weight:800!important;line-height:1;letter-spacing:.1em!important;text-transform:uppercase!important}
.home-hero .hero-actions .button svg{display:none}
.home-hero .hero-actions .button:not(.light){background:#d4381f;border-color:#d4381f;color:#fff}
.home-hero .hero-actions .button:not(.light):hover{background:#b52f19;border-color:#b52f19}
.home-hero .hero-actions .button.light{background:transparent;border-color:#fff;color:#fff}
.home-hero .hero-actions .button.light:hover{background:#fff;color:#0b1322}
.home-hero .hero-actions .button:focus-visible{outline:3px solid #f0c760;outline-offset:3px}

/* --- "Coming up next" card: the original site's white event card, bottom-right of the hero
       (where the Pause/Play button used to be — that button was removed at the owner's request) --- */
.home-hero .service-dock{position:absolute;z-index:3;left:auto;right:clamp(20px,2.4vw,46px);bottom:clamp(20px,3.2vh,32px);width:390px;max-width:calc(100% - 40px);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.home-hero .service-dock a{min-height:44px;margin-top:12px;padding-top:10px}
.home-hero .service-dock a:focus-visible{outline:3px solid #c9952c;outline-offset:3px}

/* --- Tablet --- */
@media (max-width:850px){
  .home-hero{height:max(600px,100svh)}
  .home-hero>.home-hero-media img,.home-hero>video.home-hero-video{object-position:58% 40%}
  .home-hero>.home-hero-overlay{background:linear-gradient(90deg,rgba(9,14,28,.9) 0%,rgba(9,14,28,.7) 55%,rgba(9,14,28,.4) 100%),linear-gradient(0deg,rgba(9,14,28,.6) 0%,rgba(9,14,28,0) 40%)}
}

/* --- Not enough room for the corner card (tablets, short or zoomed windows): the card drops into
       normal flow under the buttons, aligned with the copy, so it can never cover them --- */
@media (min-width:601px) and (max-width:900px),(min-width:601px) and (max-height:640px){
  .home-hero{height:auto;min-height:max(600px,100svh);display:flex;flex-direction:column}
  .home-hero .home-hero-content{flex:1 0 auto;padding-bottom:28px}
  .home-hero .service-dock{position:relative;right:auto;bottom:auto;align-self:flex-start;margin:0 0 28px max(24px,calc((100% - 1200px) / 2))}
}

/* --- Phones: portrait footage, centred copy (existing approved mobile layout), Pause bottom-right --- */
@media (max-width:600px){
  .home-hero{height:auto;max-height:none;min-height:100svh;display:flex;flex-direction:column}
  .home-hero>.home-hero-media img,.home-hero>video.home-hero-video{object-position:50% 40%}
  .home-hero>.home-hero-overlay{background:linear-gradient(180deg,rgba(9,14,28,.82) 0%,rgba(9,14,28,.62) 45%,rgba(9,14,28,.86) 100%)}
  .home-hero .home-hero-content{flex:1 0 auto;padding-top:calc(81px + 36px);padding-bottom:28px}
  .home-hero .eyebrow.light{font-size:10px;letter-spacing:.16em;line-height:1.6;flex-direction:column;gap:2px}
  .home-hero .eyebrow.light .eb-sep{display:none}
  /* 200% zoom / very narrow screens: reflow instead of clipping */
  .home-hero h1{font-size:clamp(34px,13.4vw,56px);overflow-wrap:break-word}
  .home-hero h1 .h1-line{display:inline}
  .home-hero .home-hero-content>p:not(.eyebrow){font-size:16px}
  .home-hero .hero-actions .button{font-size:13px!important}
  .home-hero .service-dock{position:relative;left:auto;right:auto;bottom:auto;width:auto;max-width:none;margin:0 16px max(20px,env(safe-area-inset-bottom));padding:20px 22px}
}
@media (max-width:600px) and (orientation:landscape){
  .home-hero{min-height:0}
}

/* Wide screens: the card's right edge lines up with the stretched menu bar ("Request Prayer") */
@media (min-width:1200px) and (min-height:641px){.home-hero .service-dock{right:clamp(32px,3.2vw,64px)}}

/* --- Gold accents (owner request, Oct 13 2026): the hero eyebrow, "the fire of God." and the main button
       move from coral/red to the Royal Flame gold. A brighter gold is used on the video so it stays crisp;
       the button carries navy text for contrast. --- */
.home-hero .eyebrow.light{color:#e0ad45}
.home-hero h1 em{color:#e0ad45}
.home-hero .hero-actions .button:not(.light){background:#e0ad45;border-color:#e0ad45;color:#0b1322}
.home-hero .hero-actions .button:not(.light):hover{background:#c9952c;border-color:#c9952c;color:#0b1322}

/* --- Centred hero copy on computers and tablets (owner request, Oct 13 2026): headline, text and buttons
       centred over the video; the shade is now darkest behind the centre instead of the left edge.
       Phones were already centred. --- */
@media (min-width:601px){
  .home-hero .home-hero-content{text-align:center}
  .home-hero .home-hero-content>p:not(.eyebrow){margin-inline:auto}
  .home-hero .hero-actions{justify-content:center}
  .home-hero>.home-hero-overlay{background:
    radial-gradient(ellipse 75% 70% at 50% 45%,rgba(9,14,28,.78) 0%,rgba(9,14,28,.55) 60%,rgba(9,14,28,.35) 100%),
    linear-gradient(180deg,rgba(9,14,28,.85) 0,rgba(9,14,28,0) 220px),
    linear-gradient(0deg,rgba(9,14,28,.6) 0%,rgba(9,14,28,0) 35%)}
}
/* the line under the headline stays on one line on computers (owner request) */
@media (min-width:901px){.home-hero .home-hero-content>p:not(.eyebrow){max-width:none;white-space:nowrap}}

/* --- Phones (owner request, Oct 14 2026): full-bleed video hero — no "Coming up next" box; the copy sits
       centred in the full-height video. Computers and tablets keep the box. --- */
@media (max-width:600px){
  .home-hero .service-dock{display:none!important}
  .home-hero{height:100svh;min-height:560px}
  .home-hero .home-hero-content{display:flex;flex-direction:column;justify-content:center;padding-top:81px;padding-bottom:max(40px,env(safe-area-inset-bottom))}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){.home-hero .service-dock{display:none!important}}

/* --- Phones (owner request, Oct 14 2026): "Come and encounter" on one line (sized to the screen width) and the
       two buttons side by side on one row --- */
@media (max-width:600px){
  .home-hero h1 .h1-line{display:block;white-space:nowrap}
  .home-hero h1{font-size:min(56px,calc((100vw - 36px) / 9))}
  .home-hero .home-hero-content .hero-actions{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:stretch;max-width:none;width:100%;gap:10px;margin-left:auto;margin-right:auto}
  .home-hero .home-hero-content .hero-actions .button{flex:1 1 0;width:auto;max-width:200px;min-width:0;padding:15px 8px;justify-content:center;text-align:center;white-space:nowrap;font-size:12px!important;letter-spacing:.08em!important}
}
@media (max-width:350px){.home-hero .home-hero-content .hero-actions .button{font-size:11px!important;letter-spacing:.04em!important;padding:14px 6px}}
@media (max-width:600px){.home-hero .home-hero-content>p:not(.eyebrow){text-wrap:balance}}