/* ==========================================================================
   Components
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--radius);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn .icon { width: 20px; height: 20px; flex: none; }
/* Grain sweeps into the button on hover */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--grain);
	background-size: 180px 100%;
	opacity: 0;
	transform: translateX(30%);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.btn:hover::before { opacity: 1; transform: none; }
	.btn--amber:hover, .btn--dark:hover, .btn--light:hover { color: var(--cream); }
	.btn--ghost:hover { color: var(--cream); box-shadow: none; }
}
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 500; }
.btn:hover { color: inherit; }

.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 500;
	text-decoration: none;
	border-block-end: 2px solid var(--wood);
}
.link-arrow::after { content: "←"; transition: transform var(--dur-micro) var(--ease); }
.link-arrow--back::after { content: none; }
.link-arrow--back::before { content: "→"; }
@media (hover: hover) { .link-arrow:hover::after { transform: translateX(-4px); } }

/* ---------- Page hero ---------- */
.page-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: var(--space-s);
	align-items: center;
	padding-block: var(--space-s) var(--space-m);
}
.page-hero__kicker { font-weight: 700; color: var(--wood-dark); margin-block-end: 12px; }
.page-hero__title { font-size: var(--fs-xl); }
.page-hero__title--m { font-size: var(--fs-l); }
.page-hero__lead { margin-block-start: 20px; font-size: var(--fs-lead); color: var(--text-2); max-width: var(--measure); }
.page-hero .contact-actions { margin-block-start: 28px; }
.page-hero__media { position: relative; overflow: hidden; height: clamp(320px, 52vh, 560px); background: var(--board); }
.page-hero__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Slat shutters (image reveal) ---------- */
.shutters { position: relative; overflow: hidden; }
.shutters__slats { position: absolute; inset: 0; display: flex; pointer-events: none; }
.shutters__slats i {
	flex: 1;
	background: var(--ground);
	transform-origin: left center;
	transform: scaleX(0);
}

/* ---------- Cards ---------- */
.card__link { display: block; text-decoration: none; color: inherit; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--board); }
.card__img, .card__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card__body { padding-block: 14px 4px; }
.card__term { font-size: 14px; font-weight: 700; color: var(--wood-dark); }
.card__title { font-size: 21px; margin-block: 4px; }
.card__meta { font-size: var(--fs-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
	.card__link:hover .card__img { transform: scale(1.04); }
	.card__link:hover .card__title { text-decoration: underline; text-decoration-color: var(--wood); }
}

.projects { padding-block: var(--space-m); }
.projects__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 40px 24px;
}
.projects__grid--masonry .card:nth-child(5n + 1) { grid-column: span 2; }
.projects__grid--masonry .card:nth-child(5n + 1) .card__media { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
	.projects__grid--masonry .card:nth-child(5n + 1) { grid-column: auto; }
	.projects__grid--masonry .card:nth-child(5n + 1) .card__media { aspect-ratio: 4 / 3; }
}
.card.is-hidden { display: none; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: var(--space-s); }
.filters__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--radius);
	background: var(--board);
	text-decoration: none;
	font-weight: 500;
	transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.filters__item[aria-current] { background: var(--ink); color: var(--cream); }
.filters__count { font-size: 13px; opacity: .7; }
@media (hover: hover) { .filters__item:not([aria-current]):hover { background: var(--board-hover); color: var(--ink); } }

