/*
 * IQ CONSTRUCT — homepage V5 (redesigned).
 *
 * Loaded after base.css, which supplies the @font-face rules and the approved
 * footer. The grid, spacing scale and every section below are defined here, so
 * the page runs on one system rather than inheriting the older prototype's.
 *
 * Rhythm: photography → white → warm neutral → image-led → white → conversion.
 */

/* ── System ───────────────────────────────────────────────────────────────── */

:root, body.iq-home {
	/* Palette */
	--v5-ink: #17181A;
	--v5-graphite: #55585C;
	--v5-rule: #E4E2DF;
	--v5-paper: #FFFFFF;
	--v5-warm: #EFEAE3;          /* warm neutral, not grey */
	--v5-warm-deep: #E5DED4;
	--v5-red: #7C0B0B;
	--v5-red-deep: #480404;

	--v5-display: 'Manrope', system-ui, sans-serif;
	--v5-body: 'Inter', system-ui, sans-serif;

	/* One field: 12 columns, ~1320px, 20px gutter on mobile. */
	--v5-shell: 1320px;
	--v5-gutter: 20px;
	--v5-gap: 16px;

	/* Spacing limits from the brief. */
	--v5-pad: 44px;              /* section padding, mobile */
	--v5-head-gap: 24px;         /* heading to content */

	--v5-ease: cubic-bezier(.22, .61, .36, 1);
	--v5-dur: 300ms;

	background: var(--v5-paper);
	color: var(--v5-ink);
	font-family: var(--v5-body);
	font-size: 17px;
	line-height: 1.6;
}

@media (min-width: 1000px) {
	:root, body.iq-home { --v5-gutter: 40px; --v5-gap: 20px; --v5-pad: 64px; --v5-head-gap: 32px; }
}

body.iq-home *, body.iq-home *::before, body.iq-home *::after { box-sizing: border-box; }
body.iq-home .elementor img { display: block; max-width: 100%; }
body.iq-home .elementor p { margin: 0; }
body.iq-home .elementor :is(h1, h2, h3) {
	margin: 0;
	font-family: var(--v5-display);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.1;
}
body.iq-home .elementor a { color: inherit; text-decoration: none; }

/* The one grid every section sits on. */
.v5-grid {
	display: grid;
	grid-template-columns: [full-start] minmax(calc(var(--v5-gutter) - var(--v5-gap)), 1fr) [content-start] repeat(12, [col] minmax(0, calc((var(--v5-shell) - 11 * var(--v5-gap)) / 12))) [content-end] minmax(calc(var(--v5-gutter) - var(--v5-gap)), 1fr) [full-end];
	column-gap: var(--v5-gap);
}
.v5-grid > * { grid-column: content-start / content-end; }
.v5-grid > .v5-bleed { grid-column: full-start / full-end; }

.v5-band { padding-block: var(--v5-pad); }

.v5-h2 { font-size: clamp(26px, 2.6vw, 34px); max-width: 22ch; }
.v5-lede { margin-block-start: 12px; max-width: 52ch; color: var(--v5-graphite); font-size: 16px; }
.v5-headgap { margin-block-end: var(--v5-head-gap); }

.v5-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding-inline: 26px;
	background: var(--v5-red);
	border: 1px solid var(--v5-red);
	color: #FFFFFF;
	font-family: var(--v5-display);
	font-size: 15px;
	font-weight: 600;
	transition: background var(--v5-dur) var(--v5-ease);
}
.v5-btn:hover { background: var(--v5-red-deep); border-color: var(--v5-red-deep); }

.v5-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--v5-display);
	font-size: 15px;
	font-weight: 600;
	border-block-end: 1px solid currentColor;
}

/* ── Header: transparent over the hero, solid after ──────────────────────── */

