/* Unique World Holidays — Home page "Team" section (Step 10, refined against
   the LVMH "Our Exceptional Talents" reference with exact measurements
   taken from lvmh.com/en/our-maisons/fashion-leather-good via computed
   styles — not eyeballed. Key facts that shaped this file:
   - Cards: no border, no shadow. UNLIKE the reference (client's deliberate
     choice, not an oversight): the carousel runs full viewport width
     (edge-to-edge, no 1320px container) and cards get a generous gap
     between them instead of sitting flush — see the card-width comment
     near .uwh-team-card below for how the gap is produced.
   - Nav arrows: overlay the images themselves, small rounded-square (not
     circular), soft shadow, no border.
   - Bio panel: flat white rectangle (0 border-radius, no shadow),
     HORIZONTALLY CENTERED within the card (not left-aligned — verified via
     getBoundingClientRect: panel center == card center to the pixel),
     ~76% of the card's width, sitting with a gap above the card's bottom
     edge (not flush), 32px internal padding.
   - Name: 20px/regular weight (NOT bold). Role: 14px/grey. Bio: 16px/black.
   - Icon: a plain glyph, no circle/border around it.

   LVMH "Our Exceptional Talents" style: a row of portrait cards, the
   center one showing a name/role teaser with a "+" toggle that expands a
   full bio panel overlaid on the bottom of the (fixed-height) card. Prev/
   Next arrows shift which member is centered; clicking a visible side
   card also brings it to center. All positioning/expand-collapse is
   driven by assets/js/home-team-section.js (GSAP), consistent with the
   destination wheel's approach — this file only holds the visual states
   those scripts toggle between. */

.uwh-team {
  position: relative;
  width: 100%;
  padding: 96px 0;
  background-color: #ffffff;
  overflow: hidden;
}

.uwh-team-heading {
  text-align: center;
  margin: 0 0 56px;
  padding: 0 24px;
}
.uwh-team-heading h2 {
  font-family: "Cinzel", serif;
  margin: 0 0 38px;
  max-width: 100%;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
  color: #13294b;
  text-align: center;
  text-transform: capitalize;
}
.uwh-team-heading h2 em {
  font-style: italic;
  text-transform: none;
  font-size: 1.15em;
}

/* ---- Carousel shell: deliberately deviates from the LVMH reference
   (client's choice) — the reference contained this at max-width:1320px,
   but here it runs the full viewport width edge-to-edge, same as the
   hero section above it (.uwh-team itself is already unconstrained; this
   just stops capping/centering the carousel inside it). Nav arrows still
   overlay the images themselves near the true screen edge. ---- */
.uwh-team-carousel {
  position: relative;
  width: 100%;
}

.uwh-team-track {
  position: relative;
  height: 560px;
  overflow: hidden;
}

.uwh-team-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 8px;
  background: #ffffff;
  border: none;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #012245;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Astra's global `button{...}` reset ships `padding: 20px 40px`, which
   was silently blowing these icon buttons out to ~80x48px (they never
   had their own padding rule to override it with). Explicit padding:0
   above neutralizes it. */
/* No hover colour change on the reference — verified live (hovering a
   card/arrow on lvmh.com produces no visible background/colour change at
   all, just the existing static shadow). Deliberately no :hover rule here. */
/* IMPORTANT: always set BOTH axes together (translate(x, y)), never a
   bare translateX()/translateY() — the base rule above centers the
   button vertically via translateY(-50%), and any single-axis transform
   here REPLACES (not adds to) that transform, silently breaking vertical
   centering. Bit us once already at the 782px breakpoint below. */
.uwh-team-nav-prev {
  left: 37%;
  transform: translate(-37%, -50%);
}
.uwh-team-nav-next {
  right: 35%;
  transform: translate(-35%, -50%);
}

