/* ==========================================================================
   ICEEECS — responsive rules (desktop-first)
   Tested widths: 1920 · 1440 · 1280 · 1024 · 768 · 430 · 390 · 360
   ========================================================================== */

@media (min-width: 1680px) {
  :root { --container: 1320px; }
  .hero { min-height: 580px; }
}

@media (max-width: 1280px) {
  .menu-link { padding: 0 8px; font-size: .9rem; }
  .menu-link::after { left: 8px; right: 8px; }
  .brand-logo { height: 44px; }
  .header-inner { gap: 16px; }
  .primary-nav { gap: 8px; }
  .header-cta { font-size: .82rem; padding-inline: .9em; }
  .hv-chip-4 { display: none; }
}

/* ---------- Mobile navigation (hamburger) ---------- */
@media (max-width: 950px) {
  :root { --header-h: 68px; }
  /* backdrop-filter would trap the fixed menu panel inside the header */
  .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .brand-logo { height: 46px; }
  .nav-toggle {
    display: inline-grid; place-items: center; margin-left: auto;
    width: 46px; height: 46px; border: 1px solid var(--gray-200); border-radius: var(--radius);
    background: #fff; cursor: pointer; color: var(--navy);
  }
  .nav-toggle-box { position: relative; display: grid; gap: 5px; width: 22px; }
  .nav-toggle-box span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .primary-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 99;
    display: flex; flex-direction: column; align-items: stretch; gap: 20px;
    padding: 16px var(--gutter) 32px; background: #fff; overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid var(--gray-150);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .primary-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  body.nav-open { overflow: hidden; }

  .menu { flex-direction: column; height: auto; margin: 0; gap: 0; }
  .menu-item { flex-direction: column; border-bottom: 1px solid var(--gray-150); }
  .menu-link { justify-content: space-between; width: 100%; min-height: 54px; padding: 0 4px; font-size: 1.02rem; font-weight: 600; }
  .menu-link::after { display: none; }
  .menu-item.is-active > .menu-link { box-shadow: inset 3px 0 0 var(--orange); padding-left: 12px; }
  .dropdown {
    position: static; min-width: 0; padding: 0 0 10px 12px; border: 0; box-shadow: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none; display: none; transition: none;
  }
  .dropdown::before { display: none; }
  .has-dropdown.is-open > .dropdown { display: block; }
  .dropdown a { padding: 11px 12px; font-size: .96rem; }
  .header-cta { width: 100%; min-height: 50px; font-size: .95rem; }
}

