/* =========================================================================
   responsive.css — breakpoints
   1440+ desktop · 1200 · 1024 laptop · 900 · 768 tablet · 560 · 390 mobile
   ========================================================================= */

/* ---------- ≥1440px : roomier rhythm ------------------------------------ */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
  .section { padding: 120px 0; }
  .agenda-left { padding: 110px 72px 110px 0; }
}

/* ---------- ≤1200px ------------------------------------------------------ */
@media (max-width: 1200px) {
  .nav a { padding: 8px 10px; font-size: 12px; }
  .speaker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .about-grid .lead { max-width: none; }
}

/* ---------- ≤1024px : laptop / small laptop ----------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .section { padding: 82px 0; }
  .container { padding-inline: 24px; }

  .nav, .header-cta .btn { display: none; }
  .nav-toggle { display: grid; }

  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero-bg { background-position: 72% center; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(3,7,18,.95) 0%, rgba(3,7,18,.78) 46%, rgba(3,7,18,.3) 100%),
      linear-gradient(180deg, rgba(3,7,18,.7) 0%, transparent 28%, rgba(3,7,18,.94) 100%);
  }

  .agenda-layout { grid-template-columns: minmax(0, 1fr); }
  .agenda-left { padding: 0 0 40px; }
  .agenda-media {
    min-height: 320px;
    max-height: none;
    align-self: stretch;
    border-radius: var(--r-lg);
    margin-bottom: 8px;
  }
  .agenda-media::after { background: linear-gradient(180deg, rgba(3,7,18,.55), transparent 45%); }

  .av-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .venue-panel { padding-left: 0; border-left: 0; padding-top: 44px; border-top: 1px solid var(--line-soft); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

/* ---------- ≤900px ------------------------------------------------------- */
@media (max-width: 900px) {
  .speaker-modal-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .speaker-modal-photo { max-width: 220px; }
  .registered-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- ≤768px : tablet --------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 15.5px; }

  .section { padding: 68px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 18px; }

  .hero { min-height: auto; padding: calc(var(--header-h) + 56px) 0 96px; }
  .hero-title { font-size: clamp(38px, 11vw, 58px); }
  /* Give the lockup the full column so its subtitle line stays readable. */
  .hero-lockup { margin-bottom: 26px; }
  .hero-lockup img { width: min(100%, 460px); }
  .hero-meta { gap: 10px 22px; }
  .hero-scroll { display: none; }

  .countdown { margin-bottom: 26px; }
  .countdown-unit { min-width: 72px; padding: 10px 12px 9px; }
  .countdown-value { font-size: 32px; }

  .speaker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-panel { grid-template-columns: minmax(0, 1fr); }
  .venue-image { max-width: 420px; }

  .agenda-item { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .agenda-item::before { top: 17px; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-panel { padding: 26px 20px; border-radius: var(--r-lg); }

  .sticky-cta { display: flex; }
  .back-to-top { bottom: 82px; }
  .admin-fab { bottom: 148px; right: 16px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .footer-brand p { max-width: none; }

  .toast-stack { left: 16px; right: 16px; top: auto; bottom: 92px; }
  .toast { max-width: none; }
}

/* ---------- ≤560px ------------------------------------------------------- */
@media (max-width: 560px) {
  .container { padding-inline: 18px; }

  .highlight-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .highlight-card { min-height: 0; padding: 20px 18px; }
  .highlight-card .icon { margin-bottom: 4px; }
  .highlight-card h3 { margin-top: 14px; }

  .audience-list { grid-template-columns: minmax(0, 1fr); }

  .registered-card { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 22px 20px; }
  .registered-card .icon { width: 56px; height: 56px; }
  .registered-card .icon svg { width: 42px; height: 42px; }

  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { width: 100%; }

  /* Four units no longer fit on one line — wrap them into a 2x2 block. */
  .countdown-unit { flex: 1 1 calc(50% - 5px); min-width: 0; }

  .agenda-actions { flex-direction: column; align-items: stretch; }
  .agenda-actions .btn { width: 100%; }

  .mobile-nav a { font-size: 28px; }

  .cta-band { padding: 68px 0; }
}

/* ---------- ≤390px : small mobile --------------------------------------- */
@media (max-width: 390px) {
  .speaker-grid { grid-template-columns: minmax(0, 1fr); }
  .brand img { height: 34px; }
  .pass-code { width: 190px; height: 190px; }
  .btn { padding: 13px 22px; font-size: 12px; }
}

/* ---------- Short viewports --------------------------------------------- */
@media (max-height: 720px) and (min-width: 1025px) {
  .hero { padding-top: calc(var(--header-h) + 32px); padding-bottom: 48px; }
  .hero-title { font-size: clamp(42px, 5.6vw, 72px); }
  .hero-lockup { margin-bottom: 22px; }
  .hero-lockup img { width: clamp(300px, 40vw, 520px); }
}

/* ---------- Touch devices: no hover-only affordances -------------------- */
@media (hover: none) {
  .cursor-dot, .cursor-glow { display: none !important; }
  .glass-hover:hover, .highlight-card:hover { transform: none; }
  /* The speaker card composes its transform from custom properties, so the
     lift has to be cancelled at the property, not at the transform. */
  .speaker-card:hover { --lift: 0px; }
}

/* ---------- Print -------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .sticky-cta, .back-to-top,
  .admin-fab, .edit-banner, .scroll-progress, .particles,
  .preloader, .countdown { display: none !important; }
  body { background: #fff; color: #000; }
  .hero::after, .hero-bg { display: none; }
}