/*
 * LineArt Posters — landing / artwork gallery
 * Depends on: main-v2.css (tokens, base, nav, footer, pg-container/pg-btn/
 * pg-eyebrow/pg-script utilities). Page-scoped classes only (pg-la-*).
 * Mobile-first. 390px base.
 */

/* ============================================================
   HERO (dark navy, editorial — same register as the other product landings)
   ============================================================ */
.pg-la-hero {
	position: relative;
	background: linear-gradient(160deg, var(--pg-midnight-deep) 0%, var(--pg-midnight) 65%, #1B2440 100%);
	overflow: hidden;
	padding: clamp(120px, 15vw, 160px) 0 clamp(72px, 9vw, 104px);
	color: var(--pg-bone);
}

.pg-la-hero .pg-cta-stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.pg-la-hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-9);
	align-items: center;
}

@media (min-width: 900px) {
	.pg-la-hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.pg-la-breadcrumb {
	font-size: 13px;
	color: rgba(242, 239, 232, .62);
	margin-bottom: var(--space-5);
}
.pg-la-breadcrumb a {
	color: rgba(242, 239, 232, .62);
	transition: color var(--duration-normal) ease;
}
.pg-la-breadcrumb a:hover { color: var(--pg-gold); }
.pg-la-breadcrumb span[aria-hidden] { margin: 0 6px; opacity: .5; }
.pg-la-breadcrumb [aria-current] { color: var(--pg-gold); }

.pg-la-hero__eyebrow { color: var(--pg-gold); }

.pg-la-hero__h1 {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	margin-block: 0 var(--space-4);
	color: var(--pg-bone);
}

.pg-la-hero__sub {
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: var(--leading-relaxed);
	color: rgba(242, 239, 232, .78);
	max-width: 58ch;
	margin-block-end: var(--space-6);
}

.pg-la-hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

.pg-la-hero__price {
	margin-block-start: var(--space-4);
	font-size: .92rem;
	color: rgba(242, 239, 232, .68);
}

/* Hero showcase — a small curated collage of real motieven, ink-on-bone
   chips staggered for depth. Never crops/flattens the doodle (Joe's
   quality bar): each chip is a generous square with margin around the SVG. */
.pg-la-hero__showcase {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	max-width: 420px;
	margin-inline: auto;
}

.pg-la-hero__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--pg-bone);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-poster);
	padding: 14%;
	color: var(--pg-ink);
}
.pg-la-hero__chip :is(svg, img) { width: 100%; height: 100%; display: block; object-fit: contain; }

.pg-la-hero__chip--0 { transform: translateY(-10px) rotate(-2.5deg); }
.pg-la-hero__chip--1 { transform: translateY(14px) rotate(2deg); }
.pg-la-hero__chip--2 { transform: translateY(8px) rotate(-1.5deg); }
.pg-la-hero__chip--3 { transform: translateY(-16px) rotate(2.5deg); }

@media (max-width: 899px) {
	.pg-la-hero__showcase { max-width: 320px; margin-block-start: var(--space-6); }
}

/* ============================================================
   FILTER BAR (search + category chips) — sits between hero and gallery,
   reads as a real "category page" control strip.
   ============================================================ */
.pg-la-filterbar {
	background: var(--pg-card);
	border-bottom: 1px solid var(--pg-hairline);
	position: sticky;
	top: 0;
	z-index: 20;
}

.pg-la-filterbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	padding-block: var(--space-4);
}

.pg-la-search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 1 1 260px;
	max-width: 360px;
	background: var(--pg-bone);
	border: 1px solid var(--pg-hairline);
	border-radius: var(--radius-pill);
	padding: 10px 18px;
	transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.pg-la-search:focus-within {
	border-color: var(--pg-brass);
	box-shadow: 0 0 0 3px var(--pg-brass-dim);
}
.pg-la-search__icon { flex: none; width: 16px; height: 16px; color: var(--pg-warm-grey-text); }
.pg-la-search input {
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--font-body);
	font-size: .92rem;
	color: var(--pg-ink);
	width: 100%;
}
.pg-la-search input::placeholder { color: var(--pg-warm-grey-text); opacity: .8; }

