/*
 * Film per Voto: styles scoped to this page's existing Cinema components.
 * The facet renderer supplies .FacetIndex, .genre-section, and .Gener.
 * Modern and Legacy already style the .Gener card grid responsively.
 */
.FilmVoto-page {
    min-width: 0;
}

/* Keep the content below the floated Legacy Cinema navigation on mobile. */
.FilmVoto-page .FilmVoto-layout {
    clear: both;
}

.FilmVoto-page .FilmVoto-hero {
    margin: 0 0 1.5rem;
    padding: clamp(1.25rem, 3.4vw, 2.25rem);
    border-radius: var(--hr-radius-card, 14px);
    background: linear-gradient(130deg, #201b2b 0%, #482639 70%, #6c2648 100%);
    color: var(--hr-on-inverse, #fff);
    box-shadow: 0 10px 25px rgb(22 15 25 / 12%);
}

.FilmVoto-page .FilmVoto-hero h1 {
    margin: 0 0 .65rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--hr-on-inverse, #fff) !important;
    font: 800 clamp(1.85rem, 3.5vw, 2.5rem)/1.12 system-ui, sans-serif !important;
    letter-spacing: -.03em !important;
}

.FilmVoto-page .FilmVoto-hero__lede {
    max-width: 44rem;
    margin: 0;
    color: #f0e7ed;
    font: 400 clamp(.9rem, 1.5vw, 1.05rem)/1.55 system-ui, sans-serif;
}

.FilmVoto-page .film-voto-limit-note {
    margin: 0 0 .9rem;
    color: var(--hr-text-muted, #66636e);
    font: 500 .86rem/1.45 system-ui, sans-serif;
}

.FilmVoto-page .FilmVoto-layout > .FacetIndex {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 1.75rem;
    padding: .85rem;
    border: 1px solid var(--hr-line, #e9dde2);
    border-radius: var(--hr-radius-card, 14px);
    background: var(--hr-surface, #fff);
}

.FilmVoto-page .FilmVoto-layout > .FacetIndex a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .5rem .75rem;
    border: 1px solid #ead4dd;
    border-radius: 9px;
    background: #fcf7f9;
    color: #841b43;
    font: 700 .84rem/1.3 system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.FilmVoto-page .FilmVoto-layout > .FacetIndex a span {
    color: #695b63;
    font-weight: 500;
}

.FilmVoto-page .FilmVoto-layout > .FacetIndex a:hover,
.FilmVoto-page .FilmVoto-layout > .FacetIndex a:focus-visible {
    background: #f8eaf0;
    border-color: #b85076;
    color: #651032;
    outline: 2px solid #b85076;
    outline-offset: 2px;
}

.FilmVoto-page .FilmVoto-layout > .genre-section {
    min-width: 0;
    scroll-margin-top: 4.5rem;
}

.FilmVoto-page .FilmVoto-layout > .genre-section > h2 {
    width: auto;
    height: auto;
    margin: 0 0 1rem !important;
    padding: 0 0 .45rem !important;
    border: 0;
    border-bottom: 2px solid var(--hr-accent-cinema, #a61d4a);
    background: none !important;
    color: var(--hr-text, #25212a) !important;
    font: 800 clamp(1.2rem, 2.5vw, 1.6rem)/1.3 system-ui, sans-serif;
}

@media (max-width: 600px) {
    .FilmVoto-page .FilmVoto-hero {
        padding: 1.3rem 1.15rem;
    }

    .FilmVoto-page .FilmVoto-hero h1 {
        font-size: 1.9rem !important;
    }

    .FilmVoto-page .FilmVoto-layout > .FacetIndex {
        padding: .65rem;
        gap: .45rem;
    }

    .FilmVoto-page .FilmVoto-layout > .FacetIndex a {
        min-height: 38px;
        padding: .4rem .6rem;
        font-size: .8rem;
    }
}