/* =========================================================================
   AnimateJA — responsive layer
   -------------------------------------------------------------------------
   Loaded after tokens.css. Desktop (> 980px) is untouched: every rule in
   this file lives inside a max-width media query, so the original layout,
   colours, typography and spacing stay exactly as designed on large
   screens. Below that, the same design is re-flowed for tablets and phones.
   ========================================================================= */

/* ---------- Tablet & below ------------------------------------------- */
@media (max-width: 980px) {
  /* Words wrap whole instead of letter-by-letter. The previous
     `overflow-wrap: anywhere` let flex items collapse to one character
     wide (e.g. "S h i p  t o", "Histor y", "REGIS TER"). `break-word`
     still prevents overflow but keeps whole words when there is room. */
  .aja .display,
  .aja h1,
  .aja h2,
  .aja h3,
  .aja h4,
  .aja p,
  .aja .chip,
  .aja .btn,
  .aja a {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Inline flex rows may wrap onto a second line instead of squeezing. */
  .aja [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="nowrap"]) {
    flex-wrap: wrap;
  }

  .aja-flow-section-head {
    flex-wrap: wrap;
  }

  /* Hero headlines scale with the viewport on tablets so words such as
     "GATEWAY" and "JAMAICA." stay whole inside two-column heroes. */
  .aja [style*="font-size: 120px"] { font-size: clamp(56px, 11vw, 120px) !important; }
  .aja [style*="font-size: 96px"],
  .aja [style*="font-size: 92px"],
  .aja [style*="font-size: 88px"] { font-size: clamp(48px, 8.5vw, 96px) !important; }
  .aja [style*="font-size: 84px"],
  .aja [style*="font-size: 80px"] { font-size: clamp(46px, 8.5vw, 84px) !important; }

  /* Four-column event/ticket rows become 2 x 2 on tablets. */
  .aja [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Product page: gallery on top, details below, on tablets too. */
  .aja section[style*="grid-template-columns: 1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .aja section[style*="grid-template-columns: 1.1fr 1fr"] > div:first-child {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
}

/* ---------- Phones ---------------------------------------------------- */
@media (max-width: 700px) {
  /* Oversized hero headlines scale with the screen so long words such as
     "ANIMANIA" fit on one line instead of breaking mid-word. */
  .aja [style*="font-size: 120px"] { font-size: clamp(44px, 15vw, 120px) !important; }
  .aja [style*="font-size: 96px"],
  .aja [style*="font-size: 92px"] { font-size: clamp(40px, 13vw, 96px) !important; }
  .aja [style*="font-size: 88px"],
  .aja [style*="font-size: 84px"],
  .aja [style*="font-size: 80px"] { font-size: clamp(38px, 12vw, 84px) !important; }
  .aja [style*="font-size: 72px"],
  .aja [style*="font-size: 64px"] { font-size: clamp(34px, 11vw, 64px) !important; }

  /* Product gallery: main image first, thumbnails as a scrollable strip
     underneath (instead of stacking full-size thumbnails above it). */
  .aja [style*="grid-template-columns: 88px 1fr"] {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 10px !important;
  }
  .aja [style*="grid-template-columns: 88px 1fr"] > div:first-child {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .aja [style*="grid-template-columns: 88px 1fr"] > div:first-child::-webkit-scrollbar { display: none; }
  .aja [style*="grid-template-columns: 88px 1fr"] > div:first-child > * {
    flex: 0 0 64px;
    width: 64px !important;
  }

  /* Quantity stepper + action button sit side by side. */
  .aja [style*="grid-template-columns: 160px 1fr"] {
    grid-template-columns: 128px minmax(0, 1fr) !important;
  }

  /* Table-style rows: drop the column-header row (its labels would stack
     vertically) and lay each data row out as a compact two-column card. */
  .aja [style*="grid-template-columns: 1fr 1.4fr 1fr 1.2fr 100px"][style*="text-transform: uppercase"] {
    display: none !important;
  }
  .aja [style*="grid-template-columns: 1fr 1.4fr 1fr 1.2fr 100px"] {
    grid-template-columns: 1fr auto !important;
    gap: 6px 12px !important;
  }
  .aja [style*="grid-template-columns: 1fr 1.4fr 1fr 1.2fr 100px"] > :nth-child(even) { justify-self: end; text-align: right; }
  .aja [style*="grid-template-columns: 1fr 1.4fr 1fr 1.2fr 100px"] > :last-child {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  /* Four-up stat / ticket rows become a tidy 2 x 2. */
  .aja [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .aja section[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Event countdown boxes stay on a single row. */
  .aja div:has(> [style*="min-width: 60px"][style*="padding: 10px 14px"]) {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .aja [style*="min-width: 60px"][style*="padding: 10px 14px"] {
    flex: 1 1 0;
    min-width: 0 !important;
    padding: 8px 6px !important;
    text-align: center;
  }

  /* Sponsorship tier matrix: keep it a real table and let it scroll
     sideways inside its own frame rather than collapsing into a list. */
  .aja :has(> [style*="grid-template-columns: 220px repeat(4, 1fr)"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .aja [style*="grid-template-columns: 220px repeat(4, 1fr)"] {
    grid-template-columns: 130px repeat(4, minmax(86px, 1fr)) !important;
    min-width: 474px;
  }

  /* Small icon + text + action rows keep their shape. */
  .aja [style*="grid-template-columns: 44px 1fr auto"] {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
  }
  .aja [style*="grid-template-columns: 60px 1fr 60px"] {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  }

}

/* ---------- Small phones -------------------------------------------- */
@media (max-width: 380px) {
  .aja [style*="grid-template-columns: 160px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}