/* The proof band under the map (founder 2026-10-18: "Do your best design and animations to wow people").

   What this replaces: four stacked strips under the map, each with its own border, holding the
   counter, a legend for two colours, a scrolling list of every country's class time, and the
   search. At the map's full width that read as leftovers rather than as detail.

   What it is now: one panel. On a computer it is two rows.
     row 1   100,000+ students · 98 countries | a new student just joined | next class, your time
     row 2   find your country
   The numbers are the loudest thing on it, because they are the proof the map exists to give.

   Layout only, through the grid hero-clean.css already sets on .hero-map, so every script keeps
   its own nodes and its own behaviour.

   Two widths matter here:
     641px  above the phone bar. The legend and the marquee come off and the band gets its shared
            fill and hairline. Between 641 and 899 .hero-map is not a grid yet (hero-clean.css
            starts that at 900), so the pieces simply stack, which is what a tablet wants anyway.
    1200px  map-hub.js (line 263, matchMedia '(min-width: 1200px)') moves the counter and the
            live line off the map and into .mh-rail. Below that the rail is EMPTY, so the
            side-by-side row only applies from here. Putting it lower leaves the class-time box
            stranded in the right column with nothing beside it.
   At 640px and below map-phone.js moves these pieces into its own bar; nothing here touches that. */

