/*
 * Virgo CMS - Team Carousel Layout Styles
 *
 * Per-type layout for the team_carousel module. The base box model, photo shapes
 * and social icons live in team-base.css; this file owns the Swiper slide sizing,
 * the pagination/arrow control styling, the square-photo corner radius and the
 * hover-effect variants driven by the data-hover-effect attribute
 * (none / overlay / lift / zoom / glow / tilt). Swiper's own core styles come
 * from the vendor bundle (swiper-bundle.min.css).
 *
 * Hover follows the Shadow-Is-State rule: a flat hairline border at rest earns a
 * shadow only when the user engages the card.
 */

/* ============================================
   SQUARE PHOTO CORNER RADIUS
   ============================================ */
/* team_carousel shares team_card's photo shape model: square now owns its own
   corner radius knob (photo_border_radius -> --team-photo-radius). This
   overrides the base ".team--shape-square .team__photo { border-radius: 0 }"
   rule via higher specificity + later source order (team-carousel.css loads
   after team-base.css). Scoped to .team--carousel. */
.team--carousel.team--shape-square .team__photo {
    border-radius: var(--team-photo-radius, 0px);
}

/* The carousel replaces the CSS grid with a Swiper track; hide the grid rules
   inherited from team-base.css so the track lays out as slides. */
.team--carousel .team__grid {
    display: block;
}

/* Each card fills its slide width (Swiper manages the slide box). */
.team--carousel .team__card {
    height: 100%;
}

/* Hover lift breathing room. Swiper's core rule forces `.swiper { overflow:
   hidden; padding: 0 }` so a card that translates up on hover (the "lift" and
   "glow" variants) has its top edge + the top half of its lift shadow clipped by
   the viewport — the card's upper portion vanishes on engagement. The grid-based
   team_card module has no such clip, which is why only the carousel shows it.
   Vertical padding is safe here (Swiper only sizes/offsets slides on the
   horizontal axis), so this top + bottom padding opens the clip box just enough
   for the lift distance + its shadow spread to render in full. Overrides the
   vendor `.swiper { padding: 0 }` via `.team--carousel .team__swiper`
   specificity. */
