/* =========================================================
   Modern Cinematic — Black & Gold
   Movie Archive Stylesheet
   All classes prefixed with .smo- to avoid theme conflicts.
   Companion to: movie-single.css
   ========================================================= */

.smo-archive {
    --smo-gold: #d4af5e;
    --smo-gold-bright: #f4d68a;
    --smo-gold-deep: #7a5a1f;
    --smo-ink: #0b0b0d;
    --smo-panel: #141417;
    --smo-panel-hi: #1c1c20;
    --smo-line: #26221a;
    --smo-text: #e9e6df;
    --smo-muted: #7d776a;
    --smo-field-h: 52px;

    background: var(--smo-ink);
    color: var(--smo-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    direction: ltr;
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
}
.smo-archive * { box-sizing: border-box; }

.smo-archive .smo-bg,
.smo-archive .smo-bg-top { position: absolute; pointer-events: none; }
.smo-archive .smo-bg {
    inset: 0;
    background:
        radial-gradient(800px 400px at 20% 10%, rgba(212,175,94,.09), transparent 60%),
        radial-gradient(600px 400px at 90% 0%, rgba(212,175,94,.06), transparent 60%);
}
.smo-archive .smo-bg-top {
    top: 0; left: 0; right: 0; height: 300px;
    background: linear-gradient(180deg, rgba(212,175,94,.03), transparent);
}

.smo-archive .smo-article { position: relative; z-index: 1; }

/* ---------- FILTERS ---------- */
.smo-filters { padding: 50px 56px 0; margin: 0; }

/* Genre buttons — equal width, 5 visible + More */
.smo-genre-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* All + 5 + More */
    gap: 8px;
}
.smo-genre-btn {
    display: flex; align-items: center; justify-content: center;
    text-align: center; text-decoration: none;
    padding: 0 8px; height: var(--smo-field-h);
    border-radius: 10px;
    background: var(--smo-panel);
    border: 1px solid rgba(212,175,94,.19);
    color: var(--smo-text);
    font-weight: 700; font-size: 13px;
    letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}
.smo-genre-btn:hover { border-color: rgba(212,175,94,.4); }
.smo-genre-btn.is-active,
.smo-genre-more.is-active > .smo-genre-more-btn {
    background: linear-gradient(135deg, var(--smo-gold-bright), var(--smo-gold) 60%, var(--smo-gold-deep));
    border-color: var(--smo-gold-bright);
    color: #0b0b0d;
    box-shadow: 0 8px 20px rgba(212,175,94,.25), inset 0 1px 0 rgba(255,255,255,.5);
}

/* "More" dropdown (uses native <details>/<summary>) */
.smo-genre-more { position: relative; }
.smo-genre-more > summary { list-style: none; }
.smo-genre-more > summary::-webkit-details-marker { display: none; }
.smo-genre-more-btn { gap: 6px; }
.smo-genre-more-arrow { color: var(--smo-gold); font-size: 12px; }
.smo-genre-more.is-active .smo-genre-more-arrow { color: #0b0b0d; }
.smo-genre-more[open] .smo-genre-more-arrow { transform: rotate(180deg); }

.smo-genre-more-panel {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 180px;
    background: var(--smo-panel);
    border: 1px solid rgba(212,175,94,.25);
    border-radius: 10px;
    padding: 6px;
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0,0,0,.6);
    display: flex; flex-direction: column; gap: 2px;
}
.smo-genre-more-item {
    display: block; padding: 10px 12px;
    border-radius: 6px;
    color: var(--smo-text); text-decoration: none;
    font-size: 13px; font-weight: 600;
}
.smo-genre-more-item:hover { background: rgba(212,175,94,.08); color: var(--smo-gold-bright); }
.smo-genre-more-item.is-active { background: rgba(212,175,94,.15); color: var(--smo-gold-bright); }

