/* ============================================================
 * Momentum OP - Partner Directory  (page-partner-directory.css v1.0.1)
 * Template: page-partner-directory.php  |  Root: .mop-partners-list
 * Loaded on the Partner Directory page (/partner-directory/) 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, --mop-icon-chevron, --mop-ease). This file holds only
 * Partner-directory layout deltas.
 *
 *  1. Page shell (full-width content area on this page only)
 *  2. Root and shared section rhythm
 *  3. Page top
 *  4. Directory controls (search, dropdowns, Member benefits switch)
 *  5. Result count and Clear filters
 *  6. Partner cards
 *  7. Load More and no-results state
 *  8. Closing card
 *  9. Hover, focus and reduced motion
 * ============================================================ */


/* ============================================================
 * 1. PAGE SHELL
 * Avada wraps the page in #main > .fusion-row at Site Width. Each
 * section centers its own 1375px row with 32px side padding, 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-partner-directory.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-partners-list) #main#main {
    padding-right: 0;
    padding-left: 0;
}

html body:has(.mop-partners-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-partners-list) #main#main > .fusion-row > .mop-partners-list {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
}


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

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

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

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

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

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

/* Filtered-out cards, the Load More row and the no-results state use the
   hidden attribute; flex and grid display rules must not override it. */
.mop-partners-list [hidden] {
    display: none !important;
}

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

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

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

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


/* ============================================================
 * 3. PAGE TOP
 * The header floats over the page, so the top padding includes it.
 * ============================================================ */

.mop-partners-list__top {
    padding: clamp(160px, 18vw, 220px) 32px clamp(64px, 8vw, 96px);
}

.mop-partners-list__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.mop-partners-list .mop-partners-list__h1 {
    max-width: 1100px;
    color: var(--awb-color8);
    font-size: clamp(44px, 6.6vw, 100px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.mop-partners-list .mop-partners-list__lede {
    max-width: 620px;
    color: var(--awb-color11);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    text-wrap: pretty;
}


/* ============================================================
 * 4. DIRECTORY CONTROLS
 * Four columns above 1100px, two from 641px to 1100px, one at 640px
 * and below (design). Fields follow the DSM form baseline: Color 2
 * fill, Color 3 border, 14px radius, Color 13 placeholder, Color 5
 * focus border. The dropdown chevron is the RCM --mop-icon-chevron.
 * ============================================================ */

.mop-partners-list__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 20px;
}

@media (min-width: 641px) {
    .mop-partners-list__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1101px) {
    .mop-partners-list__controls {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body .mop-partners-list .mop-partners-list__field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 56px;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--awb-color3);
    border-radius: 14px;
    background: var(--awb-color2);
    box-shadow: none;
    color: var(--awb-color9);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .3s;
}

body .mop-partners-list .mop-partners-list__field::placeholder {
    color: var(--awb-color13);
    opacity: 1;
}

body .mop-partners-list .mop-partners-list__field:focus {
    border-color: var(--awb-color5);
    outline: none;
}

body .mop-partners-list .mop-partners-list__select {
    padding-right: 44px;
    cursor: pointer;
}

.mop-partners-list .mop-partners-list__select option {
    background: var(--awb-color2);
    color: var(--awb-color9);
}

.mop-partners-list__select-wrap {
    position: relative;
    display: grid;
    min-width: 0;
}

.mop-partners-list__chevron {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 12px;
    height: 12px;
    background-color: var(--awb-color11);
    -webkit-mask: var(--mop-icon-chevron) center / 12px 12px no-repeat;
    mask: var(--mop-icon-chevron) center / 12px 12px no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Avada can add its own arrow beside a select; the chevron above is the design's. */
.mop-partners-list__select-wrap .select-arrow {
    display: none !important;
}

/* Member benefits switch: a real checkbox (works without JavaScript),
   drawn as the design's track and knob. */
.mop-partners-list__switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 14px 20px;
    border: 1px solid var(--awb-color3);
    border-radius: 14px;
    background: var(--awb-color2);
    color: var(--awb-color9);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    transition: border-color .3s;
    -webkit-tap-highlight-color: transparent;
}

.mop-partners-list__switch:has(.mop-partners-list__switch-input:checked) {
    border-color: var(--awb-color5);
}

.mop-partners-list .mop-partners-list__switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
    opacity: 0;
}

.mop-partners-list__track {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .18);
    transition: background .3s;
}

