/*
 * Stile del sito — Terra di Siena International Film Festival.
 * Unione delle regole custom che nel template stavano in un <style> per pagina.
 * Palette e font sono in tailwind.config, dentro html_shell/head.php.
 */

body { background-color: #09090b; color: #ffffff; }

/* Bottone-biglietto fisso: la forma del ticket con le due tacche laterali. */
.ticket-shape {
    position: relative;
    background: #09090b;
    border: 2px solid #a47a3b;
}
.ticket-shape::before, .ticket-shape::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background-color: #09090b;
    border: 2px solid #a47a3b;
    border-radius: 50%;
    transform: translateY(-50%);
}
.ticket-shape::before { left: -9px; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.ticket-shape::after { right: -9px; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }

/* Sfumatura sopra le immagini hero, per far leggere il testo in basso. */
.hero-gradient {
    background: linear-gradient(0deg, rgba(9,9,11,1) 0%, rgba(9,9,11,0.2) 50%, rgba(9,9,11,0.8) 100%);
}

/* Riga dei "titoli di coda" sotto l'hero della home. */
.movie-credits {
    font-family: 'Inter', sans-serif;
    font-stretch: ultra-condensed;
    letter-spacing: 0.2em;
}

/* Capolettera dei testi lunghi (storia, sostenibilità, green carpet, articoli). */
.drop-cap::first-letter {
    float: left;
    font-size: 5rem;
    line-height: 0.8;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    color: #a47a3b;
    font-family: 'Playfair Display', serif;
}

/* Titoli troncati a due righe nelle card della rassegna stampa. */
.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Paginazione delle viste risorsa. Il markup lo costruisce amw-vista.js, che è JS del KERNEL e
 * identico sui progetti fratelli: non si tocca. Qui gli si dà il vestito del tema, quello della
 * paginazione approvata di news.php.
 *
 * ⚠️ I selettori sono deliberatamente più specifici del necessario. amw-vista.js inietta un
 * proprio <style> nel <head> a runtime, con bottoni bianchi e attivo nero, DOPO che head.php ha
 * linkato questo foglio: a parità di specificità vincerebbe lui. Raddoppiare la classe e
 * scendere dal contenitore ci mette una specificità sopra senza toccare una riga del kernel.
 */
.amw-pager.amw-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 5rem;
}
.amw-pager .amw-pager-btn {
    min-width: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid #27272a;
    background: transparent;
    color: #a1a1aa;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}
.amw-pager .amw-pager-btn:hover:not(:disabled) { border-color: #a47a3b; color: #a47a3b; }
.amw-pager .amw-pager-btn.is-active { border-color: #a47a3b; background: #a47a3b; color: #09090b; }
.amw-pager .amw-pager-btn:disabled { opacity: 0.3; cursor: default; }
.amw-pager .amw-pager-gap { color: #52525b; padding: 0 0.25rem; }
