/* ==========================================================================
   SUDAIR PHARMA — TAB SET
   Selectable cards over a shared content panel.

   Scoped entirely under .sud-tabs. These class names exist nowhere else, so
   nothing here reaches the header, the footer, or any other section.

   Colours are the two named in the brief: #0B1F17 for the active ground and
   #43B649 for hover and focus, both already in the design system as
   --sud-ink and --sud-green-500.
   ========================================================================== */

.sud-tabs {
	--tabs-radius: var(--sud-radius-lg, 24px);
	--tabs-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   THE STRIP
   One row on desktop, wrapping to two on narrower screens. Deliberately not a
   horizontal scroller: six labels of this length in a scroller hide half the
   set behind a gesture nobody is prompted to make.
   -------------------------------------------------------------------------- */

.sud-tabs__strip {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(.5rem, .8vw, .75rem);
	margin-block-end: clamp(1rem, 1.6vw, 1.5rem);
}

@media (max-width: 1100px) { .sud-tabs__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .sud-tabs__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   TAB
   -------------------------------------------------------------------------- */

.sud-tabs .sud-tabs__tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-block-size: clamp(84px, 8vw, 104px);
	padding: clamp(.9rem, 1.3vw, 1.15rem);

	background: var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--tabs-radius);
	cursor: pointer;
	text-align: start;
	overflow: hidden;

	transition:
		background .38s var(--tabs-ease),
		border-color .38s var(--tabs-ease),
		color .38s var(--tabs-ease),
		transform .38s var(--tabs-ease),
		box-shadow .38s var(--tabs-ease);
}

.sud-tabs .sud-tabs__label {
	font-family: var(--sud-font-display);
	font-size: clamp(.8125rem, .95vw, .9375rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--sud-ink);                 /* #0B1F17 — 17:1 on white */
	transition: color .38s var(--tabs-ease);
	text-wrap: balance;
}

/* The numeral is decoration and a position cue, so it is large, quiet and
   hidden from assistive tech — the tablist already announces "3 of 6". */
.sud-tabs .sud-tabs__num {
	flex: 0 0 auto;
	font-family: var(--sud-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	color: var(--sud-line);
	transition: color .38s var(--tabs-ease);
}

/*
 * HOVER — the same readable treatment as the active state.
 *
 * The background is stated explicitly, and that is the fix. These tabs are
 * <button>s, and the theme's reset.css carries a blanket
 *
 *     button:hover { background-color: #CC3366; color: #fff }
 *
 * Because the previous hover rule set only a border and a shadow, that reset
 * won the background and repainted the box, while this file simultaneously
 * turned the label dark green — dark text on a saturated ground, which is the
 * unreadable combination reported. Naming the background here settles it by
 * specificity instead of leaving the property unclaimed.
 */
@media (hover: hover) {
	.sud-tabs .sud-tabs__tab:hover {
		background: var(--sud-ink);
		border-color: var(--sud-ink);
		transform: translateY(-3px);
		box-shadow: 0 10px 26px rgba(11, 31, 23, .18);
	}
	.sud-tabs .sud-tabs__tab:hover .sud-tabs__label { color: #fff; }              /* 17:1 */
	.sud-tabs .sud-tabs__tab:hover .sud-tabs__num   { color: var(--sud-green-500); }
}

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

/* Active: filled ink ground. Stated three ways — ground, text colour and the
   marker below — so it does not rely on colour alone. */
.sud-tabs .sud-tabs__tab.is-active,
.sud-tabs .sud-tabs__tab[aria-selected="true"] {
	background: var(--sud-ink);            /* #0B1F17 */
	border-color: var(--sud-ink);
	transform: none;
	box-shadow: 0 12px 30px rgba(11, 31, 23, .18);
}

/*
 * Keyed off BOTH the class and the attribute, exactly as the background above
 * is. They were previously stated differently — background on either, text
 * colour on the class alone — so any state where the two diverged would have
 * produced a dark ground with dark text. Matching them removes that possibility.
 */
.sud-tabs .sud-tabs__tab.is-active .sud-tabs__label,
.sud-tabs .sud-tabs__tab[aria-selected="true"] .sud-tabs__label { color: #fff; }   /* 17:1 */

.sud-tabs .sud-tabs__tab.is-active .sud-tabs__num,
.sud-tabs .sud-tabs__tab[aria-selected="true"] .sud-tabs__num { color: var(--sud-green-500); }

.sud-tabs .sud-tabs__tab.is-active::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 4px;
	background: var(--sud-green-500);
}

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

.sud-tabs__panels {
	position: relative;
	background: var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--tabs-radius);
	padding: clamp(1.5rem, 3.2vw, 3rem);
	min-block-size: clamp(150px, 16vw, 190px);
	box-shadow: 0 1px 2px rgba(11, 31, 23, .04);
}

.sud-tabs__pane[hidden] { display: none; }

/* The incoming panel arrives; the outgoing one is simply removed. Animating
   both would need them stacked, and a cross-fade of two blocks of prose is
   unreadable mid-transition. */
.sud-tabs__pane.is-active {
	animation: sud-tabs-in .42s var(--tabs-ease) both;
}

@keyframes sud-tabs-in {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: none; }
}

.sud-tabs .sud-tabs__heading {
	font-family: var(--sud-font-display);
	font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--sud-ink);
	margin: 0 0 .75rem;
}

.sud-tabs .sud-tabs__text {
	font-family: var(--sud-font-body);
	font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.7;
	color: var(--sud-body, #46574F);       /* 7.4:1 */
	margin: 0;
	max-inline-size: 68ch;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION / PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-tabs .sud-tabs__tab { transition: none !important; }
	.sud-tabs .sud-tabs__tab:hover { transform: none; }
	.sud-tabs__pane.is-active { animation: none !important; }
}

/* Every description printed, not just the selected one. */
@media print {
	.sud-tabs__strip { display: none; }
	.sud-tabs__pane[hidden] { display: block !important; }
	.sud-tabs__pane { break-inside: avoid; margin-block-end: 1rem; }
	.sud-tabs__panels { border: 0; padding: 0; box-shadow: none; }
}