/* teatro256/css/genere-label.css
 * Stili per l'etichetta genere sulle card e i pulsanti filtro nella pagina stagione.
 *
 * Enqueue corretto in setup.php (handle dipendenza: 'teatro256-main-style'):
 *   wp_enqueue_style(
 *       'teatro256-genere-label',
 *       get_template_directory_uri() . '/css/genere-label.css',
 *       ['teatro256-main-style'],
 *       $theme_version
 *   );
 * ---------------------------------------------------------------------- */

/* ==========================================================================
   1. ETICHETTA GENERE — sovrapposta alla base della foto nella card
   ========================================================================== */

/**
 * Wrapper posizionato in modo assoluto rispetto a .prod-img.
 * overflow:hidden è fondamentale: senza di esso il layer assoluto
 * può "scappare" fuori dal contenitore e apparire in posizione errata.
 */
.prod-img {
    position: relative;
    overflow: hidden;
}

.card-genere-label-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: flex-end;
	flex: 1,1, 1;
}

/* L'etichetta vera e propria */
.produzione-genere-label {
	display: inline-block !important;
	max-width: 50%;
	padding: 8px 10px;
	border-radius: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0;
	text-decoration: none;
	line-height: 1.4;
	box-sizing: border-box;
	border-top: 2px solid #fff;
	flex: 1;
}

/*
 * Fix: nella pagina taxonomy-stagione-sezione il pulsante Scopri
 * usa .scopri-button ma non .ui-btn (generato da render_produzione_card legacy).
 * Dopo la migrazione a get_template_part il problema scompare,
 * ma questa regola copre eventuali contesti dove ui-btn manca.
 */
.scopri-button {
    display: inline-block;
    padding: 8px 18px;
    border: 2px solid currentColor;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s;
}

.produzione-genere-label:hover,
.produzione-genere-label:focus {
    opacity: 0.85;
    text-decoration: none;
}

/* Classi per genere specifico (sovrascrivibili nel child theme) */
/* Esempi — le classi sono generate automaticamente dal PHP come .genere-label--{slug} */
/* .genere-label--teatro         { background-color: #2e7d32; } */
/* .genere-label--danza          { background-color: #1565c0; } */
/* .genere-label--musical        { background-color: #6a1b9a; } */
/* .genere-label--cabaret        { background-color: #e65100; } */


/* ==========================================================================
   2. BARRA FILTRI nella pagina taxonomy-stagione-sezione
   ========================================================================== */

.stagione-filtri {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px;
	padding: 14px 16px;
	background-color: #f5f5f5;
	border-radius: 4px;
	justify-content: center;
}

.stagione-filtri__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #555;
    margin-right: 4px;
    white-space: nowrap;
}

.stagione-filtri__btn {
	display: inline-block;
	padding: 6px 16px;
	border: 2px solid currentColor;
	border-radius: 0;
	font-size: 0.825rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	background-color: transparent;
	color: var(--primary-color, #333)  !important;
	transition: background-color 0.18s, color 0.18s;
	line-height: 1.3;
}

.stagione-filtri__btn:hover {
    background-color: #333;
    color: #fff !important;
}

/* Stato attivo — usa il colore primario del tema (var o fallback) */
.stagione-filtri__btn.is-active {
	background-color: var(--primary-color, #2e7d32);
	border-color: var(--primary-color, #2e7d32);
	color: #fff !important;
}

/* Pulsante "Tutti" — stile neutro */
.stagione-filtri__btn--all {
    color: #333;
    border-color: #333;
}
.stagione-filtri__btn--all.is-active {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* Pulsanti genere — usano il colore primario del tema */
.stagione-filtri__btn--genere {
    color: var(--primary-color, #333);
    border-color: var(--color-primary, #333);
}
.stagione-filtri__btn--all.is-active {
	background-color: var(--background-color-dark);
	border-color: var(--border-color-dark);
	color: #fff !important;
}

/* Pulsanti location — stile secondario (es. grigio scuro) */
.stagione-filtri__btn--location {
    color: #555;
    border-color: #555;
}
.stagione-filtri__btn--location.is-active {
    background-color: #555;
    border-color: #555;
    color: #fff;
}

/* ==========================================================================
   3. ETICHETTA nel SINGLE produzione — header desktop e mobile image
   ========================================================================== */

/* Wrapper header: deve essere position:relative e overflow:hidden */
.large-header,
.mobile-header {
    position: relative;
    overflow: hidden;
}

/* Etichetta sovrapposta all'header nel single */
.single-produzione-header-label {
    position: absolute;
    bottom: 14px;
    left: 20px;
    z-index: 3;
}

/* Su mobile, etichetta sovrapposta alla mobile-header image */
.mobile-header .card-genere-label-wrap {
    padding-bottom: 10px;
}

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .stagione-filtri {
        gap: 6px;
        padding: 10px 12px;
    }

    .stagione-filtri__btn {
        font-size: 0.775rem;
        padding: 5px 12px;
    }

    .produzione-genere-label {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

/* ==========================================================================
   6. SINGLE — etichetta nel flusso quando manca l'header
   ========================================================================== */

/**
 * Quando il single NON ha header_image, la label viene emessa come
 * elemento block prima del .flex-wrapper, senza position:absolute.
 * Appare immediatamente sopra il breadcrumb, in tutti i breakpoint.
 */
.produzione-genere-label-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 20px 0;
}

.produzione-genere-label-flow .produzione-genere-label {
    /* Stesso stile pill, ma senza position assoluta */
    position: static;
    display: inline-block;
}

/* ==========================================================================
   7. SINGLE — azzera lo scostamento grigio quando l'header è presente
   ========================================================================== */

/**
 * Il tema applica padding-top o margin-top al .flex-wrapper per creare
 * spazio sotto la navbar. Quando c'è l'header fotografico full-width,
 * quel gap diventa uno scostamento visibile tra foto e contenuto.
 * La classe .has-header (aggiunta via PHP) lo azzera.
 */
.flex-wrapper.has-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Stesso fix sull'article figlio, nel caso il padding sia lì */
.flex-wrapper.has-header > article {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   8. UTILITY — desktop-only / mobile-only
   Usate in single-produzione.php per mostrare/nascondere gli header hero.
   Se il tema le definisce già nel suo style.css, queste regole sono
   ridondanti ma innocue (stessa logica, stesso breakpoint).
   ========================================================================== */

/* Visibile solo su desktop: nascosto sotto 768px */
.desktop-only {
    display: block;
}
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

/* Visibile solo su mobile: nascosto sopra 768px */
.mobile-only {
    display: none;
}
@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }
}