/* ============================================================
 * Momentum OP - Staff Listing  (page-staff.css v1.0.2)
 * Template: page-staff.php  |  Root: .mop-staff-list
 * Loaded on the Staff page (/staff/) by inc/base-template-assets.php.
 * Inherits: MOP-DSM-20261015 (Avada Global Options), MOP-RCM-20261016
 * (mop-btn-arrow, mop-btn-outline, mop-eyebrow, mop-rise, mop-reveal,
 * mop-bars). This file holds only Staff-listing layout deltas.
 *
 *  1. Page shell (full-width content area on the Staff page only)
 *  2. Root and shared section rhythm
 *  3. Hero
 *  4. Intro statement
 *  5. Team: heading row and role filter chips
 *  6. Team: card grid (layout follows the number of cards shown)
 *  7. Schedule (Light Surface)
 *  8. Reviews
 *  9. Closing card
 * 10. Focus and reduced motion
 * ============================================================ */


/* ============================================================
 * 1. PAGE SHELL
 * Avada wraps the page in #main > .fusion-row at Site Width. Each
 * section draws its own full-width background and centers its own
 * 1375px row, so on this page only the content row is let out to the
 * full width (no 100vw, so no sideways scroll). WordPress adds no slug
 * body class for page-staff.php, so the selector keys on the root.
 * The doubled #main ID outranks every Avada #main rule, including the
 * 100% Width template padding, whichever Template the Page has.
 * ============================================================ */

html body:has(.mop-staff-list) #main#main {
    padding-right: 0;
    padding-left: 0;
}

html body:has(.mop-staff-list) #main#main > .fusion-row {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* Avada lays #main > .fusion-row out as a wrapping flex row, so this root
 * is a flex item, and a flex item never shrinks below its widest content
 * by default. The reviews carousel (and the Compare table on /classes/)
 * have very wide content, which stretched the whole page to about 1440px
 * on phones. min-width: 0 keeps the root at the row's width; wide widgets
 * clip or scroll inside their own boxes instead. */
html body:has(.mop-staff-list) #main#main > .fusion-row > .mop-staff-list {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
 * 2. ROOT AND SECTION RHYTHM
 * ============================================================ */

.mop-staff-list {
    --mop-staff-list-y: clamp(112px, 14vw, 192px);
    --mop-staff-list-media: #15123a; /* DSM 15 media placeholder (local component color) */
    --mop-staff-list-ring: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .2);
    color: var(--awb-color8);
    line-height: normal;
}

.mop-staff-list :where(h1, h2, h3, p, ul) {
    margin: 0;
}

.mop-staff-list :where(ul) {
    padding: 0;
    list-style: none;
}

.mop-staff-list :where(li) {
    margin: 0;
}

.mop-staff-list :where(li)::before {
    content: none;
}

.mop-staff-list__section {
    padding: 0 32px var(--mop-staff-list-y);
    scroll-margin-top: 68px;
}

.mop-staff-list__inner {
    max-width: 1375px;
    margin: 0 auto;
}

.mop-staff-list__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mop-staff-list__head--narrow {
    max-width: 780px;
}

.mop-staff-list__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 56px;
}

.mop-staff-list .mop-staff-list__h2 {
    color: inherit;
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.mop-staff-list__text {
    max-width: 580px;
    color: var(--awb-color11);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

.mop-staff-list__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.mop-staff-list__fill {
    position: absolute;
    inset: 0;
}

.mop-staff-list__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
 * 3. HERO
 * Full-bleed image under the floating header; content sits on the
 * bottom edge inside the design's 1375px box with 32px padding.
 * ============================================================ */

.mop-staff-list__hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(600px, 88vh, 960px);
    overflow: hidden;
    background: var(--awb-color7);
}

.mop-staff-list__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .6) 0%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .2) 35%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .45) 60%,
        hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .95) 100%);
    pointer-events: none;
}

.mop-staff-list__hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1375px;
    margin: 0 auto;
    padding: clamp(140px, 15vw, 180px) 32px clamp(64px, 9vh, 112px);
}

