// =============================================================================
// TAB-COMPONENT-2 — Task #17 (v2, was wildlife-experience)
// Section header + horizontal swiper carousel of 480×480px square cards.
// Mobile-first: base = 375px (304px cards), desktop via respond-to('desktop')
// Measurements: design/measurements-v2.json → "tab-component-2"
//   Web:    section px-120 py-80; cards 480×480px, gap 16px; nav 40px circles
//   Mobile: section py-56 overflow-clip; cards 304×304px, gap 16px; nav 40px circles
// Selectors match the real markup (index.html + main.js Swiper init):
//   .tab-component-2 > __header > __headings > __eyebrow/__title
//   .tab-component-2-slider (Swiper — slidesOffsetBefore handles left inset)
//   .tab-component-2-card + __image/__overlay/__label
//   .tab-component-2__footer > .btn + __nav > .tab-component-2-nav-btn
// =============================================================================

@import '../mixins';

.tab-component-2 {
  // No overflow:hidden here — this element's own box is exactly .container's
  // width, the same boundary the slider is escaping via slider-breakout, so it
  // can never be the right place to clip that bleed. html/body's overflow-x:
  // hidden (_base.scss) is the actual safety net that prevents horizontal scroll.
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space, tokens.scss).
  padding-block: var(--section-space);     // (bg via .bg-pampas on <section>)

  // ── Header ──────────────────────────────────────────────────────────────
  &__header {
    margin-bottom: 32px;                   // gap-32 header → carousel on mobile
  }

  &__headings {
    display: flex;
    flex-direction: column;
    gap: 16px;                             // eyebrow → heading gap-16
  }

  &__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-base);             // 16px mobile
    font-weight: 600;
    line-height: var(--lh-base);
    color: var(--color-text-primary);     // #181d27 — Figma-confirmed
    margin: 0;
  }

  &__title {
    font-family: var(--font-display);
    font-size: var(--fs-display-sm);       // 30px mobile
    font-weight: 400;
    line-height: var(--lh-display-sm);
    letter-spacing: 0;
    color: var(--color-gold-dark);
    margin: 0;
  }

  // ── Controls row (VIEW ALL left, nav right) ──────────────────────────────
  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;                      // gap carousel → controls on mobile
  }

  &__nav {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  // ── Desktop ──────────────────────────────────────────────────────────────
  @include respond-to('desktop') {
    &__header {
      margin-bottom: 40px;                 // gap-40 header → carousel
    }

    &__eyebrow {
      font-size: var(--fs-xl);            // 20px
      line-height: var(--lh-xl);
    }

    &__title {
      font-size: var(--fs-display-lg);    // 48px
      line-height: var(--lh-display-lg);
      letter-spacing: -0.96px;
    }

    &__footer {
      margin-top: 40px;
    }
  }
}

// ── Carousel (Swiper) — container-aligned left inset, full-bleed-right track ──
// Shared technique, see @mixin slider-breakout (_mixins.scss). Figma 18580:8354:
// card row bleeds to the viewport edge while the heading/controls stay
// container-aligned.
.tab-component-2-slider {
  cursor: grab;
  user-select: none;

  @include slider-breakout;

  &:active { cursor: grabbing; }
}

// ── Individual slide / card ───────────────────────────────────────────────────
.tab-component-2-card {
  position: relative;
  width: 304px;                            // mobile: 304×304px
  height: 304px;
  border-radius: var(--radius-xs);         // 4px
  overflow: hidden;
  flex-shrink: 0;

  @include respond-to('desktop') {
    width: 480px;                          // desktop: 480×480px
    height: 480px;
  }
}

.tab-component-2-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  // Subtle zoom on hover, clipped by the card's own overflow:hidden. Same
  // transform-only technique (and easing) .tab-component__thumb img already
  // uses, just a gentler scale since these cards are much larger — 1.08 on a
  // 480px card is a far bigger visual jump than on a 90px thumb. Animating
  // transform (not width/height) keeps this on the compositor, so it can't
  // reflow the slider track. The global prefers-reduced-motion rule in
  // _base.scss already neutralises this transition.
  transition: transform 0.25s ease;
}

.tab-component-2-card:hover .tab-component-2-card__image {
  transform: scale(1.05);
}

// Bottom gradient rgba(0,0,0,0) 50% → rgba(0,0,0,0.48) 100%
.tab-component-2-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.48) 100%);
  pointer-events: none;
}

.tab-component-2-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem;                         // p-40
  z-index: 1;
  text-align: center;                      // Figma: label centred in card
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);         // 24px
  font-weight: 400;
  line-height: var(--lh-display-xs);
  color: var(--color-white);
  margin: 0;
}

// ── Nav prev/next — 40px circles ──────────────────────────────────────────────
.tab-component-2-nav-btn {
  @include slider-nav-btn;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);  // Figma-confirmed (20px, same as testimonials nav)
  background-color: var(--color-satin-linen);
  color: var(--color-mantle);

  svg,
  img {
    width: 24px;
    height: 24px;
    display: block;
  }
}

.tab-component-2-nav-btn--prev {
  opacity: 0.35;
}

.tab-component-2-nav-btn--next {
  opacity: 1;
}

// ── Per-card drawer text ─────────────────────────────────────────────────────
// .drawer__text is DrawerLodge's own class ("Learn more" block) — reused
// instead of a new one. Unlike its plain-text field, sflg_card_bodytext is
// richtext, so nested <p> tags need their own margin reset + gap.
.drawer__text {
  @include body-text;
  margin: 0;

  p {
    margin: 0;

    & + p {
      margin-top: var(--gap-paragraph-mobile);
    }
  }

  @include respond-to('desktop') {
    p + p {
      margin-top: var(--gap-paragraph);
    }
  }
}