/*
 * IQ CONSTRUCT — Blaturi page V1.
 *
 * Loaded after base.css (fonts, footer) and v5-chrome.css (approved tokens,
 * header, buttons, rails, project cards). Only the page's own sections live
 * here; nothing above is redefined.
 *
 * Rhythm: dark title band → full-bleed photography → white mosaic →
 * warm-neutral surfaces → white rail → image-led band → white projects → dark.
 */

body.iq-blaturi { --bl-band: #020000; }

/* Every section already carries `.v5-grid`, so the 12-column field and the
   `.v5-bleed` escape hatch come from the approved chrome unchanged. */

/* ── 1. Hero ──────────────────────────────────────────────────────────────
   One composition rather than a black slab stacked on a photograph: the image
   is the ground, a directional scrim carries the copy, and the four materials
   sit under the actions as real anchors into the Materiale section. */

.bl-hero { position: relative; isolation: isolate; display: grid; align-content: end; min-height: 74svh; overflow: hidden; }
.bl-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 54% 58%; }

/* Two layers: a left-to-right wash that guarantees contrast under the copy, and
   a soft bottom lift so the chips never sit on a busy patch of stone. */
.bl-hero::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(100deg, rgba(2, 0, 0, .88) 0%, rgba(2, 0, 0, .74) 34%, rgba(2, 0, 0, .18) 68%, rgba(2, 0, 0, .06) 100%),
		linear-gradient(0deg, rgba(2, 0, 0, .55) 0%, rgba(2, 0, 0, 0) 42%);
}

.bl-hero__inner { padding-block: calc(var(--bl-head) + 48px) 44px; }
.bl-hero__copy { grid-column: content-start / content-end; max-width: 46ch; color: #FFFFFF; }
.bl-hero h1 {
	font-family: var(--v5-display); font-weight: 600; letter-spacing: -.03em;
	font-size: clamp(31px, 3.9vw, 54px); line-height: 1.06; margin: 0; text-wrap: balance;
}
.bl-hero__sub { margin-block-start: 16px; max-width: 46ch; color: rgba(255, 255, 255, .88); font-size: 17px; }
.bl-hero__do { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }

/* The four materials, as navigation. Real links, so keyboard and screen reader
   support come for free and nothing depends on hover. */
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 26px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, .22); }
.bl-chip {
	display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px;
	border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px;
	color: #FFFFFF; font-family: var(--v5-display); font-size: 14px; font-weight: 600;
	background: rgba(255, 255, 255, .04);
	backdrop-filter: blur(6px);
	transition: background var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease), transform var(--v5-dur) var(--v5-ease);
}
.bl-chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); }
.bl-chip:active { transform: translateY(1px); }

/* ── Actions ──────────────────────────────────────────────────────────────
   `.v5 a { color: inherit }` in the approved chrome outranks `.v5-btn`'s own
   white, which left the solid button with near-black text on brand red — about
   1.5:1. These two carry their own colour at a weight that wins. */

body.iq-blaturi .bl-btn,
body.iq-blaturi .v5-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding-inline: 26px; border-radius: 999px;
	background: var(--v5-red); border: 1px solid var(--v5-red); color: #FFFFFF;
	font-family: var(--v5-display); font-size: 15px; font-weight: 600;
	cursor: pointer;
	transition: background var(--v5-dur) var(--v5-ease), transform var(--v5-dur) var(--v5-ease);
}
body.iq-blaturi .bl-btn:hover,
body.iq-blaturi .v5-btn:hover { background: var(--v5-red-deep); border-color: var(--v5-red-deep); }
body.iq-blaturi .bl-btn:active { transform: translateY(1px); }

body.iq-blaturi .bl-ghost {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding-inline: 22px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .42); color: #FFFFFF;
	font-family: var(--v5-display); font-size: 15px; font-weight: 600;
	cursor: pointer;
	transition: background var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease);
}
body.iq-blaturi .bl-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #FFFFFF; }

/* A material tile jumped to from the hero announces itself briefly. */
.bl-mat:target { outline: 2px solid var(--v5-red); outline-offset: 10px; }
.bl-mat:focus { outline: none; }

/* ── 2. Unde realizăm blaturi ─────────────────────────────────────────────
   A carousel, not a fixed mosaic: four rooms on one rail, each card a single
   link into the projects archive already filtered to that room. Cards are
   generous and landscape, because these are photographs of rooms; a portrait
   crop would cut the run of the countertop, which is the whole subject.

   Behaviour is inherited, not rebuilt: `.v5-rail` in the approved chrome brings
   scroll-snap, arrows, click-and-drag and keyboard; `v5-blaturi.js` drives the
   counter and progress bar off `data-rail`. This file only styles the cards. */

.bl-uses { padding-block: var(--v5-pad); }
.bl-uses__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-block-end: 14px; }

/* The rail is aligned to the content column on the left and bleeds off the
   right edge — so its first card lines up with the section heading, and the
   run-off is what says there is more to see. `.v5-rail` pads itself to the
   gutter, which would have left the first card 20px short of the heading. */
.bl-userail {
	grid-auto-columns: min(86vw, 380px); align-items: start;
	padding-inline: 0 var(--v5-gutter); scroll-padding-inline-start: 0;
}
/* `.v5-rail` snaps every child to `start`, but the last card's start sits past
   the maximum scroll offset — with `x mandatory` the browser refuses to stop
   there and springs back, so the fourth card could never be reached by swipe or
   by the arrows. Snapping the last card to `end` puts a valid snap point
   exactly at the scroll maximum. */
