/*
 * SIA Check Grid — image cards in a CSS grid with a two-tint checkerboard
 * overlay, optional hover zoom and a 3D depth lift.
 *
 * CHECKERBOARD
 * The tint of a card is (row + column) % 2, but the column count is a
 * responsive setting while PHP renders the markup once. So render() stamps one
 * parity class per device on every card (`--dk0/--dk1` for desktop, plus one
 * per active breakpoint) and emits a small per-instance stylesheet that sets
 * `--cg-tint` for whichever breakpoint is in force. The board therefore stays
 * alternating at any column count, including the even-column case where each
 * row shifts by one (4 cols → A B A B / B A B A).
 *
 * EFFECTS
 * Two independent modes, and they share almost nothing:
 *   zoom (`--zoom` / `--depth`) — hover only. The media layer scales and the
 *     copy slides up while the media slides down; the two move by different
 *     amounts, which is what reads as depth. Deliberately a 2D translate, not
 *     translateZ: under a perspective a layer moving toward the viewer is
 *     magnified, and the text visibly grew (fixed in v4.39.0). This mode keeps
 *     the card clipped and bleeds its media layer by `--cg-bleed`.
 *   tilt (`--tilt`) — pointer-driven. THE CARD ITSELF ROTATES; see the block
 *     below. Same architecture as the 3D Card widget (v5.0.2).
 *
 * TINTS
 * `--cg-tint-a` / `--cg-tint-b` are full `background` values, inlined on the
 * root by render() — so each can be a flat color OR a gradient.
 */

.sia-cg {
	--cg-tint-a: rgba(35, 40, 110, 0.78);
	--cg-tint-b: rgba(178, 20, 90, 0.78);
	--cg-tint: var(--cg-tint-a);
	--cg-zoom: 1.1;
	--cg-depth: 14px;
	--cg-bg-shift: 10px;
	--cg-transition: 0.45s;
	/* 3D mode */
	--cg-persp: 900px;
	--cg-tilt-bg: 30px;
	--cg-tilt-txt: 18px;
	--cg-tilt-lift: 50px;
	--cg-tilt-img-scale: 1.25;
	--sia-tilt-rx: 0deg;
	--sia-tilt-ry: 0deg;
	--sia-tilt-px: 0;
	--sia-tilt-py: 0;
	--cg-icon-shift: 5px;
}

.sia-cg__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* ─── Card ─── */
.sia-cg__item {
	position: relative;
	display: block;
	min-height: 290px;
	overflow: hidden;
	border-radius: 8px;
	background-color: #2b2f6b; /* shows when a card has no image */
	text-decoration: none;
	color: inherit;
	isolation: isolate; /* keeps the tint's blending local to the card */
}
a.sia-cg__item { cursor: pointer; }

/* Inner wrapper — see render(). In zoom mode it's an inert full-size box; in
   tilt mode it becomes the 3D context. */
.sia-cg__inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
}

/* ─── 3D mode (v5.0.2 — same architecture as the 3D Card widget) ───
   THE CARD ITSELF ROTATES. Its outline turns with everything on it, which is
   the strongest depth cue there is; rotating only the inner layers (as this did
   before) leaves a fixed edge that every moving layer eventually mismatches,
   and that mismatch shows as a seam no amount of over-sizing hides.

   Consequences, and why each is deliberate:
     · The item is NOT clipped in this mode. `overflow: hidden` would slice its
       corners the moment it tilts past its own bounds, and would force
       `transform-style` back to `flat`, collapsing the depth of everything
       inside. (Zoom mode keeps its clip — it needs one, and never rotates.)
     · The photo gets a FIXED rounded window instead. It never moves, so it
       can't expose an edge; the parallax happens to the image inside it.
     · `perspective()` is a transform function, not the property: the property
       would need an ancestor, and the grid is a poor place for one — a single
       shared vanishing point would make every card lean toward the same spot. */
.sia-cg--tilt .sia-cg__item {
	overflow: visible;
	transform-style: preserve-3d;
	transform:
		perspective(var(--cg-persp, 900px))
		rotateX(var(--sia-tilt-rx, 0deg))
		rotateY(var(--sia-tilt-ry, 0deg));
	transition: transform var(--cg-transition, 0.45s) cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}
/* Unlike the standalone 3D Card, these cards sit in a tight grid — an unclipped
   card that tilts now reaches over its neighbours, so the one being pointed at
   has to draw on top or the next card's edge cuts across it. */
.sia-cg--tilt .sia-cg__item[data-sia-tilt-active] {
	z-index: 2;
}
/* A plain element in the middle of the chain would FLATTEN its children, so it
   has to pass the 3D context through. It carries no transform of its own. */
.sia-cg--tilt .sia-cg__inner {
	transform-style: preserve-3d;
}
/* The photo's window: fixed, rounded, clipped — the only clipping in this mode. */
.sia-cg--tilt .sia-cg__media {
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	transform: none;
}
/* The photo slides against the pointer inside that window, over-scaled so the
   slide never drags an edge into the frame. */