.v5-nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	transition: background var(--v5-dur) var(--v5-ease), box-shadow var(--v5-dur) var(--v5-ease);
}
.v5-nav__row { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.v5-nav__logo { display: inline-flex; align-items: center; min-height: 44px; margin-inline-end: auto; }
.v5-nav__logo img { width: 158px; height: auto; transition: filter var(--v5-dur) var(--v5-ease); }
.v5-nav__links { display: none; }
.v5-nav__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 16px;
	border: 1px solid currentColor;
	font-family: var(--v5-display);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.v5-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.v5-burger span { display: block; width: 20px; height: 1.5px; background: currentColor; box-shadow: 0 -6px currentColor, 0 6px currentColor; }

.v5-nav[data-solid='false'] { color: #FFFFFF; }
.v5-nav[data-solid='false'] .v5-nav__logo img { filter: brightness(0) invert(1); }
.v5-nav[data-solid='false'] .v5-nav__cta { border-color: rgba(255, 255, 255, .5); }
.v5-nav[data-solid='true'] { background: var(--v5-paper); color: var(--v5-ink); box-shadow: 0 1px 0 var(--v5-rule); }
.v5-nav[data-solid='true'] .v5-nav__cta { background: var(--v5-red); border-color: var(--v5-red); color: #FFFFFF; }

.v5-sheet {
	position: fixed; inset: 66px 0 auto; z-index: 59;
	display: grid; background: var(--v5-paper); border-block-end: 1px solid var(--v5-rule);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--v5-dur) var(--v5-ease), transform var(--v5-dur) var(--v5-ease), visibility var(--v5-dur);
}
.v5-sheet[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
.v5-sheet a { display: flex; align-items: center; min-height: 52px; padding-inline: var(--v5-gutter); border-block-start: 1px solid var(--v5-rule); font-family: var(--v5-display); font-weight: 600; }
.v5-sheet a:first-child { border-block-start: 0; }

/* ── 1. Hero — full-bleed photography ────────────────────────────────────── */

.v5-hero { position: relative; align-content: end; min-height: 78svh; isolation: isolate; padding-block-end: clamp(30px, 4vw, 56px); }
/* An absolutely-positioned grid child with *definite* placement is contained by
   its grid area — which the `.v5-grid > *` rule had set to the padded content
   column. Returning it to auto placement makes the section's padding box the
   containing block, so the photograph fills the viewport edge to edge. */
.v5-hero__img,
.v5-hero::after { grid-column: auto; grid-row: auto; }

.v5-hero__img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	object-position: 68% 60%;
}
.v5-hero::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(2, 0, 0, .5) 0%, rgba(2, 0, 0, .08) 32%, rgba(2, 0, 0, .8) 100%);
}
.v5-hero__inner { max-width: 520px; color: #FFFFFF; }
.v5-hero h1 { font-size: clamp(30px, 4vw, 56px); line-height: 1.06; text-wrap: balance; }
.v5-hero__sub { margin-block-start: 14px; color: rgba(255, 255, 255, .84); font-size: 16px; max-width: 42ch; }
.v5-hero__do { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-block-start: 22px; }

/* ── 2. Applications — one continuous rail ───────────────────────────────── */

.v5-apps { padding-block: var(--v5-pad); }
.v5-apps__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-block-end: var(--v5-head-gap); }

.v5-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(85vw, 360px);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--v5-gutter);
	padding-inline: var(--v5-gutter);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.v5-rail::-webkit-scrollbar { display: none; }
.v5-rail > * { scroll-snap-align: start; }