.pg-la-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pg-la-chip {
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--pg-warm-grey-text);
	background: var(--pg-bone);
	border: 1px solid var(--pg-hairline);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	cursor: pointer;
	transition: background var(--duration-normal) ease, color var(--duration-normal) ease, border-color var(--duration-normal) ease, transform var(--duration-fast) ease;
}
.pg-la-chip:hover {
	border-color: var(--pg-brass);
	color: var(--pg-brass-text);
	transform: translateY(-1px);
}
.pg-la-chip:focus-visible {
	outline: 2px solid var(--pg-brass);
	outline-offset: 2px;
}
.pg-la-chip.is-active {
	background: var(--pg-btn-brass);
	border-color: var(--pg-btn-brass);
	color: var(--pg-bone);
}

/* ============================================================
   GALLERY — one editorial section per category
   ============================================================ */
.pg-la-gallery { background: var(--pg-bone); }

.pg-la-section {
	padding-block: clamp(56px, 7vw, 96px);
}
.pg-la-section + .pg-la-section {
	border-top: 1px solid var(--pg-hairline);
}

.pg-la-section__head {
	max-width: 62ch;
	margin-block-end: var(--space-7);
}

.pg-la-section__h2 {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3.2vw, 2.35rem);
	line-height: var(--leading-snug);
	color: var(--pg-ink);
	margin-block: 0 var(--space-2);
}

.pg-la-section__intro {
	color: var(--pg-warm-grey-text);
	font-size: .98rem;
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* Tile grid — consistent cell ratio, generous gutters (Joe: "geen platte
   tegel-dump"). auto-fit keeps the grid tasteful at every viewport without
   ever forcing a lonely single column on desktop. */
.pg-la-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: var(--space-6) var(--space-5);
}

@media (min-width: 640px) {
	.pg-la-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}

.pg-la-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
	color: inherit;
	outline: none;
}

.pg-la-tile__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--pg-card);
	border: 1px solid var(--pg-hairline);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14%;
	color: var(--pg-ink);
	transition: transform var(--duration-normal) var(--ease-reveal), box-shadow var(--duration-normal) var(--ease-reveal), border-color var(--duration-normal) ease;
}

.pg-la-tile__art { width: 100%; height: 100%; display: block; }

.pg-la-tile__placeholder {
	width: 60%;
	height: 60%;
	border: 1.5px dashed var(--pg-hairline);
	border-radius: var(--radius-sm);
}

.pg-la-tile__label {
	font-family: var(--font-body);
	font-size: .86rem;
	font-weight: 600;
	color: var(--pg-warm-grey-text);
	transition: color var(--duration-normal) ease;
}

.pg-la-tile:hover .pg-la-tile__frame,
.pg-la-tile:focus-visible .pg-la-tile__frame {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
	border-color: var(--pg-brass);
}
.pg-la-tile:hover .pg-la-tile__label,
.pg-la-tile:focus-visible .pg-la-tile__label {
	color: var(--pg-brass-text);
}
.pg-la-tile:focus-visible .pg-la-tile__frame {
	outline: 2px solid var(--pg-brass);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.pg-la-tile__frame, .pg-la-tile__label, .pg-la-chip { transition: none; }
}

.pg-la-empty {
	text-align: center;
	color: var(--pg-warm-grey-text);
	padding: var(--space-9) var(--space-5);
	margin: 0;
}

/* ============================================================
   CLOSING CTA (dark navy, mirrors the other product-landing CTAs)
   ============================================================ */
.pg-la-cta {
	position: relative;
	background: var(--pg-midnight-deep);
	color: var(--pg-bone);
	padding-block: clamp(72px, 9vw, 112px);
	overflow: hidden;
	text-align: center;
}
.pg-la-cta .pg-cta-stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.pg-la-cta__wrap { position: relative; z-index: 2; }
.pg-la-cta__script { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block-end: var(--space-3); }
.pg-la-cta__h2 {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	margin-block: 0 var(--space-6);
	color: var(--pg-bone);
}

/* ============================================================
   Mobile rhythm (Joe: "mobiel net zo verzorgd, 1-koloms, nette spacing")
   ============================================================ */
@media (max-width: 479px) {
	.pg-la-filterbar__inner { flex-direction: column; align-items: stretch; }
	.pg-la-search { max-width: none; }
	/* True 1-column on small phones (Joe's explicit ask): the doodle stays
	   large and clearly visible instead of shrinking into a cramped 2-up grid. */
	.pg-la-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; gap: var(--space-5); }
}
@media (min-width: 480px) and (max-width: 639px) {
	.pg-la-filterbar__inner { flex-direction: column; align-items: stretch; }
	.pg-la-search { max-width: none; }
	.pg-la-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
}