.mop-partners-list__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--awb-color9);
    transition: transform .3s var(--mop-ease);
}

.mop-partners-list__switch-input:checked + .mop-partners-list__track {
    background: var(--awb-color5);
}

.mop-partners-list__switch-input:checked + .mop-partners-list__track .mop-partners-list__knob {
    transform: translateX(16px);
}

.mop-partners-list__switch-label {
    min-width: 0;
}


/* ============================================================
 * 5. RESULT COUNT AND CLEAR FILTERS
 * ============================================================ */

.mop-partners-list__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
    font-size: 15px;
    line-height: normal;
}

.mop-partners-list__count {
    color: var(--awb-color11);
}

/* Hover color: DSM gap, see the spec file. --awb-color17 is the Global
   Options color the DSM correction adds; until it exists the link keeps
   Color 5 on hover. */
.mop-partners-list .mop-partners-list__clear {
    color: var(--awb-color5);
    font-weight: 600;
    text-decoration: none;
}


/* ============================================================
 * 6. PARTNER CARDS
 * Above 900px: three columns, 4:3 images. 900px and below: one column,
 * 16:10 images (design).
 * ============================================================ */

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

@media (min-width: 901px) {
    .mop-partners-list__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mop-partners-list__card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

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

@media (min-width: 901px) {
    .mop-partners-list .mop-partners-list__media {
        aspect-ratio: 4 / 3;
    }
}

.mop-partners-list__media .mop-partners-list__img {
    transition: transform 1.2s var(--mop-ease);
}

.mop-partners-list__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--awb-color5);
    color: var(--awb-color1);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

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

.mop-partners-list__type {
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

.mop-partners-list .mop-partners-list__name {
    color: var(--awb-color9);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.mop-partners-list .mop-partners-list__name a,
.mop-partners-list .mop-partners-list__more-link {
    color: var(--awb-color9);
    text-decoration: none;
}

.mop-partners-list .mop-partners-list__text {
    color: var(--awb-color11);
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}

.mop-partners-list .mop-partners-list__perk {
    color: var(--awb-color9);
    font-size: 15px;
    line-height: 1.5;
}

.mop-partners-list__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--mop-partners-list-line);
}

.mop-partners-list__where {
    color: var(--awb-color6);
    font-size: 15px;
    line-height: normal;
}

.mop-partners-list .mop-partners-list__more-link {
    margin: -14px 0 -14px auto;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
}


/* ============================================================
 * 7. LOAD MORE AND NO-RESULTS STATE
 * Load More is the RCM outline button (mop-btn-outline) on a real link,
 * so it also works without JavaScript.
 * ============================================================ */

.mop-partners-list__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 72px;
}

.mop-partners-list__more-status {
    color: var(--awb-color11);
    font-size: 15px;
    line-height: normal;
}

.mop-partners-list__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0 56px;
}

.mop-partners-list .mop-partners-list__empty-h {
    color: var(--awb-color8);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.mop-partners-list .mop-partners-list__clear--empty {
    font-size: 16px;
}


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

.mop-partners-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-partners-list__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px 64px;
}

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

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

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


/* ============================================================
 * 9. HOVER, FOCUS AND REDUCED MOTION
 * Design: card names and "View profile" turn orange on hover; card
 * images zoom to 1.04 over 1.2s; Clear filters lightens on hover. The
 * switch border turns orange when on. Keyboard focus shows the same
 * change plus a visible ring. Buttons keep their RCM states.
 * ============================================================ */

.mop-partners-list .mop-partners-list__name a:is(:hover, :focus-visible),
.mop-partners-list .mop-partners-list__more-link:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

.mop-partners-list .mop-partners-list__clear:is(:hover, :focus-visible) {
    color: var(--awb-color17, var(--awb-color5));
}

.mop-partners-list__media:is(:hover, :focus-visible) .mop-partners-list__img {
    transform: scale(1.04);
}

.mop-partners-list .mop-partners-list__name a:focus-visible,
.mop-partners-list .mop-partners-list__more-link:focus-visible,
.mop-partners-list .mop-partners-list__clear:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
    border-radius: 4px;
}

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

.mop-partners-list__switch:has(.mop-partners-list__switch-input:focus-visible) {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .mop-partners-list__media .mop-partners-list__img,
    .mop-partners-list__track,
    .mop-partners-list__knob,
    .mop-partners-list__switch,
    body .mop-partners-list .mop-partners-list__field {
        transition: none;
    }
}