/* =============================================================
   [ifa_hero] — static homepage hero (shortcodes/ifa-hero.php)

   Replaces the Smart Slider 3 hero (slider 8) and is laid out to land on
   the same boxes: every size below was measured from the live slider, and
   the comments give the slider setting each one comes from. Loaded only on
   a page whose content carries the shortcode.

   Breakpoints are the slider's own, so the layout switches where it did:
     mobile   <= 700px portrait, or <= 900px landscape
     tablet   701–1199px (901–1199px landscape)
     desktop  >= 1200px
   ============================================================= */

/* ---------- Full bleed ----------
   The slider broke out of its Divi section (100px side padding, and a row
   narrower than that) with JavaScript. Removing the padding and the row's
   width is what lets the hero be the body's width exactly: a 100vw
   breakout would include the scrollbar and run under it. `body` lifts
   these above Divi's per-module rules (.et_pb_section_0.et_pb_section),
   which print in a later stylesheet.

   The top and bottom are zeroed here too rather than left to Divi's own
   .et_pb_section_0 rule: for logged-in admins Divi numbers this section
   et_pb_section_2, so it picked up another section's 50px padding and mint
   background, a strip above and below the hero that visitors never saw. */
body .et_pb_section:has(.ifa-hero) {
	padding: 0;
}
body .et_pb_row:has(.ifa-hero) {
	width: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

.ifa-hero {
	/* The column width and minimum height below are fractions of the
	   hero's own width. */
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	/* Shows through only while the photo is still loading. */
	background: #203248;
	color: #fff;
}

/* ---------- Photo + gradient ---------- */

.ifa-hero__media,
.ifa-hero::before {
	position: absolute;
	inset: 0;
}
.ifa-hero__media {
	display: block;
}
.ifa-hero .ifa-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* The slide's background focus point; the shortcode's `focus`
	   attribute overrides it inline. */
	object-position: 60% 40%;
}
/* The slide's overlay: navy #203248 at 80% on the left fading to 28%. */
.ifa-hero::before {
	content: "";
	z-index: 1;
	background: linear-gradient(to right, rgba(32, 50, 72, .8) 0%, rgba(32, 50, 72, .28) 100%);
}

/* ---------- Layout ----------
   The slide is 1200x600 and never wider than 1200px, so it is at least
   half as tall as it is wide, up to 600px; below that it grows with its
   content. Content is centred vertically in it.

   Padding: the slider nested four 10px paddings (slide, content, row,
   column) on every side, hence 40px. The bottom carries 40px more for an
   empty second row the slide has on tablet and desktop. */
.ifa-hero__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	max-width: 1200px;
	min-height: min(50cqw, 600px);
	margin: 0 auto;
	padding: 40px 40px 80px;
}

/* The text column is 55% of a flex row that also holds an empty 45%
   column, with 80px gutters that come out of the 55% column's share:
   0.55 × (slide width − 139px), less its own 20px padding. It never
   gets narrower than the two buttons side by side. */
.ifa-hero__content {
	box-sizing: border-box;
	width: calc(min(100cqw, 1200px) * .55 - 96.45px);
	min-width: min-content;
}

/* ---------- Fallback fonts sized like the web fonts ----------
   Google Fonts loads with font-display: swap, so the hero first paints in
   Georgia and Arial. Both are narrower (Libre Baskerville sets this heading
   about 16% wider than Georgia), so the text wrapped onto fewer lines, and when
   the web fonts arrived it re-wrapped and pushed the buttons down twice:
   ~0.03 of mobile CLS. These faces are the same local fonts scaled to the
   web fonts' width, so the fallback wraps where the web font will and
   nothing moves when it swaps in. They only render until the web fonts
   load; after that the hero looks exactly as it did.

   size-adjust was tuned against the hero's own copy at every width from
   320 to 1920px in 8px steps: line breaks match everywhere but 904–912px
   and 1184px, where one line of body text is on the edge of fitting and no
   single Arial scale suits both paragraphs. The serif value sits in a
   narrow band: 117.1% and 117.7% each wrap the heading differently at some
   width, so re-run the sweep if the heading's copy changes. Open Sans 500
   uses the published Open Sans/Arial ratio; 600 (the buttons) is the ratio
   that keeps the two buttons' combined width, which on tablets sets the
   width of the text column. The ascent/descent overrides are each web
   font's own metrics (Libre Baskerville 0.970/0.270, Open Sans 1.069/0.293)
   divided by size-adjust, so the baseline sits where it will.

   Where Georgia or Arial is not installed (Android), local() finds nothing,
   the face is skipped and the stack carries on to the next family as
   before, so there the shift still happens. */
