/*
 * secondary.css — the non-catalogue sections: Download (archive-documento),
 * Colori e finiture (taxonomy-finitura), the Gallery page, and the static pages
 * (Chi siamo / Contatti). References tokens.css custom properties only (no raw
 * hex / literal sizes), same contract as main.css. Loaded only on these views.
 */

/* ====================================================================== */
/*  Download                                                              */
/* ====================================================================== */

.download__header { margin-bottom: var(--space-l); }

.download-group { margin-bottom: var(--space-xl); }
.download-group:last-child { margin-bottom: 0; }
/* Clear the fixed header when jumped to via a #catalogo|#manuale|#modulistica anchor. */
.download-group { scroll-margin-top: calc(var(--header-height) + var(--space-m)); }

/* Each tipo is a collapsible <details>; the <summary> is the clickable header.
   Drop the native disclosure marker — a caret is drawn on the right instead. */
.download-group__summary {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	padding-bottom: var(--space-s);
	border-bottom: 1px solid var(--color-border);
	cursor: pointer;
	list-style: none;
}
.download-group__summary::-webkit-details-marker { display: none; }
.download-group__summary:hover .download-group__title { color: var(--color-heading); }
.download-group__summary:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: var(--space-xs);
}

.download-group__title {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	margin-bottom: 0;
}

/* Document count next to the title; a caret pinned to the right flips when open. */
.download-group__count {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
.download-group__summary::after {
	content: "";
	margin-left: auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 1.5px solid var(--color-text-muted);
	border-bottom: 1.5px solid var(--color-text-muted);
	transform: rotate(45deg);
	transition: transform var(--transition);
}
.download-group[open] > .download-group__summary::after { transform: rotate(225deg); }

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

.download-row {
	padding-block: var(--space-m);
	border-bottom: 1px solid var(--color-border);
}

.download-row__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
}
.download-row__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	flex: 1;
}
.download-row__link:hover { opacity: 1; }
.download-row__title {
	font-size: var(--text-lg);
	font-weight: var(--font-weight-medium);
	color: var(--color-heading);
}
/* The "Scarica / Apri" affordance reads as a ghost button but the whole row is
   the link, so it only needs to flip colours on row hover. */
.download-row__action { flex: none; pointer-events: none; }
.download-row__link:hover .download-row__action {
	background: var(--color-accent);
	color: var(--color-on-accent);
	border-color: var(--color-accent);
}

.download-row__products {
	margin: var(--space-2xs) 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.download-row__products-label { margin-right: var(--space-2xs); }
.download-row__products a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.download-row__products a:hover { color: var(--color-accent); }

@media (max-width: 560px) {
	.download-row__link { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
}

/* ====================================================================== */
/*  Colori e finiture — swatch                                            */
/* ====================================================================== */

.finitura__hero {
	display: flex;
	align-items: center;
	gap: var(--space-l);
	flex-wrap: wrap;
}

.swatch {
	overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}
.swatch--lg { width: clamp(140px, 30vw, 220px); }

.swatch__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.swatch__image--placeholder {
	display: block;
	aspect-ratio: 1 / 1;
	background:
		repeating-conic-gradient(var(--color-surface-2) 0 25%, transparent 0 50%)
		0 0 / 24px 24px;
}

.finitura__intro { flex: 1; min-width: 16rem; }
.finitura__title { margin: 0 0 var(--space-s); }

.finitura__products-title {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	margin: var(--space-xl) 0 var(--space-l);
}

/* ====================================================================== */
/*  Interior page header (Chi siamo / Gallery / Contatti)                 */
/* ====================================================================== */

/* Eyebrow + big title + lead, on a hairline-bounded band. The overlay header
   sits over the top of this band (main.css offsets .site-main beneath it). */
.pagehead {
	padding-block: var(--space-l) var(--space-l);
	border-bottom: 1px solid var(--color-border);
}
.pagehead__title { max-width: 18ch; }
.pagehead .lead { margin-top: var(--space-m); margin-bottom: 0; }

/* ====================================================================== */
/*  Static pages (Chi siamo / Contatti)                                   */
/* ====================================================================== */

/* Cap the reading measure on prose, but let full-width layout blocks (the
   Contatti .contact-layout, native galleries) span the container. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > h2,
.page-content > h3,
.page-content > blockquote { max-width: 70ch; }
.page-content > :last-child { margin-bottom: 0; }
.page-content h2 { margin-top: var(--space-xl); }
.page-content h3 { margin-top: var(--space-l); }
.page-content ul,
.page-content ol { margin: 0 0 var(--space-m); padding-left: var(--space-m); }
.page-content li { margin-bottom: var(--space-2xs); }
.page-content img { border-radius: var(--radius-lg); }

.page-links { display: flex; gap: var(--space-2xs); margin-top: var(--space-l); font-size: var(--text-sm); }

/* ---- Contatti layout: office details aside + enquiry form -------------- */
/* The underline form styling itself is global, in main.css (.wpcf7-form …),
   so the per-Product quote form shares it; only the page layout lives here. */

.contact-layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--space-2xl);
	align-items: start;
}
@media (max-width: 860px) {
	.contact-layout { grid-template-columns: 1fr; gap: var(--space-xl); }
}
.contact-layout .wpcf7 { max-width: none; }
.contact-form h2 { margin-bottom: var(--space-l); }
.contact-aside .placeholder { margin-bottom: var(--space-l); }

