/* ============================================================
   Guided day page (single-ldm_guiding.php, main.guiding-page): the
   guiding differences from the course page's parts it reuses -
   offering-hero, -overview, -info-cards and the Why choose band. The
   How To Book enquiry is guiding-enquiry.css; the FAQs are the course
   page's as they stand. Design: Guiding - individual page v3, desktop
   and mobile (docs/design-renders/guiding-desktop-v3, -mobile-v3).
   Every rule here is scoped to .guiding-page, so no course page
   changes. This file loads before the offering-*.css files (component
   files load in name order), so each override is more specific than
   the rule it changes.

   - Hero: no level badge, so the H1 heads the facts column; three
     facts; one line per price (Poppins, as on the course page: the
     amount SemiBold 36 and the words beside it 18, where the file sets
     the whole line in Koulen 36, which reads "I:I" - QH24); the large
     button. Vertical rhythm measured from the files' ink, e.g. at
     1440: H1 caps 76px under the trail's top, the opening line 38
     under the caps, the first fact 37 under it, the facts on the
     course's 35px pitch (drawn 41 / 30), the first price's baseline
     72 under the last fact's top, the two prices 49 apart, the button
     41 under the second baseline and 76 above the band's foot. Phones
     as drawn: the H1 caps 41 under the dots, the opening line 44
     under them, the facts 37 apart, the prices 49, the button 40
     under them and 69 above the foot.
     From 1024 the file puts the facts column on the page's centre
     line (x 720 at 1440) and the gallery against the content's left
     edge (its previous arrow at x 82): two equal halves, the gallery
     ending 44px short of the centre (16 at 1024). The gallery (photo
     and dots) is centred on the facts column's ink, H1 caps to button
     foot, as drawn: it is pulled down by the H1's top space, and the
     dots' tap row below their ink is left out of the centring.
   - Key Information: the compass illustration (39 x 48 drawn); bold
     phrases and the AMI link (bold, underlined, Navy; deep orange on
     hover and keyboard focus); items side by side keep their text
     from the top; phones set the illustrations on the gutter, as
     drawn (the course page centres them in their slot).
   - Info cards: all four are ticked lists; bold phrases Bold (700, as
     drawn; the course's lead-ins are SemiBold); each disc centred on
     its item's first line and 16px between items at every width, as
     drawn (the course: the disc 5px lower, items 12 apart). Desktop
     and tablets keep the course's card padding and heading spacing,
     with the Who It's For intro 4px closer to its list (drawn 18 from
     text to text, not 22). Phones follow the guiding file, which is
     more open than the course's: 36px headings (course 30), cards 40
     apart (24), the heading caps 32px under the card top (37) and 32
     above the text (35), the last line 26 above the card foot (32).
   - Why choose: the guiding reasons take two lines each, so from 1024
     the block keeps to about the heading's width (as on the About
     page) and stays centred under it.
   - Hero, not drawn: the line under the prices (what they cover and
     the prices for more days, from Sam's page copy).
   - Related options (not drawn; Sam's handover puts them after Why
     Choose): the course page's next step cards, every card White.
   - Tablets (768-1023, not designed): the course page's layouts (two
     column hero, overview beside its heading, Key Information in one
     column, info cards two by two) with the desktop rhythm, the cards
     40px apart both ways at 768 (the phones' gap).
   ============================================================ */

/* ============================================================
   Hero
   ============================================================ */

/* Phones: the button 69px above the band's foot (course 78). */
.guiding-page .offering-hero__inner {
	padding-bottom: 69px;
}

/* With no badge the H1 follows the gallery directly: its caps 41px under
   the dots' ink, as drawn (the dots' tap row holds 16.5px under them). */
.guiding-page .offering-hero__grid {
	row-gap: 16px;
}

/* One photo has no dots: the same 41px from the photo to the H1 caps. */
.guiding-page .offering-gallery--single {
	margin-bottom: 17px;
}

.guiding-page .offering-hero__content--no-badge .offering-hero__title {
	margin-top: 0;
}

.guiding-page .offering-hero__summary {
	margin-top: 27.5px;
}

.guiding-page .offering-hero__facts {
	row-gap: 13px;
	margin-top: 24px;
}

/* Each price line as the course's single price; the second line 49px
   under the first (baseline to baseline), as drawn on both files. */
.guiding-page .offering-hero__price {
	margin-top: 38px;
}

.guiding-page .offering-hero__price + .offering-hero__price {
	margin-top: 9px;
}

/* The line under the prices (what they cover, the prices for more days;
   Sam's page copy, not drawn): 14/21 in Cream at 90%, 14px under the last
   price, no wider than the opening line. */