/* ---- Cards: all rendered, JS positions/shows only 3 (prev/active/next)
   via inline transform + this class toggle; everything else sits off to
   the side with pointer-events disabled. Fixed height + overflow:hidden
   means the bio panel overlays the bottom of the photo rather than
   growing the card taller when expanded.

   Width is set in JS as (1/3 of the track) minus a fixed gap, rather than
   an exact 1/3 split: cards sit at slot centers spaced a full 1/3-track
   apart, so shrinking each card by `gap` below that pitch opens up
   exactly `gap` px of visible space between adjacent cards (see
   home-team-section.js render()). Client wants this gap generous
   (~40-60px) instead of the reference's flush/edge-to-edge cards. ---- */
.uwh-team-card {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  overflow: hidden;
  background-color: #012245;
  cursor: pointer;
}
.uwh-team-card-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* "center 20%" (not plain "center") — biases any crop toward the top
     of the frame so a face stays visible instead of getting cut by a
     symmetric center-crop. Paired with the width cap in
     home-team-section.js's render() (MAX_CARD_ASPECT), which keeps a
     card's rendered aspect close enough to the source photos' own
     485:560 portrait crop that vertical cropping should rarely even
     happen — this is the backstop for whatever crop does occur (odd
     upload aspect ratios, breakpoint rounding, etc). */
  background-position: center 20%;
}