/* ====================================================================== */
/*  Chi siamo — alternating splits + warm band + stats                    */
/* ====================================================================== */
/*
 * Authored as a layout block in the page body (Editorial copy in pages.json),
 * reusing the .split / .stat-row components from main.css. The warm band breaks
 * out of the reading column to full width via .fullbleed.
 */
.page-content > .split,
.page-content > .stat-row,
.page-content > .about-band { margin-block: var(--space-2xl); }

.about-band {
	background: var(--color-surface);
	padding-block: var(--space-2xl);
}
.about-band .split { margin: 0; }

.contact-aside .office {
	padding-block: var(--space-m);
	border-top: 1px solid var(--color-border);
}
.contact-aside .office:first-child { border-top: 0; padding-top: 0; }
.office__label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	margin-bottom: var(--space-2xs);
}
.office__addr {
	font-size: var(--text-base);
	color: var(--color-heading);
	font-weight: var(--font-weight-medium);
	line-height: 1.45;
	margin-bottom: var(--space-3xs);
}
.office__tel { color: var(--color-text-muted); margin: 0; }

.contact-aside .dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2xs) var(--space-l);
	margin-top: var(--space-l);
	padding-top: var(--space-l);
	border-top: 1px solid var(--color-border);
}
.contact-aside .dl dt {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	align-self: center;
}
.contact-aside .dl dd { margin: 0; font-weight: var(--font-weight-medium); }

/* ====================================================================== */
/*  Gallery page                                                          */
/* ====================================================================== */

.container--wide { max-width: var(--container-wide); }

/* Placeholder masonry — labelled boxes standing in for the real gallery until
   the owner uploads Media (same CSS-columns flow as the native gallery block). */
.gallery-ph { columns: 3; column-gap: var(--space-s); }
.gallery-ph .placeholder { width: 100%; margin-bottom: var(--space-s); break-inside: avoid; }
@media (max-width: 860px) { .gallery-ph { columns: 2; } }
@media (max-width: 560px) { .gallery-ph { columns: 1; } }

/* Masonry: flow the native gallery block's images into balanced CSS columns so
   portrait and landscape shots keep their natural aspect ratio (matches the
   design mockup), rather than WP's cropped equal-height grid. The legacy
   [gallery] shortcode keeps its simple grid below. */
.gallery-content .wp-block-gallery {
	display: block;
	columns: 3;
	column-gap: var(--space-s);
	gap: 0;
}
/* Core's nested-image rules carry ID-level weight — a `:not(#individual-image)`
   hack — and would otherwise size every figure to 50% of the column and crop the
   photo to a square. We match that weight (the same :not() trick, plus our
   .gallery-content scope) so each photo fills its column at its natural height,
   which is what makes the CSS-columns masonry read. */
.gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto;
	margin: 0 0 var(--space-s);
	break-inside: avoid;
}
/* Reset the explicit per-column-count widths core sets (columns-default included). */
.gallery-content .wp-block-gallery.has-nested-images[class*="columns-"] figure.wp-block-image:not(#individual-image) {
	width: auto;
}
/* Defeat is-cropped (object-fit:cover / fixed height / flex stretch) so each image
   flows at its own aspect ratio. */
.gallery-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a,
.gallery-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div,
.gallery-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img,
.gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: auto;
	object-fit: initial;
	flex: initial;
}
.gallery-content figure img,
.gallery-content .wp-block-image img { border-radius: var(--radius-lg); display: block; width: 100%; }

@media (max-width: 860px) { .gallery-content .wp-block-gallery { columns: 2; } }
@media (max-width: 560px) { .gallery-content .wp-block-gallery { columns: 1; } }

.gallery-content .gallery { display: grid; gap: var(--space-s); margin: 0; }
.gallery-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-content .gallery-item { margin: 0 !important; width: auto !important; }
.gallery-content .gallery-item img { border: 0 !important; border-radius: var(--radius-lg); width: 100%; }

@media (max-width: 720px) {
	.gallery-content .gallery-columns-3,
	.gallery-content .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
}