/* ==========================================================================
   SUDAIR PHARMA — LOCALIZATION: STRATEGIC CONTRIBUTIONS

   The same band that used to live inside the Vision 2030 HTML widget, rebuilt
   as its own top-level Elementor section. Scoped under .sud-sc, a class that
   exists on one section of one page.

   WHAT IS ELEMENTOR AND WHAT IS HERE
   Everything a person would want to change is an Elementor control: the band's
   background and padding, the grid's three columns and its gaps, each card's
   white fill, border, radius, padding and shadow, and every piece of text —
   the heading, the six numbers and the six labels are each their own widget.

   This file carries only the decoration those controls cannot express:

     - the two hairlines that fade out either side of the heading
     - the round number chip, which needs a fixed square box
     - the green rule between a number and its label

   No text lives here, and no layout decision that Elementor could have made.

   THE NUMBERS ARE REAL WIDGETS NOW
   The old markup drew 01-06 with a CSS counter. They are ordinary heading
   widgets here, because the brief asks to be able to edit each one in the
   editor. Nothing generates them any more, so reordering the cards means
   retyping the numbers — the trade the brief asks for.
   ========================================================================== */

.sud-sc {
	--sc-green: #006344;
	--sc-ink: #10312A;
	--sc-line: #DCE8E1;
	--sc-tint: #F5F9F6;
	--sc-ease: cubic-bezier(.22, 1, .36, 1);
}

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

/* --------------------------------------------------------------------------
   THE HEADING BAR

   A hairline runs out either side of the heading and fades to nothing. The
   grid sits on the boxed inner wrapper, not the outer container, so the rules
   stop at the content column instead of running the full bleed of the band.
   The heading itself stays an ordinary heading widget in the middle cell.
   -------------------------------------------------------------------------- */

.sud-sc .sud-sc__bar > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
	align-items: center;
	gap: clamp(.85rem, 2vw, 1.5rem);
}

.sud-sc .sud-sc__bar > .e-con-inner::before,
.sud-sc .sud-sc__bar > .e-con-inner::after {
	content: '';
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--sc-line), transparent);
}

/* --------------------------------------------------------------------------
   THE CARDS

   Fill, border, radius, padding and shadow are all Elementor settings on the
   card container. What is left here is the pairing of the chip and the label.
   -------------------------------------------------------------------------- */

/* The label takes the rest of the row, so long ones wrap rather than push. */
.sud-sc .sud-sc__label { flex: 1 1 auto; min-inline-size: 0; }

/*
 * The number chip. A heading widget cannot be given a square box and a radius
 * from the panel, so the circle is drawn here; the number inside it stays an
 * editable heading.
 */
.sud-sc .sud-sc__num {
	flex: 0 0 auto;
	inline-size: clamp(34px, 3vw, 42px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sc-tint);
	display: grid;
	place-items: center;
}

.sud-sc .sud-sc__num .elementor-heading-title {
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* The vertical green divider between the number and its label. */
.sud-sc .sud-sc__label {
	padding-inline-start: clamp(.75rem, 1.3vw, 1.1rem);
	border-inline-start: 2px solid var(--sc-green);
}

@media (hover: hover) {
	.sud-sc .sud-sc__card {
		transition: border-color .3s var(--sc-ease), box-shadow .3s var(--sc-ease);
	}

	.sud-sc .sud-sc__card:hover {
		border-color: #C6DCD0;
		box-shadow: 0 8px 20px rgba(0, 99, 68, .08);
	}
}

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

   The column counts are Elementor's — three, then two, then one. Only the
   things Elementor cannot reach are adjusted here.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* 13px is tight for a phone; the labels are the point of this grid. */
	.sud-sc .sud-sc__label .elementor-heading-title { font-size: .875rem; }

	/*
	 * THE CARD MUST NOT WRAP ITS OWN ROW.
	 *
	 * Elementor swaps a container's flex-wrap for its MOBILE value below 768:
	 *
	 *     @media (max-width: 767px) { .e-con.e-flex { --flex-wrap: var(--flex-wrap-mobile) } }
	 *
	 * No mobile value was ever set on these cards, so the variable resolves to
	 * nothing and the card falls back to `wrap` — measured: nowrap at 1440, 834
	 * and 768, wrap at 390.
	 *
	 * That alone would be harmless, except the label is a container whose
	 * `--width: 100%` makes its flex BASE SIZE the full content width of the
	 * card. So the line measures 34 (chip) + 18 (gap) + 235 (label) = 287
	 * against 235 available, the label is pushed onto a second flex line, and
	 * the number ends up alone above its own title.
	 *
	 * It did not happen to every card, which is what made the section look
	 * broken rather than merely different: card 03 has the shortest label and
	 * shrank just enough to stay on the line, so four cards stacked and one did
	 * not. Nothing about card 01 is special — it is the same rule landing
	 * either side of a threshold.
	 *
	 * Restoring nowrap is the whole fix. The label already carries
	 * `flex: 1 1 auto; min-inline-size: 0` from the rule above, which is exactly
	 * what lets it give up its 100% base and wrap its TEXT instead of its line —
	 * the behaviour that rule's own comment describes and that desktop and
	 * tablet have always had.
	 *
	 * Desktop and tablet are already nowrap and are not touched.
	 */
	.sud-sc .sud-sc__card {
		flex-wrap: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sud-sc .sud-sc__card { transition: none; }
}