/* Fotografia — /fotografia/ (page-fotografia.php, Figma nodo 88:3). Scoped .foto-* per non collidere con hero/homepage. */

/* Caricato solo su /fotografia/ — override sicuro del fondo pagina (Figma: Sabbia, non Carta) */
body.far-overland-home {
	background: var(--sabbia);
}

.foto-wrap {
	background: var(--sabbia);
}

/* Header */
.foto-header {
	padding: 48px 64px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.foto-kicker {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--terracotta);
}

.foto-title {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 52px;
	line-height: 1.1;
	color: var(--inchiostro);
}

.foto-sub {
	font-family: 'Urbanist', sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #7A7066;
}

/* Filter bar — statica per ora, si attiva col modello dati Photo Story */
.foto-filter-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 8px 64px 32px;
}

.foto-pill {
	font-family: 'Urbanist', sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	color: var(--inchiostro);
	border: 1px solid #D1C7BA;
	border-radius: 20px;
	padding: 8px 16px;
	white-space: nowrap;
}

.foto-pill--active {
	background: #291F1A;
	color: #fff;
	border-color: #291F1A;
}

.foto-filter-dest {
	margin-left: auto;
	font-family: 'Urbanist', sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	color: #7A7066;
	white-space: nowrap;
}

/* Griglia copertine Photo Story — righe 2 / 3 / 2 */
.foto-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 64px 64px;
}

/* Il modificatore è il numero di colonne della riga (ritmo 2+3+2 dal template) */
.foto-row {
	display: grid;
	gap: 24px;
}

.foto-row--2 { grid-template-columns: 1fr 1fr; }
.foto-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.foto-tile {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 668 / 500;
	background: var(--notte);
}

.foto-row--3 .foto-tile { aspect-ratio: 430 / 380; }

.foto-empty {
	font-family: 'Urbanist', sans-serif;
	font-size: 16px;
	color: #7A7066;
}

.foto-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.foto-tile:hover .foto-tile-img {
	transform: scale(1.04);
}

.foto-tile-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%);
}

.foto-tile-count {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--inchiostro);
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	padding: 5px 12px;
	border-radius: 14px;
}

.foto-tile-text {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.foto-tile-dest {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	color: #fff;
}

.foto-tile-title {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: #fff;
}

/* La storia di uno scatto */
.foto-scatto {
	display: flex;
	align-items: center;
	gap: 56px;
	padding: 24px 64px 80px;
}

.foto-scatto-img {
	width: 560px;
	max-width: 48%;
	height: 420px;
	object-fit: cover;
	border-radius: 16px;
	flex-shrink: 0;
}

.foto-scatto-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 500px;
}

.foto-scatto-kicker {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1.5px;
	color: var(--terracotta);
}

.foto-scatto-title {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	color: var(--inchiostro);
}

.foto-scatto-body {
	font-family: 'Urbanist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #7A7066;
}

.foto-scatto-quote {
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 24px;
	color: var(--terracotta);
}

.foto-scatto-link {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--inchiostro);
	text-decoration: none;
}

.foto-scatto-link:hover {
	color: var(--terracotta);
}

/* Responsive */
/* ---- Dettaglio Photo Story (/fotografia/[slug], single-photo_story.php) ---- */

.ps-wrap {
	background: var(--sabbia);
}

.ps-header {
	padding: 40px 64px 8px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 900px;
}

.ps-breadcrumb {
	font-family: 'Urbanist', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: #7A7066;
}

.ps-breadcrumb a {
	color: #7A7066;
	text-decoration: none;
}

.ps-breadcrumb a:hover { color: var(--terracotta); }

.ps-kicker {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--terracotta);
}

.ps-title {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 44px;
	line-height: 1.1;
	color: var(--inchiostro);
}

.ps-intro {
	font-family: 'Urbanist', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #7A7066;
}

.ps-hero {
	margin: 32px 64px 0;
	border-radius: 16px;
	overflow: hidden;
}

.ps-hero img {
	display: block;
	width: 100%;
	max-height: 78svh;
	object-fit: cover;
}

/* Sequenza ritmata: una grande → coppia → una grande → ... */
.ps-sequence {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 48px 64px 64px;
	max-width: 1200px;
	margin: 0 auto;
}

.ps-shot img {
	display: block;
	width: 100%;
	height: auto; /* wp_get_attachment_image scrive width/height espliciti */
	border-radius: 14px;
	object-fit: cover;
}

.ps-shot--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

.ps-shot--pair figure { margin: 0; }

.ps-shot figcaption,
.ps-caption {
	font-family: 'Urbanist', sans-serif;
	font-size: 13.5px;
	color: #7A7066;
	margin-top: 10px;
}

.ps-closing {
	padding: 0 64px 80px;
	text-align: center;
}

.ps-closing-note {
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 26px;
	color: var(--terracotta);
	margin-bottom: 12px;
}

.ps-closing-link {
	font-family: 'Urbanist', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--inchiostro);
	text-decoration: none;
}

.ps-closing-link:hover { color: var(--terracotta); }

/* Navigazione tastiera — stato focus visibile su tutti gli elementi interattivi della sezione */
.foto-tile:focus-visible,
.foto-scatto-link:focus-visible,
.ps-closing-link:focus-visible,
.ps-breadcrumb a:focus-visible {
	outline: 3px solid var(--terracotta);
	outline-offset: 3px;
	border-radius: 4px;
}

.foto-tile:focus-visible { border-radius: 14px; }

/* Responsive */
@media (max-width: 1024px) {
	.foto-title { font-size: 42px; }
	.ps-title { font-size: 36px; }
}

@media (max-width: 900px) {
	.foto-header { padding: 32px 32px 24px; }
	.foto-filter-bar { padding: 8px 32px 24px; }
	.foto-grid { padding: 0 32px 48px; }
	.foto-scatto { flex-direction: column; align-items: flex-start; gap: 32px; padding: 8px 32px 64px; }
	.foto-scatto-img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; }
	.foto-filter-dest { margin-left: 0; }
	.ps-header { padding: 28px 32px 8px; }
	.ps-hero { margin: 24px 32px 0; }
	.ps-sequence { padding: 32px 32px 48px; gap: 28px; }
	.ps-closing { padding: 0 32px 56px; }
}

@media (max-width: 640px) {
	.foto-header { padding: 24px 24px 20px; }
	.foto-title { font-size: 32px; }
	.foto-sub { font-size: 15px; }
	.foto-filter-bar { padding: 8px 24px 20px; }
	.foto-grid { padding: 0 24px 40px; gap: 16px; }
	.foto-row { gap: 16px; }
	.foto-row--2,
	.foto-row--3 { grid-template-columns: 1fr; }
	.foto-row--2 .foto-tile,
	.foto-row--3 .foto-tile { aspect-ratio: 4 / 3; }
	.foto-scatto { padding: 0 24px 48px; }
	.foto-scatto-title { font-size: 26px; }
	.ps-header { padding: 24px 24px 8px; }
	.ps-title { font-size: 28px; }
	.ps-hero { margin: 20px 24px 0; }
	.ps-sequence { padding: 28px 24px 40px; gap: 24px; }
	.ps-shot--pair { grid-template-columns: 1fr; gap: 24px; }
	.ps-closing { padding: 0 24px 48px; }
}