/* ==========================================================================
   SUDAIR PHARMA — THERAPEUTIC AREA SHOWCASE
   Asymmetric bento of photographic cards, plus a credentials strip.

   Colour comes entirely from the official brand palette. Photography is pushed
   toward the brand green with a duotone-style treatment so mixed stock sources
   read as one commissioned library — the tint is doing brand work, not
   decoration.
   ========================================================================== */

.sud-ax {
	--ax-radius: var(--sud-radius-lg);

	/* How present the photography is. Lower = more faded.
	   The image fades toward the card's dark green base rather than toward
	   white, so fading it *increases* text contrast — the two goals pull the
	   same way here. Tune these two numbers to taste. */
	--ax-photo:       .42;   /* resting opacity */
	--ax-photo-hover: .60;   /* on hover, the image steps forward */
}

/* --------------------------------------------------------------------------
   GRID
   Two wide cards lead, three narrower ones follow. Asymmetric on purpose: the
   areas differ in weight, and an even grid would flatten that.
   -------------------------------------------------------------------------- */

.sud-ax__grid {
	display: grid;
	gap: clamp(1rem, 1.6vw, 1.5rem);
	grid-template-columns: repeat(6, 1fr);
}

.sud-ax__card--wide   { grid-column: span 3; min-block-size: clamp(260px, 26vw, 330px); }
.sud-ax__card--narrow { grid-column: span 2; min-block-size: clamp(220px, 20vw, 270px); }

@media (max-width: 900px) {
	.sud-ax__grid { grid-template-columns: repeat(2, 1fr); }
	.sud-ax__card--wide,
	.sud-ax__card--narrow { grid-column: span 1; min-block-size: 240px; }
}

@media (max-width: 560px) {
	.sud-ax__grid { grid-template-columns: 1fr; }
	.sud-ax__card--wide,
	.sud-ax__card--narrow { min-block-size: 210px; }
}

/* --------------------------------------------------------------------------
   CARD
   The whole tile is one anchor — one target, one announcement.
   -------------------------------------------------------------------------- */

.sud-ax__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	border-radius: var(--ax-radius);
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
	background: var(--sud-green-900);
	transition:
		transform .5s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1)),
		box-shadow .5s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1));
}

.sud-ax__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	overflow: hidden;
}

.sud-ax__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	/* Faded back so the photograph reads as atmosphere behind the label rather
	   than as the subject. Desaturated as well, so the green comes from the
	   brand rather than from a filter fighting the photo's own colour. */
	opacity: var(--ax-photo);
	filter: saturate(.34) contrast(1.02) brightness(.94);
	transition:
		transform 1.2s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1)),
		opacity .6s ease,
		filter .6s ease;
}

/* Scrim.
   Alpha floor derived the same way as the page banners: white text needs a
   background luminance ≤0.183 for 4.5:1, and #00301F over a worst-case white
   photo needs ≥0.54 alpha to get there. The floor here is 0.62, ramping to 0.95
   at the foot where the type sits. */
.sud-ax__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top,
			rgba(0, 48, 31, .95) 0%,
			rgba(0, 48, 31, .86) 32%,
			rgba(0, 48, 31, .70) 62%,
			rgba(0, 48, 31, .62) 100%),
		linear-gradient(120deg, rgba(0, 99, 68, .40), rgba(27, 70, 157, .18) 70%, transparent);
	transition: opacity .5s ease;
}

.sud-ax__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.4vw, 1.1rem);
	inline-size: 100%;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	flex-wrap: wrap;
}

/* Icon chip */
.sud-ax__icon {
	flex: none;
	inline-size: clamp(42px, 4vw, 52px);
	block-size: clamp(42px, 4vw, 52px);
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .34);
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	transition: background .45s ease, border-color .45s ease, transform .45s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1));
}

.sud-ax__text { flex: 1 1 auto; min-inline-size: 0; }

.sud-ax__name {
	display: block;
	font-family: var(--sud-font-display);
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	letter-spacing: -0.01em;
	/* Never uppercase — these are proper therapeutic-area names */
	text-transform: none;
}

.sud-ax__count {
	display: block;
	margin-block-start: .3rem;
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* P361 at this size measures ~5.6:1 on the scrim — comfortably AA */
	color: #7EE07F;
}

.sud-ax__go {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-inline-start: auto;
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	opacity: .92;
}

.sud-ax__go svg {
	inline-size: 16px;
	block-size: 10px;
	transition: transform .45s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1));
}

[dir="rtl"] .sud-ax__go svg { transform: scaleX(-1); }