/* Year + Search row — equal width, full row */
.smo-archive .smo-filter-row {
    margin-top: 12px;
    background: var(--smo-panel);
    border: 1px solid var(--smo-line);
    border-radius: 18px;
    padding: 18px;
}
.smo-field {
    position: relative;
    display: block;
    height: var(--smo-field-h);
    width: 100%;
}
.smo-field-screen {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.smo-select,
.smo-input {
    appearance: none; -webkit-appearance: none;
    background: var(--smo-panel-hi);
    border: 1px solid rgba(212,175,94,.19);
    border-radius: 10px;
    height: 100%;
    width: 100%;
    padding: 0 14px;
    color: var(--smo-text);
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    line-height: var(--smo-field-h);
    /* Force dark color scheme for the dropdown popup (Firefox + Safari) */
    color-scheme: dark;
}
.smo-select {
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, var(--smo-gold) 50%),
                      linear-gradient(135deg, var(--smo-gold) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
/* Native <option> styling.
   Limitations: macOS/iOS Safari ignores option backgrounds entirely (OS-level).
   color-scheme: dark above is the most reliable signal for Safari. */
.smo-select option {
    background-color: #1c1c20;
    color: #e9e6df;
    padding: 8px 12px;
}
.smo-select option:checked {
    background-color: #2a2620;
    color: #f4d68a;
}
.smo-input { font-weight: 500; cursor: text; }
.smo-input::placeholder { color: var(--smo-muted); }
.smo-select:focus,
.smo-input:focus {
    outline: none;
    border-color: rgba(212,175,94,.5);
    box-shadow: 0 0 0 3px rgba(212,175,94,.15);
}

/* Search field with embedded gold search button on the right.
   The button is positioned absolutely inside .smo-field-search (which is
   `position: relative` via .smo-field). The icon stays on the right side
   regardless of RTL/LTR direction. */
.smo-field-search { width: 100%; }
.smo-field-search .smo-input {
    /* leave room for the gold search button on the right */
    padding-right: 56px;
}
.smo-archive .smo-search-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 44px;
    height: calc(var(--smo-field-h) - 8px);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--smo-gold-bright), var(--smo-gold) 60%, var(--smo-gold-deep));
    border: none;
    border-radius: 8px;
    color: #0b0b0d;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
    box-shadow: 0 4px 12px rgba(212,175,94,.25);
    /* prevent button text leak (just in case) */
    font-size: 0;
    line-height: 0;
}
.smo-archive .smo-search-btn:hover {
    opacity: .92;
    transform: translateY(-50%) scale(1.03);
}
.smo-archive .smo-search-btn:active {
    transform: translateY(-50%) scale(0.97);
}
.smo-archive .smo-search-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    color: #0b0b0d;
}

.smo-clear-wrap {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.smo-clear-filters {
    display: inline-block;
    padding: 6px 12px; border-radius: 6px;
    background: rgba(212,175,94,.06);
    border: 1px solid rgba(212,175,94,.19);
    color: var(--smo-gold);
    font-size: 11px; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    text-decoration: none;
}
.smo-clear-filters:hover {
    background: rgba(212,175,94,.12);
    color: var(--smo-gold-bright);
}

/* ---------- GRID ---------- */
.smo-grid-section { padding: 30px 56px 0; }
.smo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* desktop: 4 columns */
    gap: 14px;
}

/* Card (matches single-page "You may also like" style) */
.smo-card {
    background: var(--smo-panel);
    border: 1px solid var(--smo-line);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease;
}
.smo-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212,175,94,.4);
}
.smo-card-poster {
    aspect-ratio: 2/3;
    position: relative;
    background: repeating-linear-gradient(135deg, #1a1a1d 0 10px, #141417 10px 20px);
    overflow: hidden;
}
.smo-card-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.smo-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--smo-muted);
    font-family: monospace; font-size: 9px; letter-spacing: .2em;
}
.smo-card-badge {
    position: absolute; top: 8px;
    inset-inline-start: 8px; /* RTL-aware */
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 4px 8px; border-radius: 6px;
    border: 1px solid rgba(212,175,94,.25);
    color: var(--smo-gold-bright);
    font-weight: 700;
    /* font-size set in "USER-TUNABLE SIZES" section at the bottom */
}
.smo-card-rating { display: inline-flex; align-items: center; gap: 3px; }
.smo-star { color: var(--smo-gold-bright); }
.smo-card-divider {
    width: 1px; height: 10px;
    background: rgba(212,175,94,.33);
}
.smo-card-year { color: var(--smo-gold); }
.smo-card-body { padding: 12px 12px 14px; }
.smo-card-title {
    font-weight: 700; color: #fff;
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* font-size set in "USER-TUNABLE SIZES" section at the bottom */
}
.smo-card-genre {
    margin-top: 6px; color: var(--smo-muted);
    font-weight: 500;
    /* font-size set in "USER-TUNABLE SIZES" section at the bottom */
}

