/* ──────────────────────────────────────────────
   SIA Call to Action — frontend
   Single-layout card with full-bleed image, gradient overlay, stacked content,
   absolutely-positioned hover-revealed icon. Three widget contexts share the
   same .sia-cta root: single Card, Grid (.sia-ctag), Carousel (.sia-ctac).
   ────────────────────────────────────────────── */

.sia-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;     /* default: content sits at the bottom */
	overflow: hidden;              /* fallback for old browsers without clip-path */
	background-color: transparent;
	color: var(--sia-color-text, #1A1718);
	border-radius: 16px;
	/* Default 32px card-level padding. The Elementor `cta_content_padding`
	   control overrides via `{{WRAPPER}} .sia-cta`. `box-sizing: border-box`
	   keeps the padding inside the card's allocated width — without it,
	   the card would grow past the column edge by the padding amount on
	   each side (32px × 2 = 64px overflow). Pairs with the v3.15.8 global
	   `sia-base.css` guards. */
	padding: 32px;
	box-sizing: border-box;
	/* clip-path replaces the overflow:hidden + border-radius mask for the
	   actual visible clipping. Reason: when the card has a hover transform
	   (`cta_card_lift` emits `transform: translateY(-Npx)`), browsers
	   re-rasterize the overflow:hidden + border-radius mask PER ANIMATION
	   FRAME, which under sub-pixel rounding produces a visible flicker
	   ("palpaire") at the corners during the hover transition. clip-path
	   is part of the GPU compositing pipeline (not the rasterizer), so the
	   clip stays pixel-stable across the entire transform animation. The
	   `cta_card_radius` Elementor control emits both `border-radius` AND
	   `clip-path` so user-set radius values track on both. */
	clip-path: inset(0 round 16px);
	min-height: 420px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	/* GPU layer hint — `will-change` instead of an explicit `transform: translateZ(0)`
	   so the Elementor `cta_card_lift` hover-emit (`transform: translateY(-4px)`)
	   doesn't overwrite a baseline transform mid-transition. With will-change the
	   compositor keeps a dedicated layer ready and the hover translate animates
	   cleanly without re-promoting / re-rasterizing. */
	will-change: transform;
	backface-visibility: hidden;
	isolation: isolate;
	/* CSS variable so the Edge-offset slider (Style → Icon) can drive every
	   icon position class without each one needing its own selector. */
	--sia-cta-icon-offset: 24px;
	/* Button position offset (separate slider, separate variable so user can
	   pick different distances from the edge for icon vs button). */
	--sia-cta-btn-offset: 24px;
	/* CSS variable for the universal edge-definition outline (see ::after rule
	   below). Exposed as a custom property so future Elementor controls or per-
	   widget overrides can tune it without rewriting the selector. */
	--sia-card-edge: rgba(255, 255, 255, 0.08);
}

/* Universal edge-definition outline (SIA anti-illusion convention).
   Without this, when the user's chosen overlay color at the bottom of the
   card (e.g. dark gradient end ~75% black) approaches the page bg color
   (any dark theme), the rounded corner creates a perceived "thin line"
   illusion at the boundary — the curve becomes visible because there's
   contrast but not enough to register as a clear edge.
   The pseudo-element draws a 1px inner outline at 8% white that follows
   the card's border-radius. Subtle enough to not change the card's
   visual weight, sufficient to break the optical illusion regardless of
   what overlay color/gradient the user picks or what theme they're on.
   Doesn't conflict with the user's Elementor `cta_card_border` or
   `cta_card_shadow` controls (those target `.sia-cta` itself, not ::after).
   `pointer-events: none` so clicks pass through to the stretched link. */
.sia-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px var(--sia-card-edge);
	z-index: 10;
}
.sia-cta * { box-sizing: border-box; }

.sia-cta--placeholder {
	padding: 24px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	border: 1px dashed #d1d5db;
	background: #f9fafb;
}

