/* ==========================================================================
   SUDAIR PHARMA — STRATEGIC COLLABORATION HIGHLIGHT CARDS
   Scoped to .partner-card / .partner-logo / .partner-content, which exist only
   in this one section on the Strategic Partnerships page.

   THE CAUSE OF THE HEIGHT
   Each outer .partner-card is a flex column holding two children: the visible
   card (~270px) and the hover description (~250px). The description was hidden
   with opacity/visibility but left at position:relative, so it kept its place
   in flow — the card reserved 250px for something nobody could see. Measured:
   603px of card around 270px of content.

   Taking the panel out of flow is the fix. Everything else here is tidying that
   the same section needs anyway: the four cards carried hand-tuned negative
   margins (-38, -42, -13, +16px) that made them 270/273/286/268 — four
   different heights for the same component.
   ========================================================================== */

.partner-card {
	--pc-pad: clamp(1.1rem, 1.6vw, 1.5rem);
	--pc-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	/* Height now comes from the visible card alone. */
	min-height: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: var(--sud-radius-lg, 24px);
	isolation: isolate;
	transition:
		transform .34s var(--pc-ease),
		box-shadow .34s var(--pc-ease),
		border-color .34s var(--pc-ease);
}

/* --------------------------------------------------------------------------
   THE VISIBLE CARD
   -------------------------------------------------------------------------- */

.partner-card > .partner-logo {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: clamp(.75rem, 1.2vw, 1.1rem) !important;

	/* One height for all four, content-led. */
	min-height: 300px !important;
	block-size: 100% !important;
	padding: var(--pc-pad) !important;
	margin: 0 !important;
	inline-size: 100% !important;
	background: var(--sud-surface);
	transition: background .34s var(--pc-ease);
}

/*
 * Clear the per-card nudges. Four instances of one component had four different
 * negative margins, which is what made them four different heights; spacing is
 * handled by the flex gap above instead.
 */
.partner-card > .partner-logo > * {
	margin: 0 !important;
	inline-size: 100%;
}

/* Number — small, quiet, top of the card. */
.partner-card > .partner-logo > *:first-child {
	flex: 0 0 auto;
	text-align: center;
}

/* Logo block — takes the slack so the button always lands at the same place. */
.partner-card > .partner-logo > *:nth-child(2) {
	flex: 1 1 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-block-size: 0;
}

/* Consistent logo sizing regardless of the source image's own proportions. */
.partner-card > .partner-logo img {
	max-block-size: 74px;
	inline-size: auto;
	max-inline-size: 80%;
	object-fit: contain;
	margin-inline: auto;
	display: block;
}

/* Button — pinned to the foot, identical across all four. */
.partner-card > .partner-logo > *:last-child {
	flex: 0 0 auto;
	margin-block-start: auto !important;
	display: flex !important;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   HOVER PANEL
   Out of flow, so it can never contribute to the card's height — which was the
   original defect. It covers the card rather than extending it.
   -------------------------------------------------------------------------- */

.partner-card > .partner-content {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2;

	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: .5rem;
	padding: var(--pc-pad) !important;
	margin: 0 !important;
	inline-size: auto !important;
	block-size: auto !important;
	min-height: 0 !important;

	background: var(--sud-surface);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 10px, 0);
	transition:
		opacity .34s var(--pc-ease),
		transform .34s var(--pc-ease),
		visibility 0s linear .34s;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (hover: hover) {
	.partner-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 16px 38px rgba(11, 31, 23, .12);
		border-color: var(--sud-green-500);
	}

	.partner-card:hover > .partner-content {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s, 0s, 0s;
	}
}

/* Keyboard parity: the panel is reachable without a pointer. */
.partner-card:focus-within > .partner-content {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s, 0s, 0s;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Desktop 4, tablet 2, mobile 1 — set on the row that holds the cards.
   -------------------------------------------------------------------------- */

/*
 * The row that holds the cards is an Elementor container with flex-wrap:nowrap
 * and no class of its own, so it is reached through :has(). Without unsetting
 * that, tablet kept all four on one line at 141px wide each.
 */
@media (max-width: 1024px) {
	.e-con:has(> .partner-card) {
		flex-wrap: wrap !important;
		align-items: stretch !important;
	}

	.partner-card {
		flex: 1 1 calc(50% - 10px) !important;
		max-inline-size: calc(50% - 10px) !important;
	}

	.partner-card > .partner-logo { min-height: 280px !important; }
}

@media (max-width: 600px) {
	.partner-card {
		flex: 1 1 100% !important;
		max-inline-size: 100% !important;
	}

	.partner-card > .partner-logo { min-height: 260px !important; }
	.partner-card > .partner-logo img { max-block-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.partner-card,
	.partner-card > .partner-content { transition: none !important; }
	.partner-card:hover { transform: none; }
}