/* Base layout for the benefit-section wrapper itself. Used on the homepage
   and category page (and likely future pages) — lives here in the component
   stylesheet so it isn't tied to homepage.css being loaded.
   Note: the homepage additionally pulls the section past .sections's 40px
   gutters via a desktop -40px margin trick — that override stays in
   homepage.css since it's specific to the .sections parent. */
.benefit-section {
    /* ─── Desktop horizontal-geometry knobs ──────────────────────────────
       Three numbers drive everything in the section's horizontal layout:
       the "more" pill on the physical left, the cards row, and the header
       (title/arrows on the right, dots on the left). All other paddings
       and offsets in this file are derived from these via calc().

       Why three:
       - --pill-width: physical width of the absolute .more-link-side pill.
       - --cards-side-pad: visible empty space on each side of the card row,
         used to balance the visual weight of the pill (set to ≈ pill / 2
         so the cards' shifted center compensates for the pill on one side).
       - --pill-card-gap: breathing room between the pill's right edge and
         the first card. Smaller than --cards-side-pad so the pill itself
         feels anchored to the cards rather than floating in whitespace.

       Tweak --cards-side-pad alone to widen/tighten the layout; the pill
       and dots track it automatically. */
    --pill-width: 130px;
    --cards-side-pad: 65px;
    --pill-card-gap: 10px;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    /* Internal vertical stack: header on top, swiper wrapper below.
       Previously inherited from an unscoped homepage.css `section { ... }`
       rule that's now scoped to .sections; declared here so the layout
       holds wherever the component is rendered. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

@media (max-width: 768px) {
    .benefit-section {
        margin: 0;
        gap: 12px;
    }
}

.homepage-benefits {
  width: 100%;
  /* No max-width cap — the swiper inside has its own max-width: 1735, and an
     outer cap here would constrain swiper-row's content area to (cap - 180),
     forcing the swiper below its real cap and making pill/card width math
     diverge. Layout is now: section full-bleed → wrapper 100% → here 100% →
     swiper-row 100% (with internal padding) → swiper capped at 1735. */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px; /* knob: vertical gap between cards row and pagination dots */
}

.swiper-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  /* Anchor for the absolute .more-link-side pill — pill sits inside the
     row's physical-left padding, sized so its right edge lands one
     --pill-card-gap before the first card. See the variables block on
     .benefit-section above for the geometry. */
  position: relative;
}

/* Desktop: section is centered, capped at 1920 via homepage.css. Padding-
   left = 140 = pill width (130) + 10px gap between the pill's right edge
   and the swiper's left edge. Combined with each card's .card-container
   padding-left (10), the visible gap from the pill to the first card is
   20px — matching the 20px inter-card gap (10 + 10 between any two
   adjacent cards). */
@media (min-width: 769px) {
  .swiper-row {
    /* Compensate for the pill on physical left so the section reads as
       centered. paddingR is just the chosen empty space; paddingL adds the
       pill's width on top so the cards still get the same empty space on
       their side of the pill. The card row's geometric center ends up
       shifted by --pill-width / 2 past the section midpoint — exactly the
       visual offset that balances the pill on one side. */
    padding-left: calc(var(--cards-side-pad) + var(--pill-width));
    padding-right: var(--cards-side-pad);
    justify-content: center;
  }
}

.homepage-benefits-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 768px) {
  .homepage-benefits-wrapper {
    flex-direction: column;
    gap: 14px; /* knob: vertical gap between pagination dots and the .more-mobile button */
    max-width: 100vw;
    align-items: center;
  }

  .swiper-row {
    width: calc(100vw - 40px);
  }
}

.swiper-homepage-benefits {
  flex: 1;
  min-width: 0;
  max-width: 1735px;
  height: auto;
  padding-bottom: 10px;
  position: relative;
  /* overflow: clip + overflow-clip-margin lets card shadows bleed up to 30px
     past the swiper bounds (top/right/bottom) so cards on the row's edges
     keep their drop-shadow visible. The left bleed (where the next slide's
     content peeks) falls behind the pill (z-index: 10, abutting swiper.left)
     and is hidden — no separate masking needed. */
  overflow: clip;
  overflow-clip-margin: 30px;
}