/* ─── Image (background layer) ───
   `inset: -5px` per the SIA universal overlay rule — the image bounds extend
   5px past the card on every side, the visible edge of the rendered image
   sits well OUTSIDE the card's rounded clip mask (`.sia-cta { overflow: hidden }`).
   This guarantees full coverage even when sub-pixel rasterizer rounding (from
   image hover-scale + carousel translate3d + rounded clip) would otherwise
   leave a 1-2px shimmering or static line at the corners or laterals. */
.sia-cta__image {
	position: absolute;
	inset: -5px;
	z-index: 0;
	pointer-events: none;
	/* GPU layer for the image background. Without this, the parent's
	   `transform: translateY(-4px)` hover (from `cta_card_lift`) forces the
	   browser to recompute the rounded clip mask per frame, which under
	   sub-pixel rounding leaves a 1px shimmering line at corners + laterals.
	   Promoting the image to its own layer means clipping happens ONCE at
	   composite time, not per frame. */
	will-change: transform;
	transform: translateZ(0);
}
.sia-cta__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease, filter 0.4s ease;
	will-change: transform;
	backface-visibility: hidden;
}

/* ─── Overlay (above image, below content) ───
   `inset: -5px` per the SIA universal overlay rule. The card has
   `overflow: hidden`, so the surplus is clipped — but the visible edge of
   the gradient now sits well outside the painted area. Without this, sub-
   pixel rasterizer rounding during the background-color/gradient transition
   on hover leaves a 1-2px shimmering line where the overlay's edge meets
   the card's rounded clip mask. */
.sia-cta__overlay {
	position: absolute;
	inset: -5px;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.35s ease, background 0.35s ease;
	/* GPU layer — same reason as .sia-cta__image above. Without this, the
	   parent transform causes per-frame clip recomputation that leaves a
	   1px shimmering edge during the hover lift. */
	will-change: transform;
	transform: translateZ(0);
}

/* ─── Content (above overlay) ─── */
/* No padding here in v3.15.14+ — the card itself (`.sia-cta`) carries
   the padding now (via the `cta_content_padding` control which targets
   `.sia-cta`). Content just sits inside the padded card. */
.sia-cta__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* default — overridden by Style → Content → Text align */
	gap: 8px;
	color: var(--sia-color-text, #1A1718);
}

/* Subtitle position — flex `order` swap. DOM stays subtitle → title →
   description; the `cta_subtitle_position` Elementor control adds prefix-
   class `sia-cta--sub-above` (default) or `sia-cta--sub-below` on the widget
   wrapper. "above" relies on natural DOM order; "below" explicitly orders
   title first, subtitle next, description last. */
.sia-cta--sub-below .sia-cta__title       { order: 1; }
.sia-cta--sub-below .sia-cta__subtitle    { order: 2; }
.sia-cta--sub-below .sia-cta__description { order: 3; }
.sia-cta__subtitle {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sia-color-primary, #c5ed3b);
	line-height: 1.2;
}
.sia-cta__title {
	margin: 0;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--sia-color-text, #1A1718);
}
.sia-cta__description {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sia-color-text, #1A1718);
	opacity: 0.8;
}

/* ─── Label / badge (Smart Heading-style eyebrow) ─── */
.sia-cta__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	align-self: flex-start;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--sia-color-primary, #c5ed3b);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.2;
	margin-bottom: 12px;
	max-width: max-content;
	white-space: nowrap;
}

.sia-cta__label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	/* Default: icon inherits text color. The `cta_label_icon_color_override`
	   slider can override this on multiple selectors below. */
	color: inherit;
}

.sia-cta__label-icon svg,
.sia-cta__label-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

/* Make SVG fill cascade from `color` for label icons. Hits both the SVG
   root AND every common shape child (path/circle/rect/polygon/ellipse/g)
   except those explicitly marked `fill="none"` (which are intentionally
   outline-only — preserve their no-fill). Same pattern repeated for
   .sia-cta__btn-icon and .sia-cta__icon below to give every icon
   container a robust default. */
