/* Unique World Holidays — About Us page, Section 4 "Team Highlights" flip
   cards. Flip mechanics (rotateY 3D transform on an inner wrapper,
   backface-visibility: hidden, one card flipped at a time, perspective on
   the outer card not the face) are FORKED from
   home-seasonal-favorites-section.css — see that file's own comments for
   why the flip transform and the slide/position transform live on
   separate elements (so GSAP's translateX on the outer card never fights
   the CSS rotateY on the inner wrapper).

   New here: three layout states, driven by the PHP-supplied
   uwh-th--few / uwh-th--many class (about-team-highlights-section.php)
   combined with viewport width —

     .uwh-th--few  + desktop (>782px) -> static side-by-side grid, no nav
     .uwh-th--many + any width        -> slider (arrows)
     any state     + mobile (<=782px) -> forced single-card slider, even
                                          when uwh-th--few (only 2 items)

   The static and slider rule blocks are near-duplicated on purpose (once
   for the default desktop-few state, once again inside the 782px query so
   it also applies to mobile-few) — plain CSS has no way to share a
   declaration body across a comma + @media combination, so this mirrors
   the per-breakpoint duplication this stylesheet family already uses
   elsewhere (see home-seasonal-favorites-section.css's own breakpoints).
   Actually deciding WHICH state is active (do the transform math, wire up
   nav clicks/swipe) is JS's job — see
   assets/js/about-team-highlights-section.js. */

.uwh-th {
  width: 100%;
  background-color: #f9f9f9;
  padding: 80px 0;
  overflow: hidden;
}

.uwh-th-heading {
  text-align: center;
  margin: 0 0 48px;
  padding: 0 24px;
}

.uwh-th-title {
  margin: 0;
  max-width: 780px;
  margin-inline: auto;
  font-family: Poppins, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  color: #012245;
}

