/* ==========================================================================
   SUDAIR PHARMA — GREEN GLASS CARD TREATMENT

   A frosted overlay for the brand-green cards in three named sections:
     • Strategic Partnerships  → Strategic Collaboration Highlights
     • CSR                     → Scientific & Medical Partnerships
     • Manufacture             → Manufacturing Technologies

   Applied only to elements tagged by glass-cards.js, which matches those three
   headings and then the brand green itself. Nothing here can reach a green
   element anywhere else on the site.

   WHY GRADIENTS AND NOT backdrop-filter
   These cards are opaque: solid #43B649, and several sit on a plain white page.
   backdrop-filter blurs what is BEHIND an element, so on an opaque card it has
   nothing to work on and renders no differently. Making the card translucent to
   give it something to blur would have meant letting the page show through and
   diluting the brand green, which the brief rules out. The glass is therefore
   built from layered gradients, an inset highlight and a soft shadow — the same
   read, on a surface that can actually carry it.
   ========================================================================== */

/*
 * Selectors are doubled up — .sud-glass .sud-glass__card — deliberately.
 * Elementor writes its own per-element rules at .elementor-element-xxxx, which
 * is a single class, and its post CSS loads after the theme's. A single-class
 * selector here ties on specificity and loses on order, so the glass silently
 * did not render. Two classes settle it without needing !important.
 */
.sud-glass .sud-glass__card {
	position: relative;

	/*
	 * The card's own outer shadow is left to Elementor.
	 *
	 * It writes one at .elementor-549 .elementor-element-xxxx — three classes,
	 * so it outranks anything sensible this file could say, and overriding it
	 * would mean !important or a specificity pile-up. It is also the client's
	 * existing setting, which the brief says to leave alone. The depth the brief
	 * asks for is therefore delivered as an inner highlight on the overlay
	 * below, which nothing else competes for.
	 */
	transition: box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}

/*
 * THE GLASS ITSELF, on a pseudo-element rather than the card's background-image.
 *
 * Elementor lazy-loads container backgrounds with a rule that sets
 * `background-image: none !important` on every descendant of the 4th and later
 * top-level containers until its observer fires. All three of these card grids
 * sit past that threshold, so a background-image glass was being blanked — the
 * same trap that blanked the map's icons and the product-card marks earlier.
 * That rule targets elements; it cannot reach a ::before, so the glass survives
 * here regardless of when the observer runs.
 *
 * Top: a white sheen — the glass highlight.
 * Bottom: a slight deepening of the same green family.
 *
 * The lower half is doing real work, not decoration. White text on #43B649
 * measures 2.62:1 — already under AA before any change — and a plain white
 * glass layer would lighten the ground and make it worse. Deepening where the
 * copy sits takes it to 3.86:1 instead. The brief allows exactly this:
 * strengthen the ground behind the text while keeping the glass appearance.
 */
.sud-glass .sud-glass__card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;      /* follows whatever corner the card already has */
	pointer-events: none;
	z-index: 0;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .18) 0%,
			rgba(255, 255, 255, .07) 30%,
			rgba(0, 52, 34, .10) 68%,
			rgba(0, 52, 34, .26) 100%
		),
		radial-gradient(130% 75% at 50% -12%, rgba(255, 255, 255, .16), transparent 62%);

	/*
	 * The inner highlight and the hairline "border", both as inset shadows on the
	 * overlay. A real border would add to the box and shift every card by a
	 * pixel; putting them here also keeps them clear of the per-element shadow
	 * Elementor sets on the card itself.
	 */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .32),      /* top highlight */
		inset 0 0 0 1px rgba(255, 255, 255, .20);    /* the "border" */

	transition:
		background .3s cubic-bezier(.22, 1, .36, 1),
		box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}

/*
 * Everything inside the card sits above the glass. Without this the overlay
 * would paint over the images and text — the one thing the brief rules out.
 */
.sud-glass .sud-glass__card > * {
	position: relative;
	z-index: 1;
}

/*
 * The element that lifts on hover — not always the same element that carries
 * the glass. On Strategic Partnerships the green panel is absolutely positioned
 * inside its card and is itself the existing hover reveal; translating it would
 * fight that interaction, so the lift goes on the card around it instead.
 */
.sud-glass__lift {
	transition:
		transform .3s cubic-bezier(.22, 1, .36, 1),
		box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {
	.sud-glass .sud-glass__lift:hover,
	.sud-glass.sud-glass__lift:hover {
		transform: translateY(-4px);
	}

	/* A brighter sheen and a stronger inner highlight. The green itself is never
	   darkened on hover — only the glass over it lifts. */
	.sud-glass .sud-glass__lift:hover .sud-glass__card::before,
	.sud-glass .sud-glass__card.sud-glass__lift:hover::before {
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .42),
			inset 0 0 0 1px rgba(255, 255, 255, .28);
	}

	.sud-glass .sud-glass__lift:hover .sud-glass__card::before,
	.sud-glass .sud-glass__card.sud-glass__lift:hover::before {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, .26) 0%,
				rgba(255, 255, 255, .11) 30%,
				rgba(0, 52, 34, .09) 68%,
				rgba(0, 52, 34, .24) 100%
			),
			radial-gradient(130% 75% at 50% -12%, rgba(255, 255, 255, .22), transparent 62%);
	}
}

/* The copy is never blurred or dimmed — the glass sits behind it. Stated so a
   filter added to the card later cannot start reaching the text. */
.sud-glass .sud-glass__card > * { filter: none; }

@media (prefers-reduced-motion: reduce) {
	.sud-glass .sud-glass__lift,
	.sud-glass .sud-glass__card,
	.sud-glass .sud-glass__card::before { transition: none !important; }
	.sud-glass .sud-glass__lift:hover { transform: none; }
}