/* ==========================================================================
   SUDAIR PHARMA — PRODUCT CARDS
   Pack-shot, name, active ingredient, and a description that opens in place.

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

.sud-pc {
	--pc-radius: var(--sud-radius-lg, 24px);
	--pc-pad: clamp(1.1rem, 1.7vw, 1.6rem);
	--pc-ease: cubic-bezier(.22, 1, .36, 1);
}

.sud-pc__grid {
	display: grid;
	/* Two per row, not three: the pack-shots were too small to read at a third
	   of the row. See the note on .sud-pc__media below. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Cards open independently, so rows must not stretch to the tallest card —
	   otherwise opening one would inflate its whole row. */
	align-items: start;
	gap: clamp(1rem, 1.6vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) { .sud-pc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sud-pc__grid { grid-template-columns: 1fr; } }

.sud-pc__item { display: flex; }

/* --------------------------------------------------------------------------
   SUBSECTIONS (grouped layout)

   Used by Anti-Neoplastic and Cardio-Metabolic, whose portfolios divide into
   named groups. Everything below is under .sud-pc--grouped, so the six pages
   using the flat layout are untouched.

   All the groups live inside ONE [data-productcards] root — see
   sud_product_groups_html() — so opening a card in one group still closes an
   open card in another.
   -------------------------------------------------------------------------- */

.sud-pc--grouped .sud-pc__group + .sud-pc__group {
	margin-block-start: clamp(2.75rem, 5vw, 4.5rem);
}

.sud-pc .sud-pc__group-title {
	display: flex;
	align-items: center;
	gap: clamp(.55rem, 1vw, .85rem);

	font-family: var(--sud-font-display);
	/* Deliberately below the section's own h2 so the hierarchy reads at a
	   glance: therapeutic area, then subsection, then product. */
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--sud-ink);
	margin: 0 0 clamp(1rem, 1.8vw, 1.6rem);
}

/* The rule runs from the title to the end of the row. flex:1 rather than a
   fixed width so it always reaches the grid's right edge. */
.sud-pc .sud-pc__group-title::after {
	content: '';
	flex: 1 1 auto;
	block-size: 1px;
	background: var(--sud-line);
}

.sud-pc__group-name { flex: 0 0 auto; }

/*
 * Brand mark, inlined as a data URI so it costs no extra request and cannot be
 * mangled by wpautop on the way through Elementor's text editor.
 *
 * Drawn as a MASK over a background-colour, not as a background-image. Elementor
 * lazy-loads container backgrounds with
 *
 *   .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
 *      { background-image: none !important }
 *
 * which blanks every CSS background inside the 4th top-level container until its
 * observer fires — and this section is the 4th. The rule touches background-image
 * only, so a mask plus background-color is immune to it and needs no
 * e-no-lazyload escape hatch on the section.
 */
.sud-pc__group-mark {
	flex: 0 0 auto;
	inline-size: clamp(20px, 2vw, 24px);
	block-size: clamp(20px, 2vw, 24px);
	background-color: var(--sud-green-500);

	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6v6.2c0 4.6-3.3 7.9-8 9.3-4.7-1.4-8-4.7-8-9.3V6z'/%3E%3Cpath d='M12 15.5c0-2.8 1.7-4.8 4-5.3-.3 2.9-1.8 4.8-4 5.3zM12 15.5c0-2.8-1.7-4.8-4-5.3.3 2.9 1.8 4.8 4 5.3z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6v6.2c0 4.6-3.3 7.9-8 9.3-4.7-1.4-8-4.7-8-9.3V6z'/%3E%3Cpath d='M12 15.5c0-2.8 1.7-4.8 4-5.3-.3 2.9-1.8 4.8-4 5.3zM12 15.5c0-2.8-1.7-4.8-4-5.3.3 2.9 1.8 4.8 4 5.3z'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */

.sud-pc__card {
	position: relative;
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--pc-pad);

	background: var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--pc-radius);
	box-shadow: 0 1px 2px rgba(11, 31, 23, .04);

	transition:
		border-color .34s var(--pc-ease),
		box-shadow .34s var(--pc-ease),
		transform .34s var(--pc-ease);
}

@media (hover: hover) {
	.sud-pc__card:hover {
		border-color: var(--sud-green-500);
		box-shadow: 0 12px 30px rgba(11, 31, 23, .09);
	}
}

/* Open card keeps the brand outline, matching the reference. */
.sud-pc__card.is-open {
	border-color: var(--sud-green-500);
	box-shadow: 0 12px 30px rgba(11, 31, 23, .09);
}