.sia-cg--tilt .sia-cg__img {
	transform:
		translate3d(
			calc(var(--sia-tilt-px, 0) * var(--cg-tilt-bg, 30px) * -1),
			calc(var(--sia-tilt-py, 0) * var(--cg-tilt-bg, 30px) * -1),
			0
		)
		scale(var(--cg-tilt-img-scale, 1.25));
	transition: transform var(--cg-transition, 0.45s) cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* The copy floats in front of the card surface and travels the other way — the
   two halves of the parallax. One depth and one travel for the whole block, so
   the lines can't drift apart at different speeds. */
.sia-cg--tilt .sia-cg__body {
	transform-style: preserve-3d;
	transform:
		translateZ(var(--cg-tilt-lift, 50px))
		translate3d(
			calc(var(--sia-tilt-px, 0) * var(--cg-tilt-txt, 18px)),
			calc(var(--sia-tilt-py, 0) * var(--cg-tilt-txt, 18px)),
			0
		);
	transition: transform var(--cg-transition, 0.45s) cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* The tint gets no transform: it covers the fixed window, and the photo moves
   underneath it. */

/* Follow the pointer with no easing while it's inside; the easing is for the
   settle-back, otherwise every layer lags and the separation smears. */
.sia-cg--tilt .sia-cg__item[data-sia-tilt-active],
.sia-cg--tilt .sia-cg__item[data-sia-tilt-active] .sia-cg__img,
.sia-cg--tilt .sia-cg__item[data-sia-tilt-active] .sia-cg__body {
	transition: none;
}

/* ─── Media layer ─── */
/* Media layer — holds the photo AND the tint, so the two can never fall out of
   register. Bled out on every side by `--cg-bleed`, which the effect modes below
   derive from their own settings; the card's overflow clips the excess. */
.sia-cg__media {
	position: absolute;
	inset: calc(var(--cg-bleed, 0px) * -1);
	z-index: 0;
	overflow: hidden;
}
.sia-cg__img {
	width: 100% !important;
	/* `!important` is load-bearing: theme/plugin `img { height: auto }` rules
	   (Blocksy, Elementor, and sia-discounts' `body [class*=" sia-"] img`)
	   otherwise win over a plain `height: 100%`, the image keeps its natural
	   ratio, and object-fit has no fixed box to work in — the documented
	   Logo Gallery / Hero Slider case. */
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--cg-transition, 0.45s) ease;
	will-change: transform;
}

/* ─── Tint layer (the checkerboard) ───
   Inside `.sia-cg__media`, so `inset: 0` here means "the whole bled-out media
   box" — the tint therefore covers exactly as much as the photo does, at every
   travel distance and tilt angle, and needs no transform of its own. */
.sia-cg__tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background: var(--cg-tint, var(--cg-tint-a));
	transition: background var(--cg-transition, 0.45s) ease;
	pointer-events: none;
}

/* ─── Content layer ─── */
.sia-cg__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: inherit;
	padding: 26px;
	box-sizing: border-box;
	transition: transform var(--cg-transition, 0.45s) ease;
}
.sia-cg__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
.sia-cg__subtitle {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}
.sia-cg__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #F5C542;
	align-self: flex-start;
}
.sia-cg__btn-icon {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 1;
	transition: transform var(--cg-transition, 0.45s) ease;
}
.sia-cg__btn-icon svg,
.sia-cg__btn-icon i {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* ─── Hover: zoom + icon slide ─── */
.sia-cg--zoom .sia-cg__item:hover .sia-cg__img {
	transform: scale(var(--cg-zoom, 1.1));
}
.sia-cg__item:hover .sia-cg__btn--icon-after .sia-cg__btn-icon {
	transform: translateX(var(--cg-icon-shift, 5px));
}
.sia-cg__item:hover .sia-cg__btn--icon-before .sia-cg__btn-icon {
	transform: translateX(calc(var(--cg-icon-shift, 5px) * -1));
}

/* Zoom mode bleeds by its own slide distance; the hover scale grows the image
   outward from the centre, so it needs no extra allowance. */
.sia-cg--depth {
	--cg-bleed: var(--cg-bg-shift, 10px);
}

/* ─── Hover: the two planes separate ───
   The copy block slides UP as one unit while the media slides DOWN — opposite
   directions, which is what reads as two separate planes. (v4.39.0 note: this
   is deliberately a 2D translate, not translateZ inside a perspective, because
   a layer approaching the viewer gets magnified and the text visibly grew.)
   Each side has its own distance so the separation can be tuned, or one side
   pinned by setting its distance to 0. */
.sia-cg--depth .sia-cg__item:hover .sia-cg__body {
	transform: translateY(calc(var(--cg-depth, 14px) * -1));
}
.sia-cg--depth .sia-cg__item:hover .sia-cg__media {
	transform: translateY(var(--cg-bg-shift, 10px));
}
.sia-cg__media {
	transition: transform var(--cg-transition, 0.45s) ease;
}

/* Checkerboard parity rules are NOT here — they're emitted per widget instance
   by render(), because they must switch at Elementor's ACTUAL breakpoints (which
   a site can customise, and which can include extra devices like `laptop`).
   Hardcoding 1024/767 here left a width band where the grid had already changed
   column count while the tint pattern hadn't, painting e.g. a 2-column grid with
   the 3-column sequence. See the comment on breakpoints() in class-widget.php. */

/* Editor-only empty notice. */
.sia-cg--empty {
	padding: 22px;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.sia-cg__img,
	.sia-cg__body,
	.sia-cg__media,
	.sia-cg__btn-icon {
		transition: none;
	}
	.sia-cg--zoom .sia-cg__item:hover .sia-cg__img,
	.sia-cg--depth .sia-cg__item:hover .sia-cg__body,
	.sia-cg--depth .sia-cg__item:hover .sia-cg__media,
	.sia-cg--tilt .sia-cg__item,
	.sia-cg--tilt .sia-cg__img,
	.sia-cg--tilt .sia-cg__body,
	.sia-cg__item:hover .sia-cg__btn-icon {
		transform: none;
	}
}