.swiper-homepage-benefits .swiper-slide {
  width: auto;
}

@media (max-width: 768px) {

  /* Default mobile = 2-row "page" mode (items_in_row_mobile = 2). Each swiper
     slide is one page = a full-container-width box containing a CSS Grid of
     up to 4 cards (.benefit-page below). Peek mode (items_in_row_mobile = 1)
     overrides slide width to auto via the .is-mobile-peek rule below. */
  .swiper-homepage-benefits {
    width: calc(100vw - 40px);
    height: 600px; /* knob: total swiper height — page (590) + 10px shadow buffer for the bottom-row cards */
  }

  .swiper-homepage-benefits .swiper-slide {
    width: calc(100vw - 40px) !important;
  }

  /* The 2x2 grid that lives inside each 2-row page-slide. CSS Grid handles
     card placement so cards flow in natural sequential order across pages
     — page 1 = cards 0-3, page 2 = cards 4-7, etc. The last page can have
     fewer than 4 children (benefits + more-card, with empty cells trailing).
     Row math: (page-height − row-gap) / rows = (590 − 8) / 2 = 291 per row,
     matching .card-container's mobile slot height.

     minmax(0, 1fr) (not bare 1fr): default 1fr tracks have an implicit
     min-width: auto, so a card whose content's min-content size exceeds the
     calculated 1fr blows the column wider than half-width, overflowing the
     swiper slide off the right edge. Forcing min 0 lets the column shrink
     to the grid's share regardless of card content. */
  .benefit-grid-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 291px 291px;
    gap: 8px;
    height: 590px;
  }

  /* Peek mode: single full-size card centered with neighbours peeking on
     both sides — see swiper config (slidesPerView: 'auto'). */
  .benefit-section.is-mobile-peek .swiper-homepage-benefits {
    height: auto;
  }

  .benefit-section.is-mobile-peek .swiper-homepage-benefits .swiper-slide {
    width: auto !important;
  }

  /* Peek-fade overlay enabled in mobile peek mode (default mobile rule below
     hides it for 2×2 since there's no inter-page peek to fade). */
  .benefit-section.is-mobile-peek .swiper-homepage-benefits::after {
    display: block;
  }

  /* Push the CTA button to the visual left in mobile peek mode (matches
     the desktop card-footer rule which already uses flex-end). The default
     .card-footer uses justify-content: space-between, which collapses to
     flex-start with a single child — i.e. the visual right in RTL. */
  .benefit-section.is-mobile-peek .card-footer {
    justify-content: flex-end;
  }

  /* "More" slide layout shared across both mobile modes: 4px padding mirrors
     .card-container's mobile inset so the visible bounds align with regular
     cards (and the horizontal gap to neighbouring cards is 8px = 4 + 4, same
     as between two regular cards). */
  .swiper-homepage-benefits .swiper-slide.more-card-mobile-slide {
    padding: 4px;
    box-sizing: border-box;
  }

  /* Peek-mode-specific: structurally mimic a regular card slot so swiper sees
     uniform widths (with slidesPerView: 'auto', exact widths drive pagination
     — see benefits.php JS).
     - Slide stays width: auto (inherits from the .swiper-slide rule above).
     - The inner .more-card-mobile mimics .card.product: width 100%,
       max-width 327px, height 100%. With max-width capping, the auto-width
       slide resolves to ~335px (327 + 8 padding) — same as regular slides.

     Wrapper align-items: stretch is set explicitly in case swiper overrides
     the flex default; that's what gives the slide a computed height for
     .more-card-mobile's height: 100% to resolve against. */
  .benefit-section.is-mobile-peek .swiper-homepage-benefits .swiper-wrapper {
    align-items: stretch;
  }

  .benefit-section.is-mobile-peek .swiper-homepage-benefits .swiper-slide.more-card-mobile-slide {
    height: auto;
  }

  .benefit-section.is-mobile-peek .more-card-mobile-slide .more-card-mobile {
    width: 100%;
    max-width: 327px;
    height: 100%;
    min-height: 0; /* drop the 240px base floor; height comes from the row */

    /* Peek-mode content layout: single horizontal line, vertically centered,
       hugged to the right edge (RTL flex-start). DOM order is arrow → text,
       so RTL row puts arrow on the right and text to its left. Overrides the
       column/centered defaults from the base .more-card-mobile rule.
       padding-inline-start (= right edge in RTL) trimmed so the arrow sits
       closer to the card's right edge; other three sides keep the base 24px. */
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    text-align: right;
    padding-inline-start: 14px;
  }

  .benefit-section.is-mobile-peek .more-card-mobile-slide .more-card-mobile__text {
    font-size: 26px;
  }

  .benefit-section.is-mobile-peek .more-card-mobile-slide .more-card-mobile__arrow {
    font-size: 44px;
  }
}