/* --------------------------------------------------------------------------
   HEAD — pack-shot, identity, toggle
   -------------------------------------------------------------------------- */

.sud-pc__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(.6rem, 1.1vw, 1rem);
}

/*
 * Fixed box with `contain`, so every pack-shot is shown whole and all cards
 * align regardless of the source image's proportions. The supplied set is a
 * uniform 352x240, but a future pack-shot at another size must not be cropped
 * or knock the grid out of line.
 */
.sud-pc__media {
	inline-size: clamp(84px, 9vw, 116px);
	aspect-ratio: 352 / 240;
	display: block;
	flex: 0 0 auto;
}

.sud-pc .sud-pc__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

.sud-pc__ident { min-inline-size: 0; }

/*
 * Closed cards all the same height.
 *
 * The grid uses align-items:start so opening one card cannot inflate its row,
 * which means row height no longer equalises the cards — and the identity block
 * varies with how the text wraps. Measured across Hematology: 69px for a
 * one-line name, ingredient and strength; 111px for "Pomalidomide SPC®" over two
 * lines with two lines of strengths. Cards ranged 172-204px.
 *
 * Reserving the tallest natural stack levels them without truncating anything or
 * making any card taller than the tallest already was. Dropped at the
 * single-column breakpoint, where stacked cards have no neighbour to align to
 * and the reserve would just be dead space.
 */
.sud-pc--grouped .sud-pc__ident {
	min-block-size: 7rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 640px) {
	.sud-pc--grouped .sud-pc__ident { min-block-size: 0; }
}

.sud-pc .sud-pc__name {
	font-family: var(--sud-font-display);
	font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--sud-ink);
	margin: 0 0 .2rem;
}

.sud-pc .sud-pc__sub {
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	line-height: 1.4;
	color: var(--sud-muted);
	margin: 0;
}

/* Strengths, picked out in brand green as in the reference. Green on white is
   the accent here, so it uses --sud-green-700 rather than the lighter 500:
   #43B649 on white is 2.6:1, below the 4.5:1 this size of text needs. */
.sud-pc .sud-pc__strength {
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--sud-green-700);
	margin: .18rem 0 0;
}

/* Toggle — the single control for this card. */
.sud-pc .sud-pc__toggle {
	inline-size: 38px;
	block-size: 38px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1.5px solid var(--sud-green-500);
	border-radius: 50%;
	background: transparent;
	color: var(--sud-green-700);
	cursor: pointer;
	transition:
		background .3s var(--pc-ease),
		color .3s var(--pc-ease),
		transform .3s var(--pc-ease);
}

@media (hover: hover) {
	.sud-pc .sud-pc__toggle:hover {
		background: var(--sud-green-700);
		border-color: var(--sud-green-700);
		color: #fff;
	}
}

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

/*
 * Plus drawn in CSS on the BUTTON ITSELF, turning to a minus when open.
 *
 * WHY NOT ON A CHILD <span>
 * It used to be drawn on an empty <span class="sud-pc__sign"> inside the
 * button. These cards live in an Elementor text-editor widget, and WordPress's
 * editor deletes EMPTY inline elements when content is saved. Neurology and
 * Cardio-Metabolic were edited and saved in Elementor, the empty spans were
 * stripped from all ten of their buttons, and their cards were left with an
 * empty circle — no plus, in English and Arabic alike. Any other page would
 * lose it the same way the next time it was saved.
 *
 * The button's own ::before / ::after cannot be stripped by an editor, so the
 * sign now exists wherever the button does. Same 13 x 2px strokes, same
 * colour (currentColor, so it still turns white on hover), same centring and
 * the same open/close transition.
 *
 * Both strokes share one grid cell (grid-area 1 / 1) of the button's centred
 * grid, so they cross at the centre. The screen-reader label inside the button
 * is absolutely positioned, so it takes no cell.
 */
.sud-pc .sud-pc__toggle { --sign-v: 1; }

.sud-pc .sud-pc__toggle::before,
.sud-pc .sud-pc__toggle::after {
	content: '';
	grid-area: 1 / 1;
	inline-size: 13px;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .3s var(--pc-ease), opacity .3s var(--pc-ease);
}

/* The vertical bar's visibility rides on an inherited custom property rather
   than on a rule targeting the pseudo-element directly. Overriding a
   pseudo-element from an ancestor selector did not take here even with
   !important — verified in the browser — whereas a custom property set on the
   element inherits into its own pseudo-element and applies. */