@media (max-width: 1100px) {
  .track-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .hero-inner { grid-template-columns: minmax(0, 560px) 1fr; }
  .hv-chip-1 { left: 36%; }
}

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-col { padding-right: 0; }
  .split-col + .split-col { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--gray-200); }
  .about-grid { gap: 32px; }
  .footer-nav { flex-shrink: 1; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-body.has-aside { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .section { padding: 48px 0; }

  /* Hero: text → visual → buttons */
  .hero { min-height: 0; }
  .hero::before { background: none; }
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "visual" "actions";
    padding-top: 40px; padding-bottom: 40px;
  }
  .hero-visual {
    grid-area: visual; position: relative; inset: auto; left: auto;
    height: clamp(220px, 46vw, 340px); margin-top: 28px; border-radius: var(--radius-lg); overflow: hidden;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-visual--fallback { left: auto; }
  .hero-actions { margin-top: 24px; }
  .hv-globe { width: 70%; right: -14%; top: -40%; }
  .hv-skyline { left: 0; padding-left: 4%; height: 50%; }
  .hv-chip-1 { top: 16%; left: 6%; }
  .hv-chip-2 { top: 40%; right: 6%; }
  .hv-chip-3 { top: auto; bottom: 14%; left: 14%; }

  .about-grid { grid-template-columns: 1fr; }
  .about-card { min-height: 170px; }

  .trust-group { padding: 0 20px; }

  .page-body.has-aside { grid-template-columns: 1fr; }
  .cfp-top.has-poster { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
  .page-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  .archive-item { grid-template-columns: 140px 1fr; }
}

@media (max-width: 760px) {
  .edition-grid { grid-template-columns: 1fr; gap: 12px; }
  .edition-card { min-height: 104px; }
  .final-cta-inner { flex-direction: column; align-items: flex-start; padding-left: var(--gutter); gap: 24px; }
  .section-head { flex-wrap: wrap; }
  .member-list li { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .member-list .member-meta { grid-column: 1; grid-row: 2; }
  .member-list .member-links { grid-column: 2; grid-row: 1 / span 2; }
  .schedule-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: .98rem; }
  .brand-logo { height: 42px; }

  .hero-inner { padding-top: 32px; padding-bottom: 32px; }
  .eyebrow { letter-spacing: .22em; font-size: .74rem; }
  .hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-meta li + li::before { display: none; }
  .hero-badges li { font-size: .8rem; padding: 5px 12px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hv-chip { font-size: .78rem; padding: 8px 12px 8px 8px; }
  .hv-chip .bi { width: 28px; height: 28px; font-size: .95rem; }
  .hv-chip-3 { display: none; }

  /* Announcements: one item per line, wrapping instead of cutting off */
  .announce-inner { align-items: flex-start; gap: 10px; padding-top: 9px; padding-bottom: 9px; }
  .announce-label span { display: none; }
  .announce-label { padding: 5px 8px; }
  .announce-list { flex-direction: column; align-items: flex-start; gap: 6px; white-space: normal; overflow: visible; }
  .announce-item { display: block; font-size: .84rem; line-height: 1.4; }
  .announce-item + .announce-item::before { display: none; }
  .announce-new { margin-right: 6px; }
  .trust-row { flex-direction: column; margin-left: 0; row-gap: 0; }
  .trust-group { padding: 0; border-left: 0; }
  .trust-group + .trust-group { padding-top: 16px; border-top: 1px solid var(--gray-200); }

  .about-cards { grid-template-columns: 1fr 1fr; }
  .about-card { min-height: 150px; }
  .about-card-body { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; font-size: .85rem; }
  .about-card-icon { font-size: 1.5rem; }

  .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track-card { padding: 18px 10px 16px; }

  /* Timeline → vertical */
  .timeline { grid-template-columns: 1fr; padding-top: 0; }
  .timeline-step { display: grid; grid-template-columns: 22px 1fr; column-gap: 16px; align-items: start; text-align: left; padding: 0 0 22px; }
  .timeline-step::before { top: 22px; left: 10px; width: 2px; height: 100%; }
  .timeline-dot { grid-row: 1 / span 3; margin: 0; }
  .timeline-label { margin-bottom: 2px; min-height: 0; justify-content: flex-start; }
  .timeline-step:last-child { padding-bottom: 0; }

  .pub-cards { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .why-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .footer-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-nav li { padding: 0 10px; }
  .footer-nav ul { margin-left: -11px; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }

  .page-header { padding: 24px 0 28px; }
  .page-body { padding-top: 32px; padding-bottom: 48px; }
  .callout { padding: 20px; }
  .callout .btn { width: 100%; }
  .callout-light { flex-direction: column; }
  .track-block { padding: 18px; }
  .topic-list { columns: 1; }
  .archive-item { grid-template-columns: 1fr; }
  .cfp-top.has-poster { grid-template-columns: 1fr; }
  .cfp-poster { max-width: 420px; margin-left: auto; margin-right: auto; }
  .archive-badge { flex-direction: row; align-items: baseline; gap: 12px; padding: 16px 20px; }
  .archive-year { font-size: 1.6rem; }
  .archive-body { padding: 18px 20px; }
  .data-table th, .data-table td { padding: 12px 14px; }
  .speaker-card { flex-direction: column; }
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .cookie-banner p { flex: none; font-size: .86rem; }
  .cookie-actions { flex-wrap: nowrap; }
  .cookie-actions .btn { flex: 1; min-height: 40px; padding: .4em .6em; font-size: .8rem; }
}

@media (max-width: 380px) {
  .brand-logo { height: 38px; }
  .about-cards { grid-template-columns: 1fr; }
  .why-grid { gap: 24px 12px; }
  .why-item h3 { font-size: .98rem; }
  .track-card { font-size: .82rem; }
}