.mop-staff-list .mop-staff-list__h1 {
    max-width: 1100px;
    color: var(--awb-color8);
    font-size: clamp(52px, 8vw, 120px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.mop-staff-list .mop-staff-list__lede {
    max-width: 600px;
    color: #e1dfee; /* DSM 14 hero lead paragraph (approved local value) */
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    text-wrap: pretty;
}

.mop-staff-list__buttons--hero {
    margin-top: 8px;
}


/* ============================================================
 * 4. INTRO STATEMENT (DSM 15 large statement paragraph)
 * ============================================================ */

.mop-staff-list__intro {
    padding-top: var(--mop-staff-list-y);
}

.mop-staff-list__intro-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.mop-staff-list .mop-staff-list__statement {
    color: var(--awb-color6);
    font-size: clamp(26px, 3.1vw, 44px);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -.022em;
    text-wrap: pretty;
}

.mop-staff-list__lead {
    color: var(--awb-color9);
}

/* No intro: the team row needs its own space below the hero. */
.mop-staff-list__hero + .mop-staff-list__team {
    padding-top: var(--mop-staff-list-y);
}


/* ============================================================
 * 5. TEAM: HEADING ROW AND ROLE FILTER CHIPS
 * The chips are server-rendered with [hidden]; page-staff.js shows and
 * runs them, so without the script every profile shows and no dead
 * control appears.
 * ============================================================ */

.mop-staff-list__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mop-staff-list__chips[hidden] {
    display: none;
}

.mop-staff-list .mop-staff-list__chip {
    -webkit-appearance: none;
            appearance: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--mop-staff-list-ring);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--awb-color9);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s, border-color .25s, color .25s;
}

.mop-staff-list .mop-staff-list__chip:hover,
.mop-staff-list .mop-staff-list__chip:focus-visible {
    border-color: var(--awb-color5);
}

.mop-staff-list .mop-staff-list__chip[aria-pressed="true"] {
    border-color: var(--awb-color5);
    background: var(--awb-color5);
    color: var(--awb-color1);
}


/* ============================================================
 * 6. TEAM: CARD GRID
 * Six-column grid like the design. Spans and photo shapes follow the
 * number of cards shown (the filter re-renders only the matching cards,
 * so these counts always describe what is on screen):
 *   Large (above 1100px): cards span 2 (4:5). When the count leaves one
 *     extra card in the last row of three, the first four span 3 (5:4);
 *     two extra, the first two span 3 (5:4). One card spans 6 (21:9).
 *   Medium (600px to 1100px): two per row (4:5); with an odd count the
 *     first card spans the full row (16:9).
 *   Small (below 600px): one per row (4:5).
 * ============================================================ */

.mop-staff-list__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 56px 24px;
}

.mop-staff-list__item {
    --mop-staff-list-ratio: 4 / 5;
    grid-column: span 2;
    min-width: 0;
}

@media (min-width: 1101px) {
    /* Count = 3n + 4: first four cards wide. */
    .mop-staff-list__item:first-child:nth-last-child(3n + 4),
    .mop-staff-list__item:first-child:nth-last-child(3n + 4) ~ .mop-staff-list__item:nth-child(-n + 4) {
        --mop-staff-list-ratio: 5 / 4;
        grid-column: span 3;
    }

    /* Count = 3n + 2: first two cards wide. */
    .mop-staff-list__item:first-child:nth-last-child(3n + 2),
    .mop-staff-list__item:first-child:nth-last-child(3n + 2) ~ .mop-staff-list__item:nth-child(2) {
        --mop-staff-list-ratio: 5 / 4;
        grid-column: span 3;
    }

    /* One card: full row. */
    .mop-staff-list__item:only-child {
        --mop-staff-list-ratio: 21 / 9;
        grid-column: span 6;
    }
}