.sud-pc .sud-pc__toggle::after {
	transform: rotate(90deg);
	opacity: var(--sign-v);
}

/*
 * Vertical stroke fades out, leaving the minus.
 *
 * Keyed off .is-open on the card rather than [aria-expanded="true"] on the
 * button. The attribute selector matched the element and was both later and
 * more specific, yet the base rotate(90deg) kept winning — measured, not
 * assumed. The class is set by the same script that sets the attribute, so the
 * two can never disagree, and this demonstrably applies.
 */
.sud-pc__card.is-open .sud-pc__toggle { --sign-v: 0; }

/* The old sign element, still in the markup of the pages that kept it. It no
   longer draws anything; hidden so it cannot add a second plus. */
.sud-pc__sign { display: none; }

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

   Height is animated with grid-template-rows 0fr -> 1fr rather than max-height.
   max-height needs a guessed ceiling: too low clips a long description, too
   high makes the easing wrong because most of the transition is spent
   collapsing empty space. This animates to the content's real height.
   -------------------------------------------------------------------------- */

.sud-pc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .38s var(--pc-ease), margin .38s var(--pc-ease);
	margin-block-start: 0;
}

/* `hidden` is removed by the script; without it the panel is simply open, which
   is the right no-JavaScript fallback. */
.sud-pc__panel[hidden] { display: grid; }

.sud-pc__panel-inner {
	overflow: hidden;
	min-block-size: 0;
}

.sud-pc__card.is-open .sud-pc__panel {
	grid-template-rows: 1fr;
	margin-block-start: clamp(.9rem, 1.4vw, 1.2rem);
}

.sud-pc .sud-pc__about {
	font-family: var(--sud-font-display);
	font-size: var(--sud-text-sm);
	font-weight: 700;
	color: var(--sud-green-700);
	margin: 0 0 .5rem;
}

