/* =========================
   Tablet
   ========================= */

@media (max-width: 900px) {
  .container {
    width: min(100% - 24px, 1120px);
  }

  .nav-links {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 34px 0 54px;
  }

  .hero-grid,
  .schedule-layout,
  .order-layout,
  .about,
  .offline {
    grid-template-columns: 1fr;
  }

  .hero-note {
    display: none;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .event {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .date .time {
    white-space: normal;
  }

  .two {
    grid-template-columns: 1fr;
  }

  section {
    padding: 58px 0;
  }

  h1 {
    font-size: 46px;
  }

  .chronicles-rail,
  .gallery-rail {
    gap: 14px;
    margin-right: -12px;
    padding-right: 12px;
    padding-bottom: 10px;
  }

  .rail-card,
  .gallery-rail .photo {
    flex: 0 0 78%;
    min-width: 78%;
  }

  .rail-arrow {
    display: none !important;
  }
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 600px) {
  .container {
    width: min(100% - 20px, 1120px);
  }

  .hero {
    padding: 26px 0 44px;
  }

  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 30px;
  }

  .lead,
  .section-subtitle {
    font-size: 16px;
  }

  .hero-actions,
  .contact-links {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .card,
  .order-box {
    padding: 18px;
    border-radius: 18px;
  }

  .event {
    padding: 16px;
  }

  .badge {
    width: fit-content;
  }

  .slot {
    font-size: 15px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .datetime-fields {
    gap: 12px;
  }

  .datetime-fields input[type="date"],
  .datetime-fields input[type="time"] {
    font-size: 16px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .closed-games {
    margin-top: 16px;
  }

  .closed-games summary {
    padding: 12px 16px;
  }

  .closed-games-list {
    margin-top: 12px;
    gap: 12px;
  }

  .order-box-action {
    margin-top: 24px;
  }

  .rail-card,
  .gallery-rail .photo {
    flex-basis: 86%;
    min-width: 86%;
  }

  .gallery-rail .photo {
    min-height: 260px;
  }

  .footer-inner {
    flex-direction: column;
  }
}