/* ---------- hero (ported from index.html lines 93-147) ---------- */
.hero{
position:relative; min-height: 100vh; display:flex; align-items:flex-end;
padding: 0 6vw 90px;
}
.hero-img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position: 50% 20%;
filter: saturate(1.08) contrast(1.05);
}
/* Self-hosted hero video: fills the same full-bleed area a photo would, and
`object-fit:cover` keeps it filling any viewport without distortion. The
poster attribute paints the same frame while it loads, so the block never
flashes empty and never collapses if autoplay is refused. */
.hero-video{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:50% 30%;
filter:saturate(1.06) contrast(1.04);
}
/* Hero photo slider: slides stack in the same full-bleed area and cross-fade.
The first slide is eager-loaded; the rest are lazy, so a multi-photo hero
doesn't cost extra bytes before first paint. */
/* No z-index here on purpose: a z-index would create a stacking context that
traps .hero-slider__dots below the scrim (they'd render dimmed and, worse,
be unclickable). Without it the slides still paint under the later-in-DOM
scrim, and the dots' own z-index can lift them above it. */
.hero-slider{ position:absolute; inset:0; }
.hero-slider .hero-slide{ opacity:0; transition:opacity .9s ease; }
.hero-slider .hero-slide.is-active{ opacity:1; }
.hero-slider__dots{
position:absolute; right:5vw; bottom:26px; z-index:4;
display:flex; gap:9px;
}
.hero-slider__dot{
width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
border:1px solid rgba(245,158,11,.65); background:rgba(13,12,11,.55);
transition:background .25s, transform .25s;
}
.hero-slider__dot.is-active{ background:var(--amber); transform:scale(1.18); }
.hero-slider__dot:hover{ background:var(--amber-soft); }
@media (max-width:860px){ .hero-slider__dots{ right:auto; left:6vw; bottom:18px; } }
/* Hero video (pinned darshan with a video-aphorism): the facade/iframe fills the
same full-bleed area the photo would, overriding the Reader's 16:9 card sizing. */
.hero-media--video{ position:absolute; inset:0; z-index:0; }
.hero-media--video .yt-facade{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.hero-media--video .yt-facade img{ filter: saturate(1.08) contrast(1.05); }
.hero-scrim{
position:absolute; inset:0;
pointer-events:none; /* purely decorative — must never swallow clicks (it was blocking the slider dots) */
background:linear-gradient(180deg, rgba(13,12,11,.15) 0%, rgba(13,12,11,.2) 35%, rgba(13,12,11,.66) 62%, rgba(13,12,11,.97) 100%),
radial-gradient(ellipse at 50% 78%, rgba(185,28,28,.28), transparent 55%);
}
.hero-content{ position:relative; z-index:3; max-width: 720px; }
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-size:12px; letter-spacing:.28em; text-transform:uppercase;
color: var(--amber-soft); margin-bottom: 22px;
text-shadow: 0 1px 12px rgba(0,0,0,.75);
}
.eyebrow::before{
content:''; width:26px; height:1px; background: linear-gradient(90deg, var(--crimson), var(--amber));
}
h1.headline{
font-family:'Cormorant Garamond', serif;
font-size: clamp(38px, 6.4vw, 78px);
line-height: 1.02;
color: #F7F2E7;
letter-spacing: 0.01em;
margin-bottom: 22px;
text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.headline em{
font-style: italic; font-family:'Cormorant Garamond', serif; font-weight:500;
background: linear-gradient(90deg, var(--amber-soft), var(--crimson) 120%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
font-size: 16.5px; line-height:1.7; color: var(--ash);
max-width: 480px; margin-bottom: 36px; font-weight:300;
text-shadow: 0 1px 14px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
}
/* Pinned Hero shows a real editorial title (a prose sentence, not a short
marketing tagline) — smaller than the static-copy headline, and capped to 3
lines so an unusually long title can never grow tall enough to collide with
the fixed header above it. */
.hero--pinned .headline{
font-size: clamp(28px, 4.6vw, 54px); line-height:1.15;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hero--pinned .hero-sub{ -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
/* "Quote" hero (aphorism / pull-quote): the text carries the message, so it gets
the large serif-italic treatment the headline would otherwise take, and the
post title drops to the small kicker line above it. */
.hero--quote .hero-content{ max-width: 860px; }
.hero-quote{
margin:0 0 26px; padding:0; border:0;
font-family:'Cormorant Garamond', serif; font-weight:500;
font-size: clamp(26px, 3.9vw, 48px); line-height:1.32;
color:#F7F2E7; text-shadow:0 2px 24px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.75);
display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-quote::before{
content:'“'; display:block; font-size:1.6em; line-height:.4; color:var(--amber);
opacity:.75; margin-bottom:.32em;
}
/* ---------- home page grid / empty-state ---------- */
.darshan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;margin-bottom:36px}
.empty-note{font-size:20px;color:var(--ash-dim)}
/* hero CTAs: aligned row that wraps cleanly on mobile (no more BOOKS sliding under) */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hero-cta .btn-primary,.hero-cta .btn-ghost{margin:0}
/* social share row (Facebook/Telegram/WhatsApp + Instagram copy-link) — a
solid dark chip behind each icon so it stays legible over any hero photo,
not just the darker ones (same lesson as the .hero-sub contrast fix). */
.hero-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.hero-share__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim);text-shadow:0 1px 10px rgba(0,0,0,.85);margin-right:2px}
.hero-share .icon-btn{background:rgba(13,12,11,.6)}
.hero-share .icon-btn.icon-btn--copied{border-color:var(--amber);color:var(--amber-soft);background:rgba(245,158,11,.2)}