/* =========================================================================
   Cineteca viterbese — vive DENTRO una sezione del tema Cavani.
   La scocca (bordi, header/menu, foto a lato, footer) è quella del tema:
   qui si stila solo il contenuto dell'archivio dentro `.cavani_tm_cineteca`,
   adattato alla colonna dei contenuti (60%). Caricato dopo theme.css e site.css.
   ========================================================================= */

.cavani_tm_cineteca { width: 100%; padding-bottom: 60px; }
/* Il titolo del tema (.cavani_tm_title) è float:left: conteniamo il float. */
.cavani_tm_cineteca::after { content: ""; display: block; clear: both; }

.cavani_tm_cineteca .cin-lead {
    clear: both;
    color: #7d7789; font-size: .95rem; line-height: 1.6;
    max-width: 62ch; margin: 16px 0 22px;
}

/* --------------------------------------------------------------- ricerca */
.cin-search {
    background: #fff; border: 1px solid #e6e9f0; border-radius: 14px;
    padding: 20px; margin-bottom: 20px;
}
/* auto-fill: la griglia si adatta alla larghezza reale della colonna
   (1 colonna quando è stretta, 2–3 quando c'è spazio) senza media query. */
.cin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cin-field { display: flex; flex-direction: column; }
.cin-field--wide { grid-column: 1 / -1; }
.cin-field span {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #8a93a6; margin-bottom: 5px;
}
.cin-field input, .cin-field select {
    width: 100%; padding: 9px 11px; font: inherit; font-size: .9rem;
    border: 1px solid #cfd6e2; border-radius: 8px; background: #fff; color: #333;
}
.cin-field input:focus, .cin-field select:focus {
    outline: none; border-color: #333; box-shadow: 0 0 0 3px rgba(51, 51, 51, .08);
}
.cin-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.cin-btn {
    display: inline-flex; align-items: center; padding: 9px 20px; border: 1px solid #333;
    border-radius: 8px; background: #333; color: #fff; font: inherit; font-size: .88rem;
    font-weight: 600; cursor: pointer; transition: background .15s;
}
.cin-btn:hover { background: #000; }
.cin-btn--light { background: #fff; color: #333; }
.cin-btn--light:hover { background: #f1f3f7; }

.cin-count { color: #7d7789; font-size: .9rem; margin: 0 2px 14px; }
.cin-empty {
    background: #fff; border: 1px solid #e6e9f0; border-radius: 12px;
    padding: 32px; text-align: center; color: #7d7789;
}

/* --------------------------------------------------------------- elenco */
.cin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cin-item { background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; overflow: hidden; }
.cin-item summary {
    list-style: none; cursor: pointer; padding: 14px 16px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
}
.cin-item summary::-webkit-details-marker { display: none; }
.cin-item details[open] summary { border-bottom: 1px solid #eef1f6; }
.cin-title { flex: 1 1 60%; min-width: 0; font-weight: 600; color: #333; }
.cin-year { color: #8a93a6; font-weight: 400; }
.cin-sala {
    flex: 0 0 auto; font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.cin-sala--cinema { background: #e8f0ff; color: #1f4fc4; }
.cin-sala--arena  { background: #fff1e0; color: #a15b12; }
.cin-sub { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; color: #8a93a6; font-size: .82rem; }
.cin-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cin-dir { color: #7d7789; }

.cin-detail { padding: 12px 16px 16px; }
.cin-detail p { margin: 0 0 8px; font-size: .9rem; }
.cin-detail p:last-child { margin-bottom: 0; }
.cin-detail p span {
    display: inline-block; min-width: 120px; padding-right: 12px; box-sizing: border-box;
    color: #8a93a6; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700; vertical-align: baseline;
}
.cin-prov { margin-top: 10px !important; padding-top: 10px; border-top: 1px dashed #e6e9f0; color: #5b6779; }

/* ------------------------------------------------------------ paginazione */
.cin-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; color: #7d7789; font-size: .9rem; }
.cin-pager__pos { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ molto stretto */
@media (max-width: 560px) {
    .cin-field input, .cin-field select { font-size: 16px; } /* niente auto-zoom iOS */
    .cin-detail p span { display: block; min-width: 0; margin-bottom: 1px; }
}