/* ============================================================================
   Solidum landing-page overrides  (managed by Claude Code)
   Loaded via mu-plugin solidum-landing-overrides.php on the FRONT PAGE ONLY.

   Update-safe: lives in wp-content/mu-plugins/, survives theme & plugin updates.
   Re-deploy: scp this file to the server, then `wp @solidum litespeed-purge all`,
   then prime (see SOLIDUM_CC_SETUP.md §3).

   ----------------------------------------------------------------------------
   CASCADE NOTES (why specific selectors / why !important is or isn't used)
   This sheet is enqueued at priority 9999, but #wp-custom-css (the ~40 KB
   Additional CSS) and Uncode's generated style-custom.css still emit LATER in
   wp_head. So every rule here is scoped to an ID (#page-header / #row-unique-2 /
   #row-unique-6) to out-specify the theme + Additional CSS.
   !important is used ONLY where a competitor declaration is itself !important or
   inline (the only cases specificity alone cannot win):
     • Hero CTAs  → beat style-custom.css `.style-dark .btn-default.btn-outline
                    { color/background/border …!important }`.
     • Brand strip (mobile) → beat #wp-custom-css `@media(max-width:959px)
                    .solidum-brandstrip{…!important}` + `img{max-width:60px!important}`.
     • Servisas   → beat an INLINE `background-position:center center` on .background-inner.
   Where the only competitors are non-!important (hero box-shadow; the whole
   desktop brand-strip block) the ID scope already wins, so no !important is used.

   Brand tokens are defined once in :root and every color is routed through them.
   ========================================================================== */

:root {
	--solidum-blue:       #0055ba;  /* logo wordmark + style-accent blue (reference) */
	--solidum-red:        #ff1d25;  /* logo "°" mark — standardized accent */
	--solidum-red-hover:  #d10f16;  /* darker shade for CTA hover */
	--solidum-white:      #fff;     /* CTA label/icon on the red fill */
}

/* ============================================================================
   1. HERO CTAs — "Plačiau" ghost buttons → solid red
   ----------------------------------------------------------------------------
   Scope: #page-header a.btn.btn-outline matches EXACTLY the 2 hero CTAs
   (verified: only 2 .btn-outline on the page). The white-on-red buttons
   elsewhere are .btn-default WITHOUT .btn-outline and stay untouched.
   Size/position unchanged (same padding / radius / 2px border, now red).

   !important REQUIRED on color/background/border: style-custom.css forces these
   on `.style-dark .btn-default.btn-outline` with !important (incl. a DARK text +
   white bg on hover we must override). box-shadow has no !important competitor,
   so it stays plain.
   ========================================================================== */

/* Rest state */
#page-header a.btn.btn-outline,
#page-header a.btn.btn-outline:link,
#page-header a.btn.btn-outline:visited {
	background-color: var(--solidum-red) !important;
	border-color:     var(--solidum-red) !important;
	color:            var(--solidum-white) !important;
	box-shadow:       none;
	transition:       background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Hover / focus — darker red, text stays white */
#page-header a.btn.btn-outline:hover,
#page-header a.btn.btn-outline:focus,
#page-header a.btn.btn-outline:focus-visible {
	background-color: var(--solidum-red-hover) !important;
	border-color:     var(--solidum-red-hover) !important;
	color:            var(--solidum-white) !important;
}

/* Keep label + icon white in every state (Uncode flips outline-button text on hover) */
#page-header a.btn.btn-outline .btn-icon,
#page-header a.btn.btn-outline span {
	color: var(--solidum-white) !important;
}

/* ============================================================================
   1b. HERO PHOTO OVERLAY — one uniform black scrim ON THE PHOTOS of BOTH panels
   ----------------------------------------------------------------------------
   Goal: dim ONLY the photos behind the white hero text, equally on both halves,
   so text is legible wherever it sits — WITHOUT dimming the text/buttons and
   WITHOUT any text glow. Replaces the old per-text text-shadow scrim (deleted).

   Layer used: Uncode renders, inside each column's .uncell, a .column-background
   (absolute) holding .background-inner (the photo) + .block-bg-overlay (the
   overlay), and a sibling .uncont (the text/buttons). The overlay already sits
   ABOVE the photo and BELOW .uncont — i.e. exactly the layer we want — so we
   simply normalise BOTH overlays to the same flat black. We do NOT touch .uncont,
   so text and buttons are never dimmed.

   Before: LEFT overlay = flat black @ inline opacity .5 (.style-color-jevc-bg);
   RIGHT overlay = a black→transparent GRADIENT @ inline opacity .6
   (.style-color-186264-bg) that is light at the top, where "Jaukiems namams"
   sits — the reason that heading was hard to read. We kill the gradient and set
   both to flat black at the SAME opacity (.5 — matches the left's existing look,
   so both halves are symmetric).

   CASCADE:
   • background-image:none / background-color:#000 → NO !important: the
     #page-header #row-unique-0 .block-bg-overlay scope (2 ids,1 class) already
     out-specifies Uncode's overlay color classes (1 class, not !important).
     Verified: gradient drops to none, color to black, with plain declarations.
   • opacity:.5 → !important REQUIRED: opacity is set INLINE on each overlay
     (style="opacity:.5" / ".6"); only !important beats inline. Verified the
     right panel (which also runs Uncode's zoom-out animation) settles to .5
     once the animation finishes (it transiently renders .6 mid-zoom — still
     legible, only darker).

   Measure with audit-contrast.mjs (hides hero text — incl. the .split-word-inner
   spans Uncode wraps headings in — then samples the real background luminance).
   ========================================================================== */