.bl-userail > :last-child { scroll-snap-align: end; }
/* `.v5-rail::after` adds a 6px tail on phones, but a pseudo-element inside a
   `grid-auto-flow: column` rail is a grid item and takes a full 86vw track —
   370px of dead space that also skewed the counter and progress bar, which read
   position as a fraction of scrollWidth. The `end` snap above replaces what
   that tail was there to do. */
.bl-userail::after { content: none; }

/* The whole card is the link — one hit target, one focus stop, no nested
   interactive elements to tab through.

   The card is an anchor, so `body.iq-blaturi .elementor a { color: inherit }` —
   (0,2,2) — dragged the label back to the section's near-black ink over a
   photograph. The white is restated in the WordPress plumbing block below at a
   weight that clears it; declaring it here would lose. Same trap as the hero
   buttons and the paragraph margins. `.bl-use__count` escaped it only because
   it carries a colour of its own. */
.bl-use {
	position: relative; display: grid; isolation: isolate;
	border-radius: var(--bl-r); overflow: hidden;
	background: var(--v5-warm);
}
.bl-use__fig { grid-area: 1 / 1; display: block; }
.bl-use__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* A scrim over the lower half only, so the stone stays visible above it. The
   stops are weighted to where the label actually sits rather than spread
   evenly: these are photographs of pale marble and quartz, and a gentle wash
   left white type at roughly 2:1 against the brightest slabs. */
.bl-use__body {
	grid-area: 1 / 1; z-index: 1; align-self: end;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
	gap: 2px 16px; padding: 72px 20px 18px;
	background: linear-gradient(180deg,
		rgba(2, 0, 0, 0) 0%,
		rgba(2, 0, 0, .16) 30%,
		rgba(2, 0, 0, .58) 55%,
		rgba(2, 0, 0, .86) 100%);
}
.bl-use__label {
	grid-column: 1; font-family: var(--v5-display); font-size: 21px; font-weight: 600;
	letter-spacing: -.02em; line-height: 1.2; text-wrap: balance;
	text-shadow: 0 1px 14px rgba(2, 0, 0, .55);
}
/* Real evidence, read from the archive at request time: how many published
   projects the card actually leads to. */
.bl-use__count {
	grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 12px rgba(2, 0, 0, .5);
}
/* A card that links somewhere other than a filtered project list has no tally to
   state, so it carries a sentence in the same grid slot. `.bl-use__go` spans two
   rows and this is still the second child in column 1, so the grid is unchanged.
   Clamped to two lines so one long sentence cannot push a card out of step with
   its neighbours. */
.bl-use__note {
	grid-column: 1; font-size: 13px; line-height: 1.4; max-inline-size: 34ch;
	color: rgba(255, 255, 255, .86);
	text-shadow: 0 1px 12px rgba(2, 0, 0, .5);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* The affordance that says "this goes somewhere". Drawn, not an icon font. */
.bl-use__go {
	grid-column: 2; grid-row: 1 / span 2; align-self: end;
	inline-size: 44px; block-size: 44px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .10);
	display: grid; place-items: center; backdrop-filter: blur(6px);
}
.bl-use__go::before {
	content: ''; inline-size: 8px; block-size: 8px;
	border-inline-end: 1.5px solid currentColor; border-block-start: 1.5px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}

/* ── 3. Materiale ─────────────────────────────────────────────────────────
   Reference 3: name, portrait surface, one practical line. Four equal columns
   on desktop, one continuous rail on phones. */

.bl-mats { background: var(--v5-warm); padding-block: var(--v5-pad); }
.bl-mats__head { margin-block-end: var(--v5-head-gap); }
.bl-mats__head .v5-lede { max-width: 56ch; }

.bl-matrail { display: grid; gap: var(--v5-gap); padding-inline: var(--v5-gutter); }
.bl-mat { display: grid; align-content: start; gap: 12px; }
.bl-mat__fig { display: block; overflow: hidden; background: var(--v5-warm-deep); }
/* Granite and marble are photographed in place, so the tile zooms into the
   stone itself; the quartz slab needs no crop. */
.bl-mat__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transform: scale(var(--z, 1)); transform-origin: var(--zo, 50% 50%); }
.bl-mat__name { font-family: var(--v5-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.bl-mat__p { color: var(--v5-graphite); font-size: 15px; line-height: 1.5; }

/* No verified photograph exists for this surface yet, so the tile keeps the
   column's weight without standing in a picture of something else. */
/* "No photograph yet" is read from the widget's own output, not from a class:
   Elementor substitutes its own placeholder.png whenever no image is chosen. So
   a card shows its picture the instant one is set, and there is no flag anyone
   has to remember to remove. `.bl-mat--nomedia` stays harmless in the data. */
.bl-mat__fig:has(img[src*="elementor/assets/images/placeholder"]) {
	aspect-ratio: 4 / 5;
	background:
		repeating-linear-gradient(135deg, rgba(2, 0, 0, .035) 0 2px, transparent 2px 9px),
		var(--v5-warm-deep);
}

/* ── 4. Modele disponibile ────────────────────────────────────────────────
   Reference 3 desktop and reference 2 mobile: name above the surface, link
   below, plus a counter, progress bar and arrows on phones. */

.bl-prods { padding-block: var(--v5-pad); }
.bl-prods__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-block-end: 14px; }
.bl-railctl { display: flex; align-items: center; gap: 16px; }
.bl-count { font-family: var(--v5-display); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--v5-graphite); font-variant-numeric: tabular-nums; }
.bl-count span { margin-inline: 2px; opacity: .5; }

.bl-progress { height: 2px; background: var(--v5-rule); margin-block-end: var(--v5-head-gap); }
.bl-progress span { display: block; height: 100%; background: var(--v5-ink); inline-size: 30%; transition: inline-size 160ms linear, transform 160ms linear; }

