/**
 * Theme-only additions.
 *
 * site.css is the compiled stylesheet lifted from the Next build and is kept
 * byte-identical to it, so it can still be diffed against the live site during
 * the port. Anything that did NOT come from globals.css belongs here instead —
 * chiefly rules that React components shipped as inline <style> blocks, which
 * have no equivalent in a PHP template.
 *
 * Loaded after site.css, so specificity behaves the same way it did in Next
 * (component styles came after the global sheet).
 */

/* From the inline <style> in the Next /blog page component. */
@media (max-width: 700px) {
	.blog-grid {
		grid-template-columns: 1fr !important;
		row-gap: 44px !important;
	}
}

/* From the inline <style> in the Next /kontakt page component. */
@media (max-width: 700px) {
	.nb-contact-grid {
		grid-template-columns: 1fr !important;
	}
}

/**
 * Leistungen — Hero video. Client requirement: its right edge lands on the
 * same universal content line as everything else on the page (the same rule
 * already applied to the Interior Design video/image).
 *
 * Scoped to .li-hero-media specifically, NOT a change to the shared
 * .li-split-media class those rules come from — Projektkoordination uses the
 * exact same shared classes with the same inherited ~31px offset, and wasn't
 * part of this request. Widening the fix to the shared class would have
 * moved that section too, unasked.
 *
 * Same pattern as the Interior Design fix: neutralize .lg-container's
 * max-width/auto-margin centering (it needs a definite width to shrink
 * against, which this column's own padding removes the certainty of) and
 * inset with the site's standard calc(5vw - 1.6px). The video's inline
 * margin-left:auto (was 0 auto, centering it) then right-aligns it flush
 * within that corrected box instead.
 */