.sud-pc .sud-pc__line {
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	line-height: 1.65;
	color: var(--sud-body, #46574F);      /* 7.4:1 */
	margin: 0 0 .45rem;
}

.sud-pc .sud-pc__line:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   KNOW MORE
   Visually a link, but the same control as the circle above — the script
   forwards clicks to it, so it is not separately focusable or announced.
   -------------------------------------------------------------------------- */

.sud-pc__more {
	align-self: flex-end;
	margin-block-start: clamp(.9rem, 1.4vw, 1.15rem);
	padding-block-end: 2px;
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	font-weight: 600;
	color: var(--sud-green-700);
	border-block-end: 1px solid var(--sud-green-500);
	cursor: pointer;
	transition: color .3s var(--pc-ease), border-color .3s var(--pc-ease);
}

@media (hover: hover) {
	.sud-pc__more:hover { color: var(--sud-green-800); border-color: var(--sud-green-700); }
}

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

@media (prefers-reduced-motion: reduce) {
	.sud-pc__card,
	.sud-pc__panel,
	.sud-pc .sud-pc__toggle::before,
	.sud-pc .sud-pc__toggle::after,
	.sud-pc .sud-pc__toggle { transition: none !important; }
}

/* Every description printed, not only the open one. */
@media print {
	.sud-pc__panel { grid-template-rows: 1fr !important; }
	.sud-pc__card { break-inside: avoid; box-shadow: none; }
	.sud-pc__toggle, .sud-pc__more { display: none; }
}

/* ==========================================================================
   LARGER PACK-SHOTS

   The grid above went from three cards per row to two so each card is wider and
   the medicine packaging can be seen. This block gives that width to the image.

   WHY THE FRAME IS ALSO SQUARER, NOT JUST WIDER

   Widening the frame alone would not have worked, because the supplied
   pack-shots do not fill their own 352x240 canvas — and they do not fail to
   fill it in the same way. Measured across ten of them:

     abiraterone (vial)      ink is  38.3% of the width, 85.4% of the height
     cabazitaxel (vial)              36.7%                85.4%
     capecitabine (box)              94.2%                57.3%
     erlotinib (box)                 90.0%                73.2%
     average                         62.6%                79.9%

   The tall vials carry roughly 30% white margin on EACH side. In a wide frame
   `contain` fits them by their height, so extra width does nothing for them at
   all — the very products that look smallest would have stayed smallest.

   Squaring the frame up from 352/240 (1.47) to 5/4 (1.25) gives height to the
   packages whose height is the binding dimension, and the wide boxes still get
   the full extra width because width binds for them. Both shapes gain.

   A uniform transform:scale() to "zoom past" the margin was the other option and
   is wrong here: with ink varying from 37% to 94% of the frame, any single
   factor large enough to help a vial would crop the boxes. Nothing is cropped
   below; `contain` is kept and every pack-shot is still shown whole.

   The images themselves are untouched.
   ========================================================================== */

@media (min-width: 641px) {
	/*
	 * The media column is a share of the card rather than a fixed pixel width,
	 * so it tracks the card at every viewport. 42% of the HEAD, which sits
	 * inside the card padding, measures ~38% of the card itself — the middle of
	 * the 35-40% asked for. minmax(0, …) so a wide pack-shot can never push the
	 * column past its share and squeeze the name.
	 */
	.sud-pc__head {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto;
		align-items: center;
	}

	.sud-pc__media {
		inline-size: 100%;
		max-inline-size: 240px;        /* stops it ballooning on a very wide card */
		aspect-ratio: 5 / 4;
	}
}

/*
 * PHONES STACK THE HEAD instead of keeping the image beside the name.
 *
 * Measured on a 390px phone the card is only 246px wide — three nested Elementor
 * containers each add 24px of padding either side (342 -> 294 -> 246). At that
 * width there is no way to give the pack-shot more room without taking it from
 * the name: a first attempt at a 34% share left the image at 71px, SMALLER than
 * the 84px it had before, and squeezed the name to 81px. Three columns simply do
 * not fit.
 *
 * Putting the image on its own row solves both at once. It gets the full card
 * width — about 246px against the 84px it had — and the name gets the full width
 * beneath it rather than a sliver. The toggle stays on the name's row, where it
 * still reads as belonging to the product.
 *
 * A 16:10 frame here rather than 5:4, so a full-width image does not make the
 * card excessively tall.
 */
@media (max-width: 640px) {
	.sud-pc__head {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"media  media"
			"ident  toggle";
		row-gap: .9rem;
		align-items: center;
	}

	.sud-pc__media {
		grid-area: media;
		inline-size: 100%;
		max-inline-size: none;
		aspect-ratio: 16 / 10;
	}

	.sud-pc__ident  { grid-area: ident; }
	.sud-pc__toggle { grid-area: toggle; }
}

/*
 * Cards stay level despite the taller media box.
 *
 * The head is now as tall as the image frame rather than as tall as the text,
 * so every card's head matches its neighbours by construction. The identity
 * block keeps its reserved height for the same reason as before — so a
 * one-line name and a two-line name still produce the same card.
 */
.sud-pc__head { min-block-size: 0; }

/* --------------------------------------------------------------------------
   ARABIC MEDICINE NAMES MUST NOT COME APART, ON PHONES

   The product card is a grid: the photograph and the text share one column and
   the 38px "know more" toggle sits beside them. So the text column is always
   the card minus that toggle, and it narrows with the screen:

     viewport   card   name column
       430      271       187px
       390      231       147px
       375      216       132px
       320      161        76px

   Two things then go wrong with an Arabic name, and they are different faults.

   1. BREAKING INSIDE A WORD. responsive-corrections.css sets
      `overflow-wrap: break-word` on every Elementor heading and paragraph as a
      site-wide guard against long unbreakable strings. It is inherited here, so
      once the column is narrower than a word, an Arabic word is cut wherever it
      happens to reach — letters land on separate lines and the word stops
      reading as a word. That guard is right for the site and wrong for a
      medicine name, which is a proper noun and has to stay whole.

   2. ONE WORD PER LINE. Several names end in the brand suffix "إس بي سي" —
      three two-letter words. In a narrow column each drops onto its own line,
      so the name appears to fall apart even when every word is intact.

   THE FIX

   `overflow-wrap: normal` puts the site-wide guard back to the initial value
   for these three elements only, so a name can only ever break at a space.
   `text-wrap: balance` then shares the words evenly across the lines it does
   need instead of leaving a trail of one-word lines.

   Nothing about the text itself changes: same family, same size, same weight,
   same colour, same margins, same card, same image. The names are not touched.

   Scoped to `.sud-pc__` — the product-card component, which exists only on the
   Therapeutic Areas pages — and behind [dir="rtl"], so English names keep the
   behaviour they have now. Phones only; desktop and tablet are untouched, and
   the site-wide guard in responsive-corrections.css is left exactly as it is.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	[dir="rtl"] .sud-pc .sud-pc__name,
	[dir="rtl"] .sud-pc .sud-pc__sub,
	[dir="rtl"] .sud-pc .sud-pc__strength {
		overflow-wrap: normal;
		text-wrap: balance;
	}
}