.sia-cta__label-icon svg,
.sia-cta__label-icon svg path:not([fill="none"]),
.sia-cta__label-icon svg circle:not([fill="none"]),
.sia-cta__label-icon svg rect:not([fill="none"]),
.sia-cta__label-icon svg polygon:not([fill="none"]),
.sia-cta__label-icon svg ellipse:not([fill="none"]),
.sia-cta__label-icon svg g {
	fill: currentColor;
}

.sia-cta__btn-icon svg,
.sia-cta__btn-icon svg path:not([fill="none"]),
.sia-cta__btn-icon svg circle:not([fill="none"]),
.sia-cta__btn-icon svg rect:not([fill="none"]),
.sia-cta__btn-icon svg polygon:not([fill="none"]),
.sia-cta__btn-icon svg ellipse:not([fill="none"]),
.sia-cta__btn-icon svg g {
	fill: currentColor;
}

.sia-cta__icon svg,
.sia-cta__icon svg path:not([fill="none"]),
.sia-cta__icon svg circle:not([fill="none"]),
.sia-cta__icon svg rect:not([fill="none"]),
.sia-cta__icon svg polygon:not([fill="none"]),
.sia-cta__icon svg ellipse:not([fill="none"]),
.sia-cta__icon svg g {
	fill: currentColor;
}

