/* ============================================================
   Time to Train Foundation - Mobile Responsive Overrides
   Applies on small screens to override the inline styles
   used throughout the React JSX pages.
   ============================================================ */

/* ---------- Accessibility: visible keyboard focus (all screens) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #F0A500 !important;
  outline-offset: 2px !important;
}

/* ---------- Small tablets (<= 1024px): partial grid collapse ---------- */
@media (max-width: 1024px) {
  /* 5-column sponsor tier ladder becomes 2 columns on tablet */
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 4-column program quick-jump cards become 2 columns on tablet */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Section padding tighter */
  section { padding-left: 32px !important; padding-right: 32px !important; }
  nav { padding-left: 24px !important; padding-right: 24px !important; }
  footer { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ---------- Phones (<= 768px): full responsive ---------- */
@media (max-width: 768px) {

  /* ---- Global section padding ---- */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* ---- Navigation ---- */
  nav {
    padding: 12px 16px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  nav img { height: 40px !important; }
  nav a {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }
  nav > div {
    gap: 10px !important;
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  nav > div > a[style*="background"] {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }

  /* ---- Footer ---- */
  footer {
    padding: 36px 20px 20px !important;
  }
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
  }
  footer img { height: 56px !important; }
  footer > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ---- Grids: collapse multi-column layouts ---- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1.3fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 0.9fr 1.4fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1.6fr 100px"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 110px 1fr"],
  [style*="grid-template-columns: 120px 1fr"],
  [style*="grid-template-columns: 160px 1fr"],
  [style*="grid-template-columns: 160px 1fr 200px"],
  [style*="grid-template-columns: 160px 1.6fr"],
  [style*="grid-template-columns: 60px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Keep small structural grids alone (auto 1fr, 20px 1fr, 40px 1fr) */

  /* ---- Headings and big display type ---- */
  h1 { font-size: 44px !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: 32px !important; line-height: 1.05 !important; letter-spacing: -0.015em !important; }
  h3 { font-size: 24px !important; line-height: 1.1 !important; }

  /* Specific giant font sizes from inline styles */
  [style*="font-size: 104px"] { font-size: 44px !important; line-height: 1 !important; }
  [style*="font-size: 96px"]  { font-size: 56px !important; }
  [style*="font-size: 88px"]  { font-size: 42px !important; }
  [style*="font-size: 80px"]  { font-size: 44px !important; }
  [style*="font-size: 64px"]  { font-size: 32px !important; }
  [style*="font-size: 60px"]  { font-size: 30px !important; }
  [style*="font-size: 56px"]  { font-size: 28px !important; }
  [style*="font-size: 52px"]  { font-size: 28px !important; }
  [style*="font-size: 40px"]  { font-size: 24px !important; }
  [style*="font-size: 34px"]  { font-size: 22px !important; }
  [style*="font-size: 32px"]  { font-size: 22px !important; }
  [style*="font-size: 26px"]  { font-size: 18px !important; }
  [style*="font-size: 24px"]  { font-size: 18px !important; }
  [style*="font-size: 22px"]  { font-size: 17px !important; }
  [style*="font-size: 20px"]  { font-size: 17px !important; }
  [style*="font-size: 19px"]  { font-size: 16px !important; }
  [style*="font-size: 18px"]  { font-size: 15px !important; }

  /* Quote mark giant */
  [style*="font-size: 140px"] { font-size: 60px !important; }

  /* ---- Homepage hero (video background) ---- */
  section[style*="min-height: 720"] {
    min-height: 520px !important;
  }
  /* Inner padding of the hero text content */
  section[style*="min-height: 720"] > div[style*="padding: 100px 56px"] {
    padding: 48px 20px !important;
  }

  /* ---- Letter card on homepage ---- */
  [style*="padding: 48px 52px"] { padding: 28px 24px !important; }
  [style*="padding: 44px 48px"] { padding: 28px 24px !important; }
  [style*="padding: 56px 56px"] { padding: 32px 24px !important; }
  [style*="padding: 40px 40px"] { padding: 28px 22px !important; }
  [style*="padding: 36px"]      { padding: 24px !important; }
  [style*="padding: 32px 32px"] { padding: 24px !important; }
  [style*="padding: 32px 24px"] { padding: 22px 18px !important; }
  [style*="padding: 32px 28px"] { padding: 22px 20px !important; }
  [style*="padding: 28px"]      { padding: 22px !important; }
  [style*="padding: 22px 28px"] { padding: 16px 20px !important; }

  /* ---- Buttons and CTAs: full-width touch friendly ---- */
  a[style*="padding: 18px 32px"],
  a[style*="padding: 20px 32px"],
  a[style*="padding: 16px 26px"] {
    display: inline-block !important;
    padding: 16px 24px !important;
    font-size: 12px !important;
  }
  /* CTA band right-aligned button row, stack to left */
  [style*="justify-content: flex-end"] {
    justify-content: flex-start !important;
  }
  [style*="text-align: right"] { text-align: left !important; }

  /* ---- Inputs ---- */
  input, select, textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---- Images: cap heights on mobile so they don't dominate ---- */
  img[style*="height: 460px"] { height: 260px !important; }
  img[style*="height: 420px"] { height: 260px !important; }
  img[style*="height: 360px"] { height: 220px !important; }

  /* ---- Ticker font + padding ---- */
  .ttt-ticker-inner { font-size: 12px !important; gap: 28px !important; }

  /* ---- Events page calendar row stacking ---- */
  /* The events list uses gridTemplateColumns: '160px 1.6fr 1fr 220px' — already overridden above. */

  /* ---- Section heads with side actions (flex justify-between) ---- */
  div[style*="justify-content: space-between"][style*="display: flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Footer copyright row */
  footer > div[style*="space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* ---- Page hero specific ---- */
  [style*="padding: 80px 56px 48px"] { padding: 48px 20px 28px !important; }
  [style*="padding: 100px 56px"] { padding: 48px 20px !important; }
  [style*="padding: 110px 56px"] { padding: 48px 20px !important; }
  [style*="padding: 88px 56px"]  { padding: 44px 20px !important; }
  [style*="padding: 96px 56px"]  { padding: 44px 20px !important; }
  [style*="padding: 64px 56px"]  { padding: 36px 20px !important; }
  [style*="padding: 72px 56px"]  { padding: 40px 20px !important; }
  [style*="padding: 80px 56px"]  { padding: 44px 20px !important; }
  [style*="padding: 90px 56px"]  { padding: 44px 20px !important; }
  [style*="padding: 60px 56px"]  { padding: 36px 20px !important; }
  [style*="padding: 20px 56px"]  { padding: 16px 20px !important; }

  /* Min-height caps */
  [style*="minHeight: 240"] { min-height: auto !important; }
  [style*="min-height: 240"] { min-height: auto !important; }

  /* ---- Long fixed widths shouldn't blow out viewport ---- */
  [style*="width: 240px"] { max-width: 100% !important; }
  [style*="max-width: 1100"] { max-width: 100% !important; }
  [style*="max-width: 720"]  { max-width: 100% !important; }
  [style*="max-width: 700"]  { max-width: 100% !important; }
  [style*="max-width: 660"]  { max-width: 100% !important; }
  [style*="max-width: 580"]  { max-width: 100% !important; }
  [style*="max-width: 520"]  { max-width: 100% !important; }
  [style*="max-width: 320"]  { max-width: 100% !important; }

  /* ---- Prevent giant videos in homepage hero from overflowing ---- */
  video { object-fit: cover !important; }

  /* ---- Reduce some absurd letter-spacing on tiny screens ---- */
  [style*="letter-spacing: 0.18em"] { letter-spacing: 0.12em !important; }
  [style*="letter-spacing: 0.14em"] { letter-spacing: 0.1em  !important; }
}

/* ---------- Very narrow phones (<= 380px) ---------- */
@media (max-width: 380px) {
  nav a { font-size: 10px !important; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 26px !important; }
  [style*="font-size: 104px"] { font-size: 38px !important; }
  [style*="font-size: 96px"]  { font-size: 48px !important; }
  [style*="font-size: 88px"]  { font-size: 36px !important; }
}