/* ==========================================================================
   HOME TEMPLATES — Settings → Branding → "Hero Template (home)" (hero-t1…10)
   and "Featured Card Template (home carousel)" (featc-t1…10), applied to the
   cinematic home. Body classes come from site_tpl(). Loaded after home.css /
   home-m.css so each template can refine desktop AND phone layouts.
   ========================================================================== */

/* =========================== HERO TEMPLATES =========================== */
/* 1 · Cinematic — the default composition (no overrides) */

/* 2 · Centered — symmetric headline, reel as a centred strip */
.hero-t2 .hx-veil { background: radial-gradient(90% 80% at 50% 55%, rgba(4,8,18,.25), rgba(4,8,18,.78)), linear-gradient(180deg, rgba(4,8,18,.3), rgba(4,8,18,0) 30%, rgba(4,8,18,.85)); }
.hero-t2 .hx-hero-in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero-t2 .hx-copies { width: 100%; max-width: 980px; }
.hero-t2 .hx-h { max-width: none; margin-inline: auto; }
.hero-t2 .hx-kicker, .hero-t2 .hx-actions { justify-content: center; }
.hero-t2 .hx-lede { margin-inline: auto; }
.hero-t2 .hx-promo { justify-content: center; }
@media (min-width: 768px) {
  .hero-t2 .hx-reel { flex-direction: row; justify-self: center; max-width: 100%; overflow-x: auto; }
  .hero-t2 .hx-reel-i { flex: 0 0 210px; }
}

/* 3 · Brand tint — duotone wash in Primary → Secondary */
.hero-t3 .hx-slide-media { filter: saturate(.55) contrast(1.05); }
.hero-t3 .hx-veil { background: linear-gradient(120deg, color-mix(in srgb, var(--tp) 72%, transparent) 0%, color-mix(in srgb, var(--tp-2) 45%, transparent) 60%, rgba(4,8,18,.2) 100%), linear-gradient(180deg, rgba(4,8,18,0) 55%, rgba(4,8,18,.85)); mix-blend-mode: normal; }

/* 4 · Glass panel — headline inside a frosted card */
.hero-t4 .hx-copies { padding: clamp(22px, 3vw, 38px); border-radius: 28px; background: rgba(8,12,24,.46); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); max-width: 760px; }
.hero-t4 .hx-veil { background: linear-gradient(180deg, rgba(4,8,18,.2), rgba(4,8,18,0) 30%, rgba(4,8,18,.6)); }
.hero-t4 .hx-h { font-size: clamp(2.4rem, 5.2vw, 4.8rem); }

/* 5 · Angled — diagonal bottom edge */
@media (min-width: 768px) { .hero-t5 .hx-hero { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } }
@media (max-width: 767.98px) { .hero-t5 .hx-hero { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); } }

/* 6 · Compact — shorter hero so content starts sooner */
@media (min-width: 768px) {
  .hero-t6 .hx-hero { height: clamp(520px, 74vh, 720px); }
  .hero-t6 .hx-h { font-size: clamp(2.4rem, 5vw, 4.6rem); }
  .hero-t6 .hx-copies { min-height: 280px; }
}
@media (max-width: 767.98px) { .hero-t6 .hx-hero { height: 82svh; min-height: 520px; } }

