/* ================================================================
   PAGE: annual-sports.css
   Page-specific sections only; shared components live in ../components.
   ================================================================ */

.annual-sport-wrapper {
      background: #f2f5f9;
      font-family: 'Inter', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 1rem;
    }

    .spd-section {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
    }

    .spd-card {
      
     
      padding: 3rem 2.8rem;
     
    }

    
    .spd-banner {
      margin-bottom: 3.5rem;
    }

    .spd-tagline {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #ED1752;
      font-weight: 600;
      font-size: 0.9rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }
    .spd-tagline i {
      color: #061B45;
    }

    .spd-heading {
      font-size: 60px;
      font-weight: 700;
      line-height: 1.1;
      color: #061B45;
      margin-bottom: 1.2rem;
      max-width: 900px;
    }
    .spd-heading span {
      color: #ED1752;
      background: rgba(237,23,82,0.08);
      padding: 0.2rem 1.2rem;
      border-radius: 60px;
      display: inline-block;
      font-size: 0.8em;
    }

    .spd-description {
      font-size: 1rem;
      color: #334155;
      max-width: 650px;
      margin-bottom: 2.2rem;
      line-height: 1.9;
      font-weight: 400;
    }

    .spd-btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .spd-btn-primary {
      background: #ED1752;
      border: none;
      color: white;
      font-weight: 600;
      font-size: 1.2rem;
      padding: 0.9rem 2.8rem;
      border-radius: 60px;
      cursor: pointer;
      border: 1px solid #c20e40;
      transition: background 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
    }
    .spd-btn-primary i {
      font-size: 1.1rem;
    }
    .spd-btn-primary:hover {
      background: #bf1145;
    }

    .spd-btn-outline {
      background: transparent;
      border: 2px solid #061B45;
      color: #061B45;
      font-weight: 600;
      font-size: 1.2rem;
      padding: 0.9rem 2.8rem;
      border-radius: 60px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
    }
    .spd-btn-outline i {
      color: #ED1752;
      font-size: 1.1rem;
    }
    .spd-btn-outline:hover {
      background: #061B45;
      color: white;
      border-color: #061B45;
    }
    .spd-btn-outline:hover i {
      color: white;
    }

    /* ----- GALLERY – now 16:9 landscape (wider, shorter) ----- */
    .spd-gallery-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }
    .spd-gallery-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: #061B45;
      letter-spacing: -0.02em;
    }
    .spd-gallery-title i {
      color: #ED1752;
      margin-right: 0.5rem;
    }
    .spd-gallery-link {
      color: #ED1752;
      font-weight: 600;
      text-decoration: none;
      border-bottom: 2px solid rgba(237,23,82,0.3);
      padding-bottom: 0.2rem;
      font-size: 1.1rem;
    }
    .spd-gallery-link i {
      margin-left: 0.4rem;
      font-size: 0.9rem;
    }

    /* 3‑column grid (desktop) */
    .spd-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
      margin-top: 2rem;
    }

    /* image card – 16:9 aspect ratio (width > height) */
    .spd-grid-item {
      aspect-ratio: 16 / 9;          /* ⬅️ wider, shorter – exactly "height kaam, width bda" */
      width: 100%;
      border-radius: 1.5rem;          /* slightly smaller radius looks better on rectangles */
      background: #eef2f6;
      border: 1px solid #dce3ec;
      overflow: hidden;
      transition: border 0.2s;
    }

    /* images fill the container */
    .spd-grid-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;              /* cover the rectangle without distortion */
      display: block;
      border-radius: inherit;
    }

    .spd-grid-item:hover {
      border-color: #ED1752;
    }

    /* neutral fallback background */
    .spd-grid-item:nth-child(n) {
      background: #d9e0eb;
    }

    /* ----- RESPONSIVE – keep 3, then 2, then 1 columns ----- */
    @media (max-width: 900px) {
      .spd-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 700px) {
      .spd-card {
        padding: 2.2rem 1.8rem;
        border-radius: 2.2rem;
      }
      .spd-heading {
        font-size: 3rem;
      }
      .spd-description {
        font-size: 1.1rem;
      }
      .spd-btn-primary, .spd-btn-outline {
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
      }
      .spd-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 1rem;
      }
    }

    @media (max-width: 600px) {
      .spd-gallery-title {
        font-size: 2rem;
      }
      .spd-gallery-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
      }
    }

    @media (max-width: 480px) {
      .spd-card {
        padding: 1.8rem 1.2rem;
      }
      .spd-heading {
        font-size: 2.5rem;
      }
      .spd-heading span {
        padding: 0.1rem 0.8rem;
      }
      .spd-btn-group {
        flex-direction: column;
        width: 100%;
      }
      .spd-btn-primary, .spd-btn-outline {
        width: 100%;
        justify-content: center;
      }
      .spd-grid {
        gap: 0.7rem;
        grid-template-columns: repeat(2, 1fr);
      }
      .spd-grid-item {
        border-radius: 1.2rem;
      }
    }

    @media (max-width: 360px) {
      .spd-grid {
        grid-template-columns: 1fr;    /* 1 per row on very small screens */
      }
    }







/* ================================================================
   PAGE-LEVEL VISUAL POLISH
   This source is appended to each isolated page stylesheet.
   ================================================================ */

/* Smooth, accessible interaction feedback */
a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(214, 168, 75, 0.9);
  outline-offset: 3px;
}

/* Media presentation remains contained within its own page */
img {
  height: auto;
}

/* Prevent long labels, links, and table content from breaking layouts */
p,
li,
td,
th,
a {
  overflow-wrap: break-word;
}

/* Refined motion where the visitor allows animation */
@media (prefers-reduced-motion: no-preference) {
  img,
  a,
  button {
    transition-duration: 220ms;
    transition-timing-function: ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .mp-top-strip,
  .mp-main-header,
  .mp-mobile-menu,
  .mp-overlay,
  .apply-now,
  .whatsapp {
    display: none !important;
  }
}