/*
 * Virgo CMS - Team Profile Layout Styles
 *
 * Per-type layout for the team_profile module: clickable grid cards (photo +
 * name, minimal) and the fullscreen profile modal they open on click.
 *
 * Modal elevation follows the Elevation vocabulary: the dialog uses the Modal
 * shadow (the topmost layer). Open animations (fade / zoom / slide) are driven
 * by the data-modal-animation attribute → dialog modifier class.
 *
 * The base card box model, photo shapes and social icons live in team-base.css.
 */

/* ============================================
   GRID CARDS (clickable triggers)
   ============================================ */
.team--profile .team__card--trigger {
    cursor: pointer;
}

/* ============================================
   SQUARE PHOTO CORNER RADIUS (team_profile)
   ============================================ */
/* square owns its own corner radius knob (photo_border_radius ->
   --team-photo-radius), overriding the base ".team--shape-square .team__photo
   { border-radius: 0 }" via higher specificity + later source order. Scoped to
   .team--profile so team_card / team_carousel are untouched. rounded was dropped
   across the whole Team family. */
.team--profile.team--shape-square .team__photo,
.team--profile.team--shape-square .team-modal__photo {
    border-radius: var(--team-photo-radius, 0px);
}

/* ============================================
   MODAL CONTAINER
   ============================================ */
.team-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.team-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 26, 24, 0.55);
    backdrop-filter: blur(2px);
}

/* ============================================
   MODAL DIALOG
   ============================================ */
.team-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--team-surface);
    border-radius: 16px;
    /* Modal shadow — the topmost layer (green-grey tinted). */
    box-shadow: 0 24px 60px rgba(26, 36, 33, 0.18);
    border: 1px solid var(--team-border, #dfe4e1);
}

/* ============================================
   MODAL CONTENT (photo + body)
   ============================================ */
.team-modal__content {
    display: flex;
    flex-direction: column;
    padding: 32px;
    text-align: center;
}

/* The modal photo box width is the dialog width * modal_photo_size_percent
   (--team-modal-photo-size, default 60%), capped at 576px (640 dialog * 0.90).
   aspect-ratio keeps the square box so a single width knob drives both axes. */