/* ---------- PAGINATION ---------- */
.smo-pagination {
    padding: 30px 56px 0;
    display: flex; justify-content: center;
    flex-wrap: wrap; gap: 6px;
}
.smo-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--smo-panel);
    border: 1px solid rgba(212,175,94,.19);
    color: var(--smo-text);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease;
}
.smo-pagination .page-numbers:hover {
    border-color: rgba(212,175,94,.4);
    color: var(--smo-gold-bright);
}
.smo-pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--smo-gold-bright), var(--smo-gold) 60%, var(--smo-gold-deep));
    border-color: var(--smo-gold-bright);
    color: #0b0b0d;
    box-shadow: 0 8px 20px rgba(212,175,94,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
.smo-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--smo-muted);
}

/* ---------- EMPTY STATE ---------- */
.smo-empty { padding: 60px 56px; }
.smo-empty-inner {
    background: var(--smo-panel);
    border: 1px solid var(--smo-line);
    border-radius: 18px;
    padding: 50px 24px;
    text-align: center;
}
.smo-empty-title { font-size: 20px; font-weight: 800; color: #fff; }
.smo-empty-sub { margin-top: 8px; color: var(--smo-muted); font-size: 14px; }
.smo-empty .smo-clear-filters { margin-top: 18px; }

/* ---------- DEFAULT: mobile select hidden, genre row visible ----------
   These rules MUST win against any theme. Using !important prevents
   theme button styles from overriding the dropdown layout.
*/
.smo-archive .smo-genre-mobile { display: none !important; }
.smo-archive .smo-genre-mobile .smo-select { width: 100% !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* < 1024px : 3 columns */
@media (max-width: 1023px) {
    .smo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* < 768px : tablet/mobile
   - HIDE the genre buttons row
   - SHOW only the genre <select> dropdown (cleaner UX)
   - 2-column grid
*/
@media (max-width: 767px) {
    .smo-filters,
    .smo-grid-section,
    .smo-pagination,
    .smo-empty { padding-left: 14px; padding-right: 14px; }

    .smo-filters { padding-top: 24px; }

    /* Hide the genre buttons row entirely on mobile.
       !important to win over any theme. */
    .smo-archive .smo-genre-row { display: none !important; }

    /* Show the genre <select> as the only genre filter */
    .smo-archive .smo-genre-mobile {
        display: block !important;
    }

    .smo-filter-row { padding: 12px; border-radius: 14px; }

    .smo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* < 500px : single column (one movie per row).
   !important to override any theme grid styles. */
@media (max-width: 499px) {
    .smo-archive .smo-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .smo-archive .smo-card-body { padding: 12px 14px 14px; }
}

/* RTL: flip the badge dot/divider order naturally via inset-inline-start above */
[dir="rtl"] .smo-pagination .page-numbers { font-feature-settings: "tnum"; }

/* =========================================================================
   USER-TUNABLE SIZES — change these numbers freely.
   Every size that affects the look of the cards lives in this section.
   Each rule names the class it targets (so you can find it in DevTools).
   ========================================================================= */

/* DESKTOP (default, also applies to tablets > 767px) */

/* Card title (the movie name under the poster).
   .smo-card-title  →  movie name in the archive grid AND in "You may also like" */
.smo-card-title { font-size: 18px; }

/* Card subtitle (genre name shown below the title).
   .smo-card-genre  →  genre line under the title */
.smo-card-genre { font-size: 13px; }

/* Badge on the poster top-left (rating + year).
   .smo-card-badge  →  the whole pill (controls rating ★ and year together) */
.smo-card-badge { font-size: 13px; }

/* MOBILE (≤ 767px) */
@media (max-width: 767px) {
    .smo-card-title { font-size: 16px; }
    .smo-card-genre { font-size: 12.5px; }
    .smo-card-badge { font-size: 12px; }
}

/* SINGLE COLUMN (≤ 499px) — bigger text since cards span the full width */
@media (max-width: 499px) {
    .smo-card-title { font-size: 17px; }
    .smo-card-genre { font-size: 13px; }
    .smo-card-badge { font-size: 13px; }
}