/* ============================================================= */
/*  REBELS — FOGLIO DI STILE UNICO E CONDIVISO DA TUTTE LE PAGINE  */
/* ------------------------------------------------------------- */
/*  Tutte le classi personalizzate hanno il prefisso  rb-         */
/*  Le uniche classi senza prefisso sono quelle di Bootstrap.     */
/*  Per cambiare colori, sfondo o font modifica SOLO le           */
/*  variabili qui sotto in :root — si aggiornano ovunque.         */
/* ============================================================= */



:root {

    /* COLORE D'ACCENTO (viola della cornice). Cambia qui per cambiarlo ovunque. */
    --rb-accent: #8b53fe;

    /* SFONDO SCURO del corpo pagina (così il testo bianco resta leggibile). */
    --rb-bg: #0d0d0d;

    /* COLORE DEL TESTO principale. */
    --rb-text: #ffffff;

    /* DUE FONT (entrambi caricati in locale da /fonts/, nessun link esterno):
       --rb-font      = TITOLI/scritte display (Cinzel, serif maiuscoletto).
       --rb-font-body = CORPO del testo (Montserrat).
       Se i file non sono disponibili, si ripiega sui font di sistema. */
    --rb-font: "Cinzel", Georgia, serif;
    --rb-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* MISURE DELLA CORNICE (bande, header, footer). */
    --rb-side-width: 32px;
    --rb-header-height: 120px;
    --rb-footer-height: 120px;
}

/* ============================================================= */
/*  FONT CINZEL — titoli, caricato in locale da /fonts/          */
/* ------------------------------------------------------------- */
/*  Serif maiuscoletto in stile lapidario (simile a Trajan),     */
/*  gratuito (SIL Open Font License). Pesi: Regular (400),       */
/*  Semi-Bold (600), Bold (700). Solo .woff2.                    */
/*  Se i file mancano, parte il fallback serif (Georgia).        */
/* ============================================================= */