#page-header #row-unique-0 .block-bg-overlay {
	background-image: none;        /* drop the right panel's gradient */
	background-color: #000;        /* flat black on both panels */
	opacity: .5 !important;        /* uniform darkness; beats inline opacity .5/.6 */
}

/* ============================================================================
   2. BRAND STRIP — "Atstovaujami prekių ženklai" (5 partner logos, coral band)
   ----------------------------------------------------------------------------
   Scope: #row-unique-2 is the coral band's row (.style-accent-bg). The strip is
   NOT inside #page-header, so specificity is anchored on this row ID.
   Logo ASSETS are pre-balanced to a common optical box (cap-height = 30.4% of
   each canvas), so a single max-height equalises optical cap-height across all 5.

   Desktop: the ID scope out-specifies every (non-!important) #wp-custom-css
   competitor, so NO !important here. (At ≤959px the Additional CSS adds
   !important rules — those are beaten in section 2b below, which governs that
   range, so these desktop rules are safe even though they aren't media-scoped.)
   ========================================================================== */

/* 2a. Desktop / base — uniform cap-height, single centered row, even gaps.
   canvas 64px → cap ≈ 19.5px; the 5 logos total ≈ 924px and fit the ~1053px
   strip in one row with 28px gaps. flex:0 1 auto shrinks proportionally if tight. */
#row-unique-2 .solidum-brandstrip {
	display:         flex;
	flex-wrap:       nowrap;          /* one row on desktop */
	align-items:     center;          /* vertical centering */
	justify-content: center;          /* centered cluster, even gaps */
	gap:             28px;
	padding:         8px 0 0;
}
#row-unique-2 .solidum-brandstrip a {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex:            0 1 auto;         /* natural width; shrink proportionally if tight */
	min-width:       0;
}
#row-unique-2 .solidum-brandstrip img {
	max-height: 64px;                 /* single canvas height → uniform optical cap */
	max-width:  100%;                 /* scale down with the anchor when shrinking */
	width:      auto;
	height:     auto;
	object-fit: contain;
	display:    block;
}

/* 2b. Mobile / tablet (≤959px) — the logos are very wide-aspect (Saunier ~4.75:1),
   so one uniform-height row would force ~6px caps. Instead ALLOW WRAP: at
   max-height 46px the DOM order wraps into two width-balanced rows
   (Saunier+inVENTer / Solarfocus+Jäspi+Heatpex) with EQUAL caps, and we reclaim
   the band's heavy side padding to give them room.
   !important REQUIRED here: #wp-custom-css emits competing !important rules in
   this same breakpoint (flex-wrap:nowrap!important; gap:8px!important;
   img{max-width:60px!important;width:100%!important}). */
@media (max-width: 959px) {
	#row-unique-2 .row.limit-width.row-parent {
		padding-left:  12px !important;
		padding-right: 12px !important;
	}
	#row-unique-2 .uncell.double-block-padding {
		padding-left:  0 !important;
		padding-right: 0 !important;
	}
	#row-unique-2 .solidum-brandstrip {
		flex-wrap:       wrap !important;   /* two rows so logos stay readable + even */
		justify-content: center !important;
		gap:             14px 12px !important;  /* row-gap col-gap */
		padding:         10px 0 6px !important;
	}
	#row-unique-2 .solidum-brandstrip a {
		flex:      0 0 auto !important;     /* natural width (no slot-stretching) */
		min-width: 0 !important;
	}
	#row-unique-2 .solidum-brandstrip img {
		max-height: 46px !important;        /* cap ≈ 14px; DOM-order wrap → 2 balanced rows */
		max-width:  100% !important;
		width:      auto !important;
		height:     auto !important;
		object-fit: contain !important;
	}
}

