/* ==========================================================================
   SUDAIR PHARMA — LOCALIZATION CAPABILITY CARDS

   Four editorial cards: a tall photograph with a white panel overlapping its
   lower half, a circular green icon straddling the join, then number, title and
   description.

   Scoped under .sud-lc, a class that exists on one section of one page. Nothing
   here can reach another section, the header or the footer.

   The overlap is done with a negative margin on the panel rather than absolute
   positioning. That keeps the panel in normal flow, so the card's height is
   still driven by its own text — four cards of unequal description length line
   up at the top and simply end at different points, instead of needing a fixed
   height that would clip the longest one.
   ========================================================================== */

.sud-lc {
	--lc-green: var(--sud-green-700, #006344);
	--lc-deep: #0A4A34;
	--lc-ink: #12312A;
	--lc-body: #55665E;
	--lc-line: #E3EAE6;
	--lc-ease: cubic-bezier(.22, 1, .36, 1);

	--lc-icon: clamp(46px, 3.4vw, 58px);
	--lc-pad: clamp(1.1rem, 1.5vw, 1.5rem);

	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	box-sizing: border-box;
	padding-inline: 24px;
	color: var(--lc-ink);
	font-family: var(--sud-font-body, Roboto, Arial, sans-serif);
}

.sud-lc *,
.sud-lc *::before,
.sud-lc *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.sud-lc .sud-lc__eyebrow {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.75rem, .9vw, .875rem);
	font-weight: 700;
	letter-spacing: .1em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--lc-green);
}

/* The short rule under the eyebrow, as in the reference. */
.sud-lc__rule {
	display: block;
	inline-size: 42px;
	block-size: 3px;
	border-radius: 3px;
	background: var(--lc-green);
	margin-block: .85rem clamp(1.25rem, 2vw, 1.75rem);
}

.sud-lc .sud-lc__title {
	margin: 0;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1.6rem, 3.1vw, 2.75rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.02em;
	color: var(--lc-ink);

	/*
	 * The design system uppercases every h2 site wide. The reference sets this
	 * headline in sentence case, so the transform is switched off here only —
	 * scoped to .sud-lc, every other heading on the site is unaffected.
	 */
	text-transform: none;
}

.sud-lc .sud-lc__lede {
	margin: clamp(1rem, 1.6vw, 1.4rem) 0 0;
	max-inline-size: 68ch;
	font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
	line-height: 1.7;
	color: var(--lc-body);
}

/* --------------------------------------------------------------------------
   THE ROW
   -------------------------------------------------------------------------- */

.sud-lc__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 1.65rem);
	margin: clamp(2rem, 3.6vw, 3.25rem) 0 0;
	padding: 0;
	list-style: none;

	/*
	 * Equal-height cards. The four descriptions differ in length, so left to
	 * themselves the panels ended at four different heights and the row read as
	 * ragged. Stretching the row and letting the panel grow makes every card the
	 * same size, with the green accent landing on one line across all four.
	 */
	align-items: stretch;

	/*
	 * Equal rows as well as equal columns. align-items only levels cards that
	 * share a row, so at two-per-row and one-per-row the cards still ended at
	 * different heights. 1fr rows make every card the same size at every
	 * breakpoint, which is what was asked for.
	 */
	grid-auto-rows: 1fr;
}

.sud-lc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	transition: transform .4s var(--lc-ease);
}

/* --------------------------------------------------------------------------
   PHOTOGRAPH
   -------------------------------------------------------------------------- */

.sud-lc__media {
	position: relative;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--sud-surface-2, #F4F8F6);
}

.sud-lc__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--lc-ease);
}

/* --------------------------------------------------------------------------
   WHITE PANEL

   Pulled up over the photograph. The larger radius on the right mirrors the
   reference's asymmetric treatment.
   -------------------------------------------------------------------------- */