@font-face {
    font-family: "Cinzel";
    font-weight: 400;            /* Regular */
    font-style: normal;
    font-display: swap;
    src: url("fonts/Cinzel-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Cinzel";
    font-weight: 600;            /* Semi-Bold (nome "REBELS") */
    font-style: normal;
    font-display: swap;
    src: url("fonts/Cinzel-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Cinzel";
    font-weight: 700;            /* Bold (titoli) */
    font-style: normal;
    font-display: swap;
    src: url("fonts/Cinzel-Bold.woff2") format("woff2");
}

/* ============================================================= */
/*  FONT MONTSERRAT — corpo del testo, caricato da /fonts/       */
/* ------------------------------------------------------------- */
/*  Regular (400), Medium (500), Semi-Bold (600), Bold (700) e   */
/*  Italic. Solo .woff2 (supportato da tutti i browser moderni). */
/*  Niente più Google Fonts: zero dipendenze esterne.            */
/* ============================================================= */

@font-face {
    font-family: "Montserrat";
    font-weight: 400;            /* Regular */
    font-style: normal;
    font-display: swap;
    src: url("fonts/Montserrat-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 500;            /* Medium */
    font-style: normal;
    font-display: swap;
    src: url("fonts/Montserrat-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 600;            /* Semi-Bold */
    font-style: normal;
    font-display: swap;
    src: url("fonts/Montserrat-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 700;            /* Bold (es. <strong>) */
    font-style: normal;
    font-display: swap;
    src: url("fonts/Montserrat-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 400;            /* Italic */
    font-style: italic;
    font-display: swap;
    src: url("fonts/Montserrat-Italic.woff2") format("woff2");
}

/* ============================================================= */
/*  RESET DI BASE                                                 */
/* ============================================================= */

* {
    box-sizing: border-box;
}

/* Lo sfondo OLTRE la pagina (quando si "tira" lo scroll oltre il footer o
   sopra l'header) è viola, coerente con la cornice: niente più area nera.
   overscroll-behavior toglie anche il rimbalzo elastico. */
html {
    background: var(--rb-accent);
    overscroll-behavior: none;
}

body {
    margin: 0;
    overscroll-behavior: none;

    /* CORPO DEL TESTO in Montserrat; i titoli usano Cinzel (vedi sotto) */
    font-family: var(--rb-font-body);

    /* SFONDO SCURO + TESTO BIANCO su tutto il sito */
    background: var(--rb-bg);
    color: var(--rb-text);

    /* Footer SEMPRE in fondo: con poco contenuto il <main> si allunga
       e il footer resta attaccato in basso (niente "buco" nero sotto). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* il contenuto cresce e spinge il footer in fondo */
body > main {
    flex: 1 0 auto;
}

/* il footer non si schiaccia */
.rb-footer {
    flex-shrink: 0;
}

/* I TITOLI usano Cinzel e restano bianchi */
h1, h2, h3 {
    font-family: var(--rb-font);
    color: var(--rb-text);
}

/* ============================================================= */
/*  CORNICE — BANDE LATERALI                                      */
/* ------------------------------------------------------------- */
/*  Due bande viola fisse a sinistra e a destra. Insieme a       */
/*  header e footer formano la cornice su tutti e 4 i lati.      */
/* ============================================================= */

.rb-side {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--rb-side-width);
    background: var(--rb-accent);
    z-index: 1000;
}

.rb-side-left {
    left: 0;
}

.rb-side-right {
    right: 0;
}

/* ============================================================= */
/*  CORNICE — HEADER (in alto)                                   */
/* ============================================================= */

.rb-header {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: var(--rb-header-height);

    background: var(--rb-accent);

    z-index: 1100;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-inline: clamp(35px, 5vw, 80px);
}

/* Nome "REBELS" a sinistra: porta sempre alla homepage.
   In Cinzel Semi-Bold (peso 600). */
.rb-brand {
    color: white;
    text-decoration: none;
    font-family: var(--rb-font);
    font-weight: 600;
    /* scala in modo fluido e resta prominente: su mobile non scende
       sotto i 32px, così non diventa più piccolo dei titoli. */
    font-size: clamp(32px, 6vw, 50px);
}

/* Bottone "panino" (hamburger) che apre il menu a tendina */
.rb-menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

/* ============================================================= */
/*  MENU A TENDINA                                               */
/* ------------------------------------------------------------- */
/*  ECCEZIONE alla regola "sfondo scuro": il menu resta a        */
/*  sfondo CHIARO con testo scuro, come richiesto.               */
/* ============================================================= */

.rb-dropdown {

    position: fixed;

    /* un po' staccato sotto l'header, così si vede la puntina */
    top: calc(var(--rb-header-height) + 8px);
    right: clamp(35px, 5vw, 80px);

    width: 240px;

    background: #ffffff;
    border-radius: 14px;

    z-index: 1090;

    padding: 0.55rem;

    /* ombra morbida a due livelli: effetto "sospeso" ed elegante */
    box-shadow: 0 20px 45px rgba(0, 0, 0, .30), 0 3px 10px rgba(0, 0, 0, .12);

    /* Comparsa: scende, sfuma e si "apre" dall'angolo in alto a destra */
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-14px) scale(.95);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .25, 1);
    pointer-events: none;
}

/* Puntina che collega il menu al bottone panino */
.rb-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 26px;
    width: 15px;
    height: 15px;
    background: #ffffff;
    border-radius: 4px 0 0 0;
    transform: rotate(45deg);
}

/* Stato aperto (Bootstrap aggiunge la classe .show) */
.rb-dropdown.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Voci del menu */
.rb-menu-link {
    position: relative;
    display: block;
    z-index: 0;
    overflow: hidden;

    padding: 0.8rem 1.1rem;
    border-radius: 9px;

    text-decoration: none;
    color: #1a1a1a;
    font-family: var(--rb-font-body);
    font-size: 1.05rem;
    letter-spacing: .3px;

    transition: color .25s ease;
}

/* Riempimento viola che scorre da sinistra al passaggio del mouse */
.rb-menu-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rb-accent);
    border-radius: 9px;
    transform: scaleX(0);
    transform-origin: left center;
    /* riempimento più lento e morbido */
    transition: transform 1.2s cubic-bezier(.2, .9, .25, 1);
}

.rb-menu-link:hover {
    color: #ffffff;
}

.rb-menu-link:hover::before {
    transform: scaleX(1);
}

/* Voce della pagina attuale: testo viola + barretta a sinistra */
.rb-menu-link.active {
    color: var(--rb-accent);
    font-weight: 600;
}

/* Anche la voce attiva, all'hover, ha il testo bianco (sopra il riempimento
   viola resta leggibile). Regola più specifica per vincere su .active. */
.rb-menu-link.active:hover {
    color: #ffffff;
}

.rb-menu-link.active::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 55%;
    background: var(--rb-accent);
    border-radius: 3px;
}