.team-modal__photo {
    width: var(--team-modal-photo-size, 60%);
    max-width: 576px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 20px;
    overflow: hidden;
    background: var(--team-sunken, #eff2f0);
    border: 1px solid var(--team-border, #dfe4e1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team--shape-circle .team-modal__photo {
    border-radius: 50%;
}
.team--shape-square .team-modal__photo {
    border-radius: 0;
}

.team-modal__photo .team__img,
.team-modal__photo .team__photo-placeholder {
    width: 100%;
    height: 100%;
}

.team-modal__photo .team__img {
    opacity: 1;
}

/* When the member carries a per-language link, the modal photo is wrapped in an
   <a> (.team-modal__photo-link). The anchor fills the photo box (the box is a
   flex container, so the flex-item anchor stretches to width/height:100%), and a
   subtle photo zoom signals the photo is clickable. Plain (linkless) members
   keep the static photo — no anchor is emitted there. */
.team-modal__photo-link {
    display: flex;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.team-modal__photo-link .team__img {
    transition: transform 0.3s ease;
}

.team-modal__photo-link:hover .team__img {
    transform: scale(1.04);
}

/* Keyboard focus on the photo link follows the same Kelp Teal outline used by
   the grid triggers, so the clickable photo is discoverable for keyboard users. */
.team-modal__photo-link:focus-visible {
    outline: 2px solid var(--team-primary, #1d6b5e);
    outline-offset: 2px;
}

.team-modal__name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--team-ink, #1a2421);
}

.team-modal__position {
    font-size: 0.95rem;
    color: var(--team-primary, #1d6b5e);
    font-weight: 600;
    margin: 0 0 18px;
}

.team-modal__description {
    color: var(--team-text, #2a3530);
    margin: 0 0 20px;
    text-align: center;
}

/* ============================================
   MODAL SOCIAL
   ============================================ */
.team-modal__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--team-border, #dfe4e1);
    margin-top: auto;
}

/* ============================================
   CLOSE BUTTON
   ============================================ */
.team-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--team-border, #dfe4e1);
    background: var(--team-close-bg, rgba(255, 255, 255, 0.95));
    color: var(--team-muted, #5a6b66);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.team-modal__close:hover {
    background: var(--team-primary, #1d6b5e);
    color: #fff;
    border-color: var(--team-primary-deep, #155046);
}

.team-modal__close svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   OPEN ANIMATIONS
   ============================================ */
.team-modal__dialog--fade {
    animation: team-modal-fade var(--team-modal-duration, 250ms) ease forwards;
}
@keyframes team-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.team-modal__dialog--zoom {
    animation: team-modal-zoom var(--team-modal-duration, 280ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes team-modal-zoom {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.team-modal__dialog--slide {
    animation: team-modal-slide var(--team-modal-duration, 300ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes team-modal-slide {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

.team-modal--open .team-modal__backdrop {
    animation: team-modal-backdrop 0.25s ease forwards;
}
@keyframes team-modal-backdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .team-modal__dialog--fade,
    .team-modal__dialog--zoom,
    .team-modal__dialog--slide,
    .team-modal--open .team-modal__backdrop {
        animation: none;
    }
    /* Suppress the photo-link hover zoom for users who prefer reduced motion. */
    .team-modal__photo-link .team__img {
        transition: none;
    }
    .team-modal__photo-link:hover .team__img {
        transform: none;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 575.98px) {
    .team-modal__content {
        padding: 24px 20px;
    }
    /* On small screens the dialog itself shrinks below the 576px ceiling, so
       the photo must track the viewport too — cap it at 80vw so it never
       overflows the narrow dialog while still honouring the size knob. */
    .team-modal__photo {
        max-width: 80vw;
    }
    .team-modal__name {
        font-size: 1.25rem;
    }
}

/* ============================================
   DARK MODE
   The close button chip floats over the modal dialog; flipped to a
   translucent Slate Teal so it reads against the dark dialog surface.
   ============================================ */
[data-bs-theme="dark"] .team-modal__close {
    --team-close-bg: rgba(29, 37, 34, 0.95);
}

/* ============================================
   HOVER-EFFECT VARIANTS (data-hover-effect)
   ============================================ */
/* Hover-effect variants driven by the data-hover-effect attribute, scoped to
   .team--profile. Mirrors team-card.css / team-carousel.css: each Team type
   scopes the hover CSS in its own file (the existing accepted pattern). The
   profile trigger is a real <button> carrying the shared .team__card class, so
   these selectors engage it without a --trigger variant. */
.team--profile[data-hover-effect="none"] .team__card {
    transition: none;
}

/* HOVER: lift (the signature featured-card motion) */
.team--profile[data-hover-effect="lift"] .team__card {
    cursor: pointer;
}

.team--profile[data-hover-effect="lift"] .team__card:hover {
    transform: translateY(-4px);
    border-color: var(--team-border-strong, #c4ccc8);
    box-shadow: 0 2px 4px rgba(26, 36, 33, 0.06),
                0 8px 16px rgba(26, 36, 33, 0.12);
}

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

.team--profile[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--profile[data-hover-effect="overlay"] .team__card {
    position: relative;
    overflow: hidden;
}

.team--profile[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--profile[data-hover-effect="overlay"] .team__card > * {
    position: relative;
    z-index: 1;
}

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

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

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

/* HOVER: zoom (photo crops in, card stays put) */
.team--profile[data-hover-effect="zoom"] .team__img {
    transition: transform 0.4s ease;
}

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

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

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

/* HOVER: glow (Kelp Teal halo earns the shadow) */
.team--profile[data-hover-effect="glow"] .team__card {
    position: relative;
    overflow: hidden;
}

.team--profile[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--profile[data-hover-effect="glow"] .team__card:hover::after {
    opacity: 1;
}

.team--profile[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--profile[data-hover-effect="glow"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

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

/* HOVER: tilt (photo wakes up in full colour) */
.team--profile[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--profile[data-hover-effect="tilt"] .team__card:hover .team__img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.06);
}

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

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

/* FOCUS VISIBILITY (keyboard) — profile triggers are real <button>s. */
.team--profile .team__card:focus-visible {
    outline: 2px solid var(--team-primary, #1d6b5e);
    outline-offset: 2px;
}