.sud-lc__panel {
	position: relative;
	z-index: 2;
	margin-block-start: -42%;

	/*
	 * Grows to fill whatever height the tallest card sets, which is what keeps
	 * the four bottoms level. The content inside stays top-aligned.
	 *
	 * No right margin: an inset edge left a ragged sliver of the photograph
	 * showing down one side of every panel, at a different depth on each card.
	 * The panel spans the full card width, as it does in the reference.
	 */
	flex: 1 1 auto;
	padding: calc(var(--lc-icon) * .62 + var(--lc-pad)) var(--lc-pad) calc(var(--lc-pad) + 6px);

	background: #fff;
	border-radius: 16px 30px 30px 16px;
	box-shadow:
		0 1px 2px rgba(11, 31, 23, .04),
		0 14px 34px rgba(11, 31, 23, .09);

	transition: box-shadow .4s var(--lc-ease);
}

/* The thin green accent along the bottom edge. */
.sud-lc__panel::after {
	content: '';
	position: absolute;
	inset-inline: var(--lc-pad);
	inset-block-end: 0;
	block-size: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--lc-green);
	opacity: .55;
	transition: opacity .4s var(--lc-ease), inset-inline .4s var(--lc-ease);
}

/* --------------------------------------------------------------------------
   ICON

   Straddles the join between photograph and panel. Anchored to the panel's top
   edge and lifted by 62% of its own height, so it keeps the same relationship
   to the join at every card width.
   -------------------------------------------------------------------------- */

.sud-lc__icon {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: var(--lc-pad);
	transform: translateY(-62%);
	z-index: 3;

	inline-size: var(--lc-icon);
	block-size: var(--lc-icon);
	border-radius: 50%;
	background: var(--lc-deep);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 18px rgba(10, 74, 52, .28);
}

.sud-lc__icon svg {
	inline-size: 52%;
	block-size: 52%;
	display: block;
}

/* --------------------------------------------------------------------------
   PANEL TYPE

   Two classes on the heading rules: the global kit styles `.elementor-kit-5 h3`
   at tag-plus-class weight, which outranks any single class.
   -------------------------------------------------------------------------- */

.sud-lc .sud-lc__num {
	display: block;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
	font-weight: 700;
	color: var(--lc-green);
	margin-block-end: .5rem;
}

.sud-lc .sud-lc__name {
	margin: 0 0 .7rem;
	font-family: var(--sud-font-display, Roboto, Arial, sans-serif);
	font-size: clamp(1rem, 1.25vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.01em;
	color: var(--lc-ink);
	text-transform: none;
	text-wrap: balance;
}

.sud-lc .sud-lc__desc {
	margin: 0;
	font-size: clamp(.8125rem, .95vw, .9375rem);
	line-height: 1.62;
	color: var(--lc-body);
}

/* --------------------------------------------------------------------------
   HOVER

   Restrained: a small lift, a slow zoom inside the fixed frame, and the accent
   firming up. Nothing moves far enough to disturb the row.
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-lc__card:hover { transform: translateY(-6px); }

	.sud-lc__card:hover .sud-lc__media img { transform: scale(1.06); }

	.sud-lc__card:hover .sud-lc__panel {
		box-shadow:
			0 1px 2px rgba(11, 31, 23, .05),
			0 22px 46px rgba(0, 99, 68, .16);
	}

	.sud-lc__card:hover .sud-lc__panel::after {
		opacity: 1;
		inset-inline: calc(var(--lc-pad) * .5);
	}
}

/* --------------------------------------------------------------------------
   RESPONSIVE

   4 / 2 / 1, and the overlap is re-tuned at each step rather than left to
   scale. The panel's pull-up is a PERCENTAGE of the card's width, so a wider
   card in a two-column layout would drag the panel far higher up the
   photograph if the value were not reduced.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.sud-lc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
	.sud-lc__panel { margin-block-start: -26%; }
	.sud-lc__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
	.sud-lc__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }

	/*
	 * One card per row is the widest a card gets, so the overlap is smallest
	 * here. The photograph also goes wider than tall — a 3:4 portrait at full
	 * phone width would push the text most of a screen down.
	 */
	.sud-lc__panel { margin-block-start: -18%; }
	.sud-lc__media { aspect-ratio: 16 / 10; }

	.sud-lc { padding-inline: 24px; }
	.sud-lc .sud-lc__desc { font-size: .9375rem; }
	.sud-lc .sud-lc__name { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-lc__card,
	.sud-lc__media img,
	.sud-lc__panel,
	.sud-lc__panel::after { transition: none; }

	.sud-lc__card:hover { transform: none; }
	.sud-lc__card:hover .sud-lc__media img { transform: none; }
}