@media (min-width: 1024px) {
	.li-hero-media {
		padding-right: calc(5vw - 1.6px);
	}
	.li-hero-media .lg-container {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/**
 * Leistungen — Interior Design row. A dedicated grid, not the shared
 * .li-split/.li-split-media/.li-split-text machinery those rely on flex order
 * matching DOM order, and this row needs a DIFFERENT order per breakpoint:
 * mobile needs image → brochure pages → video (client request); desktop needs
 * the video directly under the text, bottom-aligned with the image beside it,
 * and the brochure pages full-width below all three. CSS Grid's
 * grid-template-areas can be redeclared per breakpoint against the same four
 * DOM nodes, which plain flex order cannot do across nested containers.
 *
 * Mobile: single column, four rows: text, image, brochure, video.
 *
 * Desktop: two columns (image 60%, text+video 40%, matching the site's other
 * split sections), three rows. Image spans only the first two rows (its area
 * name appears in both) so its box covers exactly the text+video height; text
 * sits top-right (auto height); video sits bottom-right, sized to fill
 * whatever's left (1fr) with align-self:end so it sits on the shared bottom
 * edge. Image and video are then stretched to fill their grid cells
 * (object-fit:cover) instead of sizing from their own aspect ratio, which is
 * what makes the bottom edges land on the same line. Brochure spans both
 * columns in its own third row (auto height), full width below everything.
 *
 * Caveat: if the Leistungen text field (wp-admin → Texte) grows enough that
 * text+video exceeds the image's natural height, the bottom row (video) grows
 * to match and the video's crop gets taller — the two stay aligned, but the
 * video's framing will look different from what was tuned here.
 */
.li-id-row {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "text" "image" "broch" "video";
	gap: 40px;
}
/*
 * Mobile padding, matching what the removed .lg-container class used to give
 * these three (16px both sides — see .lg-container in site.css). .li-id-broch
 * still carries .lg-container itself and was never at issue; text/image/video
 * lost this when lg-container was dropped from them for the desktop alignment
 * fix, regressing their mobile edge from 32px (matching the wordmark and every
 * heading — see nav.php's own comment on this) to 16px. Desktop overrides
 * these below with the calc(5vw - 1.6px) insets instead.
 */
.li-id-row .li-id-text,
.li-id-row .li-id-image,
.li-id-row .li-id-video {
	padding-left: 16px;
	padding-right: 16px;
}
.li-id-row .li-id-text {
	grid-area: text;
}
.li-id-row .li-id-image {
	grid-area: image;
}
.li-id-row .li-id-broch {
	grid-area: broch;
	/*
	 * .lg-container centers itself with `margin:auto`, which needs a definite
	 * width to shrink from. A normal block element gets one for free (auto
	 * width fills its container regardless of the auto margins). A grid item
	 * does not: with an inline-axis auto margin, grid sizes it to its
	 * max-content instead of stretching — and pg-track's overflow-x:auto
	 * reports almost no intrinsic width, so the box collapsed to ~16px,
	 * mis-aligning it against every other .lg-container on the page. width:100%
	 * gives it back a definite width (= the full spanned grid area) for
	 * max-width:90% to clamp and margin:auto to center, same as everywhere
	 * else on the site.
	 */
	width: 100%;
}
.li-id-row .li-id-video {
	grid-area: video;
}
@media (min-width: 1024px) {
	.li-id-row {
		grid-template-columns: 3fr 2fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "image text" "image video" "broch broch";
		gap: 72px;
		align-items: start;
	}
	.li-id-row .li-id-video {
		align-self: end;
	}
	/*
	 * Client requirement: the video's right edge must land on the site's
	 * universal content edge (the same line the "STUDIO FYRNYS" wordmark and
	 * hero heading start from) — symmetric with the image's left edge below.
	 * .li-id-text and .li-id-video are separate grid cells (rows 1 and 2 of
	 * column 2), so both need this, not just one — otherwise the video ends
	 * flush while the paragraph above it still wraps wider, or vice versa.
	 * calc(5vw - 1.6px) is the same inset used on the image's left padding; by
	 * construction, insetting both sides of the row by an identical amount
	 * lands them on the same absolute line (confirmed: both measure to the
	 * pixel against the live reference site's own content edge).
	 */
	.li-id-row .li-id-text,
	.li-id-row .li-id-video {
		padding-right: calc(5vw - 1.6px);
		padding-left: 0;
	}
	/*
	 * Reproduces site.css's `.li-split-reverse > .li-split-media{padding-left:
	 * calc(5vw - 1.6px)}` exactly — the rule this row's original li-split markup
	 * used to align the media column with the rest of the page, before the grid
	 * rebuild replaced it with .lg-container's max-width/auto-margin centering.
	 * That substitution was the bug: lg-container needs a definite width to
	 * center against, a grid item doesn't have one by default, so the image
	 * drifted ~40px right of where the reference site puts it. Confirmed against
	 * the live reference at 1400px: image left edge now matches to the pixel.
	 */
	.li-id-row .li-id-image {
		padding-left: calc(5vw - 1.6px);
		padding-right: 0;
	}
	.li-id-row .li-id-image,
	.li-id-row .li-id-image img.img-portrait {
		height: 100%;
	}
	.li-id-row .li-id-image img.img-portrait {
		width: 100%;
		/*
		 * !important: overriding the inline max-width:560px/margin:0 auto that
		 * size the image for mobile (kept inline, unchanged, for that
		 * breakpoint). Desktop needs the image to fill its full padded column
		 * instead — that inline style otherwise wins over a plain class rule
		 * regardless of media query, which is what caused this bug in the
		 * first place (see .li-id-image above).
		 */
		max-width: none !important;
		margin: 0 !important;
		object-fit: cover;
	}
}

/**
 * Leistungen — the two brochure pages (Moodboard, Raumkonzept) under Interior
 * Design. Same swipe-with-dots component as the single-project gallery
 * (.pg-gallery/.pg-track/.pg-dots, project-gallery.js — enqueued for this page
 * too, see functions.php), so it behaves and looks identical on mobile: one
 * page at a time, dots below to show position and jump between them. On
 * desktop that shared CSS turns .pg-track into a 2-column grid, which is
 * exactly a 2-item gallery like this needs — no separate desktop rule here.
 *
 * The one thing NOT reused is .pg-img: it hard-codes a 3:4 portrait crop built
 * for project photography. These are landscape brochure PAGES with dimensions
 * and labels — cropping to portrait would cut most of the content off. Own
 * class (.li-broch-img) instead, sized to show the full page uncropped.
 *
 * .li-broch-item wraps each image (added alongside the EU AI-labelling
 * badges below): the flex/snap sizing that used to sit directly on the <img>
 * now sits on this wrapper instead, purely so a badge can be absolutely
 * positioned over just the one image that needs it without disturbing the
 * other. project-gallery.js only reads track.scrollLeft/clientWidth and
 * queries descendant <img> tags for their load event, so it doesn't care
 * that the flex children are now divs instead of the images themselves.
 */
.pg-track .li-broch-item {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.pg-track .li-broch-item .li-broch-img {
	display: block;
	width: 100%;
	background-color: #fff;
	object-fit: contain;
}
@media (min-width: 1024px) {
	.pg-track .li-broch-item {
		width: 100%;
		scroll-snap-align: none;
	}
	.pg-track .li-broch-item .li-broch-img {
		height: auto;
	}
}

/**
 * EU AI-labelling badges (icon SVGs in assets/images/labels/) — placed over
 * specific images per the client's markup. Small, bottom-right corner.
 * Transparent by request: the SVGs originally shipped with a translucent
 * white pill behind the dark mark, which was stripped out of the source
 * files so only the mark itself renders.
 */
.ai-label-badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 18%;
	max-width: 120px;
	min-width: 64px;
	height: auto;
	z-index: 2;
	pointer-events: none;
}

/**
 * Leistungen — the "Bereiche" band between the hero and Interior Design.
 * Added 2026-08, not part of the original port.
 *
 * .bg-linen mirrors .bg-egg's full-bleed treatment (site.css) but with the
 * darker-beige token instead of green, per the client's sketch. Kept as a
 * separate class rather than reusing .bg-egg because .bg-egg also forces
 * white text/inverted logos — wrong here, this band keeps dark text.
 */
.bg-linen {
	background-color: var(--linen-beige);
}
.bg-linen:not(.li-split-text):not(.li-split-media):not(.li-split-spacer) {
	margin-left: -16px;
	margin-right: -16px;
	padding-left: 16px;
	padding-right: 16px;
}

/* Mobile: one column, stacked. Desktop: three per row, two rows — the layout
   in the client's sketch, and legible at both a phone width and a 27" screen,
   which one row of six would not be at either extreme. */
.li-areas-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 768px) {
	.li-areas-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 32px;
	}
}
.li-area-img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	margin-bottom: 16px;
}
.li-area-title {
	font-family: var(--font-halis);
	font-weight: 700;
	font-size: calc(16px * var(--body-scale));
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #2d2926;
	margin-bottom: 8px;
}
.li-area-text {
	font-family: 'TT Norms Pro', sans-serif;
	font-size: calc(14px * var(--body-scale));
	line-height: 1.7;
	color: #333;
	margin: 0;
}

/**
 * Floating call button (template-parts/call-button.php) -- site-wide, fixed
 * position is inline (see that file for why bottom-left, not bottom-right).
 * Only the hover/focus lift lives here: inline styles can't express :hover.
 */
.sf-call-button {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sf-call-button:hover,
.sf-call-button:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}