/* ─── Icon (absolutely positioned in chosen corner) ─── */
.sia-cta__icon {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sia-color-primary, #c5ed3b);
	color: #111827;
	font-size: 18px;
	line-height: 0;
	pointer-events: none;
	transition: transform 0.35s ease, opacity 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.sia-cta__icon i,
.sia-cta__icon svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.sia-cta__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Position via prefix_class — uses the --sia-cta-icon-offset variable so the
   Edge offset slider drives all four positions through one place. */
.sia-cta--icon-pos-tr .sia-cta__icon { top: var(--sia-cta-icon-offset); right: var(--sia-cta-icon-offset); bottom: auto; left: auto; }
.sia-cta--icon-pos-tl .sia-cta__icon { top: var(--sia-cta-icon-offset); left:  var(--sia-cta-icon-offset); bottom: auto; right: auto; }
.sia-cta--icon-pos-br .sia-cta__icon { bottom: var(--sia-cta-icon-offset); right: var(--sia-cta-icon-offset); top: auto; left: auto; }
.sia-cta--icon-pos-bl .sia-cta__icon { bottom: var(--sia-cta-icon-offset); left:  var(--sia-cta-icon-offset); top: auto; right: auto; }

/* ─── Button (independent clickable element, v3.15.16+) ───
   Optional per-card. Reuses the same CSS-variable-based visibility +
   entrance-effect pattern as the icon (--sia-cta-btn-opacity +
   --sia-cta-btn-transform), so button visibility is responsive (per
   device: hover on desktop, always on tablet/mobile by default).

   z-index 6 — sits ABOVE the stretched card link (z:5) so the button's
   own URL captures the click instead of the card's. The rest of the
   card surface still routes through the stretched link.

   Default styling (Elementor controls override): pill, light bg, dark
   text. Width auto so it shrinks to content; padding from the
   dedicated control provides internal space. */
.sia-cta__btn {
	position: absolute;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--sia-color-secondary, #54595F);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-sizing: border-box;
	transition: transform 0.35s ease, opacity 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.sia-cta__btn:focus-visible {
	outline: 2px solid var(--sia-color-primary, #c5ed3b);
	outline-offset: 3px;
}

.sia-cta__btn-icon,
.sia-cta__btn-text {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.sia-cta__btn-icon svg,
.sia-cta__btn-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}
.sia-cta__btn-icon svg,
.sia-cta__btn-icon svg path:not([fill="none"]),
.sia-cta__btn-icon svg circle:not([fill="none"]),
.sia-cta__btn-icon svg rect:not([fill="none"]),
.sia-cta__btn-icon svg polygon:not([fill="none"]),
.sia-cta__btn-icon svg ellipse:not([fill="none"]),
.sia-cta__btn-icon svg g {
	fill: currentColor;
}

/* Button position — 4 corners, prefix_class on widget wrapper drives
   which corner via `.sia-cta--btn-pos-*` (matches the icon position
   pattern). Uses `--sia-cta-btn-offset` (separate from icon offset). */
.sia-cta--btn-pos-tr .sia-cta__btn { top:    var(--sia-cta-btn-offset); right: var(--sia-cta-btn-offset); bottom: auto; left: auto; }
.sia-cta--btn-pos-tl .sia-cta__btn { top:    var(--sia-cta-btn-offset); left:  var(--sia-cta-btn-offset); bottom: auto; right: auto; }
.sia-cta--btn-pos-br .sia-cta__btn { bottom: var(--sia-cta-btn-offset); right: var(--sia-cta-btn-offset); top:    auto; left: auto; }
.sia-cta--btn-pos-bl .sia-cta__btn { bottom: var(--sia-cta-btn-offset); left:  var(--sia-cta-btn-offset); top:    auto; right: auto; }

/* Button visibility + entrance effect — same variable-based pattern as
   the icon, with idle opacity + transform driven by the responsive
   visibility control and the entrance effect. Default: hidden at idle
   (hover-only on desktop), visible always on tablet/mobile by default
   via the responsive control. */
.sia-cta__btn {
	opacity:   var(--sia-cta-btn-opacity, 0);
	transform: var(--sia-cta-btn-transform, none);
}
.sia-cta:hover .sia-cta__btn {
	opacity: 1;
	transform: none;
}

/* v4.4.1: bottom-positioned button flows BELOW the content instead of
   overlaying it. The card content sits at the bottom (justify-content:
   flex-end) and the title is full-width — a bottom-corner ABSOLUTE button
   was overlapped by the title's last line (static, when the title wraps to
   2+ lines) and covered the title on hover. Dropping the bottom button into
   the flex flow AFTER the content guarantees it always sits clear of the
   title no matter how many lines it wraps to, and it reserves its slot even
   while hidden (hover-reveal) so there's zero layout shift on hover.
   `order: 2` puts it after `.sia-cta__content` (default order 0); the DOM
   has the button BEFORE content, so the order swap is required. Top
   positions stay absolute — they never conflict with the bottom content. */
.sia-cta--btn-pos-bl .sia-cta__btn,
.sia-cta--btn-pos-br .sia-cta__btn {
	position: relative;
	inset: auto;
	order: 2;
	margin-top: 16px;
	flex: 0 0 auto;
}
.sia-cta--btn-pos-bl .sia-cta__btn { align-self: flex-start; }
.sia-cta--btn-pos-br .sia-cta__btn { align-self: flex-end; }

/* ─── Icon visibility + hover effects ───
   Always-visible mode: icon shows at rest, no entrance animation. The hover
   state can still recolor / scale via Style → Icon controls.
   Hover-only mode: icon starts hidden, animates in on hover. The starting
   transform depends on the chosen entrance effect.

   IMPORTANT: Elementor's `prefix_class` puts `sia-cta--icon-vis-hover` and
   `sia-cta--icon-fx-*` on the WIDGET WRAPPER, not on each `.sia-cta` card.
   So the hover trigger MUST be `.sia-cta:hover` (the individual card) — not
   `:hover` on the prefix-class element (which would be the whole grid wrapper
   and would fire on every card simultaneously when any one is hovered). */
/* Variable-based icon visibility + entrance effect (v3.15.15+).
   Switched from prefix_class to CSS-variable-based controls so the
   visibility setting can be RESPONSIVE — different value per device,
   wrapped in @media queries by Elementor's responsive control system.

   Variables:
     --sia-cta-icon-opacity   : 0 = hidden at idle (hover mode)
                                1 = visible at idle (always mode)
     --sia-cta-icon-transform : transform applied at idle (none, scale,
                                slide-*, rotate, etc.)

   The effect control sets `--sia-cta-icon-transform` only; the
   visibility control sets `--sia-cta-icon-opacity` AND optionally
   resets the transform (when in "always" mode the icon should never
   be displaced regardless of effect). Both controls target the same
   CSS variables — visibility is added AFTER effect in PHP so its
   selector emission comes later in source CSS, winning equal-specificity
   ties and overriding the effect's transform when needed.

   Inside @media queries from responsive visibility values, the same
   tie-break rule applies. */
.sia-cta__icon {
	opacity:   var(--sia-cta-icon-opacity, 0);
	transform: var(--sia-cta-icon-transform, none);
}

.sia-cta:hover .sia-cta__icon {
	opacity: 1;
	transform: none;
}

/* ─── Stretched link (whole-card click target) ───
   z-index: 5 puts the link above ALL content layers (image z:0, overlay z:1,
   content z:2, icon z:3). Click anywhere on the card surface (including
   over text/title/subtitle/icon) navigates to the link. The link is
   transparent (font-size 0, no bg) so content is visually unaffected.
   Standardized z:5 across all SIA card-style components for stretched-link
   behavior — Rule 8 in the global design system memory. */
.sia-cta__link {
	position: absolute;
	inset: 0;
	z-index: 5;
	font-size: 0;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}
.sia-cta__link:focus-visible {
	outline: 2px solid var(--sia-color-primary, #c5ed3b);
	outline-offset: -2px;
}

/* ─── Grid container — only CTA-Grid-specific bits.
   Container display, grid layout + responsive breakpoints, and empty-state
   styling all live in the shared `assets/css/grid-base.css`. The Grid
   widget root carries both `.sia-grid` and `.sia-ctag`. CTA Grid defaults
   to 2 columns desktop (vs shared default of 3) — the Elementor
   `cta_grid_columns` control emits the per-instance grid-template-columns
   so the shared default only applies if no instance setting is saved. */
.sia-ctag__list > .sia-cta { height: 100%; }   /* always full-cell height (no toggle for CTA) */

/* ─── Bottom-bar nav clearance (v4.5.1) ───
   When the CTA Carousel uses the "Bottom bar" navigation (dots bottom-left
   + arrows bottom-right overlaying the slide), the card content sits at the
   bottom of the card and the dots end up UNDER the title. Reserve a bottom
   clearance on the content equal to the nav row's height + the edge offset
   (mirrors the reference hero's `padding-bottom: 96px`) so the title always
   sits above the nav bar. Scoped to the bottom-bar carousel only — the plain
   Card/Grid and the default "Sides" carousel layout are untouched. The
   `--sia-nav-*` vars are inherited from `.sia-carousel--nav-bar`
   (carousel-base.css); fallbacks keep the calc valid if they're absent. */
.sia-carousel--nav-bar .sia-cta__content {
	margin-bottom: calc(var(--sia-nav-pad, 28px) + var(--sia-nav-btn-size, 46px) + 12px);
}

/* ─── Responsive (cards) ─── */
/* Card padding scales down on small screens — applied to `.sia-cta`
   itself (matches the v3.15.14 move from content-level to card-level
   padding). The desktop default of 32px comes from the Elementor
   `cta_content_padding` control which now targets `.sia-cta`. */
@media (max-width: 768px) {
	.sia-cta__title { font-size: 28px; }
	.sia-cta { padding: 24px; }
}
@media (max-width: 480px) {
	.sia-cta__title { font-size: 24px; }
	.sia-cta { padding: 20px; }
}