/* Responsive layer for the Level 1 Games mockup.
   The pages are a design-tool export: every rule lives in an inline style
   attribute, which React applies as an element style. Stylesheet rules lose
   to those on specificity, so overrides here need !important — it is the
   mechanism, not a code smell. Elements carry l1-* classes added to the
   markup purely as hooks for this file.

   Breakpoints: 900px collapses multi-column grids, 640px is phone tuning. */

/* ── Shared: header ──────────────────────────────────────────────────── */

/* Logo (5.61:1) + five nav links + the shop button do not fit one row below
   ~930px, so the nav drops to its own full-width row for the whole range
   rather than only on phones — at 768 a single row overflowed by 15px. */
@media (max-width: 900px) {
  .l1-hdr { flex-wrap: wrap !important; padding: 12px 18px 0 !important; gap: 12px !important; }
  .l1-logo { height: 40px !important; }
  .l1-hdr-cta { font-size: 13px !important; padding: 10px 15px !important; }
  .l1-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 6px !important;
    font-size: 14px !important;
    padding: 10px 0 9px;
    border-top: 1px solid rgba(158, 209, 60, .12);
  }
}

@media (max-width: 640px) {
  /* Row one is logo + shop button, row two the nav. Five short links fit a
     320px viewport at this size, so no hamburger is needed. 32px keeps the
     logo at ~179px, leaving room for the button beside it. */
  .l1-hdr { padding: 10px 14px 0 !important; gap: 10px !important; }
  .l1-logo { height: 32px !important; }
  .l1-hdr-cta { font-size: 12px !important; padding: 8px 12px !important; letter-spacing: .01em !important; }
  .l1-nav { gap: 4px !important; font-size: 13px !important; padding: 9px 0 8px; margin-top: 2px; }
}

@media (max-width: 360px) {
  .l1-nav { font-size: 12px !important; }
  .l1-logo { height: 28px !important; }
  .l1-hdr-cta { font-size: 10px !important; padding: 7px 9px !important; }
}

/* ── Shared: page hero (Events, Contact) ─────────────────────────────── */

@media (max-width: 640px) {
  .l1-pagehero { padding: 34px 18px 30px !important; }
  .l1-pagehero-h1 { font-size: 32px !important; }
  .l1-pagehero-p { font-size: 16px !important; }
}

/* ── Shared: footer ──────────────────────────────────────────────────── */

/* Widest breakpoint first: these blocks have equal specificity, so at 390px
   both match and the later one wins regardless of viewport. */
@media (max-width: 900px) {
  .l1-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
}

@media (max-width: 640px) {
  .l1-footbar { padding: 22px 18px !important; gap: 10px !important; font-size: 12px !important; }
  .l1-foot-grid { grid-template-columns: 1fr !important; gap: 30px !important; padding: 38px 18px 24px !important; }
  /* Grid tracks are min-content by default; the shop email is long enough to
     force a track wider than the phone if it is not allowed to wrap. */
  .l1-foot-grid > div { min-width: 0; overflow-wrap: anywhere; }
  /* The footer logo is sized by height (56px x 5.61 aspect = 314px wide),
     which is wider than the content box on a 320px screen. */
  .l1-foot-grid img { height: 46px !important; max-width: 100% !important; }
}

/* ── Events: calendar ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* The core fix: stop forcing calendar and detail panel side by side. */
  .l1-cal-grid { grid-template-columns: 1fr !important; gap: 18px !important; padding: 30px 18px 24px !important; }
  .l1-cal-side { position: static !important; }
}