.uwh-th-carousel {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Nav arrows: same look as Seasonal Favorites. Hidden by default —
   only the slider states (below) turn them on. Nothing to navigate in the
   static-desktop-few state. ---- */
.uwh-th-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: #feae02;
  border: none;
  box-shadow: 0 4px 14px rgba(1, 34, 69, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.uwh-th-nav:hover,
.uwh-th-nav:focus {
  background: #012245;
}
.uwh-th-nav:focus-visible {
  outline: 2px solid #012245;
  outline-offset: 2px;
}
.uwh-th-nav-prev {
  left: 0;
}
.uwh-th-nav-next {
  right: 0;
}

/* ---- Card shell: shared by every layout state — only position/track
   differ per state below. perspective lives on the outer card (not the
   face) so the flip has real 3D depth instead of a flat squash.

   aspect-ratio: 4/5 — portrait, matched to the real team headshot/half-
   body photos this section is actually meant to show (was a wide
   landscape rectangle before, which forced portrait photos into an
   ugly over-zoomed crop). Paired with height:auto in every state below
   instead of a fixed px height, so the ratio holds EXACTLY at whatever
   width that state/breakpoint/JS ends up setting — no separate height
   number to keep in sync with each width by hand. Each state below
   still sets an explicit (generous) height on .uwh-th-track itself,
   because the track's own children (.uwh-th-card) are position:absolute
   in the slider states and so don't contribute to the track's height —
   without that, overflow:hidden would have nothing to clip against. */
.uwh-th-card {
  cursor: pointer;
  -webkit-perspective: 1600px;
  perspective: 1600px;
  aspect-ratio: 4 / 5;
}
.uwh-th-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.uwh-th-card.is-flipped .uwh-th-card-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Both faces stacked via position:absolute so the card's own size never
   changes between front/back. backface-visibility:hidden stops the
   "mirror text showing through" glitch mid-flip. */
.uwh-th-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Safari: backface-visibility:hidden on the face alone does NOT flatten
   its positioned descendants (front scrim + info -> name / designation,
   back name / designation / description) inside the preserve-3d inner
   wrapper — they keep backface-visibility:visible and render MIRRORED once
   the card is flipped away from the viewer (Safari-only; Chrome hides them
   via transform-style:flat). Push it onto every descendant — a no-op on
   anything not itself 3D-rotated. */
.uwh-th-card-face * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- Front face: image + bottom overlay strip (Name bold, Designation
   smaller/lighter). Spec calls for a strip, not a full-bleed scrim like
   Seasonal Favorites, so the gradient here is shallower/lower. ---- */
.uwh-th-card-front {
  background-size: cover;
  /* "center top" (not "center") — face priority. On a portrait card, cover
     crops the image's top/bottom edges (rarely its sides); anchoring the
     crop to the top keeps the face+shoulders in frame instead of centering
     the crop window lower and risking a chin-down/no-face crop. */
  background-position: center top;
  background-color: #e9ecef;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.uwh-th-card-front-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(1, 34, 69, 0.88) 0%,
    rgba(1, 34, 69, 0.55) 30%,
    rgba(1, 34, 69, 0) 58%
  );
}
.uwh-th-card-front-info {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.uwh-th-card-front-name {
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}
.uwh-th-card-front-designation {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

/* ---- Back face: Name, Designation, full Description — clean centered
   layout. Description scrolls internally if it overruns the fixed card
   height rather than growing/breaking the flip geometry. Horizontal
   padding trimmed from the original 32px (tuned for a ~560-700px wide
   landscape card) to 24px, since the portrait card is now only 320px
   wide at most — full 32px would leave noticeably less breathing room
   for wrapped description text than it did on the old wide card. ---- */
.uwh-th-card-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-color: #012245;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.uwh-th-card-back-name {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
}
.uwh-th-card-back-designation {
  display: inline-block;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #feae02;
}
/* overflow-y:auto here can genuinely scroll on a long description — the
   markup also carries .uwh-custom-scrollbar (assets/css/uwh-utilities.css)
   so that ever shows a slim themed scrollbar, not the browser default. */
.uwh-th-card-back-description {
  margin: 4px 0 0;
  max-height: 100%;
  overflow-y: auto;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

/* ══════════════════════════════════════════════════════════════════════
   STATE: uwh-th--few, desktop (default, >782px) — static side-by-side
   grid. No slider, no nav, cards just flow in a centered flex row.
   ══════════════════════════════════════════════════════════════════════ */
.uwh-th--few .uwh-th-track {
  position: static;
  height: auto;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.uwh-th--few .uwh-th-card {
  position: static;
  width: 460px;
  height: auto; /* derived from aspect-ratio: 4/5 above -> 400px */
  flex: 0 0 auto;
}

@media (max-width: 999px) {
  .uwh-th--few .uwh-th-card {
    width: 350px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   STATE: uwh-th--many, any width — always a slider (3+ items). Card width
   is set inline by JS (clamped to the track width, see the `cardWidth`
   line in render() in about-team-highlights-section.js) so it stays
   centered and never overflows on narrower desktop/tablet windows. 320px
   here matches that JS cap so the very first (pre-JS) paint is already
   the right size, not just whatever JS corrects it to a moment later.
   ══════════════════════════════════════════════════════════════════════ */
.uwh-th--many .uwh-th-carousel {
  padding: 0 76px;
}
.uwh-th--many .uwh-th-nav {
  display: flex;
}
.uwh-th--many .uwh-th-track {
  position: relative;
  /* 400px = the 320px JS-capped card width's own aspect-ratio height
     (320 * 5/4). A fixed upper bound, not a per-card measurement — see
     the shared .uwh-th-card comment above for why the track needs one
     at all. Actual card height is always <= this (JS only ever shrinks
     the width, never grows it past 320px), so there's never any clipping,
     just a little unused track space on the rare viewport where JS has
     to shrink the card below the 320px cap. */
  height: 400px;
  overflow: hidden;
}
.uwh-th--many .uwh-th-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 320px;
  height: auto;
}

@media (max-width: 1024px) {
  .uwh-th-title {
    font-size: 28px;
  }
  .uwh-th--many .uwh-th-carousel {
    padding: 0 60px;
  }
  /* No track-height override here any more: the 400px base value above
     already matches the 320px JS-capped card width at every width down
     to (viewport - carousel padding) < 320px, which only happens inside
     the 782px mobile breakpoint below (a separate, narrower cap). */
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE (<=782px): single-card slider, regardless of item count. These
   selectors repeat the uwh-th--few/uwh-th--many qualifiers so specificity
   ties with (and, by source order, wins over) the desktop-few static
   rules above — the exact same "few" section becomes a slider here.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 782px) {
  .uwh-th {
    padding: 56px 0;
  }
  .uwh-th-heading {
    margin-bottom: 32px;
  }
  .uwh-th-title {
    font-size: 24px;
  }
  .uwh-th-carousel,
  .uwh-th--few .uwh-th-carousel,
  .uwh-th--many .uwh-th-carousel {
    padding: 0 52px;
  }
  .uwh-th-nav,
  .uwh-th--few .uwh-th-nav,
  .uwh-th--many .uwh-th-nav {
    display: flex;
    width: 40px;
    height: 40px;
  }
  .uwh-th-track,
  .uwh-th--few .uwh-th-track,
  .uwh-th--many .uwh-th-track {
    position: relative;
    /* Same 400px safe upper bound as the desktop/tablet slider state
       above (see that comment) — real width here is normally well under
       the 320px JS cap (a phone's card = viewport minus 2x52px padding,
       almost always < 320px), so the real height is almost always well
       under 400px too; this is just the ceiling for overflow:hidden. */
    height: 400px;
    overflow: hidden;
  }
  .uwh-th-card,
  .uwh-th--few .uwh-th-card,
  .uwh-th--many .uwh-th-card {
    position: absolute;
    top: 0;
    left: 50%;
    height: auto; /* derived from aspect-ratio: 4/5, at whatever width applies */
    width: 100%;
    /* Caps the pre-JS/no-JS fallback width so aspect-ratio can't produce
       an oversized card (e.g. a 700px-wide "mobile" viewport just under
       the 782px breakpoint would otherwise get a ~875px-tall card here)
       before JS's own min(trackWidth, 320px) inline style takes over. */
    max-width: 320px;
  }
  .uwh-th-card-front-info {
    padding: 18px 20px;
  }
  .uwh-th-card-back {
    padding: 24px;
  }
}