/* Entrata "a cascata" delle voci quando il menu si apre */
@keyframes rbMenuItemIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rb-dropdown.show .rb-menu-link {
    animation: rbMenuItemIn .35s ease both;
}

.rb-dropdown.show .rb-menu-link:nth-child(1) { animation-delay: .04s; }
.rb-dropdown.show .rb-menu-link:nth-child(2) { animation-delay: .10s; }
.rb-dropdown.show .rb-menu-link:nth-child(3) { animation-delay: .16s; }
.rb-dropdown.show .rb-menu-link:nth-child(4) { animation-delay: .22s; }

/* ============================================================= */
/*  CONTENUTO PRINCIPALE (homepage)                              */
/* ============================================================= */

.rb-main {
    /* Lascia spazio sotto l'header fisso */
    padding-top: calc(var(--rb-header-height) + 60px);

    padding-left: clamp(48px, 6vw, 100px);
    padding-right: clamp(48px, 6vw, 100px);

    padding-bottom: 80px;
}

/* ------------------------------------------------------------- */
/*  TRAILER DEL SITO (video in cima alla homepage)              */
/* ------------------------------------------------------------- */
.rb-hero {
    text-align: center;
    margin-bottom: 6rem;
}

.rb-hero-title {
    font-size: clamp(1.25rem, 3.3vw, 2.1rem);
    margin-bottom: 1.5rem;
}

/* Riquadro del video: centrato, più grande delle locandine */
.rb-hero-video {
    width: min(92%, 860px);
    margin: 0 auto;
    border: 8px solid var(--rb-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    line-height: 0;            /* niente spazio sotto il video */
}

.rb-hero-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;      /* altezza proporzionata alla larghezza */
    background: #000;
}

/* Un singolo evento = data + locandina + titolo */
.rb-event {
    text-align: center;
    margin-bottom: 7rem;
}

/* DATA grande sopra la locandina */
.rb-date {
    margin-bottom: 1.5rem;
    font-size: 24px;
}

@media (min-width: 768px) {
    .rb-date { font-size: 35px; }
}

@media (min-width: 1200px) {
    .rb-date { font-size: 44px; }
}

/* ------------------------------------------------------------- */
/*  LOCANDINA + EFFETTO HOVER (zoom contenuto nella cornice)     */
/* ------------------------------------------------------------- */
/*  Al passaggio del mouse si ingrandisce SOLO la fotografia     */
/*  della locandina, mentre TUTTE le scritte bianche (titolo,    */
/*  intestazione, logo) restano FERME. Lo zoom NON esce dalla    */
/*  cornice viola.                                               */
/*                                                               */
/*  COME FUNZIONA: la locandina è composta da DUE immagini       */
/*  sovrapposte (vedi LEGGIMI.md):                               */
/*    1) .rb-poster        → "media/<film>_sfondo.png": la foto  */
/*       SENZA scritte. È l'immagine che fa lo zoom.             */
/*    2) .rb-poster-title  → "media/<film>_scritte.png": SOLO le */
/*       scritte/logo su sfondo trasparente, sovrapposte e       */
/*       tenute FERME sopra a quella che zooma.                  */
/*  Sovrapposte ricompongono la locandina completa; al passaggio */
/*  del mouse lo sfondo zooma e le scritte restano immobili.     */
/*                                                               */
/*  DA RITOCCARE:                                                */
/*   - transform: scale()  → quanto zooma lo sfondo della foto.  */
/*  (Per aggiungere un film servono i due file _sfondo e         */
/*   _scritte: istruzioni in LEGGIMI.md.)                        */
/* ------------------------------------------------------------- */