.guiding-page .offering-hero__prices-note {
	max-width: 35rem;
	margin-top: 14px;
	color: var(--color-text-on-hero-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

.guiding-page .offering-hero__action {
	margin-top: 32px;
}

@media (min-width: 768px) {
	.guiding-page .offering-hero__inner {
		padding-bottom: 76px;
	}

	.guiding-page .offering-hero__content--no-badge .offering-hero__title {
		margin-top: 14.5px;
	}

	.guiding-page .offering-hero__summary {
		margin-top: 17px;
	}

	.guiding-page .offering-hero__facts {
		row-gap: 11px;
		margin-top: 30px;
	}

	.guiding-page .offering-hero__price {
		margin-top: 19px;
	}

	.guiding-page .offering-hero__action {
		margin-top: 33.5px;
	}

	/* Centred on the facts column's ink (see the header): down by the
	   H1's margin and the space above its caps, less 6px for the button
	   (57px tall, drawn 51), so the photo's top sits 9px under the H1
	   caps, as drawn; the dots' tap row under their ink taken out. */
	.guiding-page .offering-hero__gallery {
		margin-top: 19.5px;
		margin-bottom: -16.5px;
	}

	.guiding-page .offering-gallery--single {
		margin-top: 17.5px;
		margin-bottom: 0;
	}
}

/* The facts column on the page's centre line, the gallery against the
   content's left edge (the previous arrow's chevron on it, 2px in) and
   ending 16px (1024) to 44px (1440) short of the centre: 466px photos
   from 1440, 40px between them and the arrows' chevrons, as drawn. */
@media (min-width: 1024px) {
	.guiding-page .offering-hero__grid:not(.offering-hero__grid--no-photos) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0;
	}

	.guiding-page .offering-hero__grid:not(.offering-hero__grid--no-photos) > .offering-hero__gallery {
		margin-right: clamp(16px, 6.731vw - 52.92px, 44px);
		margin-left: -14px;
	}
}

/* ============================================================
   Key Information
   ============================================================ */

/* Side by side (two across from 1280), items of different lengths each
   keep their text from the top: stretched to the row's height (the
   course's grid), a shorter text was centred in it, its first line out
   of step with its neighbour's. */
.guiding-page .offering-key-info__list {
	align-items: start;
}

/* The compass at its drawn size (39 x 48), in the 48px row. */
.guiding-page .offering-key-info__item--compass .offering-key-info__illustration {
	width: 39px;
}

/* Phones: the illustrations on the gutter, as drawn. */
.guiding-page .offering-key-info__illustration {
	justify-self: start;
}

.guiding-page .offering-key-info__text strong {
	font-weight: var(--fw-bold);
}

/* The AMI link: bold and underlined, as drawn; deep orange on hover and
   keyboard focus (with the light ring), underline kept. */
.guiding-page .offering-key-info__text a {
	color: var(--color-link);
	font-weight: var(--fw-bold);
	text-decoration-line: underline;
	transition: color var(--transition);
}

.guiding-page .offering-key-info__text a:focus-visible {
	color: var(--color-link-hover-on-light);
	outline-color: var(--color-focus-light);
}

@media (hover: hover) {
	.guiding-page .offering-key-info__text a:hover {
		color: var(--color-link-hover-on-light);
	}
}

@media (min-width: 768px) {
	.guiding-page .offering-key-info__illustration {
		justify-self: center;
	}
}

/* ============================================================
   Info cards
   ============================================================ */

/* Bold phrases (and any lead-in) Bold, as drawn. */
.guiding-page .info-card__item-text strong,
.guiding-page .info-card__lead {
	font-weight: var(--fw-bold);
}

/* The disc centred on the item's first line (its top 0.5px into the
   line box), as the guiding files draw it (the course's sits 5px lower,
   on the caps), and 16px between items however many lines they take:
   one-line items 40.5 apart, two-line 64 (drawn 38-48 and 62-64). */
.guiding-page .info-card__check {
	margin-top: 0.5px;
}

.guiding-page .info-card__list {
	gap: 16px;
}

/* Phones: the guiding file's more open card (see the header). */
.guiding-page .info-cards {
	--info-cards-gap-y: 40px;
}

.guiding-page .info-card {
	padding-top: 27.5px;
	padding-bottom: 23.5px;
}

.guiding-page .info-card .info-card__title {
	font-size: var(--fs-h3-static);
}

.guiding-page .info-card__title + .info-card__intro,
.guiding-page .info-card__title + .info-card__list,
.guiding-page .info-card__title + .info-card__prose {
	margin-top: 19.5px;
}

/* Tablets and desktop: the course's card padding (32 / 30) and 22px
   under the heading; the intro 12px above its list (course 16: its
   last line 18px over the first item's text and 12 over its disc, as
   drawn); the cards 40px apart both ways at 768 (the phones' gap),
   rising to the course's 56 across and 48 down at 1440. */
@media (min-width: 768px) {
	.guiding-page .info-cards {
		--info-cards-gap-x: clamp(40px, 2.381vw + 21.71px, 56px);
		--info-cards-gap-y: clamp(40px, 1.19vw + 30.86px, 48px);
	}

	.guiding-page .info-card {
		padding-top: 32px;
		padding-bottom: 30px;
	}

	.guiding-page .info-card__title + .info-card__intro,
	.guiding-page .info-card__title + .info-card__list,
	.guiding-page .info-card__title + .info-card__prose {
		margin-top: 22px;
	}

	.guiding-page .info-card__intro + .info-card__list {
		margin-top: 12px;
	}
}

/* ============================================================
   Why choose band
   ============================================================ */

/* Two lines per reason (as drawn): the block keeps to about the heading's
   width (973px at 1440), centred, instead of filling the container. */
@media (min-width: 1024px) {
	.guiding-page .why-band__content {
		max-width: 62rem;
	}
}

/* ============================================================
   Related options
   ============================================================ */

/* The course page's next step cards (offering-next-step.css) after the
   band, on Cream: every card White, guided days too (on the White list
   page their body is Grey Faint, as drawn there), so a row mixing guided
   days and courses reads as one set. */
.guiding-page .offering-next-step .offering-card--guiding {
	background-color: var(--color-surface);
}