.v5-card { position: relative; display: grid; isolation: isolate; }
.v5-card__fig { grid-area: 1 / 1; overflow: hidden; background: var(--v5-warm); }
.v5-card__fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 700ms var(--v5-ease); }
.v5-card:hover .v5-card__fig img { transform: scale(1.03); }
.v5-card__bar {
	grid-area: 1 / 1; align-self: end; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 18px 20px; color: #FFFFFF;
	background: linear-gradient(180deg, rgba(2, 0, 0, 0) 0%, rgba(2, 0, 0, .68) 100%);
}
.v5-card__name { font-family: var(--v5-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.v5-card__go { font-size: 19px; line-height: 1; }
.v5-card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.v5-card:has(.v5-card__link:focus-visible) { outline: 3px solid var(--v5-red); outline-offset: 3px; }

/* ── 3. Materials — warm neutral, slab surfaces ──────────────────────────── */

.v5-mats { background: var(--v5-warm); padding-block: var(--v5-pad); }
.v5-mats__head { display: grid; gap: 16px; margin-block-end: var(--v5-head-gap); }

.v5-pick {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.v5-pick::-webkit-scrollbar { display: none; }
.v5-pick button { flex: 0 0 auto; }
.v5-pick button {
	min-height: 44px; padding-inline: 16px;
	border: 1px solid var(--v5-warm-deep); background: transparent;
	color: var(--v5-graphite);
	font-family: var(--v5-display); font-size: 14px; font-weight: 600;
	cursor: pointer;
	transition: background var(--v5-dur) var(--v5-ease), color var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease);
}
.v5-pick button[aria-current='true'] { background: var(--v5-ink); border-color: var(--v5-ink); color: #FFFFFF; }
.v5-pick button:hover { border-color: var(--v5-ink); }

.v5-slab { position: relative; display: grid; gap: 14px; align-content: start; }
.v5-slab__fig { overflow: hidden; background: var(--v5-warm-deep); }
.v5-slab__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--v5-ease); }
.v5-slab:hover .v5-slab__fig img { transform: scale(1.03); }
.v5-slab__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.v5-slab__name { font-family: var(--v5-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.v5-slab__go { font-size: 14px; color: var(--v5-graphite); border-block-end: 1px solid currentColor; }
.v5-slab__link::after { content: ''; position: absolute; inset: 0; }
.v5-slab:has(.v5-slab__link:focus-visible) { outline: 3px solid var(--v5-red); outline-offset: 4px; }

/* ── 4. Workshop — image-led editorial band ──────────────────────────────── */

.v5-shop { position: relative; padding-block: var(--v5-pad); }
.v5-shop__fig { display: block; overflow: hidden; }
.v5-shop__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.v5-shop__panel { background: var(--v5-ink); color: #FFFFFF; padding: 28px 22px; margin-block-start: -44px; margin-inline: 20px 0; position: relative; z-index: 1; }
.v5-shop__panel h2 { font-size: clamp(23px, 2.3vw, 30px); max-width: 16ch; }
.v5-shop__panel p { margin-block-start: 12px; color: rgba(255, 255, 255, .78); font-size: 16px; max-width: 42ch; }
.v5-shop__panel .v5-link { margin-block-start: 18px; color: #FFFFFF; }

/* ── 5. Projects — the approved card, untouched ──────────────────────────── */

.v5-pjs { padding-block: var(--v5-pad); }
.v5-pjs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-block-end: var(--v5-head-gap); }
.v5-pjgrid { display: grid; gap: var(--v5-gap); }

.v5-pj { display: flex; background: var(--v5-paper); border: 1px solid var(--v5-rule); transition: border-color var(--v5-dur) var(--v5-ease); }
.v5-pj:hover, .v5-pj:focus-within { border-color: var(--v5-ink); }
.v5-pj__link { display: flex; flex-direction: column; width: 100%; }
.v5-pj__media { display: block; overflow: hidden; background: var(--v5-warm); }
.v5-pj__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 520ms var(--v5-ease); }
.v5-pj:hover .v5-pj__img { transform: scale(1.04); }
.v5-pj__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; padding: 16px 18px 18px; }
.v5-pj__meta { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--v5-graphite); }
.v5-pj__title { font-family: var(--v5-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }

/* ── 6. Conversion — process and CTA in one ──────────────────────────────── */

.v5-conv { background: var(--v5-ink); color: #FFFFFF; padding-block: var(--v5-pad); }
.v5-conv__inner { display: grid; gap: 26px; }
.v5-conv h2 { font-size: clamp(25px, 2.6vw, 34px); max-width: 16ch; }
.v5-conv__p { margin-block-start: 12px; color: rgba(255, 255, 255, .76); font-size: 16px; max-width: 44ch; }

/* The three stages as one inline progression. */
.v5-steps {
	list-style: none; margin: 22px 0 0; padding: 20px 0 0;
	border-block-start: 1px solid rgba(255, 255, 255, .18);
	font-family: var(--v5-display); font-size: 15px; font-weight: 600;
	display: grid; gap: 12px;
}
.v5-steps li { display: flex; align-items: baseline; gap: 10px; color: rgba(255, 255, 255, .92); }
.v5-steps__no { color: var(--v5-red); font-variant-numeric: tabular-nums; }

.v5-conv__do { display: grid; gap: 14px; justify-items: start; align-content: end; }
.v5-conv__tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--v5-display); font-size: 21px; font-weight: 600; }
.v5-conv__tel:hover { text-decoration: underline; }
.v5-conv__hours { font-size: 14px; color: rgba(255, 255, 255, .6); }

/* ── 1000px and up ───────────────────────────────────────────────────────── */

@media (min-width: 1000px) {
	.v5-nav__row { min-height: 82px; gap: 32px; }
	.v5-nav__logo img { width: 200px; }
	.v5-nav__logo { margin-inline-end: 0; }
	.v5-nav__links { display: flex; align-items: center; gap: 32px; margin-inline: auto 0; }
	.v5-nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--v5-display); font-size: 15px; font-weight: 600; }
	.v5-nav__links a:hover { text-decoration: underline; text-underline-offset: .35em; }
	.v5-burger, .v5-sheet { display: none; }

	.v5-hero { min-height: 80vh; }
	.v5-hero__img { object-position: 62% 52%; }

	/* Three cards plus a partial fourth. */
	.v5-rail { grid-auto-columns: calc((100% - 2 * var(--v5-gap)) / 3.32); }

	/* Three slabs visible at once; the fourth peeks. */
	.v5-mats__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
	.v5-slabrail { grid-auto-columns: calc((100% - 2 * var(--v5-gap)) / 3.18); }

	.v5-shop { padding-block: 0; }
	.v5-shopwrap { display: grid; grid-template-columns: subgrid; align-items: center; }
	.v5-shop__fig { grid-column: full-start / col 9; grid-row: 1; }
	/* A band, not a block. At 16/10 the photograph set the section's height —
	   583px for a panel of 322 — so a third of the band was empty picture. A
	   capped height makes the photograph scale with the viewport instead of the
	   column width, and lets the panel be the thing that fills the row. */
	.v5-shop__fig img { aspect-ratio: auto; block-size: clamp(300px, 26vw, 380px); }
	.v5-shop__panel { grid-column: col 8 / content-end; grid-row: 1; margin: 0; padding: 32px; align-self: center; }

	.v5-pjgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.v5-conv__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: end; }
	.v5-conv__do { justify-items: end; text-align: right; }
}