/* ---------- FAQ ---------- */
.faq + .faq { margin-block-start: var(--space-s); }
.faq__title { font-family: var(--font-display); font-size: var(--fs-m); line-height: 1; margin-block-end: 16px; }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	padding-block: 12px;
	font-size: 19px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "";
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	background: linear-gradient(var(--wood), var(--wood)) center / 100% 2px no-repeat, linear-gradient(var(--wood), var(--wood)) center / 2px 100% no-repeat;
	transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding-block-end: 20px; color: var(--text-2); }

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: 22px; background: #E7DED1; padding: clamp(20px, 3vw, 40px); border-radius: var(--radius); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 22px; }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field label { font-size: 16px; font-weight: 700; }
.form__req { font-weight: 400; color: var(--muted); font-size: 14px; }
.form__field input, .form__field textarea {
	min-height: 50px;
	padding: 10px 14px;
	border: 1.5px solid var(--field-border);
	border-radius: var(--radius);
	background: var(--cream);
	width: 100%;
}
.form__field textarea { resize: vertical; min-height: 120px; }
.form__field input[dir="ltr"] { text-align: end; }
.form__field [aria-invalid="true"] { border-color: #A3301E; box-shadow: 0 0 0 1px #A3301E; }
.form__hint { font-size: 14px; color: var(--muted); }
.form__error { font-size: 14px; font-weight: 700; color: #8E2A1B; }
.form__summary:empty { display: none; }
.form__summary { background: #F6E3DD; border-inline-start: 4px solid #8E2A1B; padding: 14px 16px; border-radius: var(--radius); }
.form__summary ul { padding-inline-start: 1.2em; }
.form__submit { align-self: start; }
.form__privacy { font-size: 14px; color: var(--muted); }
.form__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form--sent { gap: 12px; }
.form--sent:focus { outline: none; }
.form__sent-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-m); line-height: 1; }

/* ---------- Facts, crumbs, quote ---------- */
.crumbs { font-size: var(--fs-small); color: var(--muted); margin-block-end: 16px; }
.crumbs a { color: var(--wood-dark); }
.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 6px;
	margin: 28px 0 0;
}
.facts__item { background: var(--board); padding: 14px 18px; border-radius: var(--radius); }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; font-size: 18px; }

.quote { max-width: 760px; margin: var(--space-m) auto; padding-inline: var(--gutter); text-align: center; }
.quote blockquote p { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-m); line-height: 1.05; }
.quote figcaption { margin-block-start: 14px; color: var(--muted); }
.quote figcaption::before { content: "— "; }

/* ---------- Before / after ---------- */
.ba { max-width: var(--max); margin: var(--space-m) auto 0; padding-inline: var(--gutter); }
.ba .section-title { margin-block-end: 20px; }
.ba__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--board); border-radius: var(--radius); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__frame::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: var(--pos);
	width: 3px;
	margin-left: -1.5px;
	background: var(--cream);
	box-shadow: 0 0 0 1px rgba(46, 29, 19, .3);
	pointer-events: none;
}
.ba__tag { position: absolute; inset-block-start: 14px; padding: 4px 10px; background: rgba(46, 29, 19, .78); color: var(--cream); font-size: 14px; border-radius: var(--radius); }
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; }
.ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	direction: ltr;
}
.ba__range:focus-visible + * , .ba__frame:has(.ba__range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Project gallery + lightbox ---------- */
.pgallery { max-width: var(--max); margin: var(--space-m) auto 0; padding-inline: var(--gutter); }
.pgallery .section-title { margin-block-end: 20px; }
.pgallery__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pgallery__link { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); }
.pgallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
@media (hover: hover) { .pgallery__link:hover .pgallery__img { transform: scale(1.04); } }

.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.lightbox::backdrop { background: rgba(20, 12, 8, .88); }
.lightbox__img { max-width: 94vw; max-height: 92vh; object-fit: contain; }
.lightbox__close {
	position: fixed;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	inline-size: 48px;
	block-size: 48px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--cream);
	cursor: pointer;
}

/* ---------- Pagination ---------- */
.pagination { margin-block-start: var(--space-s); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--board); text-decoration: none; border-radius: var(--radius); }
.pagination .current { background: var(--ink); color: var(--cream); }

.empty { padding-block: var(--space-m); color: var(--muted); }

/* ---------- Lazy images fade in (only when JS runs) ---------- */
.js img[loading="lazy"] { opacity: 0; transition: opacity 600ms var(--ease); }
.js img[loading="lazy"].is-loaded { opacity: 1; }