/* The same two rail faults the applications carousel had, on the same page:
   `.v5-rail` snaps every child to `start`, but the last card's start sits past
   the maximum scroll, so `x mandatory` sprang back and the last slab could not
   be reached; and `.v5-rail::after`, meant as a 6px tail, becomes a grid item in
   a `grid-auto-flow: column` rail and took a whole 86vw track of dead space —
   which also skewed the counter and progress bar, since both read position as a
   fraction of scrollWidth. */
.bl-prail { grid-auto-columns: min(86vw, 340px); align-items: stretch; }
.bl-prail > :last-child { scroll-snap-align: end; }
.bl-prail::after { content: none; }

/* Each slab is a card with a ground of its own. Left on the page's white with
   only text under a picture, the pale marbles had no edge at all — the tile,
   the card and the section were the same colour, so five products read as one
   grey area. The warm ground and hairline give every card a boundary, and put
   the white stones inside a frame instead of dissolving into the page. */
.bl-prod {
	position: relative; display: grid; grid-template-rows: auto 1fr; gap: 12px;
	background: var(--v5-warm); border: 1px solid rgba(2, 0, 0, .07);
	border-radius: var(--bl-r); padding: 10px;
	transition: border-color 320ms var(--bl-ease), box-shadow 320ms var(--bl-ease), transform 320ms var(--bl-ease);
}
.bl-prod:hover {
	border-color: rgba(2, 0, 0, .16);
	box-shadow: 0 10px 28px rgba(2, 0, 0, .08);
	transform: translateY(-2px);
}

.bl-prod__fig { position: relative; display: block; overflow: hidden; background: var(--v5-warm-deep); }
/* 4/5 is the ratio the Materiale tiles above already use, so a stone reads the
   same shape wherever it appears on this page. */
.bl-prod__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 86% 50%; display: block; }

/* Shown only when the rail actually mixes categories — see the widget. */
.bl-prod__cat {
	position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
	padding: 5px 10px; border-radius: 999px;
	background: rgba(255, 255, 255, .92); color: var(--v5-ink);
	font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	backdrop-filter: blur(4px);
}

.bl-prod__body { display: grid; align-content: start; gap: 6px; padding: 2px 6px 4px; }
.bl-prod__name {
	font-family: var(--v5-display); font-size: 17px; font-weight: 600;
	letter-spacing: -.015em; line-height: 1.25; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The facts that differ between slabs, which the repeated category name never
   did: colour, thickness, finish — each read from the product's attributes. */
.bl-prod__specs {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	color: var(--v5-graphite); font-size: 13px; line-height: 1.4;
}
.bl-prod__dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.bl-prod__link {
	display: inline-flex; align-items: center; align-self: end;
	/* A grid item stretches by default, which ran the link's underline the whole
	   width of the card and made the call to action read as a divider rule. */
	justify-self: start;
	min-height: 44px; margin-block-start: 2px;
	font-family: var(--v5-display); font-size: 14px; font-weight: 600;
}
/* The link's hit area is the whole card; nothing else inside is interactive. */
.bl-prod__link::after { content: ''; position: absolute; inset: 0; }
.bl-prod:has(.bl-prod__link:focus-visible) { outline: 3px solid var(--v5-red); outline-offset: 3px; }
.bl-prod:has(.bl-prod__link:focus-visible) { border-color: transparent; }

/* Visible to assistive technology only: every card's link says the same three
   words, so the product name rides along for a screen reader's link list. */
.v5-sr {
	position: absolute; inline-size: 1px; block-size: 1px;
	margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
	clip-path: inset(50%); border: 0;
}

/* ── 5. Informații utile ──────────────────────────────────────────────────
   Reference 2: a wide photograph against a two-column block of copy. */

/* Warm ground so the page alternates white → warm → white → warm → white → dark
   rather than running three white bands together. */
.bl-info { background: var(--v5-warm); padding-block: var(--v5-pad); }
.bl-info__fig { margin: 0 0 26px; display: block; overflow: hidden; background: var(--v5-warm); }
.bl-info__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 58%; display: block; }
.bl-info__copy h2 { font-size: clamp(24px, 2.4vw, 32px); max-width: 18ch; }
.bl-info__cols { display: grid; gap: 14px; margin-block: 16px 20px; }
.bl-info__cols p { color: var(--v5-graphite); font-size: 16px; }

/* ── 6. Blaturi realizate ─────────────────────────────────────────────────
   The approved V5 project card, unchanged; only the section padding is set. */

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

/* ── 7. Conversie ─────────────────────────────────────────────────────────
   One statement, the red action, the verified number. */

.bl-conv { background: var(--bl-band); color: #FFFFFF; padding-block: var(--v5-pad); }
.bl-conv__inner { display: grid; gap: 24px; }
.bl-conv h2 { font-size: clamp(23px, 2.4vw, 34px); max-width: 24ch; }
.bl-conv__do { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.bl-conv__tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--v5-display); font-size: 20px; font-weight: 600; }
.bl-conv__tel:hover { text-decoration: underline; }

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