/* ── Workshop band, 768–999px ──────────────────────────────────────────────
   This range used to inherit the phone's stacked layout but none of its
   compensations: a 16/9 photograph across the full width, no overlap, full
   section padding — 796px on an iPad, taller than either phone or desktop. It
   is wide enough for the same side-by-side band, just tighter. */
@media (min-width: 768px) and (max-width: 999px) {
	.v5-shop { padding-block: 0; }
	.v5-shopwrap { display: grid; grid-template-columns: subgrid; align-items: center; }
	.v5-shop__fig { grid-column: full-start / col 8; grid-row: 1; margin: 0; inline-size: auto; }
	.v5-shop__fig img { aspect-ratio: auto; block-size: clamp(260px, 34vw, 330px); }
	.v5-shop__panel { grid-column: col 7 / content-end; grid-row: 1; margin: 0; padding: 26px; align-self: center; }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	body.iq-home .elementor *, body.iq-home .elementor *::before, body.iq-home .elementor *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
	.v5-rail { scroll-snap-type: none; scroll-behavior: auto; }
	.v5-card__fig img, .v5-slab__fig img, .v5-pj__img { transition: none; }
}

/* ── Footer logo, scaled up with the header ──────────────────────────────── */

.iq-v3 .footer__brand img { width: 210px; }


/* ── Below 768px ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

	/* 2. Header: logo and menu only. */
	.v5-nav__cta { display: none; }
	.v5-nav__row { min-height: 64px; }
	.v5-nav__logo { min-width: 44px; min-height: 44px; }
	.v5-burger { width: 48px; height: 48px; margin-inline-end: -12px; }

	/* 2. Hero. */
	.v5-hero { min-height: 78svh; padding-block-end: 32px; }
	.v5-hero__img { object-position: 62% 66%; }
	.v5-hero h1 { font-size: clamp(34px, 8.6vw, 38px); }
	.v5-hero__sub { font-size: 16px; margin-block-start: 12px; }
	.v5-hero__do { gap: 14px 20px; margin-block-start: 20px; }
	.v5-btn { min-height: 48px; }
	.v5-hero__do .v5-link { min-height: 44px; font-size: 16px; }

	/* 3. Applications rail. */
	.v5-apps { padding: 44px 0; }
	.v5-apps__head { margin-block-end: 20px; }
	.v5-rail { padding-inline: 20px; scroll-padding-inline: 20px; gap: 14px; }
	.v5-rail::after { content: ''; inline-size: 6px; }

	/* 4. Materials. */
	.v5-mats { padding: 44px 0; }
	.v5-mats__head { margin-block-end: 20px; gap: 14px; }
	.v5-pick { padding-inline: 20px; margin-inline: -20px; scroll-padding-inline: 20px; }
	.v5-slab__fig img { aspect-ratio: 4 / 5; }
	.v5-slab__foot { align-items: center; }

	/* 5. Workshop. On a phone the photograph is context, not the message — the
	   four lines of copy are. A 4/3 picture cost 293px before the panel even
	   started; a wide strip keeps the place recognisable at a third of that. */
	.v5-shop { padding: 36px 0; }
	.v5-shop__fig { margin-inline: 20px; }
	.v5-shop__fig img { aspect-ratio: 2.2 / 1; }
	.v5-shop__panel { margin: -28px 20px 0; padding: 20px; }
	.v5-shop__panel p { font-size: 16px; }
	.v5-shop__panel .v5-link { min-height: 44px; }

	/* 6. Projects. */
	.v5-pjs { padding: 44px 0; }
	.v5-pjs__head { margin-block-end: 20px; }
	.v5-pjgrid { gap: 20px; }
	.v5-pj__img { aspect-ratio: 3 / 2; }
	.v5-pj__title { font-size: 17px; }

	/* 7. Conversion. */
	.v5-conv { padding: 40px 0; }
	.v5-conv__inner { gap: 24px; }
	.v5-conv__do { display: grid; gap: 12px; justify-items: stretch; width: 100%; }
	.v5-conv__do .v5-btn { width: 100%; min-height: 48px; }
	.v5-conv__tel {
		display: flex; align-items: center; justify-content: center;
		min-height: 48px; width: 100%;
		border: 1px solid rgba(255, 255, 255, .38);
		font-size: 18px;
	}
	.v5-conv__hours { font-size: 14px; }

	/* 8. Footer: the four link columns collapse natively. */
	.iq-v3 .footer__col > summary {
		display: flex; align-items: center; justify-content: space-between;
		min-height: 48px; cursor: pointer; list-style: none;
		border-block-start: 1px solid var(--v5-rule);
	}
	.iq-v3 .footer__col > summary::-webkit-details-marker { display: none; }
	.iq-v3 .footer__col > summary::after {
		content: '';
		width: 9px; height: 9px; margin-inline-end: 2px;
		border-inline-end: 1.5px solid currentColor;
		border-block-end: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform var(--v5-dur) var(--v5-ease);
	}
	.iq-v3 .footer__col[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
	.iq-v3 .footer__col > summary h2 { margin: 0; }
	/* base.css spaces the columns for the stacked link lists; collapsed rows sit
	   directly on top of each other instead. */
	.iq-v3 .footer__col { margin-top: 0; }
	.iq-v3 .footer__col > ul { padding-block: 4px 12px; }
	.iq-v3 .footer__legal { gap: 4px; padding-block: 14px; }
}