/* Section header layout: title + nav arrows packed at the right (RTL flex-
   start), pagination dots pushed to the far left via margin-inline-start:
   auto on the pagination container. Order in DOM (RTL visual right-to-
   left): title → prev arrow → next arrow → [auto-margin gap] → pagination. */
.benefit-section__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 4px;
}

/* Section title — reduced from the global h2 size to keep the header more
   compact and let the cards row dominate the visual hierarchy. Line-height
   reset to a proportional value because global.css's mobile h2 uses a
   fixed 46px which is way too tall for this smaller font-size. */
.benefit-section__header h2 {
  font-size: 28px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .benefit-section__header h2 {
    font-size: 22px;
    line-height: 1.3;
  }
}

.benefit-section__header .swiper-pagination-container {
  margin-inline-start: auto;
}

/* Nav arrows in the header — bare FA icons in the section's color1 with a
   drop-shadow filter (so the shadow follows the icon's silhouette rather
   than painting a rectangle). Hover lift + press feedback match the cards
   and the more-link-side pill. Swiper's default ::after arrow rendering
   is suppressed (we use FA icons in the markup instead). */
.benefit-section__header .swiper-button-prev,
.benefit-section__header .swiper-button-next {
  position: static;
  margin: 0;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--section-color-1, #2020B3);
  font-size: 32px;
  cursor: pointer;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.12));
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.2s ease;
}

/* Suppress swiper's default arrow rendering — we use FA icons in HTML now. */
.benefit-section__header .swiper-button-prev::after,
.benefit-section__header .swiper-button-next::after {
  display: none;
}

@media (hover: hover) {
  .benefit-section__header .swiper-button-prev:hover,
  .benefit-section__header .swiper-button-next:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 7px 20px var(--card-hover-shadow-color, rgba(0, 0, 0, 0.12)));
  }
}

.benefit-section__header .swiper-button-prev:active,
.benefit-section__header .swiper-button-next:active {
  transform: translateY(0) scale(0.98);
}

/* Disabled state — swiper auto-applies .swiper-button-disabled at the row's
   first/last slide. Visual: dimmed + cursor blocked + no hover effects. */
.benefit-section__header .swiper-button-prev.swiper-button-disabled,
.benefit-section__header .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Desktop: header padded so the title (right, RTL flex-start) and pagination
   dots (left, RTL flex-end via auto margin) align with the cards row below.
   padding-left mirrors swiper-row's padding-left and adds 10px (the card-
   container's own inner padding) so the dots land on the leftmost card's
   visible content edge — where the image actually starts — not its outer
   box. padding-right mirrors swiper-row's padding-right exactly so the
   title sits at the same gutter as the rightmost card. */
@media (min-width: 769px) {
  .benefit-section__header {
    padding-right: var(--cards-side-pad);
    padding-left: calc(var(--cards-side-pad) + var(--pill-width) + 10px);
  }
}

@media (max-width: 768px) {
  .benefit-section__header {
    margin-bottom: 2px; /* knob: vertical gap between section title and the cards row on mobile */
    gap: 12px; /* min-spacing so title and arrows don't collide if the title gets long */
  }

  /* Mobile: hide the prev/next arrows in the section header. Touch users
     swipe the cards directly; the pagination dots below already signal
     "more to come," so the arrows are redundant and just add visual noise. */
  .benefit-section__header .swiper-button-prev,
  .benefit-section__header .swiper-button-next {
    display: none;
  }

  /* Mobile-only: pagination is a direct child of .benefit-section (rendered
     after the cards in PHP). Center it under the cards — pagination.css gives
     it width: fit-content, which would otherwise hug the right edge in RTL. */
  .benefit-section > .swiper-pagination-container {
    margin: 4px auto 0;
  }
}

