/* Section 3: Feature cards (Films, About, Courses, Who should learn)
   ─────────────────────────────────────────────────────────────
   Occupies var(--grid-h), the exact remaining height required to fill
   100% of the visible viewport together with the Header, Section 1, and Section 2.
   
   CRITICAL ASPECT RATIO STRATEGY:
   All feature cards use aspect-ratio: 4 / 3 and height: calc(100% - 8px).
   Their width is automatically derived from the height (height * 4 / 3).
   Because the card graphics (001.png, 002.png, 003.png) are native 4:3 images,
   background-size: 100% 100% fits 100% of each artwork with ZERO pixels cropped,
   zero pixels cut off, and zero black bars across EVERY device and resolution.
   ───────────────────────────────────────────────────────────── */

:root {
  --grid-gap: clamp(10px, 1.2vw, 16px);
  --grid-pad-x: clamp(14px, 1.8vw, 28px);
}

.feature-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--grid-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px var(--grid-pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scroll-padding-inline: var(--grid-pad-x);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #020a10;
  cursor: grab;

  /* Viewport share: exact remainder of the 100vh lock */
  height: var(--grid-h);
  min-height: 0;
  align-items: center;
}

.feature-grid:active {
  cursor: grabbing;
}

.feature-grid.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.feature-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (min-width: 1025px), (orientation: landscape) and (min-width: 601px) {
  .feature-grid {
    scroll-behavior: smooth;
  }
}

/* ─────────────────────────────────────────────────────────────
   Cards: Exact 3-card layout on Desktop & Tablet Landscape
   Formula: calc((100% - 2 * var(--grid-gap)) / 3)
   Guarantees ONLY 3 cards are visible on the initial screen,
   and the 4th card is shown after scrolling.
   ───────────────────────────────────────────────────────────── */
.feature-card {
  position: relative;
  flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 3);
  width: calc((100% - 2 * var(--grid-gap)) / 3);
  min-width: calc((100% - 2 * var(--grid-gap)) / 3);
  max-width: calc((100% - 2 * var(--grid-gap)) / 3);
  height: calc(100% - 12px);
  max-height: 100%;
  aspect-ratio: auto;
  box-sizing: border-box;
  padding: 12px 18px;
  overflow: hidden;
  border: 1px solid var(--yellow);
  border-radius: clamp(6px, 0.8vw, 10px);
  background-color: #02080d;
  background-position: center;
  background-repeat: no-repeat;
  /* EXACT 100% 100% fit for artwork: NO CROP, NO CUTS */
  background-size: 100% 100%;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.video-trigger {
  cursor: pointer;
}

.feature-card .video-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}

.feature-card:hover {
  border-color: #fff06a;
  box-shadow: 0 6px 20px rgba(255, 210, 31, .22);
}

.card-one {
  background-image: url('images/001.png?123');
}

.card-two {
  background-image: url('images/002.png');
}

.card-three {
  background-image: url('images/003.png');
}

/* ─────────────────────────────────────────────────────────────
   Card 4: "Who should learn" artwork card (004.png)
   Strict visual parity with sibling cards (.card-one, .card-two, .card-three):
   - Exact dimensions, border-radius, shadows, transitions, and hover effects
   - Full edge-to-edge artwork fit with zero cropping or cuts
   ───────────────────────────────────────────────────────────── */
.card-four {
  background-image: url('images/004.png');
  background-color: #02080d;
  padding: 0 !important;
}

.card-four> :not(img):not(.sr-only) {
  display: none !important;
}

.card-four img,
.card-four-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.feature-card h2 {
  margin-top: 5px;
  font-size: 28px;
}

.feature-card h3 {
  color: var(--yellow);
  font-size: 22px;
}

.feature-card p {
  margin: 8px 0;
}

.feature-card ul {
  margin: 15px 0 20px;
  padding-left: 20px;
  line-height: 1.5;
}

.feature-card li::marker {
  color: var(--yellow);
}

/* ─────────────────────────────────────────────────────────────
   CLONE CARDS: Strictly hidden on Desktop & Tablet Landscape
   Guarantees each card appears ONLY ONCE across all desktop and
   tablet landscape breakpoints, with zero duplicates.
   ───────────────────────────────────────────────────────────── */

@media (orientation: landscape) and (min-width: 601px),
(min-width: 1025px) {
}

/* ─────────────────────────────────────────────────────────────
   MOBILE PORTRAITS & TABLET PORTRAITS
   Requirements:
   1. Each card fits the WHOLE section dimensions edges to edges (100% width, 100% height)
   2. Zero grid padding/margins so the card touches every edge of Section 3
   3. Card thumbnail image completely covers card width and height edge-to-edge
      with ZERO cropping or cutting (background-size: 100% 100%)
   4. Smooth swipe/scroll snapping between cards
   ───────────────────────────────────────────────────────────── */
@media (orientation: portrait),
(max-width: 1050px) and (orientation: portrait),
(max-width: 600px) {

  .feature-grid {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
    scrollbar-width: none !important;
    align-items: stretch !important;
    border-top: 1px solid rgba(255, 210, 31, 0.2) !important;
  }

  .feature-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .feature-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;

    /* Thumbnail image completely covers card width & height edge-to-edge without crop/cut */
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}