/* Desktop: the collapsed columns render exactly as before. */
@media (min-width: 768px) {
	/* Chrome hides <details> content through `::details-content`, which a
	   `display` override cannot reach — the links would take up space but stay
	   invisible. Above the breakpoint the columns are simply always open. */
	.iq-v3 .footer__col::details-content { content-visibility: visible; block-size: auto; }

	/* Desktop reads as one inline progression.

	   `align-items: center` here was centring boxes of unequal height: the arrow
	   is a 17px `::before` inside each item after the first, so those items were
	   27.2px tall against the first item's 24px, and centring them left the three
	   labels on three different lines — measured at y 3704.1 / 3705.0 / 3710.0.
	   Baseline alignment is what this row actually wants: every label sits on one
	   line, and the larger arrow sits on that same baseline instead of dragging
	   its item's box around. */
	.v5-steps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px; }
	.v5-steps__no { display: none; }
	.v5-steps li + li::before { content: '\2192'; color: var(--v5-red); font-size: 17px; margin-inline-end: 2px; }
	/* The rule under the current stage. `line-height: 1` on the item would change
	   its baseline, so the underline is drawn on the label instead — that keeps it
	   tight to the text and identical in position for any item it marks. */
	.v5-steps li:first-child > span:last-child { box-shadow: 0 2px 0 var(--v5-red); }

	.iq-v3 .footer__col > ul { display: block; }
	.iq-v3 .footer__col > summary { list-style: none; cursor: default; }
	.iq-v3 .footer__col > summary::-webkit-details-marker { display: none; }
}


/* ── Rail controls ───────────────────────────────────────────────────────── */

/* A horizontal scroller cannot be driven by a mouse wheel, so every rail gets
   arrow buttons, click-and-drag and keyboard support. */

.v5-headside { display: flex; align-items: center; gap: 20px; }

.v5-arrows { display: none; gap: 8px; }

