/* =========================================================
 * 0.4.34 (W9-R4) · Projects · Concept A editorial gallery
 * Loaded on demand when the `adepa-projects-gallery` group renders (inc/projects-gallery.php) and in the editor.
 * Scope: `.adepa-projects-gallery` + `.adepa-pg-*` only; the 0.4.33 `.adepa-sol-projects__grid` rules stay intact.
 * Markup (core blocks only): ol.wp-block-list.adepa-pg-list > li.adepa-pg-tile.adepa-pg-tN.<tone>.adepa-pg-m-<motif>
 *   holding "<strong>Name</strong><br>Country". Tones: (default) grey-100 · is-white · is-stone · is-dark · is-dark-2.
 * Grid: 1 column <600px · 6 columns 600–1023px (01/08 full) · 12 columns >=1024px
 *   [01 tall 7 | 02 5 / 03 5] [04 4 | 05 4 | 06 4] [07 5 | 08 7]. Tiles are not links: nothing focusable, no tabindex.
 * Index 01–08: CSS counter, alt text "" (the ordered list already conveys position). No JS, no extra fonts.
 * ========================================================= */
.adepa-projects-gallery {
	--pg-gap: clamp(10px, 1.2vw, 16px);
	--pg-pad: clamp(1.25rem, 2.2vw, 2.25rem);
	--pg-m-bus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 40H240M60 40V96M120 40V66M120 80V96M180 40V96M114 66h12v14h-12z'/%3E%3Ccircle cx='60' cy='102' r='6'/%3E%3Ccircle cx='120' cy='102' r='6'/%3E%3Ccircle cx='180' cy='102' r='6'/%3E%3C/svg%3E");
	--pg-m-ladder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 44H240M0 116H240M40 44V116M100 44V116M160 44V116M220 44V116'/%3E%3Cg fill='%23000' stroke='none'%3E%3Ccircle cx='40' cy='44' r='3.5'/%3E%3Ccircle cx='100' cy='116' r='3.5'/%3E%3Ccircle cx='160' cy='44' r='3.5'/%3E%3Ccircle cx='220' cy='116' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
	--pg-m-coil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M120 0V46M120 114V160M40 160H200'/%3E%3Ccircle cx='120' cy='64' r='18'/%3E%3Ccircle cx='120' cy='96' r='18'/%3E%3C/svg%3E");
	--pg-m-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 80H150L190 40H240M150 80L190 120H240M70 80V130M62 130h16'/%3E%3Cg fill='%23000' stroke='none'%3E%3Ccircle cx='150' cy='80' r='4'/%3E%3Ccircle cx='70' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
:is(.adepa-projects-gallery .adepa-pg-head) > * { margin: 0 !important; }

/* Lead + rule */
.adepa-projects-gallery .adepa-pg-head {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--60) !important;
}
.adepa-projects-gallery .adepa-pg-head::after {
	content: "";
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--brand-red) 0 48px, var(--wp--preset--color--grey-200) 48px);
}
.adepa-projects-gallery .adepa-pg-lead {
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 1.35;
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	color: var(--wp--preset--color--ink);
}