/* Desktop "more" pill — absolutely positioned at the swiper-row's left
   edge (= viewport-left thanks to the section's full-bleed). Rock-solid
   fixed placement at rest. At end-state (.is-end on the swiper), the pill
   animates onto the position of the leftmost visible slot, where the
   more-card slide lives. They share the same color2 background and "more"
   content, so the pill visually merges with the slide on arrival. */
.more-link-side {
  position: absolute;
  /* Offset from the swiper-row's physical left so the pill tracks the cards
     (which were shifted right via swiper-row's padding to compensate for
     this same pill). Derivation: pill's right edge needs to sit one
     --pill-card-gap before the first card (which starts at swiper-row's
     padding-left = pill + side-pad). So pill's left = (side-pad - gap),
     keeping the original breathing room between pill and first card. */
  left: calc(var(--cards-side-pad) - var(--pill-card-gap));
  /* Inset top/bottom to match the card's visible bounds within the row.
     Top: 10 = .card-container padding-top.
     Bottom: 20 = .swiper-homepage-benefits padding-bottom (10) + .card-container padding-bottom (10). */
  top: 10px;
  bottom: 20px;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  /* swiper-row reserves (pill + side-pad) on the physical left; the pill is
     offset (side-pad - gap) into that area so its right edge sits gap before
     the first card. Width comes straight from the geometry knob. */
  width: var(--pill-width);
  padding: 24px 8px 24px 16px;
  /* border-box so width includes padding — without this, the horizontal
     padding (8 + 16 = 24px) gets added to the declared width and the pill
     ends up ~24px wider than the benefit cards it overlays at end-state. */
  box-sizing: border-box;
  border-radius: 8px;
  /* Match the benefit card's resting drop shadow (.card { box-shadow: ... }
     in card.css). Same tint, same offset/blur, so the pill reads as part
     of the card row visually. */
  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.12);

  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;

  cursor: pointer;
  transition:
    width 0.35s ease,
    left 0.35s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;

  /* Clip the orb pseudo-elements to the pill's rounded box so their
     scale-on-hover transform doesn't bleed past the corners. */
  overflow: hidden;
}

/* Decorative orbs as two separate pseudo-element divs (one per orb) — NOT a
   single shared layer with background-image gradients. Why: scaling a shared
   layer scales around its center, pushing offset orbs further off-pill (so
   they look smaller, not bigger). With each orb in its own pseudo-element,
   transform: scale() grows each one around its OWN center → they get bigger
   in place. White-with-alpha auto-tints based on whatever color2 the section
   uses, like the mobile card. */
.more-link-side::before,
.more-link-side::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.35s ease;
}

/* Top orb — diameter 180 (radius 90), center at 62% 8% of the pill. */
.more-link-side::before {
  width: 180px;
  height: 180px;
  top: calc(8% - 90px);
  left: calc(62% - 90px);
  background-color: rgba(255, 255, 255, 0.22);
}

/* Bottom-left orb — diameter 72 (radius 36), center at 5% 93% of the pill. */
.more-link-side::after {
  width: 72px;
  height: 72px;
  top: calc(93% - 36px);
  left: calc(5% - 36px);
  background-color: rgba(255, 255, 255, 0.18);
}

/* Desktop hover: each orb grows ~25% around its own center. (hover: hover)
   so this never fires on touch. */
@media (hover: hover) {
  .more-link-side:hover::before,
  .more-link-side:hover::after {
    transform: scale(1.25);
  }
}

/* Lift the pill's text + icon above the orb pseudo-elements. */
.more-link-side__text,
.more-link-side__arrow {
  position: relative;
}

/* Hover/press states mirror .card.product (card.css). Hover lifts the pill
   with a tint-colored glow (--card-hover-shadow-color is set on the parent
   .benefit-section via PHP from $set['color4']). Active state cancels the
   lift and adds a slight press-in. */
@media (hover: hover) {
  .more-link-side:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 20px 0 var(--card-hover-shadow-color, rgba(0, 0, 0, 0.12));
  }
}

.more-link-side:active {
  transform: translateY(0) scale(0.98);
}

