/* ==========================================================================
   Dicono di me: archivio (archive-critiche.php) e scheda (single-critiche.php).
   Direzione "indice": materiali/direzione.md. Solo token --dg-*.
   ========================================================================== */

/* ---------- Archivio: una riga per critica, tra filetti ---------- */
.dg-critiche { list-style: none; margin: 0; padding: 0; }
.dg-critiche__voce { border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-critiche__voce:last-child { border-bottom: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-critiche__link { padding-block: var(--dg-space-4); row-gap: var(--dg-space-2); color: inherit; text-decoration: none; }
.dg-critiche__anno { grid-column: 1 / -1; font-size: var(--dg-fs-sm); color: var(--dg-body-tertiary-color); }
.dg-critiche__corpo { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--dg-space-1); }
.dg-critiche__titolo { margin: 0; font-size: var(--dg-h5); font-weight: var(--dg-fw-normal); letter-spacing: -.005em; line-height: 1.3; color: var(--dg-heading-color); }
.dg-critiche__firma { color: var(--dg-body-color); }
.dg-critiche__citazione { grid-column: 1 / -1; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-light); color: var(--dg-body-secondary-color); }
.dg-critiche__link:hover .dg-critiche__titolo { color: var(--dg-link-color); }
@media (min-width: 768px) {
	.dg-critiche__anno { grid-column: 1 / 2; font-size: var(--dg-font-size-base); }
	.dg-critiche__corpo { grid-column: 2 / 5; }
	.dg-critiche__citazione { grid-column: 2 / 5; }
}
@media (min-width: 992px) {
	.dg-critiche__corpo { grid-column: 2 / 5; }
	.dg-critiche__citazione { grid-column: 5 / 7; grid-row: 1; font-size: var(--dg-font-size-base); }
}
/* Touch: freccia e riscontro al tocco, come l'indice delle serie. */
@media (hover: none) {
	.dg-critiche__titolo { display: flex; justify-content: space-between; gap: var(--dg-space-3); }
	.dg-critiche__link { -webkit-tap-highlight-color: transparent; transition: background-color var(--dg-duration-fast) var(--dg-ease-standard); }
	.dg-critiche__link:active { background: var(--dg-body-tertiary-bg); }
	.dg-critiche__link:active .dg-critiche__titolo { color: var(--dg-link-color); }
}

/* ---------- Scheda ---------- */
.dg-critica__titolo { margin: 0; font-size: clamp(var(--dg-h2), 3.6vw, var(--dg-display-5)); line-height: 1.12; }
.dg-critica__meta { display: flex; flex-direction: column; gap: var(--dg-space-1); margin: var(--dg-space-4) 0 0; }
.dg-critica__firma { font-size: var(--dg-fs-lg); color: var(--dg-heading-color); }
.dg-critica__meta a { color: var(--dg-link-color); }

.dg-critica__griglia { row-gap: var(--dg-space-6); align-items: start; }
.dg-critica__testo, .dg-critica__lato { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.dg-critica__testo { grid-column: 1 / 4; }
	.dg-critica__lato { grid-column: 4 / 5; }
}
@media (min-width: 992px) {
	.dg-critica__testo { grid-column: 1 / 4; }
	.dg-critica__lato { grid-column: 5 / 7; position: sticky; top: calc(var(--dg-space-7) + var(--dg-space-3)); }
}
.dg-critica__testo .dg-content { max-width: 40rem; }
.dg-critica__testo .dg-content p { margin-bottom: var(--dg-space-4); }
.dg-critica__testo .dg-content img { display: block; max-width: 100%; height: auto; margin-block: var(--dg-space-4); }

.dg-critica__citazione { margin: 0 0 var(--dg-space-5); padding: 0; border: 0; }
.dg-critica__citazione p { margin: 0; font-size: var(--dg-h3); font-weight: var(--dg-fw-light); line-height: 1.3; letter-spacing: -.01em; color: var(--dg-heading-color); }

.dg-critica__lato-titolo { margin: 0 0 var(--dg-space-3); font-size: var(--dg-fs-sm); color: var(--dg-body-secondary-color); }
.dg-critica__lato-titolo:not(:first-child) { margin-top: var(--dg-space-5); }
.dg-allegati { list-style: none; margin: 0; padding: 0; border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-allegati__voce { display: flex; flex-direction: column; gap: var(--dg-space-1); padding-block: var(--dg-space-3); color: inherit; text-decoration: none; border-bottom: var(--dg-border-width) solid var(--dg-border-color); }
.dg-allegati__nome { color: var(--dg-link-color); }
.dg-allegati__voce:hover .dg-allegati__nome { color: var(--dg-link-hover-color); text-decoration: underline; }
.dg-critica__video + .dg-critica__video { margin-top: var(--dg-space-3); }