@media (min-width: 1000px) {
	body.iq-blaturi { --bl-head: 82px; }
	.bl-hero { min-height: min(78svh, 720px); }
	.bl-hero__inner { padding-block: calc(var(--bl-head) + 56px) 56px; }
	.bl-hero__copy { grid-column: content-start / col 8; }

	/* Two and a half cards. Four items over 2.4 columns leaves real distance to
	   travel, so the rail reads as a carousel rather than a row that happens to
	   overflow — and each card stays large enough to be a photograph. */
	.bl-userail { grid-auto-columns: calc((100% - 2 * var(--v5-gap)) / 2.4); }
	.bl-uses__head { margin-block-end: var(--v5-head-gap); }
	.bl-use__label { font-size: 24px; }
	.bl-use__body { padding: 88px 24px 22px; }

	.bl-mats__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: 32px; }
	.bl-mats__head .v5-lede { margin: 0; }
	.v5-grid > .bl-matrail { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 0; grid-column: content-start / content-end; }

	/* Three cards and a wide sliver. The old 4.28 left each card 304px, which
	   with a real body under the tile cropped the names to two tight lines. */
	.bl-prail { grid-auto-columns: calc((100% - 2 * var(--v5-gap)) / 3.42); }
	.bl-progress, .bl-count { display: none; }
	.bl-prods__head { margin-block-end: var(--v5-head-gap); }

	.bl-info { align-items: center; }
	.bl-info__fig { grid-column: full-start / col 7; grid-row: 1; margin: 0; }
	.bl-info__fig img { aspect-ratio: 16 / 11; }
	.bl-info__copy { grid-column: col 8 / content-end; grid-row: 1; }
	.bl-info__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

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

	.bl-conv__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 48px; }
	.bl-conv__do { justify-content: flex-end; }
}

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