@media (min-width: 600px) and (max-width: 1100px) {
    .mop-staff-list__item {
        grid-column: span 3;
    }

    /* Odd count: first card full row. */
    .mop-staff-list__item:first-child:nth-last-child(odd) {
        --mop-staff-list-ratio: 16 / 9;
        grid-column: span 6;
    }
}

@media (max-width: 599px) {
    .mop-staff-list__item {
        grid-column: span 6;
    }
}

.mop-staff-list .mop-staff-list__card,
.mop-staff-list .mop-staff-list__card:is(:hover, :focus, :active) {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    color: var(--awb-color9);
    text-decoration: none;
}

.mop-staff-list__media {
    position: relative;
    display: block;
    aspect-ratio: var(--mop-staff-list-ratio);
    overflow: hidden;
    border-radius: 24px;
    background: var(--mop-staff-list-media);
}

.mop-staff-list__card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .55));
}

.mop-staff-list__role {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .78);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: var(--awb-color9);
    font-size: 14px;
    font-weight: 600;
}

.mop-staff-list__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

.mop-staff-list .mop-staff-list__name {
    color: inherit;
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.03em;
    overflow-wrap: break-word;
}

.mop-staff-list__card-text {
    color: var(--awb-color11);
    font-size: 15px;
}


/* ============================================================
 * 7. SCHEDULE (Light Surface)
 * ============================================================ */

.mop-staff-list__schedule {
    padding-top: var(--mop-staff-list-y);
    background: var(--awb-color14);
    color: var(--awb-color1);
}

.mop-staff-list__section-head--sched {
    margin-bottom: 40px;
}

.mop-staff-list__widget-card {
    padding: clamp(24px, 4vw, 48px);
    border-radius: 28px;
    background: var(--awb-color9);
    box-shadow:
        0 1px 2px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .04),
        0 24px 60px -32px hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .18);
}

.mop-staff-list__widget {
    min-height: 520px;
}


/* ============================================================
 * 8. REVIEWS
 * The heading row is ours; the carousel, stars and rating line are the
 * reviews plugin widget printed from Business Details. The section has
 * its own top space after the schedule band; directly after the team
 * row (no schedule) the team's bottom space is enough.
 * ============================================================ */

.mop-staff-list__reviews {
    padding-top: var(--mop-staff-list-y);
    overflow: hidden;
}

.mop-staff-list__team + .mop-staff-list__reviews {
    padding-top: 0;
}

.mop-staff-list__reviews-widget {
    min-width: 0;
}


/* ============================================================
 * 9. CLOSING CARD
 * The bar graphic is the RCM mop-bars component; this card is its host
 * (relative, isolated, clipped).
 * ============================================================ */

/* Reviews hidden: the card follows the schedule band and needs space. */
.mop-staff-list__schedule + .mop-staff-list__cta {
    padding-top: var(--mop-staff-list-y);
}

.mop-staff-list__cta-card {
    position: relative;
    isolation: isolate;
    max-width: 1375px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) clamp(28px, 6vw, 88px);
    overflow: hidden;
    border-radius: 32px;
    background: var(--awb-color5);
    color: var(--awb-color1);
}

.mop-staff-list__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px 64px;
}

.mop-staff-list__cta-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
}

.mop-staff-list .mop-staff-list__cta-h2 {
    color: inherit;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.mop-staff-list .mop-staff-list__cta-text {
    max-width: 520px;
    color: var(--awb-color1);
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.55;
    text-wrap: pretty;
}


/* ============================================================
 * 10. FOCUS AND REDUCED MOTION
 * Cards have no hover change in the design; keyboard focus rings the
 * photo. Chips show the hover border on focus plus a ring. Buttons
 * keep their RCM focus states.
 * ============================================================ */

.mop-staff-list .mop-staff-list__card:focus-visible {
    outline: none;
}

.mop-staff-list .mop-staff-list__card:focus-visible .mop-staff-list__media {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

.mop-staff-list .mop-staff-list__chip:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .mop-staff-list .mop-staff-list__chip {
        transition: none;
    }
}