/* ============================================================
 * Momentum OP - Gallery Page  (page-gallery.css v1.0.1)
 * Template: page-gallery.php  |  Root: .mop-gallery-list
 * Loaded on the Gallery page (/gallery/) 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-ease). This file holds only Gallery-page layout deltas.
 *
 *  1. Page shell (full-width content area on this page only)
 *  2. Root and shared rules
 *  3. Page top
 *  4. Latest album (light section)
 *  5. Album controls (type chips, search, totals)
 *  6. Year groups and album cards
 *  7. No-results state
 *  8. Closing card
 *  9. Album viewer (full-screen dialog)
 * 10. Photo viewer (lightbox over the album)
 * 11. Hover, focus and reduced motion
 * ============================================================ */


/* ============================================================
 * 1. PAGE SHELL
 * Avada wraps the page in #main > .fusion-row at Site Width. The light
 * Latest Album band is full width and every 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-gallery.php, so the
 * selector keys on the root. The doubled #main ID outranks every Avada
 * #main rule, including the 100% Width template padding.
 * ============================================================ */

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

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

/* The page behind an open album or photo stays still (design). Works
   for the server-opened album (?album=) and the script-opened one. */
html:has(.mop-gallery-list__album[open]),
html:has(.mop-gallery-list__viewer[open]) {
    overflow: hidden;
}


/* ============================================================
 * 2. ROOT AND SHARED RULES
 * ============================================================ */

.mop-gallery-list {
    --mop-gallery-list-y: clamp(112px, 14vw, 192px);
    --mop-gallery-list-rule: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .12);
    --mop-gallery-list-ring: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .2);
    --mop-gallery-list-field: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .16);
    --mop-gallery-list-pill: hsla(var(--awb-color9-h), var(--awb-color9-s), var(--awb-color9-l), .28);
    color: var(--awb-color8);
    line-height: normal;
}

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

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

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

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

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

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

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


/* ============================================================
 * 3. PAGE TOP
 * Title block left, lead paragraph right, bottoms aligned; the two wrap
 * into one column when the row is narrower than about 1060px (design).
 * ============================================================ */

.mop-gallery-list__hero {
    padding: clamp(160px, 18vw, 220px) 32px clamp(80px, 9vw, 120px);
}

.mop-gallery-list__hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px clamp(40px, 6vw, 96px);
    max-width: 1375px;
    margin: 0 auto;
}

.mop-gallery-list__hero-head {
    display: flex;
    flex: 1 1 560px;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

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

.mop-gallery-list__hi {
    color: var(--awb-color5);
}

.mop-gallery-list .mop-gallery-list__lede {
    flex: 0 1 460px;
    padding-bottom: 8px;
    color: var(--awb-color6);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.02em;
    text-wrap: pretty;
}

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


/* ============================================================
 * 4. LATEST ALBUM
 * Light Surface band. Cover and copy side by side, stacking below about
 * 1050px (two 460px minimum columns plus the gap), as designed.
 * ============================================================ */

.mop-gallery-list__latest {
    padding: var(--mop-gallery-list-y) 32px;
    background: var(--awb-color14);
    color: var(--awb-color1);
}

.mop-gallery-list__latest-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    align-items: center;
    gap: clamp(36px, 6vw, 96px);
    max-width: 1375px;
    margin: 0 auto;
}

.mop-gallery-list .mop-gallery-list__latest-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 28px;
    background: var(--awb-color1);
    text-decoration: none;
}

.mop-gallery-list__latest-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--awb-color5);
    color: var(--awb-color1);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}

.mop-gallery-list__latest-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.mop-gallery-list .mop-gallery-list__latest-meta {
    color: var(--awb-color4);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

.mop-gallery-list .mop-gallery-list__latest-text {
    max-width: 480px;
    color: var(--awb-color15);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

.mop-gallery-list__latest-btn {
    max-width: 100%;
    margin-top: 8px;
}


/* ============================================================
 * 5. ALBUM CONTROLS
 * Type chips left and the search box right on one wrapping row, the
 * album and photo total under them, a 12% white rule below (design).
 * ============================================================ */

.mop-gallery-list__albums {
    padding: var(--mop-gallery-list-y) 32px;
    scroll-margin-top: 76px;
}

.mop-gallery-list__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 6vw, 80px);
    max-width: 1375px;
    margin: 0 auto;
}

.mop-gallery-list__controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--mop-gallery-list-rule);
}

.mop-gallery-list__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}

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

.mop-gallery-list .mop-gallery-list__chip {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--mop-gallery-list-ring);
    border-radius: 999px;
    background: transparent;
    color: var(--awb-color9);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s, border-color .25s, color .25s;
}

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