/* Il LINK è il blocco centrato (largo quanto la locandina): così */
/* la data sopra e la locandina restano allineate sullo stesso    */
/* asse centrale. Il titolo cliccabile sta sotto, separato.       */
.rb-poster-link {
    display: block;
    width: min(60%, 420px);
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
}

.rb-poster-wrapper {
    position: relative;
    width: 100%;

    /* bordo viola della locandina */
    border: 10px solid var(--rb-accent);

    /* tiene lo zoom DENTRO la cornice: l'immagine non esce */
    overflow: hidden;
}

/* Immagine di base: è quella che fa lo zoom */
.rb-poster {
    display: block;
    width: 100%;
    transition: transform .4s ease;
}

/* Titolo isolato su sfondo trasparente, sovrapposto e tenuto    */
/* FERMO sopra allo sfondo che zooma.                            */
.rb-poster-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* non cattura il mouse: l'hover lo gestisce il link */
    pointer-events: none;
}

/* HOVER: zooma SOLO la foto; il titolo (overlay) resta fermo */
.rb-poster-link:hover .rb-poster {
    transform: scale(1.12);
}

/* TITOLO del film, cliccabile, sotto la locandina */
.rb-title {
    margin-top: 1rem;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
}

/* Il titolo è un link: lo si segnala con cursore a manina,       */
/* sottolineatura color accento sempre visibile e colore pieno    */
/* all'hover, così si capisce che è cliccabile.                   */
.rb-title-link {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: var(--rb-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    color: inherit;
    cursor: pointer;
    transition: color .2s ease;
}

/* Hover sul titolo OPPURE sulla locandina sopra: evidenzia il titolo */
.rb-title-link:hover,
.rb-poster-link:hover + .rb-title-link {
    color: var(--rb-accent);
}

/* Freccia "→" accanto al titolo: segnala che è cliccabile.
   Si sposta a destra quando si passa il mouse (sul titolo o sulla locandina). */
.rb-title-arrow {
    display: inline-block;       /* così non viene sottolineata insieme al titolo */
    font-size: 0.7em;
    margin-left: 0.35em;
    vertical-align: middle;
    transition: transform .2s ease;
}

.rb-title-link:hover .rb-title-arrow,
.rb-poster-link:hover + .rb-title-link .rb-title-arrow {
    transform: translateX(5px);
}

/* ============================================================= */
/*  CORNICE — FOOTER (in basso) + CONTATTI                       */
/* ============================================================= */

.rb-footer {
    min-height: var(--rb-footer-height);
    background: var(--rb-accent);

    /* colonna: prima le icone in fila, poi il copyright sotto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;

    color: white;

    padding: 2rem;
}

/* Riga delle icone contatti */
.rb-footer-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

/* Icone dei contatti (Instagram, mail e futuri sponsor) */
.rb-footer-icon {
    color: white;
    font-size: 1.8rem;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}

.rb-footer-icon:hover {
    transform: scale(1.15);
    opacity: 0.85;
}

/* Copyright sotto le icone */
.rb-copyright {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
    text-align: center;
}

/* Link legali nel footer (Privacy e cookie) */
.rb-footer-legal {
    margin: 0;
    font-size: 0.8rem;
    text-align: center;
}

.rb-footer-legal a {
    color: #fff;
    opacity: 0.9;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rb-footer-legal a:hover {
    opacity: 1;
}

/* Liste nelle pagine di testo (es. Privacy) */
.rb-film-desc ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.2rem;
}

.rb-film-desc li {
    margin-bottom: 0.6rem;
}

/* ============================================================= */
/*  PAGINA FILM                                                  */
/* ============================================================= */

.rb-film {
    padding-top: calc(var(--rb-header-height) + 60px);

    padding-left: clamp(48px, 6vw, 100px);
    padding-right: clamp(48px, 6vw, 100px);

    padding-bottom: 80px;

    /* su schermi grandi resta centrata e non diventa troppo larga
       (così il video non viene "stiracchiato" in orizzontale) */
    max-width: 1280px;
    margin: 0 auto;
}

/* Bottone "Torna alla homepage" in alto a sinistra del contenuto */
.rb-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 2.5rem;
    padding: 0.6rem 1.2rem;

    border: 2px solid var(--rb-accent);
    color: var(--rb-accent);
    text-decoration: none;
    font-size: 0.95rem;

    transition: background .2s ease, color .2s ease;
}

.rb-back-btn:hover {
    background: var(--rb-accent);
    color: #fff;
}

/* ------------------------------------------------------------- */
/*  BLOCCO "LOCANDINA + VIDEO" (stessa altezza)                  */
/* ------------------------------------------------------------- */
/*  Locandina e trailer sono affiancati e hanno la STESSA altezza.*/
/*  L'altezza del blocco è fissata qui (rb-film-media height) e   */
/*  sia la locandina sia il video la riempiono al 100%.           */
/*  Da ritoccare: l'altezza nel clamp() qui sotto.                */
/* ------------------------------------------------------------- */
.rb-film-media {
    display: flex;
    gap: 2rem;
    align-items: stretch;

    /* altezza del blocco, responsiva (min, preferita, max) */
    height: clamp(300px, 40vw, 520px);
}

/* Colonna locandina: larghezza automatica (mantiene le proporzioni) */
.rb-film-poster-col {
    flex: 0 0 auto;
    height: 100%;
}

/* La locandina completa = sfondo + scritte sovrapposti (stessi due file
   della homepage). Qui non c'è zoom: è statica. */
.rb-film-poster {
    position: relative;
    height: 100%;            /* stessa altezza del video */
    display: inline-block;   /* si stringe alla larghezza della locandina */
    vertical-align: top;
    border: 8px solid var(--rb-accent);
}

.rb-film-poster img {
    display: block;
    height: 100%;
    width: auto;
}

/* le scritte sovrapposte allo sfondo */
.rb-film-poster .rb-film-poster-text {
    position: absolute;
    top: 0;
    left: 0;
}

/* Colonna video: occupa lo spazio restante */
.rb-film-video-col {
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;        /* evita overflow in flexbox */
}

/* TRAILER YouTube: riempie tutta l'altezza del blocco */
.rb-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    /* cornice viola sottile (più sottile di quella della locandina)
       così il trailer si distingue dallo sfondo scuro */
    border: 5px solid var(--rb-accent);
}

