/* ============================================================
   Arena — mobile / responsive overrides
   The site's layout lives almost entirely in inline styles, which
   media queries can't reach directly. These rules use attribute
   selectors + !important (important author rules beat non-important
   inline styles) plus the existing shared classes to make every page
   adapt down to phone widths. Loaded on every page via <helmet>.
   ============================================================ */

/* Keep media from overflowing their columns. (No overflow-x:hidden on html/body —
   that forces overflow-y:auto on the root and breaks vertical scrolling. The layout
   has no horizontal overflow to clip anyway.) */
img, svg, video, iframe { max-width: 100%; }

/* =====================  TABLET & BELOW  (<= 900px)  ===================== */
@media (max-width: 900px) {
  /* Entrance animations slide in horizontally (translateX ±48px), which pushes
     content past the right edge and creates a small horizontal scroll on narrow
     screens. Switch them to a vertical reveal so nothing overflows sideways. */
  .anim-left, .anim-right { transform: translateY(28px) !important; }
  .anim-left.visible, .anim-right.visible { transform: none !important; }

  /* Collapse every multi-column grid to a single column.
     (Small fixed grids like "56px 1fr" avatar rows are intentionally left alone.) */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.5fr"],
  [style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* "YOUR NETWORK / Relationships" section is graphic-left, text-right (1.1fr 1fr).
     When stacked, put the text ABOVE the graphic to match the other alternating
     sections (which are text-first). */
  [style*="grid-template-columns: 1.1fr 1fr"] { display: grid; }
  [style*="grid-template-columns: 1.1fr 1fr"] > :nth-child(1) { order: 2 !important; }
  [style*="grid-template-columns: 1.1fr 1fr"] > :nth-child(2) { order: 1 !important; }

  /* Footer: instead of one long single column, use a 2x2 grid of link groups with
     the brand block spanning the full width on top. (Overrides the stack-to-1fr above.) */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] > :nth-child(1) { grid-column: 1 / -1; }
}

/* =====================  PHONE  (<= 640px)  ===================== */
@media (max-width: 640px) {

  /* --- Section side padding: 48/64/80px gutters -> 20px --- */
  [style*="px 48px"],
  [style*="px 64px"],
  [style*="px 80px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Scale oversized display headings down --- */
  [style*="54px/"],
  [style*="52px/"],
  [style*="48px/"] { font-size: 32px !important; }
  [style*="42px/"],
  [style*="40px/"] { font-size: 28px !important; }
  [style*="36px/"],
  [style*="34px/"] { font-size: 25px !important; }
  [style*="32px/"] { font-size: 24px !important; }

  /* --- Let centered CTA button rows wrap instead of overflowing --- */
  [style*="justify-content: center"][style*="gap: 14px"],
  [style*="justify-content: center"][style*="gap: 16px"],
  [style*="justify-content: center"][style*="gap: 12px"] { flex-wrap: wrap; }
  .cta-btn, .cta-btn-outline { justify-content: center; }

  /* --- Marquee: a touch tighter --- */
  .marquee-track { gap: 36px !important; }

  /* --- Featured event card: stack date / details into rows (was a cramped 3-col row) --- */
  .evt-feature {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .evt-feature > svg { display: none; }   /* whole card is tappable; drop the side arrow */
}

/* =====================  MOBILE NAV / HAMBURGER  (<= 767px)  =====================
   The header nav has two direct child <div>s: nth-of-type(1) = logo + <nav> links,
   nth-of-type(2) = Login + Apply. On mobile we `display:contents` the first div so
   the logo and the links become flex siblings of the actions and the injected
   hamburger button, then collapse the links + actions into a dropdown toggled by
   `.arena-nav.open` (set by the click handler in support.js). */
.arena-hamburger { display: none; }   /* desktop: no hamburger */

@media (max-width: 767px) {
  .arena-nav { padding: 12px 16px !important; flex-wrap: wrap; align-items: center; }

  /* unnest the logo group -> logo & links become direct flex items
     (!important beats the inline display:flex on these elements) */
  .arena-nav > div:nth-of-type(1) { display: contents !important; }

  /* larger logo, pinned first */
  .arena-nav img[src*="arena-logo"] { height: 34px !important; }
  .arena-nav > div:nth-of-type(1) > img,
  .arena-nav > div:nth-of-type(1) > a { order: 1; }

  /* hamburger button, pinned to the right of row 1 */
  .arena-hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; box-sizing: border-box;
    background: transparent; border: 0; cursor: pointer; order: 2; margin-left: auto;
  }
  .arena-hamburger span {
    display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .arena-nav.open .arena-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .arena-nav.open .arena-hamburger span:nth-child(2) { opacity: 0; }
  .arena-nav.open .arena-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* collapsed by default: links (order 3) and actions (order 4) as full-width rows */
  .arena-nav > div:nth-of-type(1) > nav {
    order: 3; flex-basis: 100%; width: 100%; display: none !important;
    flex-direction: column; gap: 0;
    margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.12);
  }
  .arena-nav > div:nth-of-type(2) {
    order: 4; flex-basis: 100%; width: 100%; display: none !important;
    flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px;
  }

  /* open state reveals the dropdown */
  .arena-nav.open > div:nth-of-type(1) > nav,
  .arena-nav.open > div:nth-of-type(2) { display: flex !important; }

  /* tap-friendly rows */
  .arena-nav > div:nth-of-type(1) > nav a {
    padding: 14px 2px; font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .arena-nav > div:nth-of-type(2) > a { padding: 13px; text-align: center; }
  .arena-nav > div:nth-of-type(2) > a.cta-btn { justify-content: center; }
}

/* =====================  SMALL PHONE  (<= 400px)  ===================== */
@media (max-width: 400px) {
  [style*="54px/"],
  [style*="52px/"],
  [style*="48px/"] { font-size: 28px !important; }
  [style*="px 48px"],
  [style*="px 64px"],
  [style*="px 80px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}