@media (max-width: 640px) {
  .l1-cal-grid { padding: 22px 12px 20px !important; }
  .l1-cal-card { padding: 16px 11px 18px !important; }
  .l1-cal-side { padding: 18px 16px !important; }
  .l1-cal-month { font-size: 19px !important; }
  .l1-cal-nav-btn { width: 38px !important; height: 38px !important; }

  /* Seven columns have to survive a ~320px content box, so tighten the
     gutters and cell padding rather than letting the grid overflow. */
  .l1-cal-dow, .l1-cal-cells { gap: 5px !important; }
  .l1-cal-dow div { font-size: 10px !important; letter-spacing: .02em !important; }
  .l1-cal-cells button {
    min-height: 46px !important;
    padding: 7px 0 5px !important;
    gap: 3px !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .l1-cal-cells button > span:first-child { font-size: 13px !important; }

  .l1-cal-legend { gap: 10px 14px !important; margin-top: 16px !important; padding-top: 15px !important; }
  .l1-cal-legend div { font-size: 12px !important; }

  .l1-banner { padding: 16px 18px 0 !important; }
}

@media (max-width: 360px) {
  .l1-cal-dow, .l1-cal-cells { gap: 3px !important; }
  .l1-cal-cells button { min-height: 42px !important; }
  .l1-cal-cells button > span:first-child { font-size: 12px !important; }
}

/* ── Events / Home: closing call-to-action band ──────────────────────── */

@media (max-width: 640px) {
  .l1-cta-band { padding: 26px 20px !important; gap: 20px !important; }
  .l1-cta-band h3 { font-size: 22px !important; }
  .l1-cta-band p { font-size: 15px !important; }
  .l1-cta-actions { width: 100%; }
  .l1-cta-actions a { flex: 1 1 100%; text-align: center; }
}

/* ── Home ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .l1-hero { grid-template-columns: 1fr !important; gap: 34px !important; padding: 52px 20px 58px !important; }
  .l1-week-card, .l1-buy-card { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .l1-hero { padding: 34px 18px 44px !important; gap: 28px !important; }
  .l1-hero-h1 { font-size: 34px !important; }
  .l1-hero-p { font-size: 16px !important; margin-bottom: 26px !important; }
  .l1-hero-actions a { flex: 1 1 100%; text-align: center; }
  .l1-hero-stats { gap: 24px !important; margin-top: 32px !important; }

  /* 4/5 portrait is nearly a full phone screen once it goes full width. */
  .l1-hero-artbox { aspect-ratio: 4 / 3 !important; }
  .l1-hero-badge { left: 10px !important; bottom: -14px !important; padding: 11px 14px !important; }

  .l1-sec { padding-left: 18px !important; padding-right: 18px !important; }
  .l1-week-card { padding: 26px 18px !important; gap: 26px !important; }
  .l1-week-h2 { font-size: 26px !important; }
  .l1-buy-card { padding: 30px 20px !important; gap: 26px !important; }
  .l1-buy-h2 { font-size: 28px !important; }
  .l1-buy-p { font-size: 15px !important; }
  .l1-buy-actions a { flex: 1 1 100%; text-align: center; }
  .l1-buy-tiles { gap: 10px !important; }
  .l1-buy-tiles > div { padding: 14px !important; }
  .l1-banner-strip { font-size: 12px !important; padding: 12px 16px !important; }
}

/* ── Contact ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .l1-contact-grid { grid-template-columns: 1fr !important; gap: 18px !important; padding: 32px 18px 20px !important; }
}

@media (max-width: 640px) {
  .l1-contact-grid { padding: 24px 14px 16px !important; }
  .l1-contact-tiles { grid-template-columns: 1fr !important; gap: 14px !important; }
  .l1-form-card { padding: 22px 16px !important; }
  .l1-form-row { grid-template-columns: 1fr !important; gap: 15px !important; }

  /* iOS Safari zooms the page when a focused control is under 16px. */
  .l1-form-card input,
  .l1-form-card select,
  .l1-form-card textarea { font-size: 16px !important; }

  .l1-map-sec { padding: 28px 18px 24px !important; }
  .l1-map { height: 280px !important; }
  .l1-map-h2 { font-size: 24px !important; }
}