/* 7 · Editorial split — light paper beside the photograph */
.hero-t7 .hx-hero { background: #f6f4ef; color: var(--tp-ink, #0a1428); }
.hero-t7 .hx-veil, .hero-t7 .hx-grain { display: none; }
.hero-t7 .hx-h { color: #0a1428; text-shadow: none; }
.hero-t7 .hx-lede { color: #56657d; }
.hero-t7 .hx-place { color: #56657d; }
.hero-t7 .hx-cat { background: #0a1428; color: #fff; }
.hero-t7 .hx-btn-light { background: #0a1428; color: #fff; }
.hero-t7 .hx-btn-ghost { color: #0a1428; border-color: rgba(10,20,40,.25); background: transparent; }
.hero-t7 .hx-price-chip { color: #0a1428; } .hero-t7 .hx-price-chip small { color: #8e9ab0; }
.hero-t7 .hx-promo { color: color-mix(in srgb, var(--tp-acc) 75%, #3a2000); }
@media (min-width: 768px) {
  .hero-t7 .hx-stage { left: 46%; border-radius: 0 0 0 48px; overflow: hidden; }
  .hero-t7 .hx-hero-in { grid-template-columns: minmax(0, 44%) 1fr; }
  .hero-t7 .hx-h { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
  .hero-t7 .hx-reel { grid-column: 2; background: rgba(6,10,22,.42); }
  .hero-t7 .hx-dock-title { color: #0a1428; text-shadow: none; }
}
@media (max-width: 767.98px) {
  .hero-t7 .hx-stage { bottom: 46%; border-radius: 0 0 28px 28px; overflow: hidden; }
  .hero-t7 .hx-hero { max-height: none; }
}

/* 8 · Framed — rounded, inset frame */
@media (min-width: 768px) {
  .hero-t8 .hx-hero { margin: 14px 14px 0; border-radius: 34px; height: clamp(580px, calc(100svh - var(--hx-hdr) - 14px), 920px); }
}
@media (max-width: 767.98px) { .hero-t8 .hx-hero { border-radius: 0 0 34px 34px; } }

/* 9 · Aurora mesh — Primary / Secondary / Accent light blend */
.hero-t9 .hx-veil { background:
  radial-gradient(60% 60% at 85% 10%, color-mix(in srgb, var(--tp-2) 60%, transparent), transparent 65%),
  radial-gradient(55% 55% at 10% 90%, color-mix(in srgb, var(--tp) 55%, transparent), transparent 65%),
  radial-gradient(40% 40% at 60% 60%, color-mix(in srgb, var(--tp-acc) 30%, transparent), transparent 70%),
  linear-gradient(180deg, rgba(4,8,18,.25), rgba(4,8,18,.1) 40%, rgba(4,8,18,.85)); }

/* 10 · Noir — monochrome photo, oversized type, accent rule */
.hero-t10 .hx-slide-media { filter: grayscale(1) contrast(1.1) brightness(.85); }
.hero-t10 .hx-veil { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.1) 35%, rgba(0,0,0,.9)); }
.hero-t10 .hx-h { letter-spacing: -.065em; }
.hero-t10 .hx-copy .hx-kicker::before { content: ""; width: 44px; height: 3px; border-radius: 3px; background: var(--tp-acc); }
@media (min-width: 768px) { .hero-t10 .hx-h { font-size: clamp(3rem, 7.4vw, 7rem); } }

/* ======================= FEATURED CARD TEMPLATES =======================
   Styles the "Featured Journeys" section (the home's featured showcase).  */
.hx-journeys { --fc-bg: linear-gradient(180deg, #fff 0%, var(--hx-paper) 100%); --fc-ink: var(--hx-ink); --fc-sub: var(--hx-sub); --fc-acc: var(--tp-acc); background: var(--fc-bg); }
.hx-journeys .hx-title { color: var(--fc-ink); }
.hx-journeys .hx-sub { color: var(--fc-sub); }
.hx-journeys .hx-slab { border-top: 4px solid var(--fc-acc); }
.hx-journeys .hx-ribbon-n { color: var(--fc-acc); }
.featc-t2 .hx-journeys { --fc-bg: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 55%, #fff 100%); --fc-acc: #0ea5e9; }
.featc-t3 .hx-journeys { --fc-bg: linear-gradient(180deg, #fff1e6 0%, #ffe4ef 100%); --fc-acc: #f97316; }
.featc-t4 .hx-journeys { --fc-bg: linear-gradient(180deg, #ecfdf3 0%, #f7fee7 100%); --fc-acc: #16a34a; }
.featc-t5 .hx-journeys { --fc-bg: radial-gradient(80% 60% at 85% 0%, rgba(167,139,250,.35), transparent 60%), linear-gradient(160deg, #1e163f, #2e1f63); --fc-ink: #fff; --fc-sub: rgba(255,255,255,.72); --fc-acc: #a78bfa; }
.featc-t6 .hx-journeys { --fc-bg: linear-gradient(180deg, #fff1f2 0%, #fff7ed 100%); --fc-acc: #f43f5e; }
.featc-t7 .hx-journeys { --fc-bg: radial-gradient(70% 60% at 90% 0%, rgba(34,211,238,.22), transparent 60%), #070b16; --fc-ink: #fff; --fc-sub: rgba(232,238,252,.7); --fc-acc: #22d3ee; }
.featc-t8 .hx-journeys { --fc-bg: linear-gradient(180deg, #ecfdf5 0%, #fdfaf0 100%); --fc-acc: #b8860b; }
.featc-t9 .hx-journeys { --fc-bg: linear-gradient(180deg, #fdf4ff 0%, #f5f3ff 100%); --fc-acc: #d946ef; }
.featc-t10 .hx-journeys { --fc-bg: radial-gradient(60% 70% at 0% 0%, rgba(6,182,212,.18), transparent 60%), radial-gradient(60% 70% at 100% 100%, rgba(139,92,246,.2), transparent 60%), #f8fafc; --fc-acc: #8b5cf6; }
/* dark moods: section chrome turns light-on-dark */
.featc-t5 .hx-journeys .hx-eyebrow, .featc-t7 .hx-journeys .hx-eyebrow { color: var(--fc-acc); }
.featc-t5 .hx-journeys .hx-more, .featc-t7 .hx-journeys .hx-more { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.featc-t5 .hx-journeys .hx-m-prog i, .featc-t7 .hx-journeys .hx-m-prog i { background: rgba(255,255,255,.2); }
.featc-t5 .hx-journeys .hx-m-prog i.is-on, .featc-t7 .hx-journeys .hx-m-prog i.is-on { background: #fff; }
.featc-t5 .hx-journeys .hx-m-count, .featc-t7 .hx-journeys .hx-m-count { color: rgba(255,255,255,.6); }
.featc-t5 .hx-journeys .hx-m-count b, .featc-t7 .hx-journeys .hx-m-count b { color: #fff; }
.hero-t7 .hx-place { background: #fff; padding: 3px 10px; border-radius: 999px; }