/* ============================================================================
   3. SERVISAS band portrait — keep the worker's head in frame
   ----------------------------------------------------------------------------
   Scope: #row-unique-6 .background-inner — the man02.jpg side image of the red
   "Servisas" / "PROFESIONALI ĮRANGOS PRIEŽIŪRA" band. The photo is a CSS
   background-image (NOT an <img>), so we tune background-position.

   The image box is a FIXED 421px height on desktop, so wider viewports flatten
   the box and `background-size:cover` crops harder vertically; the worker's face
   sits in the upper third, so default `center center` slices the top of his hard
   hat on wide desktops (≈1680px+) and tablet (~768px). Shifting the focal point
   to `center 25%` keeps the full head in frame (verified 390/1440/1920px; mobile
   is crop-insensitive, box AR ~1.56 ≈ image AR ~1.45, so it takes the same 25%).

   !important REQUIRED: background-position is set INLINE on .background-inner, and
   only !important beats an inline style. If Uncode renumbers the row id this rule
   safely no-ops (reverts to default).

   Written as the ALL-PERCENTAGE form `50% 25%` (not the keyword+percentage mix
   `center 25%`): unambiguous, X/Y order explicit, parses identically everywhere.
   ========================================================================== */
#row-unique-6 .background-inner {
	background-position: 50% 25% !important;
}
@media (max-width: 959px) {
	#row-unique-6 .background-inner {
		background-position: 50% 25% !important;
	}
}

/* ----------------------------------------------------------------------------
   3b. SERVISAS photo — Safari column-height collapse (THE real "pushed down in
   Safari" bug; verified in real Safari 26.5 + Playwright webkit/Safari-UA, 2026-06-18)
   ----------------------------------------------------------------------------
   Symptom: in Safari the worker's photo collapsed to a ~100px-tall strip (only a
   squished sliver of the face), while Chrome framed it at the full 420px. NOT a
   background-position problem — the position computed `50% 25%` correctly in BOTH
   engines. The PHOTO COLUMN'S HEIGHT collapsed, so `background-size:cover` over-
   scaled the image into a thin band ("pushed down / only top of head shows").

   Root cause: the band is a two-cell `display:table` row. The photo cell
   (`.wpb_column`, table-cell) is stretched to the row height (420px) by the text
   cell. Inside it the `.uncol` uses `height:100%` to fill the cell — but Safari
   refuses to resolve a percentage height against a `display:table-cell` parent
   (Chrome resolves it). So `.uncol`→`.uncoltable`→`.uncell` and the absolutely-
   positioned `.column-background`/`.background-inner` all collapse to ~100px.
   (Why the user's UA-spoof "fixed" it: Uncode's column-height JS is UA-gated —
   the Chrome path sets explicit heights that paper over the collapse; the Safari
   path doesn't. Spoofing Chrome took the JS path. The CSS bug is the real cause.)

   Fix: re-anchor the absolutely-positioned `.column-background` to the FULL-HEIGHT
   `.wpb_column` by making ONLY the photo column's table chain `position:static`
   (its nearest positioned ancestor then becomes `.wpb_column`, 420px, instead of
   the collapsed `.uncell`). Scoped to the first column (`:first-child`, the photo;
   the text column is `:nth-child(2)`/`.style-dark`) so the red text cell is
   untouched. Verified: webkit/Safari-UA innerH 100→421 @1440; Chrome 421→421 and
   both engines @390 stay 250 (mobile stacks → no table-cell, no bug, fix is a
   no-op there). Shots: shots/verify-{chromium,webkit}-*; real Safari before/after
   /tmp/safari-band-{BEFORE,scoped}.png. Probe: diag-verify-fix.mjs / diag-ua.mjs. */
#row-unique-6 .row-inner > .wpb_column:first-child .uncol,
#row-unique-6 .row-inner > .wpb_column:first-child .uncoltable,
#row-unique-6 .row-inner > .wpb_column:first-child .uncell {
	position: static !important;
}

