/* ── ApplicationsGrid Block ───────────────────────────────────────────────── */

/* ── Section: py-24 md:py-32 lg:py-40 ──────────────────────────────────────── */

.ag-section {
	padding-top:    6rem;   /* py-24 */
	padding-bottom: 6rem;
	background:     #ffffff; /* bg-background */
}

@media (min-width: 768px) {
	.ag-section {
		padding-top:    8rem;  /* md:py-32 */
		padding-bottom: 8rem;
	}
}

@media (min-width: 1024px) {
	.ag-section {
		padding-top:    10rem; /* lg:py-40 */
		padding-bottom: 10rem;
	}
}

/* ── Header grid: grid-cols-1 lg:grid-cols-12 gap-10 mb-12 lg:mb-16 ─────────── */

.ag-header-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   2.5rem; /* gap-10 */
	margin-bottom:         3rem;   /* mb-12 */
}

@media (min-width: 1024px) {
	.ag-header-grid {
		grid-template-columns: repeat(12, 1fr);
		margin-bottom:         4rem; /* lg:mb-16 */
	}
}

/* ── Title column: lg:col-span-5 ─────────────────────────────────────────── */

.ag-title-col {
	/* mobile: full width; lg: col-span-5 */
}

@media (min-width: 1024px) {
	.ag-title-col {
		grid-column: span 5;
	}
}

/* .eyebrow and .display-xl — extracted to style.css globals (used by Legacy, CoreOfferings, etc.) */
/* ApplicationsGrid uses the global .eyebrow and .display-xl classes directly. */

/* eyebrow margin override — source applies mb-5 inside ApplicationsGrid header */
.ag-title-col .eyebrow {
	margin-bottom: 1.25rem; /* mb-5 */
}

/* ── Description: lg:col-span-6 lg:col-start-7 text-foreground/70 text-base lg:text-lg leading-relaxed self-end */

.ag-description {
	font-family:  var(--font-body);
	font-size:    1rem;          /* text-base */
	line-height:  1.625;         /* leading-relaxed */
	color:        rgba(11, 11, 15, 0.70); /* text-foreground/70 */
	margin:       0;
	align-self:   end;           /* self-end */
}

@media (min-width: 1024px) {
	.ag-description {
		grid-column: 7 / span 6; /* lg:col-start-7 lg:col-span-6 */
		font-size:   1.125rem;   /* lg:text-lg */
	}
}

/* ── Cards grid: grid-cols-1 md:grid-cols-3 gap-1.5 ────────────────────────── */

.ag-cards-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   0.375rem; /* gap-1.5 = 6px */
}

@media (min-width: 768px) {
	.ag-cards-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Card: group relative block aspect-[4/5] overflow-hidden bg-near-black ──── */

.ag-card {
	position:        relative;
	display:         block;
	aspect-ratio:    4 / 5;
	overflow:        hidden;
	background:      #0B0B0F;
	text-decoration: none;
}

/* ── Card image: absolute inset-0 h-full w-full object-cover
   transition-transform duration-[1200ms] ease-out
   opacity-90 group-hover:opacity-100 group-hover:scale-105 ────────────────── */

.ag-card__img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	opacity:    0.90;
	transition: transform 1200ms ease-out, opacity 1200ms ease-out;
}

.ag-card:hover .ag-card__img {
	transform: scale(1.05);
	opacity:   1;
}

/* ── Gradient overlay: bg-gradient-to-t from-near-black via-near-black/30 to-transparent */

.ag-card__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top,
		rgba(11, 11, 15, 1.00),
		rgba(11, 11, 15, 0.30) 50%,
		transparent
	);
}

/* ── Text content: absolute inset-0 p-8 lg:p-10 flex flex-col justify-end text-white */

.ag-card__content {
	position:        absolute;
	inset:           0;
	padding:         2rem;   /* p-8 */
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	color:           #ffffff;
}

@media (min-width: 1024px) {
	.ag-card__content {
		padding: 2.5rem; /* lg:p-10 */
	}
}

/* ── Subtitle (eyebrow-light): font-display text-xs font-semibold uppercase tracking-[0.18em] text-white/70 mb-3 */

.ag-card__subtitle {
	font-family:    var(--font-display);
	font-size:      0.75rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color:          rgba(255, 255, 255, 0.70);
	margin-bottom:  0.75rem; /* mb-3 */
}

/* ── Card title (display-lg): font-weight:700 line-height:1.05 letter-spacing:-0.015em
   font-size:clamp(1.75rem,3.5vw,3rem) text-white ────────────────────────────── */

.ag-card__title {
	font-family:    var(--font-display);
	font-weight:    700;
	line-height:    1.05;
	letter-spacing: -0.015em;
	font-size:      clamp(1.75rem, 3.5vw, 3rem);
	color:          #ffffff;
}

/* ── Hover CTA: mt-5 inline-flex items-center gap-2 text-[12px] font-display
   font-semibold uppercase tracking-[0.16em] opacity-0 group-hover:opacity-100 transition-opacity */

.ag-card__cta {
	margin-top:      1.25rem; /* mt-5 */
	display:         inline-flex;
	align-items:     center;
	gap:             0.5rem;  /* gap-2 */
	font-family:     var(--font-display);
	font-size:       0.75rem; /* text-[12px] */
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.16em;
	color:           #ffffff;
	opacity:         0;
	transition:      opacity 150ms ease;
}

.ag-card:hover .ag-card__cta {
	opacity: 1;
}

/* [data-reveal] — extracted to style.css globals */