@media (max-width: 767px) {
	body.iq-blaturi { --bl-head: 64px; }
	.bl-hero { min-height: 82svh; }
	.bl-hero__inner { padding-block: calc(var(--bl-head) + 28px) 32px; }
	/* At this width the directional wash covers the whole frame, so the stone
	   disappears; the scrim becomes bottom-weighted instead. */
	.bl-hero::after {
		background:
			linear-gradient(0deg, rgba(2, 0, 0, .93) 0%, rgba(2, 0, 0, .80) 38%, rgba(2, 0, 0, .34) 62%, rgba(2, 0, 0, .12) 100%);
	}
	.bl-hero h1 { font-size: clamp(30px, 7.8vw, 36px); }
	.bl-hero__sub { font-size: 16px; margin-block-start: 14px; }
	.bl-hero__do { gap: 10px; margin-block-start: 22px; }
	.bl-hero__do .bl-btn, .bl-hero__do .bl-ghost { flex: 1 1 100%; }
	.bl-chips { margin-block-start: 22px; padding-block-start: 18px; gap: 8px; }
	.bl-chip { font-size: 13px; padding-inline: 14px; }

	.bl-uses, .bl-mats, .bl-prods, .bl-info, .bl-pjs { padding-block: 44px; }
	.bl-conv { padding-block: 40px; }

	/* One card per screen, snapped. 86vw leaves the next card's edge showing,
	   which is what tells a thumb there is more to the right. */
	.bl-userail { grid-auto-columns: 86vw; }
	.bl-use__label { font-size: 19px; }
	.bl-use__body { padding: 64px 16px 16px; gap: 2px 12px; }
	.bl-uses__head { align-items: center; margin-block-end: 12px; }

	/* The materials read as one continuous rail, like the products below. */
	.bl-matrail {
		grid-auto-flow: column; grid-auto-columns: min(78vw, 300px);
		overflow-x: auto; scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--v5-gutter);
		scrollbar-width: none; overscroll-behavior-x: contain;
	}
	.bl-matrail::-webkit-scrollbar { display: none; }
	.bl-matrail > * { scroll-snap-align: start; }

	.bl-prail { grid-auto-columns: 86vw; }

	/* Reference 2, mobile: counter, progress and arrows travel together. V5 hides
	   rail arrows on phones, so this rail restores them at 44px. */
	.bl-railctl .v5-arrows { display: flex; }
	.bl-railctl .v5-arrows button { width: 44px; height: 44px; }
	.bl-prods__head { align-items: center; margin-block-end: 12px; }
	.bl-info__fig { margin-block-end: 22px; }
	.bl-info__fig img { aspect-ratio: 4 / 3; }
	.bl-info__copy h2 { max-width: none; }

	.bl-conv__do { display: grid; gap: 12px; width: 100%; }
	.bl-conv__do .v5-btn { width: 100%; min-height: 48px; }
	.bl-conv__tel { justify-content: center; width: 100%; min-height: 48px; border: 1px solid rgba(255, 255, 255, .38); font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.bl-use__fig img, .bl-prod__fig img { transition: none; }
	.bl-progress span { transition: none; }
	.bl-matrail, .bl-prail, .bl-userail { scroll-snap-type: none; scroll-behavior: auto; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Surface treatment.

   The tiles read dated for three reasons: hard 0px corners, a 1px box drawn
   around every project card, and a heavy black gradient dropped across the
   full width of each photograph. This layer fixes all three — softened
   corners, borders replaced by the image itself, and a shorter, tighter
   scrim — and adds the hover choreography that makes them feel handled:
   the picture drifts, a hairline draws in, the label lifts, the arrow moves.
   Nothing here is decorative filler and every state has a focus equivalent.
   ═════════════════════════════════════════════════════════════════════════ */

body.iq-blaturi { --bl-r: 14px; --bl-ease: cubic-bezier(.22, .61, .36, 1); }

/* ── Application carousel ───────────────────────────────────────────────── */

.bl-use__fig img { transition: transform 720ms var(--bl-ease); }
.bl-use:hover .bl-use__fig img { transform: scale(1.045); }

.bl-use__go { transition: background 320ms var(--bl-ease), border-color 320ms var(--bl-ease), transform 320ms var(--bl-ease); }
.bl-use:hover .bl-use__go { background: #FFFFFF; border-color: #FFFFFF; color: var(--v5-ink); transform: translateX(3px); }

/* The card is one link, so the focus ring belongs to the card, not to a child. */
.bl-use:focus-visible { outline: 3px solid var(--v5-red); outline-offset: 3px; }
.bl-use:focus-visible .bl-use__go { background: #FFFFFF; border-color: #FFFFFF; color: var(--v5-ink); }

/* ── Material tiles ─────────────────────────────────────────────────────── */

.bl-mat__fig { border-radius: var(--bl-r); }
.bl-mat__fig img { transition: transform 720ms var(--bl-ease); }
.bl-mat:hover .bl-mat__fig img { transform: scale(calc(var(--z, 1) * 1.04)); }
.bl-mat__name { display: flex; align-items: baseline; gap: 10px; }
/* A short rule between the name and its sentence, rather than another eyebrow. */
.bl-mat__name::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--v5-rule); }
.bl-mats .bl-mat__name::after { background: rgba(2, 0, 0, .12); }

.bl-mat__fig:has(img[src*="elementor/assets/images/placeholder"]) {
	border: 1px dashed rgba(2, 0, 0, .16);
	display: grid; place-items: center;
}
/* The rule that suppresses Elementor's stand-in lives in the WordPress plumbing
   block below — `body.iq-blaturi .elementor .bl-mat__fig figure { display: block }`
   is (0,3,1) and beats anything written at this weight. */
.bl-mat__fig:has(img[src*="elementor/assets/images/placeholder"])::after {
	content: 'Fotografie în curs';
	font-family: var(--v5-display); font-size: 13px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: rgba(2, 0, 0, .34);
}

/* ── Product rail ───────────────────────────────────────────────────────── */

/* The tile is inset inside the card, so it takes the smaller radius. */
.bl-prod__fig { border-radius: calc(var(--bl-r) - 5px); }
.bl-prod__fig img { transition: transform 720ms var(--bl-ease); }
.bl-prod:hover .bl-prod__fig img { transform: scale(1.04); }

.bl-prod__link { position: relative; gap: 8px; }
/* The underline is drawn, not inherited, so it can animate from the left. */
.bl-prod__link::before {
	content: ''; position: absolute; inset-block-end: 11px; inset-inline: 0 22px;
	height: 1px; background: currentColor;
	transform: scaleX(1); transform-origin: left;
	transition: transform 320ms var(--bl-ease);
}
.bl-prod:hover .bl-prod__link::before { transform: scaleX(.35); }
/* `::after` on this link is already the stretched hit area (content: '', inset:
   0), so the arrow has to be its own element — overriding `content` here left a
   glyph absolutely positioned across the whole card. */
.bl-prod__go { display: inline-block; transition: transform 320ms var(--bl-ease); }
.bl-prod:hover .bl-prod__go { transform: translateX(4px); }

/* ── Project cards ──────────────────────────────────────────────────────── */

/* The 1px box around each card is what dated these most; the photograph and
   the space around it do the framing instead. */
.bl-pjs .v5-pj { border: 0; background: none; border-radius: var(--bl-r); overflow: hidden; }
.bl-pjs .v5-pj:hover, .bl-pjs .v5-pj:focus-within { border-color: transparent; }
.bl-pjs .v5-pj__media { border-radius: var(--bl-r); overflow: hidden; }
.bl-pjs .v5-pj__img { transition: transform 720ms var(--bl-ease); }
.bl-pjs .v5-pj:hover .v5-pj__img { transform: scale(1.045); }
.bl-pjs .v5-pj__body { padding: 16px 2px 0; gap: 8px; }
.bl-pjs .v5-pj__meta { letter-spacing: .16em; font-size: 11px; }
.bl-pjs .v5-pj__title { font-size: 19px; line-height: 1.25; }
.bl-pjs .v5-pj__link { position: relative; }
/* Same defect as the projects archive: a drawn underline spans the card's box,
   not the words, so it overshot every title and ran past the last line of a
   two-line one. Real text decoration tracks each line and animates on colour. */
.bl-pjs .v5-pj__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: .22em;
	transition: text-decoration-color 380ms var(--bl-ease);
}
.bl-pjs .v5-pj:hover .v5-pj__title { text-decoration-color: currentColor; }

/* ── Shared: focus and motion ───────────────────────────────────────────── */

body.iq-blaturi a:focus-visible, body.iq-blaturi button:focus-visible { outline: 3px solid var(--v5-red); outline-offset: 3px; border-radius: 4px; }
.bl-hero a:focus-visible { outline-color: #FFFFFF; }
body.iq-blaturi a, body.iq-blaturi button { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.bl-use__fig img, .bl-mat__fig img, .bl-prod__fig img, .bl-pjs .v5-pj__img,
	.bl-use__go, .bl-prod, .bl-prod__link::before, .bl-prod__link::after,
	.bl-pjs .v5-pj__title { transition: none; }
	.bl-use:hover .bl-use__fig img, .bl-mat:hover .bl-mat__fig img,
	.bl-use:hover .bl-use__go, .bl-prod:hover, .bl-prod:hover .bl-prod__fig img,
	.bl-pjs .v5-pj:hover .v5-pj__img { transform: none; }
}

/* `.v5 p { margin: 0 }` in the approved chrome is more specific than a single
   class, so paragraph spacing has to be restated at class-plus-scope weight.
   Same latent bug as the button colour. */
body.iq-blaturi .bl-hero__sub { margin-block-start: 16px; }
body.iq-blaturi .v5-lede { margin-block-start: 12px; }
@media (max-width: 767px) { body.iq-blaturi .bl-hero__sub { margin-block-start: 14px; } }

/* Footer link rows sit at 34px on desktop in the inherited chrome; the phone
   already uses 44. Proposed change, applied here so the whole page clears the
   44px target rule. (Inline links inside the address paragraph stay inline.) */
body.iq-blaturi .footer__col a { min-height: 44px; }

/* ═════════════════════════════════════════════════════════════════════════
   Display typography.

   Two separate faults sat on the section headings.

   1. Spacing. `.v5 h1, .v5 h2, .v5 h3 { margin: 0 }` in the approved chrome is
      (0,1,1) and beat `.bl-uses__t` at (0,1,0), so `--v5-head-gap` never applied
      and the heading sat flush on the mosaic — a measured 0px. Same trap as
      the button colour and the paragraph margins.

   2. The setting itself. Manrope at 600 with -0.025em tracking and 1.1 leading
      is the default "startup landing page" display voice: heavy, cramped, and
      it crowds the Romanian diacritics — the breve on `realizăm` and the commas
      under ș/ț had nowhere to sit. Manrope is variable (200–800), so the fix is
      a lighter display weight with the tracking opened up and real leading,
      which is also what reads as considered rather than loud.
   ═════════════════════════════════════════════════════════════════════════ */

body.iq-blaturi .v5-h2,
body.iq-blaturi .bl-info__copy h2,
body.iq-blaturi .bl-conv h2 {
	font-family: var(--v5-display);
	font-weight: 500;
	letter-spacing: -.016em;
	line-height: 1.16;
	text-wrap: balance;
}

body.iq-blaturi .v5-h2 { font-size: clamp(28px, 2.6vw, 38px); }
body.iq-blaturi .bl-info__copy h2 { font-size: clamp(26px, 2.3vw, 34px); }
body.iq-blaturi .bl-conv h2 { font-size: clamp(25px, 2.5vw, 36px); }

/* The hero follows the same voice one step firmer, since it sits on photography. */
body.iq-blaturi .bl-hero h1 { font-weight: 550; letter-spacing: -.022em; line-height: 1.08; }

/* The section heading now lives inside the carousel widget's own head row. */

/* Card and tile titles carry the same correction at small sizes, where -0.02em
   was pinching the diacritics hardest. */
body.iq-blaturi .bl-mat__name,
body.iq-blaturi .bl-prod__name,
.bl-pjs .v5-pj__title { letter-spacing: -.01em; }
body.iq-blaturi .bl-mat__name { font-weight: 550; }

/* ═════════════════════════════════════════════════════════════════════════
   Ce poți comanda.

   The section was inert because it asked the reader to mine two columns of
   grey prose for the offer. Same words, restructured: a short lead that keeps
   the one genuinely useful detail (where the joint falls on long pieces), then
   the offer itemised so it can be read in three seconds and reads generous.

   The photograph now runs the full height of the band rather than floating in
   64px of beige — a floor-to-ceiling slab against a quiet column of type is
   the whole composition.
   ═════════════════════════════════════════════════════════════════════════ */

.bl-info__lead { color: var(--v5-graphite); font-size: 17px; line-height: 1.55; max-width: 46ch; }
body.iq-blaturi .bl-info__lead { margin-block-start: 16px; }

.bl-offer {
	list-style: none; margin: 26px 0 0; padding: 0;
	border-block-start: 1px solid rgba(2, 0, 0, .16);
	display: grid;
}
.bl-offer li {
	display: flex; align-items: center; min-height: 52px;
	padding-block: 6px;
	border-block-end: 1px solid rgba(2, 0, 0, .09);
	font-family: var(--v5-display); font-weight: 500; font-size: 16px;
	letter-spacing: -.005em; color: var(--v5-ink);
}
/* One hairline of brand colour per row, short enough to read as a mark rather
   than a bullet list of decorations. */
.bl-offer li::before {
	content: ''; flex: 0 0 auto;
	inline-size: 14px; block-size: 1px; margin-inline-end: 14px;
	background: var(--v5-red);
}

body.iq-blaturi .bl-info__cta { margin-block-start: 28px; }

@media (min-width: 1000px) {
	/* The photograph fills the band edge to edge, top to bottom. */
	.bl-info { padding-block: 0; align-items: stretch; }
	.bl-info__fig { align-self: stretch; }
	.bl-info__fig img { aspect-ratio: auto; height: 100%; min-height: 620px; }
	.bl-info__copy { align-self: center; padding-block: 64px; }
	.bl-offer { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	/* With two columns the top rule would break across the gap, so each column
	   carries its own opening rule instead. */
	.bl-offer { border-block-start: 0; }
	.bl-offer li:nth-child(1), .bl-offer li:nth-child(2) { border-block-start: 1px solid rgba(2, 0, 0, .16); }
}

@media (max-width: 767px) {
	.bl-info__lead { font-size: 16px; }
	.bl-offer { margin-block-start: 22px; }
	.bl-offer li { min-height: 48px; font-size: 15px; }
}

/* The link sits on its own row now, but it still must never wrap its arrow. */
.bl-prod__link { flex-wrap: nowrap; white-space: nowrap; gap: 8px; }
.bl-prod__cat { white-space: nowrap; }


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

   Everything above is the approved prototype, with its tokens namespaced
   `--v5-*` and its `.bl` body scope rewritten to `body.iq-blaturi`. Below is
   only what it takes to render that design through Elementor — no design
   decisions. Mirrors the homepage's v5.css plumbing.
   ═════════════════════════════════════════════════════════════════════════ */

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

/* The section containers ARE the V5 grid, so Elementor's boxed width, padding
   and gaps get out of the way. */
body.iq-blaturi .elementor-element[class*='bl-'] {
	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 the design lays out horizontally; Elementor defaults every container to
   a column. */
body.iq-blaturi .elementor .bl-hero__do,
body.iq-blaturi .elementor .bl-chips,
body.iq-blaturi .elementor .bl-uses__head,
body.iq-blaturi .elementor .bl-prods__head,
body.iq-blaturi .elementor .v5-pjs__head,
body.iq-blaturi .elementor .bl-conv__do { flex-direction: row; }

/* The three widgets only wrap markup: they must leave the box tree so their
   head, rail and grid become direct children of the V5 grid — otherwise
   `.v5-grid > .v5-bleed` cannot reach the rail and it stops being full-bleed.
   Weight matches the `.iq-v3 .iq-home` rule left over from the old homepage. */
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-blaturi-uses,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-blaturi-products,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-v5-projects,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-blaturi-uses > .elementor-widget-container,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-blaturi-products > .elementor-widget-container,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-v5-projects > .elementor-widget-container { display: contents; }

/* `display: contents` promotes those children to grid items, but the
   prototype's `.v5-grid > *` placement matches DOM children only. */
body.iq-blaturi .elementor .bl-uses__head,
body.iq-blaturi .elementor .bl-prods__head,
body.iq-blaturi .elementor .bl-progress,
body.iq-blaturi .elementor .v5-pjgrid { grid-column: content-start / content-end; }
body.iq-blaturi .elementor .bl-prail { grid-column: full-start / full-end; }
body.iq-blaturi .elementor .bl-userail { grid-column: content-start / full-end; }

/* Widgets are transparent boxes — the design owns every gap and margin. */
body.iq-blaturi .elementor .bl-hero__copy > .elementor-element,
body.iq-blaturi .elementor .bl-info__copy > .elementor-element,
body.iq-blaturi .elementor .bl-conv__inner > .elementor-element { width: 100%; }
body.iq-blaturi .elementor .bl-hero__do > .elementor-element,
body.iq-blaturi .elementor .bl-chips > .elementor-element,
body.iq-blaturi .elementor .bl-conv__do > .elementor-element { width: auto; }
body.iq-blaturi .elementor .elementor-widget-text-editor p:last-child { margin-block-end: 0; }

/* Hero photograph as the container's own background: a real Elementor control,
   and `cover` at the same focal point is identical to the prototype's
   object-fit/object-position pair. */
body.iq-blaturi .bl-hero { background-size: cover; background-repeat: no-repeat; background-position: 54% 58%; }

/* Button widgets carry the two approved actions. */
body.iq-blaturi .elementor .bl-btn-w .elementor-button,
body.iq-blaturi .elementor .bl-ghost-w .elementor-button,
body.iq-blaturi .elementor .bl-chip-w .elementor-button {
	background: none; border-radius: 999px; padding: 0; color: inherit; text-shadow: none; fill: currentColor;
}
body.iq-blaturi .elementor .bl-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-blaturi .elementor .bl-btn-w .elementor-button:hover { background: var(--v5-red-deep); border-color: var(--v5-red-deep); }
body.iq-blaturi .elementor .bl-ghost-w .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding-inline: 22px;
	border: 1px solid rgba(255, 255, 255, .42); color: #FFFFFF;
	font-family: var(--v5-display); font-size: 15px; font-weight: 600;
	transition: background var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease);
}
body.iq-blaturi .elementor .bl-ghost-w .elementor-button:hover { background: rgba(255, 255, 255, .14); border-color: #FFFFFF; }
body.iq-blaturi .elementor .bl-chip-w .elementor-button {
	display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px;
	border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .04);
	backdrop-filter: blur(6px); color: #FFFFFF;
	font-family: var(--v5-display); font-size: 14px; font-weight: 600;
	transition: background var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease);
}
body.iq-blaturi .elementor .bl-chip-w .elementor-button:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); }
body.iq-blaturi .elementor [class*='-w'] .elementor-button-content-wrapper { display: contents; }