.rb-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------------------------- */
/*  ANTEPRIMA TRAILER ("click per riprodurre")                  */
/* ------------------------------------------------------------- */
/*  Per privacy: YouTube NON viene caricato all'apertura della    */
/*  pagina. Si mostra questo riquadro; al click parte il video    */
/*  (vedi js/rebels.js). Così nessun dato va a Google prima del   */
/*  consenso dell'utente.                                         */
/* ------------------------------------------------------------- */
.rb-video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;

    padding: 1rem;
    cursor: pointer;
    text-align: center;
    color: #fff;
    /* sfondo scuro con un tocco di viola */
    background: radial-gradient(circle at center, #241a3a 0%, #0d0d0d 75%);
    transition: background .25s ease;
}

.rb-video-facade:hover {
    background: radial-gradient(circle at center, #2f2350 0%, #0d0d0d 80%);
}

/* cerchietto col triangolo play */
.rb-video-play {
    width: 70px;
    height: 70px;
    flex-shrink: 0;             /* resta un cerchio anche in spazi stretti (mobile) */
    border-radius: 50%;
    background: var(--rb-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #fff;
    padding-left: 4px;          /* centra otticamente il triangolo */
    transition: transform .2s ease;
}

.rb-video-facade:hover .rb-video-play {
    transform: scale(1.08);
}

.rb-video-facade-text {
    font-weight: 600;
    font-size: 1.1rem;
}

.rb-video-facade-note {
    font-size: 0.8rem;
    opacity: 0.8;
    max-width: 460px;
}

/* ------------------------------------------------------------- */
/*  TITOLO + DATA + REGIA: centrati sotto il blocco, in viola    */
/* ------------------------------------------------------------- */
.rb-film-head {
    text-align: center;
    margin-top: 2rem;
}

.rb-film-title {
    color: var(--rb-accent);
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin-bottom: 0.6rem;
}

.rb-film-meta {
    color: var(--rb-accent);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    margin-bottom: 0.2rem;
}

/* Regia: sotto la data, leggermente più piccola */
.rb-film-dir {
    color: var(--rb-accent);
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
}

/* SINOSSI */
.rb-film-desc {
    margin-top: 3rem;
}

/* OSPITI che presentano il film */
.rb-film-guests {
    margin-top: 2rem;
}

/* OSPITI: schede impilate verticalmente. Ogni scheda è orizzontale —
   foto a sinistra, testo (nome + descrizione lunga) a destra — così c'è
   MOLTO spazio per bio anche lunghe (600+ caratteri). */
.rb-guests {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

.rb-guest {
    display: flex;
    align-items: flex-start;   /* foto e testo allineati in alto */
    gap: 1.5rem;
    margin: 0;
    text-align: left;
}

/* Foto/segnaposto dell'ospite: quadrata, larghezza fissa a sinistra */
.rb-guest-ph,
.rb-guest-photo {
    flex: 0 0 170px;
    width: 170px;
    aspect-ratio: 1 / 1;
}

.rb-guest-photo {
    display: block;
    object-fit: cover;
}

/* aspetto del segnaposto (riquadro tratteggiato con icona) */
.rb-guest-ph {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
   
    color: var(--rb-accent);
    font-size: 0.85rem;
    text-align: center;
}

.rb-guest-ph i {
    font-size: 1.8rem;
}

/* Blocco di testo a destra: prende tutta la larghezza rimanente */
.rb-guest-body {
    flex: 1 1 auto;
    min-width: 0;              /* evita overflow del testo in flexbox */
}

.rb-guest-name {
    display: block;
    font-weight: 600;
    font-size: 1.15rem;
}

.rb-guest-bio {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* CHIAMATA ALL'AZIONE (bottone acquista) */
.rb-film-cta {
    margin-top: 3rem;
    text-align: center;
}

/* Nota sotto il bottone acquista, centrata */
.rb-cta-note {
    margin-top: 1rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

.rb-btn-ticket {
    display: inline-block;
    padding: 1rem 2rem;

    background: var(--rb-accent);
    color: white;

    text-decoration: none;
    font-weight: 600;

    transition: .2s ease;
}

.rb-btn-ticket:hover {
    transform: scale(1.05);
    color: white;
}

/* ============================================================= */
/*  PAGINE DI TESTO (Dove / Chi siamo)                          */
/* ============================================================= */

/* Contenitore generico per le pagine con solo testo */
.rb-page {
    padding-top: calc(var(--rb-header-height) + 60px);

    padding-left: clamp(48px, 6vw, 100px);
    padding-right: clamp(48px, 6vw, 100px);

    padding-bottom: 80px;

    /* limita la larghezza del testo per leggibilità */
    max-width: 1100px;
    margin: 0 auto;
}

.rb-page-title {
    margin-bottom: 2.5rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

/* Riquadro in evidenza (es. nome + indirizzo del cinema) */
.rb-highlight {
    border: 2px solid var(--rb-accent);
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
}

/* --- RIQUADRO CINEMA: titolo + foto, centrati nel riquadro --- */
.rb-cinema {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;   /* centra il gruppo (testo + foto) nel riquadro */
    flex-wrap: wrap;           /* su schermi stretti va a capo */
    text-align: center;        /* titolo e indirizzo centrati */
}

.rb-cinema-info {
    flex: 0 1 auto;            /* non si allarga: resta centrato */
}

/* Nome del cinema cliccabile: stesso stile dei link dei film
   (sottolineatura viola, diventa viola al passaggio del mouse) */
.rb-cinema-info a {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: var(--rb-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    color: var(--rb-text);
    transition: color .2s ease;
}

.rb-cinema-info a:hover {
    color: var(--rb-accent);
}

.rb-cinema-info a h2 {
    color: inherit;   /* segue il colore del link (bianco → viola all'hover) */
    margin-bottom: 0.5rem;
}


.rb-travel-body a {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: var(--rb-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    color: var(--rb-text);
    transition: color .2s ease;
}

.rb-travel-body a:hover {
    color: var(--rb-accent);
}

/* Segnaposto per la FOTO del cinema.
   SOSTITUISCI tutto il blocco con: <img src="media/cinema.jpg" class="rb-cinema-photo" alt="Il cinema"> */
.rb-photo-placeholder {
    flex: 0 0 auto;
    width: min(360px, 100%);   /* non esce mai dallo schermo su mobile */
    aspect-ratio: 3 / 2;       /* mantiene le proporzioni a qualsiasi larghezza */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    border: 2px dashed var(--rb-accent);
    color: var(--rb-accent);
    font-size: 0.95rem;
}

.rb-photo-placeholder i {
    font-size: 2rem;
}

/* Se metti una vera foto, queste regole la fanno stare bene nel riquadro */
.rb-cinema-photo {
    flex: 0 0 auto;
    width: min(360px, 100%);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* --- FONDATORI (pagina "Chi"): due foto centrate, affiancate --- */
.rb-founders {
    display: flex;
    flex-wrap: wrap;            /* su mobile vanno una sotto l'altra */
    justify-content: center;   /* centrate orizzontalmente */
    align-items: flex-start;   /* foto sempre allineate in alto */
    gap: 2.5rem;
    margin-top: 1.5rem;
}

/* larghezza fissa = larghezza della foto: così, anche se il testo del ruolo
   è lungo, va a capo SOTTO la foto senza spostarla di lato */
.rb-founder {
    width: 200px;
    margin: 0;
    text-align: center;
}

/* dimensione del segnaposto/foto del fondatore (quadrato) */
.rb-founder-ph,
.rb-founder-photo {
    width: 200px;
    height: 300px;
    aspect-ratio: auto;        /* annulla il 3/2 ereditato dal segnaposto generico */
    margin: 0 auto;            /* la foto/riquadro resta centrato nella scheda */
}

/* il segnaposto resta un riquadro con icona centrata (display flex ereditato) */
.rb-founder-ph {
    max-width: 200px;
}

.rb-founder-photo {
    display: block;
    object-fit: cover;
}

.rb-founder figcaption {
    margin-top: 0.8rem;
}

.rb-founder-role {
    color: var(--rb-accent);
    font-size: 0.9rem;
}

/* --- RIQUADRO SOSTENIBILITÀ (sotto il titolo "Come raggiungerci") --- */
.rb-sostenibilita {
    border: 2px solid var(--rb-accent);
    padding: 1.2rem 1.5rem;
    margin-bottom: 2rem;
}

/* --- SCHEDE "COME RAGGIUNGERCI" espandibili al click (Bootstrap collapse) --- */
.rb-travel {
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

/* Intestazione cliccabile (compatta): icona + titolo + freccia */
.rb-travel-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.8rem;

    background: none;
    border: none;
    color: var(--rb-text);
    font-family: var(--rb-font);
    font-size: 1.1rem;

    padding: 1rem 1.2rem;
    cursor: pointer;
    text-align: left;
}

.rb-travel-head i:first-child {
    color: var(--rb-accent);
}

/* la freccia spinta a destra; ruota quando la scheda è aperta */
.rb-travel-arrow {
    margin-left: auto;
    transition: transform .25s ease;
}

/* Bootstrap aggiunge "collapsed" quando è chiusa: freccia in giù.
   Quando è aperta (senza .collapsed) la freccia punta su. */
.rb-travel-head:not(.collapsed) .rb-travel-arrow {
    transform: rotate(180deg);
}

/* Testo che compare aprendo */
.rb-travel-body {
    padding: 0 1.2rem 1.2rem 1.2rem;
}

/* --- MAPPA GOOGLE MAPS (interattiva, responsive) --- */
.rb-map {
    margin-top: 1rem;
}

.rb-map iframe {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}

/* Link "apri a schermo intero" sotto la mappa */
.rb-map-link {
    margin-top: 0.6rem;
}

.rb-map-link a {
    color: var(--rb-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================= */
/*  PAGINA "COME" — sponsor + crowdfunding                      */
/* ============================================================= */

/* --- PATROCINIO (logo grande a sinistra + frase a destra) --- */
.rb-patrocinio {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* colonna del logo: immagine + link sotto */
.rb-patrocinio-logo {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.rb-patrocinio-logo img {
    width: clamp(150px, 24vw, 240px);   /* più grande dei loghi sponsor */
    height: auto;
    display: block;
}

.rb-patrocinio-logo a {
    color: var(--rb-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 0.9rem;
}

/* frase di ringraziamento: poco più piccola del titolo "I nostri sponsor" */
.rb-patrocinio-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
}

/* Griglia loghi sponsor: si adatta da sola al numero di colonne */
.rb-sponsors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

/* Ogni sponsor = riquadro del logo + nome (link) sotto */
.rb-sponsor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

/* Riquadro/segnaposto del logo sponsor.
   Altezza FISSA uguale per tutti: così ogni logo (anche quadrato) sta nello
   stesso spazio e i nomi sotto restano allineati. */
.rb-sponsor {
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--rb-accent);
    text-decoration: none;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem;
}

.rb-sponsor i {
    font-size: 1.8rem;
}

/* Il logo si adatta al riquadro senza deformarsi né sforare l'altezza fissa */
.rb-sponsor img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Nome dello sponsor sotto il logo (link alla pagina esterna).
   Base = viola sottolineato; all'hover diventa bianco senza sottolineatura. */
.rb-sponsor-name {
    color: var(--rb-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 0.9rem;
    text-align: center;
    transition: color .2s ease;
}

.rb-sponsor-name:hover {
    color: var(--rb-text);
    text-decoration: none;
}

/* Sezione crowdfunding: testo + bottone, centrati.
   Il testo è largo quanto la griglia degli sponsor (nessun limite stretto). */
.rb-crowd {
    margin-top: 3.5rem;
    text-align: center;
}

.rb-crowd-text {
    margin: 0 auto 1.5rem auto;
}

/* ============================================================= */
/*  ADATTAMENTO MOBILE / TABLET                                  */
/* ============================================================= */

@media (max-width: 768px) {

    :root {
        --rb-side-width: 18px;
        --rb-header-height: 90px;
        --rb-footer-height: 90px;
    }

    .rb-dropdown {
        width: 210px;
        right: 20px;
    }

    /* padding laterali su mobile: un po' d'aria dai bordi della sezione nera */
    .rb-main,
    .rb-page,
    .rb-film {
        padding-left: 32px;
        padding-right: 32px;
    }

    /* La larghezza della locandina si imposta SUL LINK (che è centrato con
       margin auto): così l'immagine resta centrata rispetto a data e titolo.
       NB: il wrapper interno resta al 100% del link. */
    .rb-poster-link {
        width: min(80%, 360px);
    }

    /* su mobile: locandina sopra, video sotto (non più affiancati) */
    .rb-film-media {
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: 1.5rem;
    }

    /* colonna a piena larghezza + contenuto centrato: così la locandina
       (inline-block) resta centrata rispetto allo schermo quando è impilata */
    .rb-film-poster-col {
        height: auto;
        width: 100%;
        text-align: center;
    }

    .rb-film-poster {
        height: auto;
        width: min(70%, 300px);
    }

    /* su mobile la locandina si dimensiona in larghezza */
    .rb-film-poster img {
        height: auto;
        width: 100%;
    }

    .rb-film-video-col {
        width: 100%;
    }

    /* il video torna al classico 16:9 quando è impilato */
    .rb-video-wrapper {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* mappa un po' più bassa su mobile */
    .rb-map iframe {
        height: 320px;
    }

    /* ospiti: su mobile foto sopra e testo sotto, centrati */
    .rb-guest {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .rb-guest-ph,
    .rb-guest-photo {
        flex-basis: auto;
    }

    /* patrocinio: su mobile logo sopra e frase sotto, centrati */
    .rb-patrocinio {
        flex-direction: column;
        text-align: center;
    }

    /* su mobile il logo del patrocinio ha una dimensione moderata,
       in linea con i loghi sponsor (né minuscolo né a tutta larghezza) */
    .rb-patrocinio-logo {
        width: 100%;
    }

    .rb-patrocinio-logo img {
        width: 100%;
        max-width: 170px;
    }
}