.mop-gallery-list__search {
    position: relative;
    display: flex;
    flex: 0 1 340px;
    align-items: center;
    min-width: min(100%, 260px);
    margin: 0;
}

.mop-gallery-list__search-icon {
    position: absolute;
    left: 18px;
    display: block;
    color: var(--awb-color6);
    pointer-events: none;
}

body .mop-gallery-list .mop-gallery-list__search-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 18px 0 48px;
    border: 1px solid var(--mop-gallery-list-field);
    border-radius: 999px;
    outline: none;
    background: var(--awb-color2);
    box-shadow: none;
    color: var(--awb-color9);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    transition: border-color .25s;
}

body .mop-gallery-list .mop-gallery-list__search-input::placeholder {
    color: var(--awb-color13);
    opacity: 1;
}

body .mop-gallery-list .mop-gallery-list__search-input:focus {
    border-color: var(--awb-color5);
}

.mop-gallery-list .mop-gallery-list__count {
    color: var(--awb-color11);
    font-size: 15px;
    line-height: normal;
}


/* ============================================================
 * 6. YEAR GROUPS AND ALBUM CARDS
 * Newest year first. Cards fill columns of at least 280px with 40px
 * rows and 20px gutters; 4:3 covers with the photo count pill. The
 * whole card is one link; on hover or focus the title turns orange and
 * the cover zooms (the card triggers both).
 * ============================================================ */

.mop-gallery-list__results {
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 6vw, 80px);
}

.mop-gallery-list__group {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mop-gallery-list__group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px;
}

.mop-gallery-list .mop-gallery-list__year {
    color: var(--awb-color8);
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
}

.mop-gallery-list .mop-gallery-list__group-meta {
    color: var(--awb-color11);
    font-size: 15px;
    line-height: normal;
}

.mop-gallery-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 40px 20px;
}

.mop-gallery-list__item {
    min-width: 0;
}

.mop-gallery-list .mop-gallery-list__card,
.mop-gallery-list .mop-gallery-list__card:visited {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--awb-color9);
    text-decoration: none;
    transition: color .3s;
}

.mop-gallery-list__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 22px;
    background: var(--awb-color2);
}

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

.mop-gallery-list__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .78);
    color: var(--awb-color9);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
}

.mop-gallery-list__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mop-gallery-list__meta {
    color: var(--awb-color5);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

.mop-gallery-list .mop-gallery-list__name {
    color: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-wrap: pretty;
    overflow-wrap: break-word;
}


/* ============================================================
 * 7. NO-RESULTS STATE
 * ============================================================ */

.mop-gallery-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 64px 24px;
    border-radius: 28px;
    background: var(--awb-color2);
    text-align: center;
}

.mop-gallery-list .mop-gallery-list__empty-h {
    color: var(--awb-color8);
    font-size: 26px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.02em;
}

.mop-gallery-list .mop-gallery-list__empty-text {
    color: var(--awb-color11);
    font-size: 16px;
    line-height: normal;
}

.mop-gallery-list .mop-gallery-list__clear {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--mop-gallery-list-pill);
    border-radius: 999px;
    color: var(--awb-color8);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .25s;
}


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

.mop-gallery-list__cta {
    padding: 0 32px var(--mop-gallery-list-y);
}

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

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

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

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

.mop-gallery-list__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}


/* ============================================================
 * 9. ALBUM VIEWER
 * Native <dialog>: the script opens it with showModal() (top layer,
 * above the fixed header and the admin bar, focus kept inside). With
 * ?album= in the URL the server prints it open, so it also works
 * without the script (the close control is then a plain link).
 * The dialog is the scroll container; its title bar sticks to the top.
 * ============================================================ */

.mop-gallery-list .mop-gallery-list__album {
    position: fixed;
    inset: 0;
    z-index: 110;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    background: var(--awb-color1);
    color: var(--awb-color9);
}

.mop-gallery-list .mop-gallery-list__album::backdrop,
.mop-gallery-list .mop-gallery-list__viewer::backdrop {
    background: transparent;
}

.mop-gallery-list__album-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--awb-color3);
    background: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .9);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}

.mop-gallery-list__album-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1375px;
    margin: 0 auto;
    padding: 18px 32px;
}