.v5-arrows button {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--v5-rule);
	background: transparent;
	color: var(--v5-ink);
	cursor: pointer;
	transition: background var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease), opacity var(--v5-dur) var(--v5-ease);
}
.v5-arrows button:hover:not(:disabled) { background: var(--v5-ink); border-color: var(--v5-ink); color: #FFFFFF; }
.v5-arrows button:disabled { opacity: .32; cursor: default; }

/* Chevrons drawn from a rotated corner — no icon font, no extra request. */
.v5-arrows button::before {
	content: '';
	width: 9px;
	height: 9px;
	border-inline-end: 1.5px solid currentColor;
	border-block-start: 1.5px solid currentColor;
}
.v5-arrows button[data-dir='-1']::before { transform: translateX(2px) rotate(-135deg); }
.v5-arrows button[data-dir='1']::before { transform: translateX(-2px) rotate(45deg); }

/* On the warm materials band the outline follows the ground. */
.v5-mats .v5-arrows button { border-color: var(--v5-warm-deep); }

/* Drag affordance, and never let a drag turn into a text selection. */
.v5-rail { cursor: grab; }
.v5-rail[data-dragging='true'] { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.v5-rail:focus-visible { outline: 3px solid var(--v5-red); outline-offset: 4px; }

@media (min-width: 768px) {
	.v5-arrows { display: flex; }
}

@media (max-width: 767px) {
	/* Touch swipe is the natural control here; no on-screen arrows. */
	.v5-headside { gap: 0; }
	.v5-rail { cursor: default; }
}


/* ═════════════════════════════════════════════════════════════════════════════
   WordPress plumbing.

   Everything above is the approved V5 prototype, with its tokens namespaced
   `--v5-*` so it cannot collide with the V3 token layer that the inner pages
   still run on. Below is only what it takes to render that design inside
   Elementor and Woodmart — no design decisions.
   ═════════════════════════════════════════════════════════════════════════════ */

/* The header is fixed only over the homepage hero. Everywhere else it sticks,
   which keeps inner pages readable without a compensating top offset. */
.v5-nav { position: sticky; background: var(--v5-paper); color: var(--v5-ink); box-shadow: 0 1px 0 var(--v5-rule); }
body.iq-home .v5-nav { position: fixed; background: none; box-shadow: none; }
body.iq-home .v5-nav[data-solid='true'] { background: var(--v5-paper); box-shadow: 0 1px 0 var(--v5-rule); }

/* Woodmart's page shell must not add a container, a background or a max width
   under a full-bleed homepage. */
body.iq-home .wd-page-content,
body.iq-home .main-page-wrapper,
body.iq-home .site-content { padding: 0; margin: 0; max-width: none; }
body.iq-home .wd-page-content > .container,
body.iq-home .site-content > .container { max-width: none; padding: 0; width: 100%; }

/* Elementor: the section containers ARE the V5 grid, so Elementor's own
   boxed width, padding and gaps have to get out of the way. */
body.iq-home .elementor-element.v5-grid,
body.iq-home .elementor-element.v5-hero,
body.iq-home .elementor-element.v5-apps,
body.iq-home .elementor-element.v5-mats,
body.iq-home .elementor-element.v5-shop,
body.iq-home .elementor-element.v5-pjs,
body.iq-home .elementor-element.v5-conv {
	max-width: none;
	width: 100%;
	--width: 100%;
	--content-width: 100%;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

/* Elementor gives every element `position: relative`, which would capture the
   stretched-link overlays and the hero's absolute layers. */
body.iq-home .elementor .v5-card .elementor-widget-container,
body.iq-home .elementor .v5-slab .elementor-widget-container,
body.iq-home .elementor .v5-pj .elementor-widget-container { position: static; }

/* The three widgets only wrap markup. They must disappear from the box tree
   entirely, so their section head and rail become direct children of the V5
   grid — otherwise `.v5-grid > .v5-bleed` cannot reach the rail and it stops
   being full-bleed. */
/* The `.iq-v3 .iq-home .elementor .elementor-widget-container` rule left over
   from the previous homepage is more specific than a plain class here, so these
   selectors deliberately match its weight. */
body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-apps,
body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-mats,
body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-projects,
body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-apps > .elementor-widget-container,
body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-mats > .elementor-widget-container,
body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-projects > .elementor-widget-container { display: contents; }

/* `.v5-shopwrap` is a subgrid, so it has to keep the parent's column gap; the
   Elementor container reset above would otherwise close it to zero and shift
   both the photograph and the panel by one gutter. */
body.iq-home .elementor .v5-shopwrap { column-gap: var(--v5-gap); }

/* Headings and paragraphs come from native Elementor widgets, so the V5 type
   rules are restated at the class rather than the tag. */
body.iq-home .elementor .v5-h2 { font-family: var(--v5-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
body.iq-home .elementor .v5-hero h1,
body.iq-home .elementor .v5-shop__panel h2,
body.iq-home .elementor .v5-conv h2 { font-family: var(--v5-display); font-weight: 600; letter-spacing: -.025em; }
body.iq-home .elementor .v5-hero__inner .elementor-widget:not(:first-child) { margin: 0; }

/* The hero photograph is the container's own background so it stays a real
   Elementor control; `cover` + the same focal point is identical to the
   prototype's object-fit/object-position pair. */
body.iq-home .v5-hero { background-size: cover; background-repeat: no-repeat; background-position: 62% 52%; }
@media (max-width: 767px) { body.iq-home .v5-hero { background-position: 62% 66%; } }

/* Editor-only notice from the Proiecte selectate widget. */
.v5-editor-note {
	display: block; padding: 20px; border: 1px dashed var(--v5-rule);
	background: var(--v5-warm); color: var(--v5-ink);
	font-family: var(--v5-display); font-size: 15px; line-height: 1.5;
}

/* Skip link and focus visibility survive the fixed header. */
body.iq-home .elementor a:focus-visible,
.v5-nav a:focus-visible,
.v5-sheet a:focus-visible { outline: 3px solid var(--v5-red); outline-offset: 3px; }
body.iq-home [id] { scroll-margin-top: 90px; }

/* Optional location line under a project title; absent when the record has none. */
body.iq-home .elementor .v5-pj__place { font-size: 13px; color: var(--v5-graphite); }

/* ── Elementor widget mapping ─────────────────────────────────────────────
   The page is built from native container / heading / text / image / button
   widgets, so the V5 classes have to reach through Elementor's own wrappers. */

body.iq-home .elementor-element[class*='v5-'] {
	max-width: none;
	--width: 100%;
	--content-width: 100%;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
}

/* Rows that V5 lays out horizontally; Elementor defaults every container to a
   column, and its `--flex-direction` would otherwise stack them. */
body.iq-home .elementor .v5-hero__do,
body.iq-home .elementor .v5-pjs__head,
body.iq-home .elementor .v5-apps__head { flex-direction: row; }

/* Widgets are transparent boxes — the V5 rules own every gap and margin. */
body.iq-home .elementor .v5-hero__inner > .elementor-element,
body.iq-home .elementor .v5-shop__panel > .elementor-element,
body.iq-home .elementor .v5-conv__copy > .elementor-element,
body.iq-home .elementor .v5-conv__do > .elementor-element { width: 100%; }
body.iq-home .elementor .v5-hero__do > .elementor-element,
body.iq-home .elementor .v5-pjs__head > .elementor-element { width: auto; }
body.iq-home .elementor .elementor-widget-text-editor p:last-child { margin-block-end: 0; }

/* Button widgets carry the two approved actions. Elementor's own button skin is
   removed rather than overridden piecemeal, so the V5 values are the only ones. */
body.iq-home .elementor .v5-btn-w .elementor-button,
body.iq-home .elementor .v5-link-w .elementor-button {
	background: none;
	border-radius: 0;
	padding: 0;
	fill: currentColor;
	color: inherit;
	text-shadow: none;
}
body.iq-home .elementor .v5-btn-w .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding-inline: 26px;
	background: var(--v5-red); border: 1px solid var(--v5-red); color: #FFFFFF;
	font-family: var(--v5-display); font-size: 15px; font-weight: 600;
	transition: background var(--v5-dur) var(--v5-ease);
}
body.iq-home .elementor .v5-btn-w .elementor-button:hover { background: var(--v5-red-deep); border-color: var(--v5-red-deep); }
body.iq-home .elementor .v5-link-w .elementor-button {
	display: inline-flex; align-items: center; min-height: 44px;
	font-family: var(--v5-display); font-size: 15px; font-weight: 600;
	border-block-end: 1px solid currentColor;
}
body.iq-home .elementor .v5-btn-w .elementor-button-content-wrapper,
body.iq-home .elementor .v5-link-w .elementor-button-content-wrapper { display: contents; }

/* Hero copy. */
body.iq-home .elementor .v5-hero__inner .elementor-widget-heading .elementor-heading-title { font-size: clamp(30px, 4vw, 56px); line-height: 1.06; text-wrap: balance; color: #FFFFFF; }
body.iq-home .elementor .v5-hero__sub p { margin-block-start: 14px; color: rgba(255, 255, 255, .84); font-size: 16px; max-width: 42ch; }
body.iq-home .elementor .v5-hero__do { margin-block-start: 22px; }

/* Workshop: the image widget is the figure. */
body.iq-home .elementor .v5-shop__fig .elementor-widget-container,
body.iq-home .elementor .v5-shop__fig figure { margin: 0; display: block; overflow: hidden; }
body.iq-home .elementor .v5-shop__panel .elementor-heading-title { font-size: clamp(23px, 2.3vw, 30px); max-width: 16ch; color: #FFFFFF; }
body.iq-home .elementor .v5-shop__panel p { margin-block-start: 12px; color: rgba(255, 255, 255, .78); font-size: 16px; max-width: 42ch; }
body.iq-home .elementor .v5-shop__panel .v5-link-w { margin-block-start: 18px; color: #FFFFFF; }

/* Projects head and conversion band. */
body.iq-home .elementor .v5-pjs__head .elementor-heading-title { font-size: clamp(26px, 2.6vw, 34px); }
body.iq-home .elementor .v5-conv .elementor-heading-title { font-size: clamp(25px, 2.6vw, 34px); max-width: 16ch; color: #FFFFFF; }
body.iq-home .elementor .v5-conv__reach p { display: grid; gap: 6px; justify-items: start; }
@media (min-width: 1000px) {
	body.iq-home .elementor .v5-conv__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: end; }
	body.iq-home .elementor .v5-conv__do { align-content: end; justify-items: end; text-align: right; }
	body.iq-home .elementor .v5-conv__reach p { justify-items: end; }
	body.iq-home .elementor .v5-shopwrap { display: grid; grid-template-columns: subgrid; align-items: center; }
	body.iq-home .elementor .v5-shop__fig { grid-column: full-start / col 9; grid-row: 1; }
	body.iq-home .elementor .v5-shop__fig img { aspect-ratio: auto; block-size: clamp(300px, 26vw, 380px); }
	body.iq-home .elementor .v5-shop__panel { grid-column: col 8 / content-end; grid-row: 1; margin: 0; padding: 32px; align-self: center; }
}
@media (min-width: 768px) and (max-width: 999px) {
	body.iq-home .elementor .v5-shopwrap { display: grid; grid-template-columns: subgrid; align-items: center; column-gap: var(--v5-gap); }
	body.iq-home .elementor .v5-shop__fig { grid-column: full-start / col 8; grid-row: 1; margin: 0; inline-size: auto; }
	body.iq-home .elementor .v5-shop__fig img { aspect-ratio: auto; block-size: clamp(260px, 34vw, 330px); }
	body.iq-home .elementor .v5-shop__panel { grid-column: col 7 / content-end; grid-row: 1; margin: 0; padding: 26px; align-self: center; }
}
@media (max-width: 767px) {
	body.iq-home .elementor .v5-conv__do { width: 100%; margin-block-start: 24px; }
	body.iq-home .elementor .v5-conv__do .v5-btn-w,
	body.iq-home .elementor .v5-conv__do .elementor-button { width: 100%; }
	body.iq-home .elementor .v5-conv__reach p { justify-items: stretch; width: 100%; }
}

/* `display: contents` promotes the widgets' children to grid items, but the
   prototype's `.v5-grid > *` placement rules match DOM children only — so the
   promoted head, rail and project grid are placed explicitly here instead. */
body.iq-home .elementor .v5-apps__head,
body.iq-home .elementor .v5-mats__head,
body.iq-home .elementor .v5-pjgrid { grid-column: content-start / content-end; }
body.iq-home .elementor .v5-rail { grid-column: full-start / full-end; }

/* Mobile: the workshop photograph sits inside the 20px gutter, like every other
   band. Elementor's own margin custom properties are more specific than the
   ported rule, so it is restated at their weight. */
@media (max-width: 767px) {
	body.iq-v3.iq-home .elementor .v5-shop__fig { margin-inline: 20px; width: calc(100% - 40px); }
}

/* ── Header corrections for the WordPress environment ─────────────────────
   Two root causes, neither of them a design change:

   1. base.css paints every anchor brand red (`a { color: var(--iq-signal) }`).
      The prototype cancelled that with a body-level `a { color: inherit }`,
      which cannot be ported globally without restyling the inner pages — so it
      is restated on the header's own anchors, at class weight, no !important.

   2. WordPress bumps `html` with a margin to clear the admin bar, but a fixed
      header is positioned against the viewport and never sees that margin, so
      it renders underneath the bar and loses its top 32px. WordPress publishes
      the bar's height as a custom property and redefines it at 782px, so one
      declaration covers both sizes; below 600px the bar turns `absolute` and
      scrolls away, and the header goes back to the very top. */

.v5-nav a,
.v5-nav__cta,
.v5-sheet a { color: inherit; text-decoration: none; }
.v5-nav a:hover,
.v5-nav__cta:hover,
.v5-sheet a:hover { color: inherit; }

body.admin-bar.iq-home .v5-nav { top: var(--wp-admin--admin-bar--height, 32px); }
body.admin-bar.iq-home .v5-sheet { top: calc(66px + var(--wp-admin--admin-bar--height, 32px)); }

@media screen and (max-width: 600px) {
	body.admin-bar.iq-home .v5-nav { top: 0; }
	body.admin-bar.iq-home .v5-sheet { top: 66px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Rails that hold exactly three cards.

   The tracks are sized to show 3.32 (apps) and 3.18 (materials) cards, so a
   fourth peeks off the edge and invites the swipe. With only three left, that
   peek slot is just dead air — 179px on `Ce prelucrăm`, 127px on `Materiale` —
   and the row starts at the 40px bleed gutter instead of the 60px content edge
   where the heading starts, so it reads as drifted left rather than composed.

   Three equal columns on the content grid instead, sharing `--v5-gap` with the
   projects grid below, so the three-up rows on the page line up with each
   other. The arrows go with it: there is nowhere left to travel.

   Keyed on the child count, not hard-coded per section — add a fourth card and
   the scrolling rail returns on its own.
   ═════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1000px) {
	.v5-rail:has(> :last-child:nth-child(3)),
	body.iq-home .elementor .v5-rail:has(> :last-child:nth-child(3)) {
		grid-column: content-start / content-end;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--v5-gap);
		padding-inline: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	/* Nothing to scroll, so the controls would be permanently disabled. */
	:is(.v5-apps, .v5-mats):has(.v5-rail > :last-child:nth-child(3)) .v5-arrows,
	body.iq-home .elementor :is(.v5-apps, .v5-mats):has(.v5-rail > :last-child:nth-child(3)) .v5-arrows {
		display: none;
	}
}