@font-face {
	font-family: 'IFA Hero Serif Fallback';
	src: local('Georgia');
	size-adjust: 117.4%;
	ascent-override: 82.62%;
	descent-override: 23%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'IFA Hero Sans Fallback';
	src: local('Arial'), local('ArialMT');
	font-weight: 100 599;
	size-adjust: 105.44%;
	ascent-override: 101.45%;
	descent-override: 27.81%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'IFA Hero Sans Fallback';
	src: local('Arial Bold'), local('Arial-BoldMT');
	font-weight: 600 900;
	size-adjust: 101.28%;
	ascent-override: 105.55%;
	descent-override: 28.93%;
	line-gap-override: 0%;
}

/* ---------- Type ----------
   Divi styles h1 and p globally (padding, size, colour), so every property
   the slide set is restated here. */
.ifa-hero .ifa-hero__title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: 'Libre Baskerville', 'IFA Hero Serif Fallback', Georgia, 'Times New Roman', serif;
	font-size: 35px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
}
.ifa-hero .ifa-hero__subheading,
.ifa-hero .ifa-hero__text {
	margin: 0;
	color: #fff;
	font-family: 'Open Sans', 'IFA Hero Sans Fallback', Arial, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}
/* Three classes deep to outrank Divi's p:not(.has-background):last-of-type
   { padding-bottom: 0 }, which would otherwise take the last paragraph's
   bottom padding and pull everything below it up 20px. */
.ifa-hero .ifa-hero__content p.ifa-hero__subheading {
	padding: 20px 0;
}
.ifa-hero .ifa-hero__content p.ifa-hero__text {
	padding: 0 0 20px;
}

/* ---------- Buttons ----------
   Side by side, each in a slot the slider sized from a 70% / 30% split;
   the first slot's width reproduces where the second button started.
   The 10px on the right is the second slot's padding, which is what makes
   the pair 376px wide at their narrowest — the content column's floor. */
.ifa-hero__actions {
	display: flex;
	align-items: flex-start;
	column-gap: 20px;
	padding: 10px 10px 10px 0;
}
.ifa-hero__action {
	flex: none;
}
.ifa-hero__action:first-child {
	width: calc(70% - 19.3px);
	min-width: max-content;
}

/* The theme's purple button, as the slider's buttons were: purple at rest,
   dark teal with white text on hover, the same pairing as .btn-contact in
   css/buttons.css. Colours come from the :root tokens in style.css. White
   on purple is 4.9:1, which passes AA. */
.ifa-hero .ifa-hero__button {
	display: inline-block;
	box-sizing: border-box;
	padding: 12px 20px;
	border: 1px solid var(--ifa-purple);
	border-radius: 8px;
	background: var(--ifa-purple);
	color: #fff;
	font-family: 'Open Sans', 'IFA Hero Sans Fallback', Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.ifa-hero .ifa-hero__button:hover,
.ifa-hero .ifa-hero__button:focus-visible,
.ifa-hero .ifa-hero__button:active {
	border-color: var(--ifa-dark-teal);
	background: var(--ifa-dark-teal);
	color: #fff;
}
.ifa-hero .ifa-hero__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------- Desktop ---------- */
@media (min-width: 1200px) {
	/* The first button slot's max-width: 245px in the slide. */
	.ifa-hero__action:first-child {
		max-width: 245px;
	}
}

/* ---------- Mobile ----------
   One column; heading at 70%; the subheading held to 200px and the body
   text dropped, as in the slide's mobile settings; buttons stacked. The
   empty second row is hidden on mobile, so the bottom padding loses its
   extra 40px. */
@media (max-width: 700px), (orientation: landscape) and (max-width: 900px) {
	.ifa-hero__inner {
		padding-bottom: 40px;
	}
	.ifa-hero__content {
		width: 100%;
	}
	.ifa-hero .ifa-hero__title {
		font-size: 24.5px;
	}
	.ifa-hero .ifa-hero__subheading {
		max-width: 200px;
	}
	.ifa-hero .ifa-hero__content p.ifa-hero__text {
		display: none;
	}
	.ifa-hero__actions {
		flex-direction: column;
		row-gap: 20px;
		padding: 15px 0 10px;
	}
	.ifa-hero__action:first-child {
		width: auto;
	}
}