/* 24Livestream — layout: nav, footer, sections, grids, responsive */

.container{ max-width:var(--maxw); margin:0 auto; }
.section{ padding:var(--sec-y) var(--pad-x); }
.section--tight{ padding:clamp(32px,4vw,56px) var(--pad-x); }
.section-head{ max-width:640px; margin:0 0 44px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.h2{ font-family:var(--font-head); font-weight:700; font-size:clamp(28px,3.6vw,44px); line-height:1.12; letter-spacing:-.4px; margin:0; }
.h1{ font-family:var(--font-head); font-weight:700; font-size:clamp(32px,4.4vw,52px); line-height:1.1; letter-spacing:-.5px; margin:0 0 12px; }
.lead{ color:var(--muted); font-size:16px; line-height:1.6; max-width:560px; margin:0; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.5vw,52px); }

.ratio{ position:relative; }
.ratio--16-11{ aspect-ratio:16/11; }
.ratio--16-10{ aspect-ratio:16/10; }
.ratio--16-9{ aspect-ratio:16/9; }
.ratio--4-5{ aspect-ratio:4/5; }
.ratio--4-3{ aspect-ratio:4/3; }

/* Header / nav */
.site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px var(--pad-x); backdrop-filter:blur(16px); background:var(--glass); border-bottom:1px solid var(--line-1); }
.brand{ display:flex; align-items:center; gap:12px; flex:none; color:inherit; }
.brand__mark{ position:relative; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--brand-grad); box-shadow:0 8px 24px rgba(255,46,99,.35); flex:none; }
.brand__mark span{ width:9px; height:9px; border-radius:50%; background:#fff; animation:livepulse 1.4s infinite; }
.brand__name{ font-family:var(--font-head); font-weight:700; font-size:19px; letter-spacing:.5px; line-height:1; }
.brand__name em{ color:var(--brand-link); font-style:normal; }
.brand__sub{ font-size:10.5px; letter-spacing:3px; color:var(--muted-2); text-transform:uppercase; margin-top:3px; }

.nav-right{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:8px; min-width:0; }
.nav-drawer{ display:flex; align-items:center; gap:8px; min-width:0; }
.nav-menu{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:4px; list-style:none; margin:0; padding:0; }
.nav-book{ margin-left:4px; flex:none; }
/* Language dropdown */
.lang-dd{ position:relative; flex:none; margin-left:4px; }
.lang-dd__toggle{ display:flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line-3); border-radius:var(--r-pill); background:var(--fill-2); color:var(--text); font-weight:600; font-size:13px; cursor:pointer; }
.lang-dd__toggle:hover{ background:var(--fill-3); border-color:var(--line-4); }
.lang-dd__globe{ color:var(--muted-2); flex:none; }
.lang-dd__current{ line-height:1; }
.lang-dd__caret{ color:var(--muted-2); transition:transform .18s; }
.lang-dd.is-open .lang-dd__caret{ transform:rotate(180deg); }
.lang-dd__menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:150px; margin:0; padding:6px; list-style:none;
  background:var(--surface-2); border:1px solid var(--line-3); border-radius:14px; box-shadow:var(--shadow-float); z-index:60; }
.lang-dd__menu[hidden]{ display:none; }
.lang-dd__opt{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 12px; border:none; border-radius:9px;
  background:transparent; color:var(--text-2); font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer; text-align:left; }
.lang-dd__opt:hover{ background:var(--fill-2); color:var(--text); }
.lang-dd__opt.is-active{ color:var(--brand-link); }
.lang-dd__check{ opacity:0; flex:none; }
.lang-dd__opt.is-active .lang-dd__check{ opacity:1; }

.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line-3); border-radius:12px; background:var(--fill-2); color:var(--text); flex:none; cursor:pointer; }
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle__close{ display:none; }
.site-header.nav-open .nav-toggle__open{ display:none; }
.site-header.nav-open .nav-toggle__close{ display:block; }
.site-header.nav-open .nav-toggle{ background:var(--fill-3, rgba(255,255,255,.06)); color:var(--brand-link); }

/* Footer */
.site-footer{ border-top:1px solid var(--line-1); padding:clamp(40px,5vw,56px) var(--pad-x) 32px; background:var(--surface-1); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
.footer-col h4{ font-family:var(--font-body); font-weight:600; font-size:14px; margin:0 0 14px; color:var(--text-3); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-col a{ color:var(--muted-2); }
.footer-col a:hover{ color:var(--brand-link); }
.footer-about{ color:var(--muted-2); font-size:14px; line-height:1.6; max-width:280px; margin:0; }
.footer-bottom{ border-top:1px solid var(--line-1); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); }
.footer-legal{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-legal a{ color:var(--muted-2); }
.footer-legal a:hover{ color:var(--brand-link); }
.footer-mark{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-mark .m{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--brand-grad); }
.footer-mark .m span{ width:7px; height:7px; border-radius:50%; background:#fff; }

/* Section eyebrow header with action */
.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; }

/* Responsive */
@media (max-width:1024px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}

/* Collapse the primary nav into a hamburger drawer on tablet/mobile. */
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }

  /* Drawer: single panel anchored to the bottom edge of the sticky header. */
  .nav-drawer{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:6px;
    padding:14px var(--pad-x) 20px;
    background:var(--surface-1); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-2);
    box-shadow:0 24px 48px rgba(20,22,45,.16);
    max-height:calc(100dvh - 100%); overflow-y:auto;
    overscroll-behavior:contain;
  }
  .site-header.nav-open .nav-drawer{ display:flex; }

  .nav-drawer .nav-menu{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:2px; width:100%; }
  .nav-drawer .nav-item{ width:100%; }
  .nav-drawer .nav-link{ display:block; text-align:left; font-size:16px; padding:14px 16px; border-radius:12px; }
  .nav-drawer .nav-link:hover,
  .nav-drawer .nav-link.is-active{ background:var(--fill-2); }
  .nav-drawer .nav-book{ display:flex; justify-content:center; width:100%; margin:8px 0 0; padding:14px; font-size:15px; }
}

@media (max-width:760px){
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; }
  .brand__sub{ display:none; }
}