.mop-gallery-list__album-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mop-gallery-list .mop-gallery-list__album-meta {
    color: var(--awb-color5);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

.mop-gallery-list .mop-gallery-list__album-title {
    overflow: hidden;
    color: var(--awb-color9);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.025em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mop-gallery-list__album-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1375px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

.mop-gallery-list .mop-gallery-list__album-text {
    max-width: 640px;
    color: var(--awb-color11);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

.mop-gallery-list__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 12px;
}

.mop-gallery-list__photo-item {
    min-width: 0;
}

.mop-gallery-list .mop-gallery-list__photo {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--awb-color2);
    cursor: zoom-in;
}

.mop-gallery-list__photo .mop-gallery-list__img {
    transition: transform .6s var(--mop-ease);
}

/* Round controls: album close, photo close (52px) and previous / next
   (56px), white 20% ring, orange fill on hover and focus (design). */
.mop-gallery-list .mop-gallery-list__round {
    all: unset;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    border: 1px solid var(--mop-gallery-list-ring);
    border-radius: 50%;
    background: transparent;
    color: var(--awb-color9);
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s, border-color .3s;
}

.mop-gallery-list .mop-gallery-list__round--step {
    width: 56px;
    height: 56px;
    font-size: 20px;
}


/* ============================================================
 * 10. PHOTO VIEWER
 * Second native <dialog> over the album (opened by the script only).
 * Click anywhere but the photo or the arrows to close; arrow keys,
 * Escape and a 40px swipe work too. Arrows hide below 640px (design).
 * ============================================================ */

.mop-gallery-list .mop-gallery-list__viewer {
    position: fixed;
    inset: 0;
    z-index: 120;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: hsla(var(--awb-color7-h), var(--awb-color7-s), var(--awb-color7-l), .97);
    color: var(--awb-color9);
}

.mop-gallery-list .mop-gallery-list__viewer[open] {
    display: flex;
    flex-direction: column;
}

.mop-gallery-list__viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
}

.mop-gallery-list .mop-gallery-list__viewer-pos {
    color: var(--awb-color11);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    font-variant-numeric: tabular-nums;
}

.mop-gallery-list__viewer-stage {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 0;
    padding: 0 24px 32px;
}

.mop-gallery-list__viewer-img {
    display: block;
    width: auto;
    min-width: 0;
    max-width: min(1400px, 100%);
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 16px;
}

@media (max-width: 639px) {
    .mop-gallery-list .mop-gallery-list__round--step {
        display: none;
    }
}


/* ============================================================
 * 11. HOVER, FOCUS AND REDUCED MOTION
 * Design states: chips get an orange ring; the search box border turns
 * orange on focus; album cards turn their title orange and zoom the
 * cover 5% (.8s); album photos zoom 5% (.6s); Clear filters gets an
 * orange ring; round controls fill orange. Keyboard focus shows the
 * hover change plus a visible ring (white on navy, navy on light).
 * Buttons keep their RCM states.
 * ============================================================ */

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

.mop-gallery-list .mop-gallery-list__chip:not([aria-current="true"]):is(:hover, :focus, :active, :visited) {
    color: var(--awb-color9);
}

.mop-gallery-list .mop-gallery-list__chip[aria-current="true"]:is(:hover, :focus, :active, :visited) {
    color: var(--awb-color1);
}

.mop-gallery-list .mop-gallery-list__card:is(:hover, :focus-visible) {
    color: var(--awb-color5);
}

.mop-gallery-list__card:is(:hover, :focus-visible) .mop-gallery-list__img,
.mop-gallery-list__photo:is(:hover, :focus-visible) .mop-gallery-list__img {
    transform: scale(1.05);
}

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

.mop-gallery-list .mop-gallery-list__round:is(:hover, :focus-visible) {
    border-color: var(--awb-color5);
    background: var(--awb-color5);
    color: var(--awb-color9);
}

.mop-gallery-list .mop-gallery-list__chip:focus-visible,
.mop-gallery-list .mop-gallery-list__clear:focus-visible,
.mop-gallery-list .mop-gallery-list__round:focus-visible,
.mop-gallery-list .mop-gallery-list__photo:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 2px;
}

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

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

.mop-gallery-list .mop-gallery-list__latest-media:focus-visible {
    outline: 2px solid var(--awb-color1);
    outline-offset: 3px;
}

.mop-gallery-list .mop-gallery-list__album:focus,
.mop-gallery-list .mop-gallery-list__viewer:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .mop-gallery-list .mop-gallery-list__chip,
    .mop-gallery-list .mop-gallery-list__card,
    body .mop-gallery-list .mop-gallery-list__search-input,
    .mop-gallery-list .mop-gallery-list__clear,
    .mop-gallery-list .mop-gallery-list__round,
    .mop-gallery-list__media .mop-gallery-list__img,
    .mop-gallery-list__photo .mop-gallery-list__img {
        transition: none;
    }

    .mop-gallery-list__card:is(:hover, :focus-visible) .mop-gallery-list__img,
    .mop-gallery-list__photo:is(:hover, :focus-visible) .mop-gallery-list__img {
        transform: none;
    }
}