/* =============================================================================
   JENIUS THEME OVERRIDES
   Custom CSS rules that cannot be expressed as tokens
   ============================================================================= */

/*
  Swiper Section - Larger cards for medium size (portrait cards with copy)

  GOAL: Cards should be ~300px wide, showing 2 full cards + peek of 3rd slide

  CALCULATION:
    Container width: 640px - 60px padding = 580px usable
    For 300px cards: 580px / (300px + 5px gap) = 1.9 slides per view

  WHY !important:
    The SwiperSection component passes --slides-per-view as inline style
    (see SwiperSection.tsx line 196-198), which has higher specificity than
    regular CSS. Using !important here is justified per theming guide:
    "Overrides of external libraries/code that can't be modified".

  FUTURE IMPROVEMENT:
    Modify SwiperSection to read CSS variable first before falling back to JS value,
    eliminating the need for !important.
*/

/* Desktop: Show 2 full cards + peek (~300px per card) */
:root[data-product="jenius"] div[data-size="medium"][style*="--slides-per-view"] {
  --slides-per-view: 1.9 !important;
}

/*
  Copy Cards in Swiper - Override the 140px fixed width for copy cards

  PROBLEM:
    CopyCardsSection.module.css:69-70 applies:
      .size-medium .cardWrapper { width: 140px; }

    CopyCardsSection.module.css:131 applies:
      .card-cover { width: var(--copy-cards-cover-width, 140px); }

  For medium size swipers with portrait cards, we need ~300px cards instead.

  The HTML structure is:
    <div class="swiperSlide" data-size="medium"> (304px from SwiperSection)
      <div class="cardWrapper size-medium"> ← 140px HERE - needs override
        <a class="cardInnerWrapper">
          <div class="card-cover"> ← 140px HERE too
          <div class="cardCopy">
*/

/* Override the cardWrapper width (which limits everything inside)
   Target the child of .swiperSlide[data-size="medium"]
*/
:root[data-product="jenius"] div[data-size="medium"] > div {
  width: 100% !important;
}

/* Make the card cover take full width and use aspect ratio */
:root[data-product="jenius"] div[data-size="medium"] > div .card-cover {
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: 3 / 4;
  border-radius: 12px !important; /* full radius, not just left */
}

/* Mobile: Show 1 full card + small peek of next */
@media (max-width: 640px) {
  :root[data-product="jenius"] div[data-size="medium"][style*="--slides-per-view"] {
    --slides-per-view: 1.15 !important;
  }
}