/* Headings and copy come from native widgets, so the type rules are restated
   at the class rather than the tag. */
body.iq-blaturi .elementor .bl-hero__copy .elementor-heading-title { font-family: var(--v5-display); font-weight: 550; letter-spacing: -.022em; line-height: 1.08; font-size: clamp(31px, 3.9vw, 54px); color: #FFFFFF; }
body.iq-blaturi .elementor .bl-hero__sub p { color: rgba(255, 255, 255, .88); font-size: 17px; margin-block-start: 16px; }
body.iq-blaturi .elementor .v5-h2 .elementor-heading-title,
body.iq-blaturi .elementor h2.v5-h2 { font-family: var(--v5-display); font-weight: 500; letter-spacing: -.016em; line-height: 1.16; font-size: clamp(28px, 2.6vw, 38px); }
body.iq-blaturi .elementor .bl-info__copy .elementor-heading-title { font-family: var(--v5-display); font-weight: 500; letter-spacing: -.016em; line-height: 1.16; font-size: clamp(26px, 2.3vw, 34px); }
body.iq-blaturi .elementor .bl-conv .elementor-heading-title { font-family: var(--v5-display); font-weight: 500; letter-spacing: -.016em; line-height: 1.16; font-size: clamp(23px, 2.4vw, 34px); max-width: 24ch; color: #FFFFFF; }

body.iq-blaturi .elementor .bl-info__fig .elementor-widget-container,
body.iq-blaturi .elementor .bl-info__fig figure,
body.iq-blaturi .elementor .bl-mat__fig .elementor-widget-container,
body.iq-blaturi .elementor .bl-mat__fig figure { margin: 0; display: block; }

/* Hide Elementor's stand-in image only — never a real photograph — leaving the
   dashed frame and "Fotografie în curs" from the card rules. Stated here because
   the rule directly above sets `figure { display: block }` at (0,3,1). */
body.iq-blaturi .elementor .bl-mat__fig img[src*="elementor/assets/images/placeholder"] { display: none; }

/* Editor-only notice from the products widget. */
.bl-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;
}

body.iq-blaturi [id] { scroll-margin-top: 96px; }

/* Material tiles: the approved crops for THIS page's two photographs, which are
   worktops shot in place — each tile zooms into the stone itself; the quartz
   slab needs none.

   Scoped to the Blaturi page. `iq-blaturi` is the shared layout class, so these
   were also hitting the `#mat-granit` and `#mat-marmura` cards on Trepte and
   Glafuri, blowing their photographs up 2.1x and 2.4x — which is what made them
   look soft: a 1086px image upscaled past its own resolution. Art direction for
   one page's pictures must not travel to another's. */
body.iq-blaturi:not(.iq-trepte):not(.iq-glafuri) #mat-granit .bl-mat__fig img { --z: 2.1; --zo: 64% 30%; object-position: 64% 30%; }
body.iq-blaturi:not(.iq-trepte):not(.iq-glafuri) #mat-marmura .bl-mat__fig img { --z: 2.4; --zo: 46% 40%; object-position: 46% 40%; }

/* Carousel crops, as approved. The four photographs are framed differently, so
   each card keeps its own focal point rather than a shared centre crop. */
body.iq-blaturi .bl-userail > :nth-child(1) img { object-position: 46% 52%; }
body.iq-blaturi .bl-userail > :nth-child(2) img { object-position: 50% 45%; }
body.iq-blaturi .bl-userail > :nth-child(3) img { object-position: 50% 60%; }
body.iq-blaturi .bl-userail > :nth-child(4) img { object-position: 42% 58%; }

/* The `Solicită ofertă` text link under the offer list. */
body.iq-blaturi .elementor .v5-link-w .elementor-button {
	display: inline-flex; align-items: center; min-height: 44px;
	background: none; border: 0; border-radius: 0; padding: 0; color: inherit;
	border-block-end: 1px solid currentColor;
	font-family: var(--v5-display); font-size: 15px; font-weight: 600;
}
body.iq-blaturi .elementor .bl-info__cta { margin-block-start: 28px; }
body.iq-blaturi .elementor .bl-offerwrap { margin: 0; }

/* The V5 base type. v5.css scopes this to `body.iq-home`, so the Blaturi page
   was inheriting Woodmart's 16px instead of the design's 17px — which changed
   every `ch` and `em` measure on the page, the hero's 46ch among them. */
body.iq-blaturi {
	font-family: var(--v5-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--v5-ink);
	background: var(--v5-paper);
}
body.iq-blaturi .elementor *,
body.iq-blaturi .elementor *::before,
body.iq-blaturi .elementor *::after { box-sizing: border-box; }
body.iq-blaturi .elementor img { display: block; max-width: 100%; }
body.iq-blaturi .elementor p { margin: 0; }
body.iq-blaturi .elementor a { color: inherit; text-decoration: none; }

/* The blanket `max-width: none` above (needed so Elementor's boxed width does
   not fight the V5 grid) also removed the hero copy's measure. Restated. */
body.iq-blaturi .elementor .bl-hero__copy { max-width: 46ch; }

@media (max-width: 767px) {
	/* The prototype's mobile heading clamp; the plumbing rule above only carried
	   the desktop one, so the h1 was clamping to its 31px floor. */
	body.iq-blaturi .elementor .bl-hero__copy .elementor-heading-title { font-size: clamp(30px, 7.8vw, 36px); }

	/* Actions go full width. The flex item is the Elementor widget, not the
	   anchor inside it, so both need the width. */
	body.iq-blaturi .elementor .bl-hero__do > .elementor-element,
	body.iq-blaturi .elementor .bl-conv__do > .elementor-element { flex: 1 1 100%; width: 100%; }
	body.iq-blaturi .elementor .bl-hero__do .elementor-button,
	body.iq-blaturi .elementor .bl-conv__do .elementor-button { width: 100%; }
	body.iq-blaturi .elementor .bl-conv__do { flex-direction: column; align-items: stretch; }
}

/* Elementor inserts `.elementor-widget-container` between the widget and the
   img. The design's `height: 100%` on the image then resolves against that
   auto-height wrapper instead of the stretched grid cell, so the picture fell
   back to its intrinsic height and blew the band out to 1500px. A percentage
   height cannot resolve there — the wrapper's own height is auto, which is
   circular. Absolute positioning resolves against the containing block's
   *used* height, which the stretched grid cell does have. */
@media (min-width: 1000px) {
	/* In the prototype the picture sizes to its own aspect at the seven-column
	   width and that is what sets the band's height — the `height: 100%` there
	   is circular and never applies.
	   Pinning the ratio on the figure is deterministic: WordPress prepends `auto`
	   to the `sizes` attribute on lazy images, so a width-driven `auto` height
	   resolves from the intrinsic file instead of the column, exactly as it did
	   on the project gallery. The image fills the box; at 1:1 it crops nothing. */
	body.iq-blaturi .elementor .bl-info__fig,
	body.iq-blaturi .elementor .bl-info__fig .elementor-widget-container { position: static; block-size: auto; min-block-size: 0; }
	body.iq-blaturi .elementor .bl-info__fig { aspect-ratio: 1 / 1; overflow: hidden; }
	body.iq-blaturi .elementor .bl-info__fig .elementor-widget-container { block-size: 100%; }
	body.iq-blaturi .elementor .bl-info__fig img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 58%; aspect-ratio: auto; }
}

/* Elementor zeroes heading margins, which removed the gap the design puts
   between the section title and the mosaic. */
body.iq-blaturi .elementor .bl-uses__head h2 { margin: 0; }

/* The carousel card's white, at a weight that clears `.elementor a`'s inherit.
   Everything inside the card — label and drawn chevron — takes it from here. */
body.iq-blaturi .elementor a.bl-use { color: #FFFFFF; }

/* Elementor writes each container's padding from the page data, which overrode
   the design's own block padding on the copy column. */
@media (min-width: 1000px) {
	body.iq-blaturi .elementor .bl-info__copy { padding-block: 64px; }
}