/* ============================================================
   Cubiq Icon Cards — icon + description card grid

   The card design is a direct port of the theme's
   template-parts/blocks/cubiq_work_with_us_icon_info_grid.php
   ("Investment in you."), so the two read as the same component
   wherever they appear. Every value below is that block's
   Tailwind utility translated 1:1 — the utility is named in a
   comment beside anything non-obvious, so the pair can be kept
   in step if the theme block ever changes.

   The one deliberate departure: that block sits on an animated
   blue/green gradient (.work-with-us-block::before). This module
   keeps its own flat navy section instead.
   ============================================================ */

.cic-section {
	background: #020b31;
	padding: clamp(80px, 10vw, 140px) 0;
	font-family: "Open Sauce One", sans-serif;
	color: rgba(255, 255, 255, 0.78);
}

.cic-inner {
	max-width: 92rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* ── Section Heading ──────────────────────────────────────── */
/* The reference heading is text-5xl / md:text-[108px]. This one
   stays on the site-wide display scale so it sits level with the
   other modules on a page rather than towering over them. */
.cic-heading {
	font-size: clamp(1.875rem, 4.2vw, 3.375rem);
	color: #fff;
	margin: 0 0 clamp(40px, 5.5vw, 72px);
	max-width: 840px;
  /* Shared display-heading treatment — matches .cqh-title in cubiq-hero-glow.
     Grep "display-heading treatment" to find every module using it. */
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.032em;
}

/* ── Card Grid ────────────────────────────────────────────── */
/* grid gap-2 md:gap-3 lg:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 */
.cic-grid {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cic-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
	.cic-grid { gap: 12px; }
}

/* The column choice only takes effect at the reference's lg breakpoint —
   below that everything collapses to the 2-up / 1-up ladder above. */
@media (min-width: 1024px) {
	.cic-grid { gap: 16px; }
	.cic-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.cic-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cic-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Individual Card ─────────────────────────────────────── */
/* min-h-[280px] backdrop-blur-[20rem] bg-black/10 hover:bg-black/20
   border-l border-t border-white/15 rounded-2xl p-8
   flex flex-col justify-end gap-4 transition-colors duration-300 ease-out */
.cic-card {
	position: relative;          /* anchors the corner icon */
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;   /* justify-end — copy sits on the floor of the card */
	gap: 16px;
	padding: 32px;
	border-radius: 16px;
	background-color: rgba(0, 0, 0, 0.10);
	/* The reference block carries `backdrop-blur-[20rem]` here. Deliberately
	   dropped, for two reasons.

	   It never did anything: that block sits on an animated blue/green
	   gradient and has something worth blurring, whereas this module's
	   section is a flat #020b31 and so is the body behind it. Blurring a
	   single flat colour returns the same flat colour.

	   And it was actively harmful. A 320px radius makes Chrome take a
	   heavily downsampled snapshot of the backdrop and edge-clamp it against
	   the card's own compositing layer; when a scroll forces that layer to
	   update, the result resolves to a flat pale wash — cards turning grey
	   mid-scroll, with nothing grey anywhere behind them in the DOM. It only
	   hit revealed cards, because the entrance is what gives them a live
	   compositing layer in the first place.

	   If this module is ever placed over something with real variation (the
	   cursor-lit rings, say), reinstate it at a sane radius — 20rem is a
	   Tailwind arbitrary value, not a considered one. */
	/* Only two edges are drawn, which is what gives the card its
	   lit-from-the-top-left look rather than a boxed-in outline. */
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	border-top:  1px solid rgba(255, 255, 255, 0.15);

	/* The rest state carries the same shadows as the hover state at zero
	   alpha. box-shadow doesn't interpolate cleanly out of `none`, so
	   matching the list here is what makes them fade in rather than pop.
	   The teal now comes from the bloom below, not from an inset — one
	   light source per direction reads cleaner than an all-round halo. */
	box-shadow:
		inset 0 1px 0  rgba(255, 255, 255, 0),
		0 20px 44px -26px rgba(0, 0, 3, 0);
	/* The bulge is deliberately small — at a 294px card 1.014 is about 4px
	   of growth, which reads as the tile leaning toward the cursor rather
	   than jumping. Kept in a variable so reduced-motion can flatten it to
	   1 without restating the hover rule. */
	--cic-hover-scale: 1.014;
	scale: 1;

	/* How much of the floor bloom shows when the card is at rest. Drop to 0
	   for a hover-only effect. */
	--cic-bloom-rest: .5;

	/* Shared by the rest state and the post-entrance state below, so the
	   hover animates identically whether or not the reveal has run. */
	--cic-tr:
		background-color 300ms ease-out,
		border-color     300ms ease-out,
		scale            380ms cubic-bezier(.22, .84, .44, 1),
		box-shadow       380ms ease-out;
	transition: var(--cic-tr);
}

/* ── Floor bloom ──────────────────────────────────────────────
   A wide, shallow ellipse whose centre sits below the card's bottom
   edge, so only its crown shows — the same curve you get from the orb
   rising behind the discs, and it runs the orb's teal → blue → indigo
   ramp for the same reason. Sitting at 50% it reads as light coming up
   through the floor of the tile rather than a band along the edge. */
.cic-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: var(--cic-bloom-rest);
	transition: opacity 380ms ease-out;
	background: radial-gradient(115% 58% at 50% 118%,
		rgba(101, 200, 192, .30)  0%,
		rgba( 79, 150, 214, .17) 34%,
		rgba(114,  89, 191, .08) 60%,
		transparent              80%);
}

/* The bloom is a positioned pseudo-element, so it paints above ordinary
   in-flow content. Lifting the copy and icon over it keeps the text off
   the light — the same trap that hid the process module's sheets. */
.cic-card-body {
	position: relative;
	z-index: 1;
}

@media (hover: hover) {
	.cic-card:hover {
		background-color: rgba(0, 0, 0, 0.20);
		border-color: rgba(255, 255, 255, 0.28);
		scale: var(--cic-hover-scale);
		/* Top edge catches a little more light, and a grounding shadow so
		   the bulge reads as the tile lifting off the panel rather than
		   simply getting bigger. */
		box-shadow:
			inset 0 1px 0  rgba(255, 255, 255, .10),
			0 20px 44px -26px rgba(0, 0, 3, .75);
		/* A scaled tile must paint over its neighbours — grid siblings
		   otherwise overlap it in source order. */
		z-index: 1;
	}

	.cic-card:hover::before      { opacity: 1; }
	.cic-card:hover .cic-icon-wrap { opacity: 0.68; }
}

/* JS sets opacity/transform inline before the observer fires.
   These classes handle the entrance once JS is confirmed active.

   This rule keeps governing after the reveal (--in sets no transition of
   its own), so it has to carry the hover transitions too — without the
   var() the glow and bulge would snap on every revealed card. */
.cic-card--ready {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity   0.55s ease,
		transform 0.55s cubic-bezier(.22,.84,.44,1),
		var(--cic-tr);
}

.cic-card--in {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Honour a reduced-motion preference by dropping the movement only — the
   colour and glow still confirm the hover. Must sit after .cic-card--ready
   to win on source order, since the two have equal specificity. */
@media (prefers-reduced-motion: reduce) {
	.cic-card {
		--cic-hover-scale: 1;
		--cic-tr:
			background-color 300ms ease-out,
			border-color     300ms ease-out,
			box-shadow       300ms ease-out;
	}
}

/* ── Icon ─────────────────────────────────────────────────── */
/* w-8 h-8 absolute top-6 right-6 grayscale brightness-[2] opacity-50 */
.cic-icon-wrap {
	position: absolute;
	z-index: 1;                  /* above the floor bloom */
	top: 24px;
	right: 24px;
	width: 32px;
	height: 32px;
	/* Desaturated and lifted rather than tinted — the icon is a quiet
	   marker in the corner, not a focal point. It brightens a little on
	   hover so the tile feels alive all over, not just at its edges. */
	filter: grayscale(1) brightness(2);
	opacity: 0.5;
	transition: opacity 300ms ease-out;
}

.cic-icon-wrap svg,
.cic-icon-wrap img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* Inlined SVGs have their own fill stripped on the way in, so give them
   one to desaturate — without this they render black and vanish. */
.cic-icon-wrap svg {
	fill: #65C8C0;
}

/* ── Card Content ─────────────────────────────────────────── */
.cic-card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* text-2xl font-cubiq-light font-extralight text-white leading-[1.5rem].
   Declared at 300 because Open Sauce One only ships a Light face — the
   reference's extralight resolves to the same weight. */
.cic-card-title {
	font-size: 1.5rem;
	font-weight: 300;
	color: #fff;
	line-height: 1.5rem;
	letter-spacing: normal;
	margin: 0;
}

/* text-base leading-[1.25rem] text-gray-300 font-cubiq-light
   font-extralight tracking-[1px] */
.cic-card-desc {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.25rem;
	letter-spacing: 1px;
	color: #d1d5db;
	margin: 0;
}