/* ==========================================================================
   Press Area — Frontend (utilities2/press-area)
   Prefix: pa-*  •  variabili sovrascrivibili per-pagina su .pa-press
   ========================================================================== */
.pa-press{
	--pa-fg: #2d1f3d;                 /* colore testo / bordi righe          */
	--pa-line: rgba(45,31,61,.16);    /* linee separatrici                   */
	--pa-btn-fg: #2d1f3d;             /* testo bottone                       */
	--pa-btn-hover-fg: #e5d3ce;       /* testo bottone in hover              */
	--pa-btn-hover-bg: #2d1f3d;       /* fondo bottone in hover              */
	--pa-hover-bg: rgba(45,31,61,.06);/* colore di riempimento riga in hover */
	width: 100%;
	color: var(--pa-fg);
}

.pa-list{ list-style: none; margin: 0; padding: 0; }

/* ---- Riga ---------------------------------------------------------------- */
.pa-row{
	position: relative;
	overflow: hidden;            /* clippa il tile direzionale che scorre */
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1rem, 2.2vw, 1.6rem) clamp(.25rem, 1.5vw, 1rem);
	border-top: 1px solid var(--pa-line);
}
/* Tile direzionale (iniettato via JS): entra dalla direzione del mouse, esce
   verso quella di uscita → l'effetto prosegue nella riga successiva. */
.pa-row__tile{
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--pa-hover-bg);
	pointer-events: none;
	transform: translateY(-101%);
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
/* Il contenuto sta sopra al tile */
.pa-row__date,
.pa-row__outlet,
.pa-row__action{ position: relative; z-index: 1; }
.pa-list > .pa-row:last-child{ border-bottom: 1px solid var(--pa-line); }

.pa-row__date{
	flex: 0 0 8.333%;      /* prima colonna: 1/12 (griglia del sito) */
	min-width: 0;
	font-size: clamp(.72rem, 1vw, .82rem);
	letter-spacing: .05em;
	text-transform: none;   /* formato "2021, july 14" — minuscolo come da PHP */
	opacity: .6;
}
.pa-row__outlet{
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(1.15rem, 2.6vw, 2rem);
	font-weight: 500;
	line-height: 1.12;
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.pa-row__action{
	flex: 0 0 8.333%;      /* ultima colonna: 1/12 */
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* micro-interazione: la testata scivola un filo in hover della riga */
@media (hover: hover) and (pointer: fine){
	.pa-row--has-thumb:hover .pa-row__outlet{ transform: translateX(10px); }
}

/* ---- Bottone ------------------------------------------------------------- */
.pa-btn{
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: clamp(.7rem, .9vw, .8rem);
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	padding: .62em 1.15em;
	border-radius: 999px;
	border: 1px solid var(--pa-btn-fg);
	background: transparent;
	color: var(--pa-btn-fg);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease;
}
.pa-btn:hover,
.pa-btn:focus-visible{
	background: var(--pa-btn-hover-bg);
	color: var(--pa-btn-hover-fg);
	outline: none;
}
/* Icona come SVG in currentColor: eredita il colore del testo del bottone,
   nessun fondale/rendering emoji. */
.pa-btn__ico{ display: inline-flex; align-items: center; line-height: 0; }
.pa-btn__ico svg{ width: 1em; height: 1em; display: block; }

/* ---- Thumbnail flottante in hover --------------------------------------- */
/* Layer di posizione: segue il cursore all'istante (nessuna transition qui). */
.pa-hover-tile{
	position: fixed;
	top: 0; left: 0;
	z-index: 60;
	width: clamp(190px, 22vw, 320px);
	aspect-ratio: 16 / 9;
	pointer-events: none;
	transform: translate3d(-9999px, -9999px, 0);
	will-change: transform;
}
/* Layer di scala: 0 ↔ 1 con transition (crescita/riduzione della thumb). */
.pa-hover-tile__inner{
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 14px 44px rgba(0,0,0,.28);
	transform: scale(0);
	transform-origin: center;
	transition: transform .32s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.pa-hover-tile img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-hover-tile--on .pa-hover-tile__inner{ transform: scale(1); }

/* ---- Modale fullscreen --------------------------------------------------- */
.pa-modal{
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	opacity: 0;
	transition: opacity .3s ease;
}
.pa-modal[hidden]{ display: none; }
.pa-modal--open{ opacity: 1; }

.pa-modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(20,14,28,.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.pa-modal__fig{
	position: relative;
	margin: 0;
	max-width: 92vw;
	max-height: 88vh;
	z-index: 1;
}
.pa-modal__img{
	display: block;
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 80px rgba(0,0,0,.5);
	transform: scale(.96);
	transition: transform .3s ease;
}
.pa-modal--open .pa-modal__img{ transform: scale(1); }

/* X in basso a destra */
.pa-modal__close{
	position: fixed;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	z-index: 2;
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.5);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background .2s ease, transform .2s ease;
}
.pa-modal__close:hover,
.pa-modal__close:focus-visible{
	background: rgba(255,255,255,.22);
	transform: scale(1.06);
	outline: none;
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 768px){
	.pa-row{
		flex-wrap: wrap;
		align-items: baseline;
		gap: .35rem 1rem;
		padding: 1.1rem .25rem;
	}
	.pa-row__date{ order: 1; flex: 1 1 100%; min-width: 0; }
	.pa-row__outlet{ order: 2; flex: 1 1 auto; font-size: 1.2rem; }
	.pa-row__action{ order: 3; flex: 0 0 auto; align-self: auto; margin-left: auto; }
	.pa-hover-tile{ display: none; }
	.pa-modal__close{ width: 46px; height: 46px; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
	.pa-row__outlet,
	.pa-row__tile,
	.pa-btn,
	.pa-hover-tile__inner,
	.pa-modal,
	.pa-modal__img,
	.pa-modal__close{ transition: none !important; }
	.pa-row--has-thumb:hover .pa-row__outlet{ transform: none; }
}