@media (min-width: 641px) {

  /* ---------- What comes off ---------- */

  /* The legend explained two colours and cost a whole row. The gold marker already labels itself
     "United States · Academy HQ" on the map. Full screen keeps both of these. */
  .hero-map:not(.map-fs):not(.mapf-fs) > .map-legend { display: none; }

  /* The scrolling list of every country's class time: clipped at both ends, moving, and it told a
     student in Nigeria what time class starts in Zambia. "Find my class time" beside it does the
     useful version in one click, and the gold pill on the map already covers class day. */
  .hero-map:not(.map-fs):not(.mapf-fs) .map-times-track { display: none; }

  /* ---------- One panel ---------- */

  /* hero-clean.css sets column-gap: 12px for the legend row, which is hidden now. Left in place it
     cuts a 12px slot straight through the middle of the band. */
  .hero-map:not(.map-fs):not(.mapf-fs) { column-gap: 0; }

  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times,
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh {
    grid-column: 1 / -1;
    background: rgba(9, 15, 33, .72);
    border: 1px solid rgba(120, 160, 230, .2);
  }
  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times { margin-top: 20px; border-bottom: 0; max-width: none; }
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh { margin-top: 0; border-top: 0; }

  /* The search icon sits inside the field, so the text has to start clear of it. */
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-bar { padding: 0; }
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-find { width: 100%; }
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-find input {
    background: transparent !important; border: 0 !important;
    padding: 17px 20px 17px 50px; font-size: .95rem;
  }

  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times {
    display: flex; align-items: center; gap: 14px; padding: 14px 24px;
  }
  .hero-map:not(.map-fs):not(.mapf-fs) .map-times-head { font-size: .82rem; white-space: nowrap; }

  /* ---------- The entrance ---------- */

  /* The band arrives after the map, once, then holds still. Nothing on it loops. */
  @media (prefers-reduced-motion: no-preference) {
    .hero-map.is-ready:not(.map-fs):not(.mapf-fs) > .mh-rail,
    .hero-map.is-ready:not(.map-fs):not(.mapf-fs) > .map-times,
    .hero-map.is-ready:not(.map-fs):not(.mapf-fs) > .mh {
      animation: mapBandIn .72s cubic-bezier(.22, .8, .25, 1) both;
      animation-delay: .35s;
    }
    .hero-map.is-ready:not(.map-fs):not(.mapf-fs) > .mh { animation-delay: .46s; }
  }
  @keyframes mapBandIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- From 1200px: the rail has content, so row 1 becomes one line ---------- */
@media (min-width: 1200px) {

  .hero-map:not(.map-fs):not(.mapf-fs) > .mh-rail {
    grid-row: 3; grid-column: 1; margin-top: 20px;
    background: rgba(9, 15, 33, .72);
    border: 1px solid rgba(120, 160, 230, .2); border-right: 0; border-bottom: 0;
  }
  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times { grid-row: 3; grid-column: 2; }
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh { grid-row: 4; }

  /* The globe hides the rail, so the class-time box would sit alone in the right column with an
     empty gap beside it. It takes the whole width instead. */
  .hero-map.globe-on:not(.map-fs):not(.mapf-fs) > .map-times { grid-column: 1 / -1; }

  /* ---------- Row 1: the numbers lead ---------- */

  .hero-map:not(.map-fs):not(.mapf-fs) .mh-rail { grid-auto-rows: minmax(74px, auto); }
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-rail > * { padding: 0 24px; }

  /* map-features.js wraps each figure in its own <strong>, so the numbers can grow without
     touching the words around them, and its count-up still drives the same nodes. */
  .hero-map:not(.map-fs):not(.mapf-fs) .mapf-counter { gap: 14px; }
  .hero-map:not(.map-fs):not(.mapf-fs) .mapf-counter-tx {
    font-size: .82rem; letter-spacing: .02em; color: var(--text-muted, #9fb0d0); line-height: 1.25;
  }
  .hero-map:not(.map-fs):not(.mapf-fs) .mapf-counter-tx strong {
    font-family: var(--font-head, inherit);
    font-size: 1.62rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--text, #fff);
    font-variant-numeric: tabular-nums;   /* the count-up cannot jitter the line */
  }
  .hero-map:not(.map-fs):not(.mapf-fs) .mapf-counter-ic svg { width: 22px; height: 22px; opacity: .8; }

  /* The live line keeps its own weight: it is one real event, not a statistic. */
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-rail > .map-toast { font-size: .92rem; }
}

/* ============================================================================
   The band, ultra premium (founder 2026-10-18: "Also make this container ultra
   premium glow design").

   The band is not one element: it is .mh-rail and .map-times side by side on the
   top row, and .mh underneath, composed into one panel by the rules above. So
   there is nothing to wrap a single travelling border around the way the Code Lab
   container does. The glow is built across the three instead: each piece carries
   the part of the light that falls on it, and the washes are positioned so they
   continue across the seams rather than restarting at each one.
   ============================================================================ */

@media (min-width: 641px) {

  /* Cyan on the left, violet through the middle, a warm edge at the right: one
     light laid across the band, split between the pieces that make it up. */
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh-rail {
    background:
      radial-gradient(90% 180% at 0% 0%, rgba(34, 211, 238, .16), transparent 62%),
      radial-gradient(70% 160% at 100% 100%, rgba(139, 92, 246, .14), transparent 66%),
      linear-gradient(180deg, rgba(12, 18, 40, .95), rgba(8, 12, 26, .96));
    border-color: rgba(120, 165, 255, .24);
  }
  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times {
    background:
      radial-gradient(110% 190% at 100% 0%, rgba(244, 114, 182, .15), transparent 62%),
      radial-gradient(90% 170% at 0% 100%, rgba(139, 92, 246, .13), transparent 66%),
      linear-gradient(180deg, rgba(12, 18, 40, .95), rgba(8, 12, 26, .96));
    border-color: rgba(120, 165, 255, .24);
  }
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh {
    background:
      radial-gradient(60% 300% at 8% 50%, rgba(34, 211, 238, .12), transparent 60%),
      radial-gradient(60% 300% at 92% 50%, rgba(251, 191, 36, .10), transparent 60%),
      linear-gradient(180deg, rgba(10, 15, 34, .95), rgba(8, 12, 26, .96));
    border-color: rgba(120, 165, 255, .24);
    /* The glow hangs off the bottom of the whole band, where it belongs. */
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .05) inset,
      0 34px 76px -48px rgba(139, 92, 246, .85),
      0 18px 48px -40px rgba(34, 211, 238, .7);
  }

  /* One lit edge along the top of the band, handed from the rail to the class-time
     box so it reads as a single line rather than two. */
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh-rail,
  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times { position: relative; }
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh-rail::before,
  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 2; pointer-events: none;
  }
  .hero-map:not(.map-fs):not(.mapf-fs) > .mh-rail::before {
    background: linear-gradient(90deg, transparent, #22d3ee 22%, #6ea8ff 70%, #8b5cf6);
  }
  .hero-map:not(.map-fs):not(.mapf-fs) > .map-times::before {
    background: linear-gradient(90deg, #8b5cf6, #f472b6 55%, #fbbf24 80%, transparent);
  }

  /* The rail's cells must keep an opaque fill: they are stacked in one grid cell so
     the newest message covers the one under it (hero-clean.css). Tinting them keeps
     that cover and still gives them colour, where going transparent would let two
     messages show through each other. */
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-rail > * {
    background: linear-gradient(180deg, #101a3a, #0a0f24) !important;
  }
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-rail > .mapf-counter {
    background: linear-gradient(135deg, #10254d, #0b1430 70%) !important;
  }

  /* The number is the proof, so it takes the light: cyan into violet. */
  .hero-map:not(.map-fs):not(.mapf-fs) .mapf-counter-tx strong {
    background: linear-gradient(100deg, #67e8f9, #a78bfa 60%, #f0abfc);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .hero-map:not(.map-fs):not(.mapf-fs) .mapf-counter-ic svg { color: #67e8f9; opacity: .95; }

  /* "Find my class time" picks up the same gradient instead of the flat accent fill. */
  .hero-map:not(.map-fs):not(.mapf-fs) .ct-open-btn {
    background: linear-gradient(135deg, #22d3ee, #8b5cf6) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -14px rgba(139, 92, 246, .95);
  }

  /* The search lights up when it is being used. */
  .hero-map:not(.map-fs):not(.mapf-fs) .mh-find input:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .55), inset 0 0 26px -6px rgba(34, 211, 238, .45);
  }
}