/* Desktop only: hide drop shadows on cards that aren't on the current page.
   Combined with watchSlidesProgress on the swiper (see benefits.php), only
   visible slides keep their .card box-shadow. Off-page slides — including
   the next-page peek that bleeds past swiper.left through overflow-clip-
   margin — are shadowless, so their shadow doesn't appear in the gap
   between the .more-link-side pill and the swiper's left edge.

   Mobile is excluded because: (a) the pill is display:none on mobile, so
   there's no gap to protect, and (b) in 2-row mode the peek of next-page
   cards is a legitimate visual affordance that should keep its shadow —
   without it, peek cards looked flat while current-page cards behaved
   inversely (swiper's grid-mode visible-class timing was unreliable). */
@media (min-width: 769px) {
  .swiper-homepage-benefits .swiper-slide:not(.swiper-slide-visible) .card {
    box-shadow: none;
  }
}

.more-link-side__text {
  width: 100%;
  text-align: right;
  font-size: 22px;
  transition: transform 0.25s ease;
}

.more-link-side__arrow {
  align-self: flex-start;
  font-size: 32px;
  transition: transform 0.25s ease;
}

/* On hover, pull the text down and the arrow up so they cluster closer
   vertically. Pure transform so it animates smoothly (justify-content
   on the pill stays space-between, can't be transitioned directly). */
@media (hover: hover) {
  .more-link-side:hover .more-link-side__text {
    transform: translateY(12px);
  }
  .more-link-side:hover .more-link-side__arrow {
    transform: translateY(-12px);
  }
}

/* No end-state expansion for now — pill is a constant fixed pill at
   viewport-left across all states. The .is-end class is still toggled on
   the swiper (for future hooks), so layering subtle end-state effects
   later (e.g. shadow lift, color shift, label swap) is a one-rule add. */

/* "More" card slide — rendered as the LAST swiper slide on every viewport
   (PHP no longer gates this on viewport). Acts as both the mobile affordance
   and the desktop "phantom" placeholder that the absolute pill animates onto
   at end-state. Same color2 + content as the pill so they merge visually. */
.more-card-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  width: 100%;
  height: 100%;
  min-height: 240px;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.12);

  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;

  /* Decorative "orbs" — two brighter solid circles for visual interest.
     Layered as radial-gradients on background-image so they sit above the
     inline background-color (set per-section via $set['color2']) without
     needing extra DOM. White with low alpha = a tint-agnostic lighten:
     reads as "brighter" over any color2 the admin picks. Sharp edges (color
     stops 1px apart) keep them as solid disks rather than soft blurs. */
  background-image:
    radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 105px, transparent 106px),
    radial-gradient(circle at 8%  95%, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0.18) 55px, transparent 56px);
}

.more-card-mobile__text {
  font-size: 18px;
}

.more-card-mobile__arrow {
  font-size: 32px;
}

/* Desktop: inset the more-card visible content on all four sides to match
   benefit cards (which are inset 10px by .card-container padding) and the
   pill (which sits at top:10/bottom:20 from row, width = slot - 20).
   - Top margin 10 = match .card visible top.
   - Bottom margin 10 + .swiper-homepage-benefits padding-bottom: 10 = total
     bottom inset 20 (matches pill bottom and card visible bottom).
   - Left/right margins 10 = match .card-container horizontal padding so the
     visible width is slot - 20 (matches card and pill widths exactly).
   With identical bounds, the pill overlays the more-card pixel-perfect at
   end-state. */
@media (min-width: 769px) {
  .more-card-mobile-slide .more-card-mobile {
    margin: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }
}

/* Mobile: hide the desktop pill (mobile uses the more-card slide as the
   affordance — desktop's vertical pill would eat too much horizontal space). */
@media (max-width: 768px) {
  .more-link-side {
    display: none;
  }
}

/* Peek-fade — disabled while we nail down the more-card sticky structure.
   Will reintroduce after the layout/animation settles. Original gradient
   faded the trailing edge of the swiper to section background as a soft
   hint there's more content. */
.swiper-homepage-benefits::after {
  display: none;
}

/* Hide the fade once the user has swiped to the last slide — no more cards to peek at. */
.swiper-homepage-benefits.is-end::after {
  opacity: 0;
}