/* List + tiles */
.adepa-projects-gallery .adepa-pg-list {
	list-style: none;
	margin: 0 !important;
	padding: 0;
	counter-reset: adepa-pg;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pg-gap);
}
.adepa-projects-gallery .adepa-pg-tile {
	--pg-bg: var(--wp--preset--color--grey-100);
	--pg-fg: var(--wp--preset--color--ink);
	--pg-sub: var(--wp--preset--color--grey-700);
	--pg-accent: var(--wp--preset--color--brand-red);
	--pg-index: var(--wp--preset--color--brand-red);
	--pg-motif: var(--wp--preset--color--grey-300);
	--pg-motif-on: var(--wp--preset--color--grey-500);
	--pg-rule: 32px;
	counter-increment: adepa-pg;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.6rem;
	min-width: 0;
	min-height: 200px;
	margin: 0 !important;
	padding: calc(var(--pg-pad) + 2.5rem) var(--pg-pad) var(--pg-pad);
	background: var(--pg-bg);
	color: var(--pg-sub);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.adepa-projects-gallery .adepa-pg-tile br { display: none; }
.adepa-projects-gallery .adepa-pg-tile > strong {
	order: 1;
	max-width: 16ch;
	color: var(--pg-fg);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.adepa-projects-gallery .adepa-pg-tile.is-white { --pg-bg: var(--wp--preset--color--white); border-color: var(--wp--preset--color--grey-200); }
.adepa-projects-gallery .adepa-pg-tile.is-stone { --pg-bg: var(--wp--preset--color--grey-200); --pg-motif: #BDB8B0; }
.adepa-projects-gallery .adepa-pg-tile:is(.is-dark, .is-dark-2) {
	--pg-bg: var(--wp--preset--color--charcoal);
	--pg-fg: var(--wp--preset--color--white);
	--pg-sub: var(--wp--preset--color--grey-300);
	--pg-accent: var(--wp--preset--color--brand-red-bright);
	--pg-index: var(--wp--preset--color--grey-300); /* red-bright on charcoal is 4.19:1: rule only, never text */
	--pg-motif: rgba(255, 255, 255, 0.17);
	--pg-motif-on: rgba(255, 255, 255, 0.32);
	--adepa-focus-color: var(--wp--preset--color--white);
}
.adepa-projects-gallery .adepa-pg-tile.is-dark-2 { --pg-bg: var(--wp--preset--color--charcoal-2); }

/* Index 01–08 with the red rule */
.adepa-projects-gallery .adepa-pg-tile::before {
	content: counter(adepa-pg, decimal-leading-zero);
	content: counter(adepa-pg, decimal-leading-zero) / "";
	position: absolute;
	top: var(--pg-pad);
	left: var(--pg-pad);
	padding-right: calc(var(--pg-rule) + 0.75rem);
	background: linear-gradient(var(--pg-accent), var(--pg-accent)) right center / var(--pg-rule) 2px no-repeat;
	color: var(--pg-index);
	font-variant-numeric: tabular-nums;
	transition: padding-right var(--wp--custom--motion--base) var(--wp--custom--motion--ease), background-size var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
/* Single-line-diagram fragment: decorative, CSS mask only (no labels, ratings or counts) */
.adepa-projects-gallery .adepa-pg-tile::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: min(62%, 340px);
	aspect-ratio: 3 / 2;
	background: var(--pg-motif);
	-webkit-mask: var(--pg-m) center / 100% 100% no-repeat, linear-gradient(225deg, #000 35%, transparent 85%);
	-webkit-mask-composite: source-in;
	mask: var(--pg-m) center / 100% 100% no-repeat, linear-gradient(225deg, #000 35%, transparent 85%);
	mask-composite: intersect;
	transition: background-color var(--wp--custom--motion--base) linear;
}
.adepa-projects-gallery .adepa-pg-m-bus { --pg-m: var(--pg-m-bus); }
.adepa-projects-gallery .adepa-pg-m-ladder { --pg-m: var(--pg-m-ladder); }
.adepa-projects-gallery .adepa-pg-m-coil { --pg-m: var(--pg-m-coil); }
.adepa-projects-gallery .adepa-pg-m-branch { --pg-m: var(--pg-m-branch); }
.adepa-projects-gallery .adepa-pg-tile.is-flip::after { right: auto; left: 30%; transform: scaleX(-1); }

/* Hover (pointer devices) and focus-within (only if a link is ever added inside a tile) */
@media (hover: hover) {
	.adepa-projects-gallery .adepa-pg-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -24px rgba(21, 27, 31, 0.55); --pg-rule: 88px; --pg-motif: var(--pg-motif-on); }
}
.adepa-projects-gallery .adepa-pg-tile:focus-within { box-shadow: 0 18px 32px -24px rgba(21, 27, 31, 0.55); --pg-rule: 88px; --pg-motif: var(--pg-motif-on); }
.adepa-projects-gallery .adepa-pg-tile a:focus-visible { outline: var(--wp--custom--focus--width) solid var(--adepa-focus-color); outline-offset: var(--wp--custom--focus--offset); }

/* Phone (<600px): one column, 01 keeps its weight */
.adepa-projects-gallery .adepa-pg-t1 { min-height: 260px; }
.adepa-projects-gallery .adepa-pg-t1 > strong { font-size: var(--wp--preset--font-size--heading-1); }
.adepa-projects-gallery :is(.adepa-pg-t2, .adepa-pg-t3, .adepa-pg-t7) > strong { font-size: var(--wp--preset--font-size--heading-2); }

/* Tablet: 6 columns, 01 and 08 full width */
@media (min-width: 600px) {
	.adepa-projects-gallery .adepa-pg-list { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); }
	.adepa-projects-gallery .adepa-pg-tile { grid-column: span 3; }
	.adepa-projects-gallery .adepa-pg-t1 { grid-column: 1 / -1; min-height: 340px; }
	.adepa-projects-gallery .adepa-pg-t8 { grid-column: 1 / -1; min-height: 260px; }
	.adepa-projects-gallery .adepa-pg-t1 > strong { max-width: 12ch; }
}
/* Desktop: 12-column editorial composition */
@media (min-width: 1024px) {
	.adepa-projects-gallery .adepa-pg-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.adepa-projects-gallery .adepa-pg-head::after { margin-bottom: 0.7em; }
	.adepa-projects-gallery .adepa-pg-list { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
	.adepa-projects-gallery .adepa-pg-t1 { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 0; }
	.adepa-projects-gallery .adepa-pg-t2 { grid-column: 8 / span 5; grid-row: 1; }
	.adepa-projects-gallery .adepa-pg-t3 { grid-column: 8 / span 5; grid-row: 2; }
	.adepa-projects-gallery .adepa-pg-t4 { grid-column: 1 / span 4; grid-row: 3; min-height: 300px; }
	.adepa-projects-gallery .adepa-pg-t5 { grid-column: 5 / span 4; grid-row: 3; }
	.adepa-projects-gallery .adepa-pg-t6 { grid-column: 9 / span 4; grid-row: 3; }
	.adepa-projects-gallery .adepa-pg-t7 { grid-column: 1 / span 5; grid-row: 4; min-height: 280px; }
	.adepa-projects-gallery .adepa-pg-t8 { grid-column: 6 / span 7; grid-row: 4; min-height: 0; }
	.adepa-projects-gallery .adepa-pg-t1 > strong { max-width: 11ch; font-size: var(--wp--preset--font-size--display); line-height: 1.02; letter-spacing: var(--wp--custom--letter-spacing--display); }
	.adepa-projects-gallery .adepa-pg-t1::after { width: 72%; max-width: 520px; }
	.adepa-projects-gallery .adepa-pg-t8 > strong { max-width: 14ch; font-size: var(--wp--preset--font-size--heading-1); }
}
/* Wide (>=1280px): taller rows, more air */
@media (min-width: 1280px) {
	.adepa-projects-gallery .adepa-pg-list { grid-auto-rows: minmax(280px, auto); }
	.adepa-projects-gallery .adepa-pg-t4 { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
	.adepa-projects-gallery .adepa-pg-tile, .adepa-projects-gallery .adepa-pg-tile::before, .adepa-projects-gallery .adepa-pg-tile::after { transition: none; }
	.adepa-projects-gallery .adepa-pg-tile:hover { transform: none; }
}

/* Intro tag wrap (W9-R2 proposed-tag-fix.css, Options A+B): text unchanged, breaks only after the "|" */
.adepa-pg-intro .adepa-sol-intro__tag .adepa-nowrap { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.adepa-pg-intro .adepa-sol-intro__tag { letter-spacing: 0; padding-inline: 0.625em; }
}
