/* ==========================================================================
   SUDAIR PHARMA — ALIGNMENT

   Corrections that keep every section on one grid. Nothing here restyles
   anything: no colours, no type, no borders, no radii. Only the properties that
   decide where a box sits — width, max-width, margin, padding, gap.

   THE GRID
   The Elementor kit defines it and everything else inherits it:

       content width   1240px   (1024 tablet, 767 mobile)
       container pad     24px

   So a section's content runs from (viewport - 1240) / 2 + 24 to its mirror.
   Most sections get that for free. This file handles the ones that cannot,
   because a class or a component owns their box instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRID CARDS

   Sections styled as a bordered card, which therefore need a real width rather
   than the full bleed a plain container gets.

   These were previously placed with `width: 94%` and a fixed `margin-left:
   39px`, which put the card at 39..1378 against a grid of 93..1333 — narrower
   than its neighbours and off-centre with them. A percentage width plus a pixel
   margin cannot stay centred at more than one viewport size, which is why it
   drifted. Capping at the content width and centring holds at every width.
   -------------------------------------------------------------------------- */

.e-con.sud-gridcard {
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   COMPONENT GUTTERS

   The custom components each arrived with their own inner gutter, so their text
   started at a different offset from the Elementor sections above and below
   them — the editorial pages sat ~16px right of the grid, the careers component
   ~24px left of it. Both are pinned to the kit's own 24px here, so a heading in
   a custom section lines up with a heading in an Elementor one.

   Below the container's max-width the gutter grows a little, so text never
   touches the edge of a phone screen.
   -------------------------------------------------------------------------- */

.sud-ed {
	--ed-gutter: 24px;
}

.sud-cr {
	padding-inline: 24px;
}

@media (max-width: 1288px) {
	/* 1240 + 2 x 24: below this the container is fluid and needs breathing room. */
	.sud-ed { --ed-gutter: clamp(20px, 4vw, 32px); }
	.sud-cr { padding-inline: clamp(20px, 4vw, 32px); }
}

/*
 * The box is exactly the grid width, with the gutter INSIDE it (border-box).
 *
 * Widening it to 1240+48 was wrong and measurably so: that centres a 1288px box,
 * which puts its content back on the grid EDGE (100px) instead of on the grid
 * edge plus the kit's gutter (124px) where every Elementor heading sits. Keeping
 * the box at 1240 and letting the padding inset the text is what makes the two
 * line up.
 */
.sud-cr {
	max-inline-size: var(--sud-maxw, 1240px);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   THERAPEUTIC AREAS CARD

   Its shell is capped at the content width already; this only makes the outer
   padding match the kit's gutter so the card's edge lands on the same line as
   the section edges above and below it.
   -------------------------------------------------------------------------- */

.e-con.sud-th {
	padding-inline: 24px;
}

@media (max-width: 1288px) {
	.e-con.sud-th { padding-inline: clamp(20px, 4vw, 32px); }
}

/* --------------------------------------------------------------------------
   MOBILE

   The brief's requirement is that nothing touches the viewport edge unless it
   is meant to, and that every section uses the same inset. The kit already
   applies 24px; these are the components that opt out of it.
   -------------------------------------------------------------------------- */

/*
 * 24px, not 20. The kit gives every container 24px at every breakpoint, so a
 * body section's text lands at 24 + 24 = 48 on a phone. A component using 20
 * lands at 44 and reads as a 4px step between one section and the next. Matching
 * the kit keeps the whole page on one gutter.
 */
@media (max-width: 767px) {
	/*
	 * The editorial pages need 48, not 24, and the difference is structural.
	 *
	 * A normal section insets its text twice on a phone — 24px on the section
	 * plus 24px on the container inside it — so body text starts at 48. The
	 * editorial pages are a single shortcode in a zero-padding container, so
	 * their only inset is this gutter. At 24 they started half a gutter further
	 * left than every other page.
	 *
	 * Desktop is unaffected: there the wrap is capped at 1240 and the gutter sits
	 * INSIDE that box, which is why it already lined up at 117.
	 */
	.sud-ed { --ed-gutter: 48px; }

	.sud-cr { padding-inline: 24px; }
	.e-con.sud-th { padding-inline: 24px; }
}

/* --------------------------------------------------------------------------
   PAGE BANNER

   On every page the hero's text started 24px left of the body text below it.

   The cause is structural rather than a stray value. A normal section nests its
   widgets one container deep, and that inner container carries the kit's 24px
   padding, so its text lands at (container edge + 24). The banner puts its
   widgets directly inside the 1240 box with nothing in between, so its text
   lands on the container edge itself.

   Both were internally consistent, which is why it reads as a subtle drift
   rather than an obvious break — the heading of the page never quite lines up
   with the content under it. Adding the same 24px here puts the hero on the
   same line as everything below it.
   -------------------------------------------------------------------------- */

/*
 * The banner subtree, not a fixed child. The markup varies between pages: on
 * some, .sud-banner is the boxed container; on others it is full-bleed and the
 * boxed one is .sud-banner__copy inside it. Matching the inner box wherever it
 * sits covers both without needing to know which page is which.
 */
/*
 * Desktop only, and the boundary is not arbitrary.
 *
 * The gutter is needed exactly when the inner box is CAPPED at the content
 * width. Above ~1288px the 1240 box is narrower than the space available, so it
 * centres and its text lands on the box edge while a normal section's text
 * lands 24px further in. Below that the box is fluid and already inset by the
 * container's own padding, so banner and body text start in the same place on
 * their own — measured at 390px, both sat at 48.
 *
 * Applying it at every width was a regression: it pushed the mobile banner to
 * 68 against body sections at 44-48.
 */
/*
 * :not(--clear) matters. The clear variant gets its gutter from its own rule
 * below; without this exclusion both rules apply to the pages whose copy column
 * happens to be boxed, stacking 24 + 24 and pushing the heading to 148.
 */
@media (min-width: 1288px) {
	.sud-banner:not(.sud-banner--clear) .e-con-inner { padding-inline: 24px; }
}

/* --------------------------------------------------------------------------
   REMAINING CUSTOM COMPONENTS

   Same cause as .sud-ed and .sud-cr above, found by measuring headings rather
   than containers: these components cap themselves at the 1240 content width
   and centre, but add no gutter — so their heading lands ON the grid edge (100)
   while an Elementor section's heading lands on the grid edge plus the kit's
   24px (124). A 24px step between one section and the next.

   Measured on /capabilities/research-development/: .sud-rf's heading sat at
   100 against neighbours at 124.

   box-sizing matters here: without it the added padding would widen the box
   past 1240 instead of insetting the text.
   -------------------------------------------------------------------------- */

.sud-rf,
.sud-hj {
	box-sizing: border-box;
	max-inline-size: var(--sud-maxw, 1240px);
	padding-inline: 24px;
}

@media (max-width: 1288px) {
	.sud-rf,
	.sud-hj { padding-inline: clamp(20px, 4vw, 32px); }
}

@media (max-width: 767px) {
	.sud-rf,
	.sud-hj { padding-inline: 24px; }
}

/* --------------------------------------------------------------------------
   CLEAR BANNER (Therapeutic Areas family — 9 pages)

   This hero variant puts its copy in a narrow column capped at min(640px, 56%)
   so the photograph behind it stays visible. The narrow column is intentional
   and is kept.

   What was not intentional is where the column begins. The section is
   e-con-full, so the column starts at the section's PADDING edge (24px) rather
   than at the grid edge, and then adds 44px of its own — landing its text at
   68px while every other banner on the site starts at 124px. Nine pages, all
   56px out.

   The column is moved onto the grid and its opening gutter matched to the kit's
   24px. Its width, its cap and the layout are untouched.
   -------------------------------------------------------------------------- */

@media (min-width: 1288px) {
	.sud-banner--clear > .sud-banner__copy {
		margin-inline-start: calc((100% - var(--sud-maxw, 1240px)) / 2);
		padding-inline-start: 24px;
	}
}

/* --------------------------------------------------------------------------
   MOBILE FORM FIELDS

   iOS Safari zooms the whole page when a text field smaller than 16px receives
   focus, and then leaves it zoomed — the single most common way a form stops
   being usable on a phone. The careers fields were rendering at 14px because a
   responsive typography override in Elementor's per-post CSS beats the
   component's own rule at this breakpoint.

   16px is the threshold, not a preference, so it is stated explicitly. The
   selector matches the component's own weight (seven classes) and this file
   loads last, so it wins without !important.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual {
		font-size: 16px;
		padding-block: .9rem;
	}

	/* A comfortable target for a thumb. */
	.sud-cr .sud-cr__form.elementor-widget-form .elementor-form .elementor-field-group.e-form__buttons .elementor-button {
		min-block-size: 48px;
	}
}