/* ============================================================================
   4. FEATURE ICONS — three benefit icons clipped on their RIGHT edge (desktop)
   ----------------------------------------------------------------------------
   Scope: #row-unique-3 .icon-media — the three benefit icons
   (Pardavimai ir projektavimas / Profesionalios konsultacijos / Aptarnavimas ir
   servisas). They are Uncode "fluid SVG" media tiles: span.icon-media > img(SVG).

   Bug (desktop ≥960px only): Uncode's fluid-media wrapper chain
   (.t-entry-visual → .t-entry-visual-tc → .uncode-single-media-wrapper →
   .fluid-svg → .icon-media) is sized to ~56px wide (53.5px for the gear), but the
   <img> renders at a fixed 64px (object-fit:contain, near-square SVG). The img
   overflows the wrapper's RIGHT edge by 8–11px, and the ancestor `.t-entry-visual`
   (overflow:hidden) crops that overflow → the right of each icon is cut off.
   (Verified live, both engines: img right 368 vs wrapper/clip box right 360.)
   Mobile (≤959px) is unaffected: there the img is 48px INSIDE a ~55px wrapper, so
   nothing overflows and these rules are a harmless no-op.

   Fix:
   • overflow:visible up the wrapper chain → stop cropping; the icon shows whole.
     Keeps the uniform 64px render (all three identical in size), no resize/distort.
   • center the over-wide img on its wrapper (left:50% + translateX(-50%)) so the
     icon sits exactly under its heading (was ~4–5px right of centre, and the
     offset varied per icon since wrapper widths differ 56.3/56.3/53.5px). Adapts
     to each wrapper width automatically → all three end up identically centred.

   CASCADE: NO !important. The #row-unique-3 ID scope (1 id +1 class) out-specifies
   Uncode's plain `.t-entry-visual{overflow:hidden}` and the img transform
   (verified live: overflow wins, clip removed, with plain declarations). These
   icons carry NO hover transform (verified: identity matrix unchanged on hover),
   so translateX(-50%) has nothing to fight. If Uncode renumbers the row id these
   rules no-op safely. The two 315×315 product-image tiles on the page also use
   .t-entry-visual but are NOT .icon-media, so they keep their intended overflow.
   ========================================================================== */
#row-unique-3 .icon-media,
#row-unique-3 .fluid-svg,
#row-unique-3 .uncode-single-media-wrapper,
#row-unique-3 .t-entry-visual-tc,
#row-unique-3 .t-entry-visual,
#row-unique-3 .t-inside {
	overflow: visible;
}
#row-unique-3 .icon-media img {
	position:  relative;
	left:      50%;
	transform: translateX(-50%);
}

/* ============================================================================
   5. "ATLIKTI DARBAI" CARDS — collapse the empty gap + hide the category tags
   ----------------------------------------------------------------------------
   Scope: #row-unique-5 .tmb-carousel — the two project cards in the front-page
   "Atlikti darbai" (eyebrow "SĖKMĖS ISTORIJOS") owl-carousel. This whole sheet
   loads ONLY on is_front_page(), and these selectors are further pinned to that
   row's carousel cards, so the /category/atlikti-darbai/ archive and the single
   project pages (different templates, no #row-unique-5, this sheet not enqueued)
   are completely untouched — the category labels still show there.

   THE GAP (what inflated the section): each card's image box is a SQUARE
   (.dummy{padding-top:100%} → 315px at 1440), but an existing #wp-custom-css rule
   (.home #row-unique-5 .t-entry-visual img) pins the <img> to height:280px with
   object-fit:cover. So the 280px image sat top-flush in the 315px square, leaving
   a ~35px dead strip of card background BELOW it; then .t-entry-text-tc
   (single-block-padding) added 36px top padding before the red category-meta line
   — together a large empty gap between the photo and the title.

   FIX:
   • 5a. Collapse the image box to the image's own 280px (kill the square .dummy)
     → the dead strip disappears, the photo itself is unchanged, and the section
     is ~35px/card shorter. The .t-entry-visual chain had NO height rule of its
     own (height came only from the .dummy), so height:280px needs no !important;
     the .dummy's padding-top:100% is INLINE, so collapsing it does need it.
   • 5b. Tighten the text block padding (theme .single-block-padding = 36/36 → a
     compact 14/18). Id scope out-specifies the class rule → no !important.
   • 5c. Hide the red category tags ("Atlikti darbai, Privatūs namai") above each
     title. Only competitor is p{display:block} → id scope wins, no !important.
     Scoped to these landing cards only; archive/category labels are unaffected.
   Verified both engines @1440 & 390: section 669→568px (−15%), no gap, no tags,
   photos unchanged. Probe: cards-probe.mjs. Revert = delete this section (or
   restore a landing-overrides.backup-*.css), re-deploy + litespeed-purge + prime.
   ========================================================================== */

/* 5a. Collapse the square image box down to the (already-pinned) 280px image. */
#row-unique-5 .tmb-carousel .t-entry-visual,
#row-unique-5 .tmb-carousel .t-entry-visual-tc,
#row-unique-5 .tmb-carousel .t-entry-visual-cont {
	height: 280px;
}
#row-unique-5 .tmb-carousel .t-entry-visual-cont .dummy {
	padding-top: 0 !important;   /* beats the inline .dummy padding-top:100% */
	height:      0 !important;
}

/* 5b. Tighten the text block padding so the title sits close to the photo. */
#row-unique-5 .tmb-carousel .t-entry-text-tc {
	padding-top:    14px;
	padding-bottom: 18px;
}

/* 5c. Hide the red category tags above each title (landing cards only). */
#row-unique-5 .tmb-carousel .t-entry-meta {
	display: none;
}