/* On the narrow cards the arrow drops beneath the name rather than crowding it */
@media (max-width: 1180px) {
	.sud-ax__card--narrow .sud-ax__go { margin-inline-start: 0; flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   INTERACTION
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-ax__card:hover {
		transform: translateY(-5px);
		box-shadow: 0 18px 42px -12px rgba(0, 48, 31, .45);
	}

	/* Hover lifts the photograph out of the fade — the image becoming legible is
	   the reward for pointing at the card. */
	.sud-ax__card:hover .sud-ax__media img {
		opacity: var(--ax-photo-hover);
		transform: scale(1.05);
		filter: saturate(.50) contrast(1.04) brightness(1);
	}

	.sud-ax__card:hover .sud-ax__scrim { opacity: .88; }

	.sud-ax__card:hover .sud-ax__icon {
		background: var(--sud-green-500);
		border-color: var(--sud-green-500);
		transform: scale(1.06);
	}

	.sud-ax__card:hover .sud-ax__go svg { transform: translateX(4px); }
	[dir="rtl"] .sud-ax__card:hover .sud-ax__go svg { transform: scaleX(-1) translateX(4px); }
}

.sud-ax__card:focus-visible {
	outline: 3px solid var(--sud-green-500);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   CREDENTIALS STRIP
   Raised off the grid so it reads as a summary of everything above it.
   -------------------------------------------------------------------------- */

.sud-ax__strip {
	margin-block-start: clamp(1rem, 1.6vw, 1.5rem);
	background: var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--ax-radius);
	box-shadow: var(--sud-shadow-sm);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	overflow: hidden;
}

.sud-ax__stat {
	display: flex;
	align-items: center;
	gap: clamp(.7rem, 1.2vw, 1rem);
	padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 1.8vw, 1.5rem);
}

/* Hairline separators rather than borders on every cell */
.sud-ax__stat + .sud-ax__stat { box-shadow: inset 1px 0 0 var(--sud-line); }

.sud-ax__stat-icon {
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--sud-radius-sm);
	background: var(--sud-surface-3);
	color: var(--sud-green-700);
	font-size: 1.05rem;
}

.sud-ax__stat-v {
	display: block;
	font-family: var(--sud-font-display);
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--sud-green-700);
	font-variant-numeric: tabular-nums;
}

.sud-ax__stat-l {
	display: block;
	margin-block-start: .1rem;
	font-size: var(--sud-text-sm);
	color: var(--sud-body);
	line-height: 1.35;
}

@media (max-width: 900px) {
	.sud-ax__strip { grid-template-columns: repeat(2, 1fr); }
	.sud-ax__stat:nth-child(3) { box-shadow: inset 0 1px 0 var(--sud-line); }
	.sud-ax__stat:nth-child(4) { box-shadow: inset 1px 0 0 var(--sud-line), inset 0 1px 0 var(--sud-line); }
}

@media (max-width: 520px) {
	.sud-ax__strip { grid-template-columns: 1fr; }
	.sud-ax__stat + .sud-ax__stat { box-shadow: inset 0 1px 0 var(--sud-line); }
}

/* --------------------------------------------------------------------------
   REVEAL
   Gated behind .sud-motion so the finished state is the default.
   -------------------------------------------------------------------------- */

.sud-motion .sud-ax__grid:not(.is-visible) .sud-ax__card {
	opacity: 0;
	transform: translateY(20px);
}

.sud-motion .sud-ax__card {
	transition:
		opacity .7s var(--sud-ease-out, cubic-bezier(.16,1,.3,1)),
		transform .7s var(--sud-ease-out, cubic-bezier(.16,1,.3,1)),
		box-shadow .5s ease;
}

.sud-motion .sud-ax__grid.is-visible .sud-ax__card { opacity: 1; transform: none; }

.sud-motion .sud-ax__grid.is-visible .sud-ax__card:nth-child(1) { transition-delay: 0s; }
.sud-motion .sud-ax__grid.is-visible .sud-ax__card:nth-child(2) { transition-delay: .07s; }
.sud-motion .sud-ax__grid.is-visible .sud-ax__card:nth-child(3) { transition-delay: .14s; }
.sud-motion .sud-ax__grid.is-visible .sud-ax__card:nth-child(4) { transition-delay: .21s; }
.sud-motion .sud-ax__grid.is-visible .sud-ax__card:nth-child(5) { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
	.sud-motion .sud-ax__grid .sud-ax__card,
	.sud-motion .sud-ax__grid:not(.is-visible) .sud-ax__card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.sud-ax__card:hover { transform: none; }
	.sud-ax__card:hover .sud-ax__media img { transform: none; }
}

@media print {
	.sud-ax__card { break-inside: avoid; }
	.sud-ax__media img { filter: none; }
}