// =============================================================================
// TAB-COMPONENT — Task #25 (v2, was showcase-tabs)
// Image stage + title/CTA overlay + thumbnail tab strip + prev/next nav.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// Measurements: Figma 18580:7702 (mobile) / 18580:7668 (desktop)
//   Web:    section px-120; stage 1200×808, thumbs 149px sq, nav 40px circles
//   Mobile: section px-16;  stage 343×565, thumbs 67px sq, nav 24px circles
// =============================================================================

@import '../mixins';

.tab-component {
  // Symmetric section rhythm top+bottom (56px mobile+tablet, 80px laptop+ —
  // --section-space, tokens.scss). Previously 0 top / 80px bottom always,
  // relying on whatever component came before it to supply the top gap —
  // an accidental-spacing pattern rejected in favour of every component
  // carrying its own full top+bottom rhythm.
  padding-block: var(--section-space);
  padding-inline: 16px; // mobile: px-16

  // ── Stage (hero image area) ──────────────────────────────────────────────
  &__stage {
    position: relative;
    height: 565px; // mobile: 343×565
    overflow: visible; // strip straddles the bottom edge
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem 1.5rem 3rem 1rem; // py-48 pr-24 pl-16 (Figma 18580:7702)
  }

  &__stage-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    opacity: 1;
    transition: opacity 0.2s ease;

    &.is-fading {
      opacity: 0;
    }
  }

  &__stage-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0) 45.28%,
        rgba(0, 0, 0, 0) 62.27%,
        rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
  }

  // ── Title + CTA — top-left of stage ─────────────────────────────────────
  &__intro {
    position: absolute;
    top: 3rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    z-index: 2;
    max-width: 300px;
  }

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

  // ── Thumbnail strip — mobile: straddles the stage bottom edge ───────────
  // Absolutely positioned at the full stage width (left:0, right:0) so the
  // nav buttons + thumbs row has maximum space. Offset upward by half the
  // thumb height so the strip visually straddles the image's bottom edge.
  // Desktop overrides this to sit fully inside the stage instead (see the
  // respond-to('desktop') block below).
  &__strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -33.5px; // -(67px thumb height / 2)
    z-index: 3; // within the stage only — elevated above the drawer scrim
    // exclusively while a drawer is open (see body.drawer-open rule below);
    // a permanent 305 here painted the strip over the fixed booking widget
    // (150/250) and mobile menu bar (200) during normal page scrolling.
    display: flex;
    align-items: center;
    gap: 20px; // Figma: 20px between nav buttons and thumbs track

    // The strip sits above the real .drawer-scrim (z-index above), so it no
    // longer gets dimmed by it. Reproduce that same dim here — toggled by
    // the .drawer-open body class the drawer script already sets — so the
    // strip still visually recedes with the rest of the page. pointer-events:
    // none keeps thumbs/nav clickable through this overlay.
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.3); // matches .drawer-scrim's own dim amount
      opacity: 0;
      transition: opacity 0.3s ease; // matches .drawer-scrim's own transition
      pointer-events: none;
    }
  }

  // Scrollable thumbs track — takes the remaining width after nav buttons.
  &__thumbs {
    display: flex;
    align-items: center;
    // Center the thumbnails when they don't fill the row (fewer thumbs, or
    // a wide viewport); `safe` falls back to start-alignment instead of
    // clipping the first item off-screen on the days this row *does*
    // overflow (it also scrolls via overflow-x below), per the CSS Box
    // Alignment spec's safe/unsafe keywords.
    justify-content: safe center;
    gap: 12px; // mobile: ~12px
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__thumb {
    position: relative;
    width: 67px; // mobile: 67px sq
    height: 67px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 0;
    transition: outline-color 0.2s ease;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.25s ease;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5) 100%);
      pointer-events: none;
    }

    &:hover:not(.is-active) img {
      transform: scale(1.08);
    }

    // Active state ring: a border on the existing ::after (not outline/box-shadow
    // on the thumb itself) — the thumb's own background/shadow layer paints
    // *below* its normal-flow content, and .tab-component__thumb__img is a
    // 100%-width/height sibling with zero gap, so any ring drawn on the thumb
    // element (outline or box-shadow) is fully hidden underneath the image.
    // ::after is already position:absolute + inset:0, which paints above the
    // image regardless of DOM order, so a border here is the one place a ring
    // is actually visible.
    &.is-active::after {
      border: 1px solid var(--color-white);
    }

    &:focus-visible {
      outline: 2px solid var(--color-white);
      outline-offset: 2px;
    }
  }

  &__thumb-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    z-index: 1;
    font-family: var(--font-body);
    font-size: var(--fs-xs); // 12px mobile
    font-weight: 600;
    line-height: var(--lh-xs);
    color: var(--color-white);
    text-align: center;
    pointer-events: none;
  }

  // ── Nav buttons — flex siblings in the strip row ────────────────────────
  // Figma: prev/next sit in the strip flex row with 20px gap to the thumbs.
  // 24px circles on mobile, 40px on desktop.
  &__nav {
    @include slider-nav-btn;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 12px; // Figma: rounded-[12px] on mobile
    z-index: 1;
    color: var(--color-mantle);

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

  &__nav--prev {
    background-color: var(--color-satin-linen);
  }

  &__nav--next {
    background-color: var(--color-white);
  }

  // ── Desktop ──────────────────────────────────────────────────────────────
  @include respond-to('desktop') {
    padding-inline: var(--space-30); // px-120

    &__stage {
      height: 808px; // desktop: 1200×808
      padding: 3rem 1.5rem;
    }

    &__stage-overlay {
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0.8) 0%,
          rgba(0, 0, 0, 0) 28.59%,
          rgba(0, 0, 0, 0) 67.53%,
          rgba(0, 0, 0, 0.8) 100%);
    }

    &__intro {
      top: 3.5rem; // 56px from top
      left: 3.75rem; // 60px
      max-width: 700px;
    }

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

    // Desktop: strip sits fully inside the stage/overlay (no straddle) —
    // anchored within the stage's own padding inset, unlike mobile which
    // floats the strip half outside the stage's bottom edge.
    &__strip {
      left: 1.5rem; // matches &__stage's own px-24 on desktop
      right: 1.5rem;
      bottom: 3rem; // matches &__stage's own padding-bottom (py-48)
    }

    &__thumbs {
      gap: 1.6875rem; // ~27px desktop
    }

    &__thumb {
      width: 149px; // desktop: 149×149px sq
      height: 149px;

      &.is-active::after {
        border-width: 1.5px;
      }
    }

    &__thumb-label {
      bottom: 8px;
      font-size: var(--fs-sm); // 14px desktop
      line-height: var(--lh-sm);
    }

    &__nav {
      width: 40px;
      height: 40px;
      border-radius: 20px; // Figma: rounded-[20px] on desktop

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

// While a drawer is open, lift the strip above the drawer scrim (300, below
// the drawer panel at 310 — see _drawer.scss) so thumbnails stay clickable
// and switching thumbs updates the still-open drawer live, instead of the
// scrim swallowing the click and just closing it. Scoped to drawer-open so
// the strip can't paint over fixed UI (booking widget 150/250, mobile menu
// bar 200) during normal scrolling — body scroll is locked while open, so
// no overlap is possible in this state. The ::after dim (defined on the
// strip above) fades in here too, keeping the strip visually in step with
// the real scrim it now sits above.
body.drawer-open .tab-component__strip {
  z-index: 305;

  &::after {
    opacity: 1;
  }
}