.team--carousel .team__swiper {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ============================================
   HOVER: none (informational cards stay put)
   ============================================ */
.team--carousel[data-hover-effect="none"] .team__card {
    transition: none;
}

/* ============================================
   HOVER: lift (the signature featured-card motion)
   ============================================ */
.team--carousel[data-hover-effect="lift"] .team__card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.team--carousel[data-hover-effect="lift"] .team__card:hover {
    transform: translateY(-4px);
    border-color: var(--team-border-strong, #c4ccc8);
    /* Lift shadow: green-grey tinted, low-opacity (Elevation vocabulary).
       Blur kept compact so the tail clears the carousel edge. */
    box-shadow: 0 2px 4px rgba(26, 36, 33, 0.06),
                0 8px 16px rgba(26, 36, 33, 0.12);
}

.team--carousel[data-hover-effect="lift"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

.team--carousel[data-hover-effect="lift"] .team__card:hover .team__photo {
    border-color: var(--team-primary-tint, #e7efec);
}

/* ============================================
   HOVER: overlay (a tonal wash slides over the card body)
   ============================================ */
.team--carousel[data-hover-effect="overlay"] .team__card {
    position: relative;
    overflow: hidden;
}

/* The overlay is a ::after wash that fades in on hover; it sits behind the body
   so the text stays legible (a Mineral-tinted veil, not a dark scrim). */
.team--carousel[data-hover-effect="overlay"] .team__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--team-primary-tint, #e7efec);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.team--carousel[data-hover-effect="overlay"] .team__card > * {
    position: relative;
    z-index: 1;
}

.team--carousel[data-hover-effect="overlay"] .team__card:hover::after {
    opacity: 1;
}

.team--carousel[data-hover-effect="overlay"] .team__card:hover {
    border-color: var(--team-primary, #1d6b5e);
}

.team--carousel[data-hover-effect="overlay"] .team__card:hover .team__name {
    color: var(--team-primary-deep, #155046);
}

/* ============================================
   HOVER: zoom (photo crops in, card stays put)
   The card body is anchored; only the photo scales up gently inside its
   overflow-hidden box. The lightest possible motion — premium and quiet. The
   image owns its own transition so it never animates on first paint.
   ============================================ */
.team--carousel[data-hover-effect="zoom"] .team__img {
    transition: transform 0.4s ease;
}

.team--carousel[data-hover-effect="zoom"] .team__card:hover .team__img {
    transform: scale(1.08);
}

.team--carousel[data-hover-effect="zoom"] .team__card:hover {
    border-color: var(--team-border-strong, #c4ccc8);
}

.team--carousel[data-hover-effect="zoom"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

/* ============================================
   HOVER: glow (Kelp Teal halo earns the shadow)
   Shadow-Is-State variant: a flat hairline at rest earns a primary-tinted halo
   on engagement. The ::after layer paints ONLY an inset 2px primary ring (edge
   only — the interior is not tinted) + a soft cast shadow so the card reads as
   "lifted toward the brand" without leaving the tonal palette.
   ============================================ */
.team--carousel[data-hover-effect="glow"] .team__card {
    position: relative;
    overflow: hidden;
}

.team--carousel[data-hover-effect="glow"] .team__card::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px var(--team-primary, #1d6b5e);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.team--carousel[data-hover-effect="glow"] .team__card:hover::after {
    opacity: 1;
}

.team--carousel[data-hover-effect="glow"] .team__card:hover {
    border-color: var(--team-primary, #1d6b5e);
    box-shadow: 0 4px 12px rgba(29, 107, 94, 0.28);
}

.team--carousel[data-hover-effect="glow"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

.team--carousel[data-hover-effect="glow"] .team__card:hover .team__position {
    color: var(--team-primary-deep, #155046);
}

/* ============================================
   HOVER: tilt (photo wakes up in full colour)
   The member photo rests in full monochrome — a quiet "archive" plate — and
   snaps to full colour on hover, so the engaged card reads as "coming alive".
   The grayscale(1) -> grayscale(0) swing is deliberately strong; a mild contrast
   dip at rest keeps portraits from looking harsh while still reading as B&W.
   ============================================ */
.team--carousel[data-hover-effect="tilt"] .team__img {
    filter: grayscale(1) contrast(0.95) brightness(1.02);
    transition: filter 0.45s ease, transform 0.45s ease;
}

.team--carousel[data-hover-effect="tilt"] .team__card:hover .team__img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.06);
}

.team--carousel[data-hover-effect="tilt"] .team__card:hover {
    border-color: var(--team-primary-tint, #e7efec);
}

.team--carousel[data-hover-effect="tilt"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

/* ============================================
   FOCUS VISIBILITY (keyboard)
   ============================================ */
.team--carousel .team__card:focus-visible {
    outline: 2px solid var(--team-primary, #1d6b5e);
    outline-offset: 2px;
}

/* The linked-card focus outline borrows the card corner radius. */
.team--carousel .team__card-link:focus-visible {
    outline: 2px solid var(--team-primary, #1d6b5e);
    outline-offset: 2px;
    border-radius: var(--team-radius, 12px);
}

/* ============================================
   CONTROLS HOST (Swiper navigation tokens)
   The .team--carousel container is the containing block for the nav arrows
   and pagination dots, which are rendered as SIBLINGS of the Swiper root
   (not inside it) so the root's overflow:hidden never clips them. Swiper's
   own .swiper-button-prev/next rules size and place the arrows via the
   --swiper-navigation-* tokens set here. position:relative makes those
   absolute arrows anchor to this box; the slide vertical center is 50%
   (no perspective overshoot here, unlike the photo carousels).
   ============================================ */
.team--carousel {
    position: relative;
    --swiper-navigation-size: 44px;
    --swiper-navigation-sides-offset: 8px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-color: var(--text-ink, #1a2421);
}

/* When every slide fits within slidesPerView (single navigable stop), Swiper
   auto-locks the controls — `.swiper-button-lock` / `.swiper-pagination-lock`
   both carry `display:none` in the vendor CSS — which would hide the dots and
   arrows even though the admin enabled them. The carousel still honors the full
   admin slidesPerView (3 cards visible when 3+ slides exist), so this override
   keeps the controls visible at that single-stop case. The arrows still wrap via
   rewind whenever there is more than one stop to move through. */
.team--carousel .team__arrow.swiper-button-lock {
    display: flex;
    align-items: center;
    justify-content: center;
}

.team--carousel .team__pagination.swiper-pagination-lock {
    display: block;
}

/* ============================================
   PAGINATION
   ============================================ */
.team--carousel .team__pagination.swiper-pagination {
    position: relative;
    margin-top: 18px;
    text-align: center;
}

.team--carousel .team__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: var(--team-border-strong, #c4ccc8);
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
    margin: 0 3px;
}

.team--carousel .team__pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: var(--team-primary, #1d6b5e);
    transform: scale(1.15);
}

/* ============================================
   NAVIGATION ARROWS
   Mirrors the photo carousels' arrow control (spin/cube/flip/...): a round
   translucent button carrying Swiper's swiper-button-prev/next classes plus
   an inline SVG chevron. Position/size/placement come from Swiper's own
   rules via the --swiper-navigation-* tokens above — no left/right/margin
   overrides here, which avoids specificity clashes with Swiper's selectors.
   Only the visual layer (face, color, reveal-on-hover) is defined here.
   ============================================ */
.team--carousel .team__arrow {
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(26, 36, 33, 0.10));
    opacity: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Reveal arrows on hover over the whole module. The arrows are siblings of
   the Swiper root (inside .team), so :hover is scoped to .team--carousel. */
.team--carousel:hover .team__arrow {
    opacity: 1;
}

.team--carousel .team__arrow:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.team--carousel .team__arrow:focus-visible {
    outline: 3px solid var(--accent-color, #c2683f);
    outline-offset: 3px;
}

.team--carousel .team__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Disabled arrow: dimmed-but-visible (0.3) so the user reads "no more slides"
   instead of the control vanishing. Overrides Swiper's own .35 opacity. */
.team--carousel .team__arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.team--carousel:hover .team__arrow.swiper-button-disabled {
    opacity: 0.3;
}

/* ============================================
   DARK MODE
   Dark button face with a light icon, mirroring the photo carousels.
   ============================================ */
[data-bs-theme="dark"] .team--carousel .team__arrow {
    background: rgba(30, 30, 30, 0.9);
    color: #d7dedb;
}

[data-bs-theme="dark"] .team--carousel .team__arrow:hover {
    background: #161c1a;
}