/* =========================================================
   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); }

/* Search row — bare field, same height as genre buttons above.
   No wrapping card / panel; the input itself is the visual container. */
.smo-archive .smo-filter-row {
    margin-top: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.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(5, 1fr); /* desktop: 5 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 {
    /* Year + rating pill — moved to bottom-left of the poster (was top-left).
       5px corners and tighter padding to match the slider visual language. */
    position: absolute; bottom: 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 7px; border-radius: 5px;
    border: 1px solid rgba(212,175,94,.25);
    color: var(--smo-gold-bright);
    font-weight: 700;
    line-height: 1;
    /* 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); }

/* Status pill — TREND / SOON. Sits in the top-left slot the rating
   badge used to occupy. The same wrapper class is used on both
   archive cards and similar-card cards in single-movie. */
.smo-card-status {
    position: absolute; top: 8px;
    inset-inline-start: 8px;
    display: inline-flex;
    align-items: center;
    z-index: 2;
}
/* Force left-aligned text inside cards. Some themes (Jannah included)
   apply `text-align: center` to the article body of shortcode-driven
   pages, which inherits down to .smo-card-title.
   This rule re-anchors the card's text content to start-of-line in
   both LTR and RTL contexts. */
.smo-archive .smo-card-body,
.smo-archive .smo-card-title { text-align: start; }
.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 */
}

/* ---------- 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 : large tablet — 4 columns */
@media (max-width: 1023px) {
    .smo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* < 768px : small tablet + all mobile sizes — 2 columns (per spec).
   Also hides the genre buttons row and shows the <select> instead. */
@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: 0; border-radius: 0; }

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

/* < 500px : phones — refine padding/gap, but keep 2 columns. */
@media (max-width: 499px) {
    .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; }

/* Badge on the poster bottom-left (rating + year).
   One step above the slider's badge size (slider = 11px desktop)
   so it reads clearly without dwarfing the slider visual.
   .smo-card-badge  →  the whole pill (controls rating ★ and year together) */
.smo-card-badge { font-size: 12px; }

/* MOBILE (≤ 767px) */
@media (max-width: 767px) {
    .smo-card-title { font-size: 16px; }
    .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-badge { font-size: 11px; }
}

/* =========================================================
   v1.7.2 — TREND / SOON badges (poster-overlay variant)
   Both badges are now positioned on the poster (top-left)
   via .smo-card-status. The .smo-card-meta-row genre row
   has been removed from the card body — title-only now.
   ========================================================= */
.smo-card-trending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, .65);
    border: 1px solid var(--smo-gold);
    border-radius: 5px;
    color: var(--smo-gold-bright);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.smo-card-trending-icon { font-size: 11px; line-height: 1; }
.smo-card-trending-text { line-height: 1; }

/* SOON badge — solid gold fill on dark text, visually distinct from
   TREND (gold outline). Same dimensions so they swap cleanly. */
.smo-card-soon {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--smo-gold-bright);
    border: 1px solid var(--smo-gold-bright);
    border-radius: 5px;
    color: #0b0b0d;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.smo-card-soon-text { line-height: 1; }

@media (max-width: 480px) {
    .smo-card-trending,
    .smo-card-soon {
        padding: 3px 5px;
        font-size: 10px;
    }
    .smo-card-trending { gap: 3px; letter-spacing: .07em; }
    .smo-card-soon    { letter-spacing: .08em; }
}