/* MOBILE RESPONSIVE STYLESHEET */

/* Targets screens up to 900px (Tablets / Landscape phones) */
@media (max-width: 900px) {

  body {
    overflow-x: hidden;
    flex-direction: column !important;
  }

  /* Navigation Bar */
  nav {
    padding: 15px 20px !important;
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center !important;
  }

  .logo {
    font-size: 24px !important;
  }

  /* Main containers */
  .container,
  .home-wrapper {
    padding: 25px 2% !important;
    gap: 30px !important;
  }

  .dashboard {
    padding: 30px 20px !important;
  }

  .main-header h1 {
    font-size: 40px !important;
    line-height: 1.2 !important;
  }

  .welcome h1 {
    font-size: 32px !important;
  }

  /* Page Titles & Headers */
  .title {
    font-size: 36px !important;
    line-height: 1.3 !important;
  }

  .subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
  }

  /* Layout grids and cards */
  .stats,
  .cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .card {
    padding: 25px !important;
  }

  .card h1 {
    font-size: 32px !important;
  }

  /* Forms & Inputs */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .input-field,
  .select-box {
    font-size: 15px !important;
    padding: 12px !important;
  }

  /* Buttons */
  .book-btn,
  .download-btn,
  .submit-btn,
  .logout-btn,
  .login-btn,
  .register-btn {
    width: 100% !important;
    padding: 14px 25px !important;
    font-size: 16px !important;
  }

  /* Booking & Modals */
  .modal-content {
    padding: 25px !important;
    border-radius: 18px !important;
    max-height: 85vh !important;
  }

  .modal-title {
    font-size: 26px !important;
    margin-bottom: 20px !important;
  }

  /* Admin Dashboard Layout */
  .sidebar {
    width: 100% !important;
    padding: 20px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15) !important;
  }

  .menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .main {
    padding: 20px !important;
  }

  .topbar {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
  }

  .topbar h1 {
    font-size: 30px !important;
  }

  /* Wide Tables on Mobile */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .table {
    min-width: 700px !important;
  }

  /* Index / Home Page Hero Section */
  .hero-container {
    grid-template-columns: auto 1fr auto !important;
    gap: 15px !important;
    min-height: auto !important;
    align-items: center !important;
  }

  .hero-banner-side.left-side {
    grid-column: auto !important;
    order: 1 !important;
  }

  .hero-middle-content {
    grid-column: auto !important;
    order: 2 !important;
    gap: 12px !important;
    padding: 10px 5px !important;
  }

  .hero-banner-side.right-side {
    grid-column: auto !important;
    order: 3 !important;
  }

  .hero-banner-side {
    width: 110px !important;
  }

  .banner-img-element {
    width: 110px !important;
    max-width: 110px !important;
  }

  .intro-title {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }

  .intro-paragraph {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .intro-slogan {
    font-size: 13px !important;
    margin-top: 5px !important;
  }

  /* Register CTA Button on Mobile */
  .register-cta-btn {
    font-size: 12px !important;
    padding: 8px 18px !important;
    width: auto !important;
    display: inline-block !important;
    border-radius: 8px !important;
    border-width: 2px !important;
  }

  /* Previous Editions & Gallery Cards Scroll Size Adjustments */
  .edition-card {
    flex: 0 0 240px !important;
    padding: 20px 15px !important;
  }

  .gallery-img-slot {
    flex: 0 0 290px !important;
  }

  /* Contact / Social Handles */
  .contact-section {
    padding: 30px 15px !important;
    border-radius: 20px !important;
  }

  .social-row {
    gap: 20px !important;
    margin: 20px 0 !important;
  }

  .social-item {
    min-width: 120px !important;
  }

  .social-icon-wrapper {
    width: 50px !important;
    height: 50px !important;
  }

  .hotspot-slogan {
    font-size: 24px !important;
  }

  /* Countdown Page Overrides */
  .countdown-grid {
    gap: 12px !important;
  }

  .time-value {
    font-size: 28px !important;
  }

  .time-label {
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }

  .register-container {
    padding: 30px 20px !important;
  }

}

/* Targets Small Mobile Devices (e.g. up to 480px) */
@media (max-width: 480px) {

  /* Heading adjustments to prevent wraps */
  .main-header h1 {
    font-size: 30px !important;
  }

  .welcome h1 {
    font-size: 26px !important;
  }

  .title {
    font-size: 28px !important;
  }

  /* Box and container padding adjustments */
  .login-box,
  .register-container {
    padding: 30px 20px !important;
    border-radius: 20px !important;
  }

  .logo {
    font-size: 22px !important;
  }

  /* Admin Capacity Box Stacking */
  .capacity-box {
    flex-direction: column !important;
    width: 100% !important;
  }

  .capacity-box input,
  .capacity-box button {
    width: 100% !important;
  }

  /* Rider info fields */
  .rider-box {
    padding: 15px !important;
    border-radius: 12px !important;
  }

  /* Index / Home Page Hero Section adjustments */
  .hero-container {
    gap: 10px !important;
  }

  .hero-middle-content {
    gap: 8px !important;
    padding: 5px 2px !important;
  }

  .intro-title {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  .intro-paragraph {
    font-size: 8px !important;
    line-height: 1.4 !important;
  }

  .intro-slogan {
    font-size: 9px !important;
    margin-top: 2px !important;
  }

  .register-cta-btn {
    font-size: 9px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
  }

  .hero-banner-side {
    width: 70px !important;
  }

  .banner-img-element {
    width: 70px !important;
    max-width: 70px !important;
  }

}

/* Targets Extra Small Devices (e.g. up to 400px) */
@media (max-width: 400px) {

  .main-header h1 {
    font-size: 24px !important;
  }

  .title {
    font-size: 24px !important;
  }

  /* Countdown grid adjustment for small screens */
  .countdown-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .time-box {
    padding: 12px 6px !important;
    border-radius: 12px !important;
  }

  .time-value {
    font-size: 24px !important;
  }

  .time-label {
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }

}

.access-section {
    padding: 80px 20px;
    background: transparent; /* change as needed */
}

.access-container {
    max-width: 1200px;
    margin: 0 auto;
}

.access-container2 {
    max-width: 1200px;
    margin: 0 auto;
}

.access-title {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.access-title h2 {
    background: transparent;
    color: #fff;
    padding: 12px 40px;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.access-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 120px; /* horizontal spacing */
    row-gap: 70px;     /* vertical spacing */
}

.access-item h3 {
    margin: 0 0 18px;
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
 text-align: center;

}

.access-item p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #FFD700;
 text-align: center;

}

.access-item-wide {
 padding-top: 60px;
    grid-column: 1 / -1;
    text-align: center; /* optional */
    max-width: 900px;   /* optional */
    margin: 0 auto;     /* centers the content block */
 color: #FFD700;
}

@media (max-width: 768px) {
    .access-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .access-title {
        margin-bottom: 40px;
    }

    .access-item h3 {
        font-size: 1.6rem;
    }
}


.edition-image {
    width: 100%;
    height: 180px; /* Adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.edition-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.gallery-img-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px; /* optional */
}

.gallery-img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.access-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    margin: 0 auto 25px auto;
}