.uwh-team-card-panel {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  width: 76%;
  background: #ffffff;
  box-shadow: none;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.uwh-team-card.is-active .uwh-team-card-panel {
  opacity: 1;
  pointer-events: auto;
}
.uwh-team-card.is-active {
  cursor: default;
}

.uwh-team-toggle {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 32px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
/* The site has a global accessibility-widget style that paints ANY
   hovered/focused interactive element with a solid yellow fill, pill
   border-radius and a box-shadow — confirmed via computed styles (hover
   alone was enough to trigger it, not just :focus, and it set
   border-radius:50px + box-shadow in addition to the yellow background,
   which is what caused the odd rounded outline/border we saw after
   clicking). The reference has zero visual change on hover, and no
   border after clicking, so every property that global rule touches
   needs to be reset explicitly here — resetting just one (e.g.
   background) still leaves the others visible. */
.uwh-team-toggle:hover,
.uwh-team-toggle:focus {
  background: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
  outline: none;
}
/* :focus-visible (not :focus) so the outline shows for keyboard/Tab
   navigation but not after a mouse click — matches the reference, which
   shows no border on click, while keeping the a11y affordance for
   keyboard users. Confirmed via toggle.matches(':focus-visible') === false
   immediately after a real mouse click, so this is the browser's own
   input-modality detection, not a guess. */
.uwh-team-toggle:focus-visible {
  outline: 2px solid #012245;
  outline-offset: -2px;
}
.uwh-team-nav:hover,
.uwh-team-nav:focus {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
  border: none;
  outline: none;
}
.uwh-team-nav:focus-visible {
  outline: 2px solid #012245;
  outline-offset: 2px;
}
.uwh-team-toggle-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  line-height: 1;
}
.uwh-team-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uwh-team-name {
  font-size: 1.25rem;
  font-weight: 400;
  color: #000000;
}
.uwh-team-role {
  font-size: 0.875rem;
  color: #55626e;
}

.uwh-team-bio {
  height: 0;
  overflow: hidden;
  padding: 0 32px;
}
/* Default (collapsed) bio text: clamped to 4 lines. Short bios (the
   common case) fit inside that and never show a "Read More" button —
   they just read as a plain paragraph. Same pattern as the Client
   Feedback testimonials card back (client-feedback-testimonials-
   section.css), kept deliberately consistent. */
.uwh-team-bio p {
  margin: 0 0 32px;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4; /* standard property alongside the -webkit- one above */
  overflow: hidden;
}
/* Read More expanded (.is-expanded on .uwh-team-bio, toggled in JS):
   un-clamp the text and cap it at a height that still fits above the
   panel's fixed position inside the fixed-height card — past that it
   scrolls internally, with the slim #feae02 scrollbar supplied by
   .uwh-custom-scrollbar on the <p> (see uwh-utilities.css), never the
   browser default. The cap is per-breakpoint because the track height
   (and so the room above the panel) is itself per-breakpoint — see the
   media queries further down. home-team-section.js re-fits the bio
   wrapper's own animated height to whatever this ends up rendering. */
.uwh-team-bio.is-expanded p {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: 260px;
  overflow-y: auto;
}
/* "Read More" / "Read Less" toggle. Always in the DOM (see the PHP
   partial) but hidden until JS confirms the bio actually overflows the
   4-line clamp — .is-visible is what JS toggles. Mirrors
   .uwh-cft-card-back-readmore. */
.uwh-team-bio-readmore {
  display: none;
  margin: -18px 0 32px;
  padding: 0;
  background: none;
  border: none;
  font-family: Roboto, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #feae02;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.uwh-team-bio-readmore.is-visible {
  display: inline-block;
}
/* Same global-a11y-widget reset as .uwh-team-toggle above — hover/focus
   on any interactive element otherwise gets a solid yellow fill, pill
   radius and shadow from that widget's stylesheet. */
.uwh-team-bio-readmore:hover,
.uwh-team-bio-readmore:focus {
  color: #012245;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
  outline: none;
}
.uwh-team-bio-readmore:focus-visible {
  outline: 2px solid #feae02;
  outline-offset: 2px;
}

/* ---- Responsive ----
   Card WIDTH/positioning itself (the 3-card / 2-card / 1-card window,
   and the gap between cards) is entirely computed in JS — see
   home-team-section.js render(), which reads the mode straight off the
   same 1279px/782px cutoffs used here and is the single source of truth
   for that math (1279px, not the site's usual 1024px tier — see
   getMode()'s own comment: switching to 3-up right at 1024px left each
   slot too narrow for the fixed track height, over-cropping the photos'
   sides). This block only covers the purely-CSS knobs: track height, bio
   panel sizing, and nav arrow placement. ---- */
@media (max-width: 1279px) and (min-width: 783px) {
  .uwh-team-track {
    height: 480px;
  }
  .uwh-team-card-panel {
    bottom: 40px;
    width: 82%;
  }
  /* Shorter track here (480 vs 560) — less room above the bottom-anchored
     panel, so the Read More scroll area is capped tighter. */
  .uwh-team-bio.is-expanded p {
    max-height: 200px;
  }
  /* Tablet is a DIRECTIONAL 2-card window (active left, next peeking
     right — see render()'s baseShift), not desktop's centered 3-card
     window, so the gap between the two visible cards sits at the
     track's true horizontal center (50%), not desktop's ~35%. Flanking
     the arrows around that 50% line (instead of inheriting desktop's
     35%/right:35%) keeps them inside the actual gap instead of
     overlapping the active card. */
  .uwh-team-nav-prev {
    left: 50%;
    right: auto;
    transform: translate(calc(-100% - 12px), -50%);
  }
  .uwh-team-nav-next {
    left: 50%;
    right: auto;
    transform: translate(12px, -50%);
  }
}

@media (max-width: 782px) {
  .uwh-team {
    padding: 64px 0;
  }
  .uwh-team-heading {
    margin-bottom: 36px;
  }
  .uwh-team-track {
    height: 520px;
  }
  .uwh-team-card-panel {
    width: 90%;
    bottom: 24px;
  }
  .uwh-team-toggle {
    padding: 24px;
  }
  .uwh-team-bio {
    padding: 0 24px;
  }
  .uwh-team-bio.is-expanded p {
    max-height: 240px;
  }
  .uwh-team-nav {
    width: 40px;
    height: 40px;
  }
  .uwh-team-nav-prev {
    left: 16px;
    transform: translate(0%, -50%);
  }
  .uwh-team-nav-next {
    right: 16px;
    transform: translate(0%, -50%);
  }
}