/**
 * Layout: container, sections, grids, the responsive contract.
 *
 * Mobile-first. The handoff was drawn at a fixed 1280px container with no
 * responsive design at all, so the breakpoints below are the theme's own:
 *
 *   < 600px    single column throughout, tables scroll in their own container
 *   600–899    3-up and 4-up become 2-up; 6-up becomes 3x2
 *   900–1279   full grids at reduced gaps
 *   >= 1280    exactly as designed
 *
 * Airport traffic skews heavily to phones checking flight status, so the base
 * stylesheet is the phone layout and complexity is added upward.
 *
 * @package LCA
 */

.lca-main {
	display: block;
}

/* ---- Container ---- */

.lca-container,
.lca-section__inner {
	width: 100%;
	max-width: var(--lca-container);
	margin-inline: auto;
	padding-inline: var(--lca-gutter);
}

/* ---- Sections ---- */

.lca-section {
	padding-block: var(--lca-section-y);
}

.lca-section--flush {
	padding-block: 0;
}

.lca-section--alt {
	background: var(--lca-sand-alt);
}

.lca-section--navy {
	background: var(--lca-navy);
	color: var(--lca-on-navy);
}

.lca-section--navy h1,
.lca-section--navy h2,
.lca-section--navy h3,
.lca-section--navy h4 {
	color: var(--lca-on-navy);
}

.lca-section--navy p {
	color: var(--lca-on-navy-strong);
}

.lca-section--teal {
	background: var(--lca-teal);
	color: var(--lca-on-navy);
}

.lca-section--teal h2,
.lca-section--teal h3 {
	color: var(--lca-on-navy);
}

.lca-section--teal p {
	color: var(--lca-on-navy-strong);
}

/* ---- Prose ---- */

.lca-prose {
	max-width: var(--lca-measure);
}

/* On a post the same element is both the prose wrapper and the measured
   column. The measure belongs to the text blocks inside it, not to the column
   — capping the column at 600px left the floated images nowhere to sit and
   two thirds of the page empty beside them. */
.lca-prose.lca-entry--measured {
	max-width: none;
}

.lca-prose--lead {
	font-size: var(--lca-fs-lead);
}

/* Text-led pages (policies, terms, statements) read at the prose measure,
   centred in the container.

   The measure goes on each child rather than on the wrapper: capping the
   wrapper would squeeze a rate table or a map figure into a 65ch column,
   and several migrated pages are mostly table. So paragraphs, headings and
   lists get the measure; anything that is genuinely wide keeps the
   container. */
/* Both of these are qualified with .entry-content deliberately. The generic
   `.entry-content > *` rule further down carries the same specificity and
   comes later in the file, so it used to win and the measure never applied
   at all — prose rendered at 1184px, about 150 characters a line. */
.entry-content.lca-entry--measured > * {
	max-width: var(--lca-measure);
	margin-inline: auto;
}

/* Aligned images wrap, the way they did on the old site.

   The catch on a measured page: the prose is capped at the measure but its
   containing block is the full column, so a plain `float: right` parks the
   image against the column edge with a canyon of white between it and the
   words it belongs to. The outer margin closes that canyon - it is the
   difference between the column and the measure, so the image lands flush
   with the right edge of the text above it and the following lines wrap
   tight against it. max() keeps it at zero once the column is narrower
   than the measure, where no canyon exists to close. */
.entry-content > .alignright {
	float: right;
	margin: 0.35em 0 var(--lca-space-3) var(--lca-space-4);
}

.entry-content > .alignleft {
	float: left;
	margin: 0.35em var(--lca-space-4) var(--lca-space-3) 0;
}

.entry-content.lca-entry--measured > .alignright {
	margin-right: max( 0px, calc( 100% - var(--lca-measure) ) );
}

.entry-content.lca-entry--measured > .alignleft {
	margin-left: 0;
}

/* Headings are NOT cleared. The old site lets a heading and the text under
   it wrap beside a floated picture, and clearing them is what produced the
   tall empty band on pages where a float is the last thing before a new
   section: the float has nothing left to wrap, so it stands alone and the
   heading drops below it. */

/* Too narrow to wrap around: the image goes full width and the text runs
   underneath it, which is what every one of these pages does on a phone. */
@media (max-width: 781px) {
	.entry-content > .alignright,
	.entry-content > .alignleft {
		float: none;
		margin-inline: 0;
		margin-right: 0;
	}
}

.entry-content.lca-entry--measured > figure,
.entry-content.lca-entry--measured > .wp-block-image,
.entry-content.lca-entry--measured > .wp-block-table,
.entry-content.lca-entry--measured > .wp-block-gallery,
.entry-content.lca-entry--measured > .wp-block-embed,
.entry-content.lca-entry--measured > .wp-block-columns,
.entry-content.lca-entry--measured > .wp-block-cover,
.entry-content.lca-entry--measured > .wp-block-group,
.entry-content.lca-entry--measured > .alignwide,
.entry-content.lca-entry--measured > .alignfull {
	max-width: 100%;
}

/* Classic-editor content that came across as a core/html block is raw markup
   with bare text nodes between its tags, and a bare text node cannot be
   matched by a child selector — those runs escaped the measure and ran the
   full container width beside 600px paragraphs. Wrapping the block's content
   in one element gives the measure something to hold on to. */
.entry-content.lca-entry--measured > .lca-rawblock {
	max-width: var(--lca-measure);
	margin-inline: auto;
}

/* A pullquote is prose, not a wide element — the generic figure exception
   above would otherwise let a paragraph of terms run the full container. */
.entry-content.lca-entry--measured > .wp-block-pullquote,
.entry-content.lca-entry--measured > .wp-block-quote {
	max-width: var(--lca-measure);
}

.lca-rawblock > :first-child {
	margin-top: 0;
}

.lca-rawblock ul,
.lca-rawblock ol {
	padding-left: 1.25em;
}

.lca-rawblock li {
	margin-bottom: 0.4em;
}

/* A table wider than the page scrolls inside itself rather than pushing the
   whole document sideways. */
.lca-entry--measured .wp-block-table {
	overflow-x: auto;
}

/* ---- Plain template ---- */

/* A page with no featured image shows its breadcrumb and title here instead
   of in a hero. `margin-inline: auto` centred that block in the container
   while the content beneath it started at the column's left edge, so the
   title floated in the middle of the page and nothing lined up. It reads as
   the head of the column it introduces, so it starts where the column does. */
.lca-page--plain .lca-page__head {
	max-width: var(--lca-measure);
	margin-inline: 0 auto;
	margin-bottom: var(--lca-space-4);
}

.lca-page--plain .lca-page__head h1 {
	margin-top: 0.25em;
}

/* A plain page that does carry a hero already has its breadcrumbs and h1 in
   the hero, so the content starts straight in. */
.lca-page--plain .lca-hero-wrap + .lca-section {
	padding-top: var(--lca-space-5);
}

/* A column whose image was never chosen still reserves its share of the row,
   so the copy beside it reads at half measure for no visible reason. An image
   block with no image renders as nothing at all, which leaves the column
   genuinely empty — so it steps out of the row, and its partner takes the
   width back. Both reverse themselves the moment a picture is added.

   `:empty` and the sibling combinator are used rather than `:not(:has(…))`
   because `:has()` cannot be nested inside `:has()`; a rule written that way
   is invalid and is dropped silently, which is easy to mistake for a
   specificity problem. */
.entry-content .wp-block-columns > .wp-block-column:empty {
	display: none;
}

.entry-content .wp-block-columns > .wp-block-column:has( ~ .wp-block-column:empty ),
.entry-content .wp-block-columns > .wp-block-column:empty ~ .wp-block-column {
	/* The editor writes the share as an inline style, so this has to shout. */
	flex-basis: auto !important;
	flex-grow: 1;
}

/* Core's group padding is meant for full-width bands. Inside the reading
   column it just insets a block from the text above and below it. */
.entry-content.lca-entry--measured .wp-block-group.has-global-padding {
	padding-inline: 0;
}

/* ---- Grids ----
   One grid primitive, four densities. Each collapses on the same schedule so
   a page built from mixed patterns stays visually coherent at every width. */

/* minmax(0, 1fr) rather than 1fr: a bare 1fr track floors at the item's
   intrinsic width, so one card with a long label ("Ground Transportation")
   widens its own column and knocks the whole row out of alignment.
   minmax(0, ...) keeps every track exactly equal. */
.lca-grid {
	display: grid;
	gap: var(--lca-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.lca-grid--2,
	.lca-grid--3,
	.lca-grid--4,
	.lca-grid--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lca-grid--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.lca-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lca-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* The 5-up transportation row: four across, with the fifth spanning the
	   full width rather than sitting alone in a short row. */
	.lca-grid--5 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lca-grid--5 > :last-child:nth-child(5) {
		grid-column: 1 / -1;
	}

	.lca-grid--6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.lca-grid--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.lca-grid--5 > :last-child:nth-child(5) {
		grid-column: auto;
	}
}

/* Core's block-gap rule adds a top margin to every sibling after the first.
   Inside a grid that shifts items 2..n down while the first stays put, which
   is what knocked the tile row out of line. The grid owns its own spacing. */
.lca-grid > * {
	margin-block: 0;
}

/* Edge-to-edge grids: cards touch, sharing a single outer border. Used by the
   quick-link tiles and the transportation row. */
.lca-grid--flush {
	gap: 0;
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
	overflow: hidden;
}

/* ---- Two-column media + text ----
   Four instances across the designs. The image side is switchable so one
   pattern covers all of them. */

.lca-split {
	display: grid;
	gap: var(--lca-space-4);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 900px) {
	.lca-split {
		gap: var(--lca-space-5);
		grid-template-columns: 1fr 1fr;
	}

	.lca-split--wide-first {
		grid-template-columns: 1.2fr 1fr;
	}

	.lca-split--wide-last {
		grid-template-columns: 1fr 1.2fr;
	}

	/* Reverse visual order without reversing DOM order, so the reading order
	   stays correct for screen readers and keyboard users. */
	.lca-split--media-last .lca-split__media {
		order: 2;
	}
}

.lca-split__media img {
	width: 100%;
	border-radius: var(--lca-radius-card);
}

/* ---- Wide content ----
   Tables, code and diagrams scroll inside their own container. The page body
   never scrolls sideways. */

.lca-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---- Dotted divider ---- */

.lca-divider {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px dotted var(--lca-divider-dotted);
}

/* ---- Block editor alignment ----

   theme.json sets contentSize and wideSize to the same 1280px, because the
   design has one column width and no wider variant. So "wide" is not a
   bleed — it is the container. Only "full" goes edge to edge.

   The max-width also carries the gutter, so sections never touch the
   viewport edge on a phone without every block needing its own padding. */

.entry-content > * {
	max-width: min( var(--lca-container), 100% - (var(--lca-gutter) * 2) );
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: min( var(--lca-container), 100% - (var(--lca-gutter) * 2) );
}

.entry-content > .alignfull {
	max-width: none;
	width: 100%;
}

/* A full-bleed band still keeps its inner content on the container grid. */
.entry-content > .alignfull > .wp-block-group__inner-container,
.entry-content > .alignfull > * {
	max-width: var(--lca-container);
	margin-inline: auto;
	padding-inline: var(--lca-gutter);
}

/* =====================================================================
   Migrated content pages

   Forty-eight pages came across from the old site as a title and a wall
   of paragraphs: correct content, no design decisions. The block markup
   is what it is and rewriting forty-eight pages by hand is not the job,
   so the treatment lives here — the same rules the designed sections
   use, reached through the structure the migration actually produced.
   ===================================================================== */

/* A heading after a run of prose needs air above it, or the page reads
   as one undifferentiated column. */
.lca-entry--measured > h2 {
	margin-top: var(--lca-space-6);
	padding-top: var(--lca-space-3);
	border-top: 1px solid var(--lca-line);
}

.lca-entry--measured > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.lca-entry--measured > h3 {
	margin-top: var(--lca-space-5);
}

/* Each section on a post owns its own floated picture. The heading and the
   section rule start a new section, so they clear whatever the previous one
   floated instead of sliding up beside it and losing their left edge. */
.lca-single .entry-content.lca-entry--measured > h2,
.lca-single .entry-content.lca-entry--measured > h3,
.lca-single .entry-content.lca-entry--measured > .wp-block-separator {
	clear: both;
}

/* The dotted rule is the design's section break; it needs room to act
   like one rather than sitting tight against the paragraph above. */
.lca-entry--measured > .wp-block-separator {
	max-width: var(--lca-measure);
	margin-block: var(--lca-space-5);
}

/* A separator immediately followed by a heading is doing the same job
   twice. Let the rule carry it and drop the heading's own border. */
.lca-entry--measured > .wp-block-separator + h2 {
	margin-top: var(--lca-space-3);
	padding-top: 0;
	border-top: 0;
}

/* ---------------------------------------------------------------------
   Questions block

   The wrapper exists so the schema code can find a page's questions; it is
   not meant to be a visual container. Its children therefore need the same
   measure, alignment and heading rhythm they would get standing directly in
   the column — core's constrained-layout rule otherwise centres them across
   the full container width, which on a text page reads as a different page.
   Each rule carries the .entry-content chain so it out-specifies core's
   generated container rule whichever order the two stylesheets load in.
   --------------------------------------------------------------------- */

.entry-content .lca-questions {
	padding-inline: 0;
}

.entry-content .lca-questions > :is( h2, h3, h4, p, ul, ol, blockquote ) {
	max-width: var(--lca-measure);
	margin-inline: 0 auto;
}

.entry-content .lca-questions > h2 {
	margin-top: var(--lca-space-6);
	padding-top: var(--lca-space-3);
	border-top: 1px solid var(--lca-line);
}

.entry-content .lca-questions > h3 {
	margin-top: var(--lca-space-5);
}

/* Same reasoning as the rule above: when a separator already draws the
   section break, the heading should not draw a second line under it. Here
   the separator is a sibling of the wrapper rather than of the heading. */
.lca-entry--measured > .wp-block-separator + .lca-questions > h2 {
	margin-top: var(--lca-space-3);
	padding-top: 0;
	border-top: 0;
}

/* Pictures in migrated prose were dropped in raw. Give them the card
   treatment the designed sections use so they read as deliberate. */
.lca-entry--measured > .wp-block-image img,
.lca-entry--measured .wp-block-columns .wp-block-image img {
	border-radius: var(--lca-radius-card);
}

/* A full-width picture between paragraphs gets the container, not the
   text measure — a photograph squeezed to 65ch looks like a mistake. */
.lca-entry--measured > .wp-block-image {
	margin-block: var(--lca-space-4);
}

.lca-entry--measured > .wp-block-image.aligncenter,
.lca-entry--measured > .wp-block-image:not(.alignleft):not(.alignright) {
	max-width: var(--lca-measure);
}

/* Logo and thumbnail rows arrived as plain columns. This is the grid the
   design uses for them: even tiles, centred marks, a card behind each. */
.lca-entry--measured .wp-block-columns {
	gap: var(--lca-space-3);
	margin-block: var(--lca-space-4);
}

.lca-entry--measured .wp-block-columns .wp-block-image {
	margin: 0;
}

.lca-entry--measured .wp-block-columns .wp-block-column:has( > .wp-block-image:only-child ),
.lca-entry--measured .wp-block-columns .wp-block-column:has( > .wp-block-image:first-child:last-child ) {
	display: grid;
	place-items: center;
	padding: var(--lca-space-3);
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

/* Lists in migrated copy: the marker sits closer and the items breathe. */
.lca-entry--measured > ul,
.lca-entry--measured > ol {
	padding-left: 1.25em;
}

.lca-entry--measured > ul li,
.lca-entry--measured > ol li {
	margin-bottom: 0.4em;
}

/* The closing call to action is rendered outside the container by the plain
   template, so it needs no viewport maths at all — it is already the width
   of the page, and only its inner content comes back to the grid. */
.lca-page__band {
	width: 100%;
	margin-top: var(--lca-space-6);
}

.lca-page__band > .alignfull,
.lca-page__band > .wp-block-group {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.lca-page__band > .wp-block-separator {
	max-width: min( var(--lca-container), 100% - (var(--lca-gutter) * 2) );
	margin-inline: auto;
	margin-block: 0 var(--lca-space-5);
}

.lca-page__band .wp-block-group > * {
	max-width: var(--lca-container);
	margin-inline: auto;
}

/* The trailing call-to-action band. It uses the same two-column shape as the
   lca/section-cta-* patterns: copy on the left, button on the right, both
   vertically centred, so the right half of the band is never left empty.
   Core's constrained layout already centres the columns at the container
   width, so nothing here needs to fight it. */
.lca-page__band > .wp-block-group {
	width: 100%;
	max-width: none;
}

.lca-page__band .wp-block-columns {
	align-items: center;
}

.lca-page__band .wp-block-buttons {
	justify-content: flex-end;
	align-items: flex-end;
}

.lca-page__band .wp-block-column > p:not( .has-eyebrow-font-size ) {
	max-width: var(--lca-measure);
}

/* The eyebrow gets the same terracotta pill the heroes use, so the band is
   not the one place on the site where an eyebrow is plain uppercase text. */
.lca-page__band p.has-eyebrow-font-size {
	display: inline-block;
	width: fit-content;
	margin-bottom: 12px;
	padding: 6px 14px;
	background: var(--lca-terracotta);
	border-radius: 6px;
}

/* The buttons stack in the narrow column and share one width, so the right
   side of the band reads as a single block rather than two ragged pills. */
.lca-page__band .wp-block-buttons.is-vertical .wp-block-button {
	width: 100%;
	max-width: 260px;
}

.lca-page__band .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
}

.lca-page__band .wp-block-buttons.is-vertical .wp-block-button__link {
	width: 100%;
}

/* Stacked: the columns sit one above the other, so the buttons run the full
   width of the copy above them. Full-width taps beat a ragged right edge on
   a phone, and the class is repeated to out-specify core's own
   is-content-justification-right rule, which would otherwise still pull them
   to the right of a now-narrow column. */
@media (max-width: 781px) {
	.lca-page__band .wp-block-buttons.is-vertical.is-content-justification-right {
		justify-content: flex-start;
		align-items: stretch;
	}

	.lca-page__band .wp-block-buttons.is-vertical .wp-block-button {
		width: 100%;
		max-width: none;
	}
}

.lca-page--plain .entry-content.lca-entry--measured > .alignfull > * {
	max-width: var(--lca-container);
	margin-inline: auto;
}

/* Its own text stays at a readable measure inside the band. */
.lca-entry--measured > .alignfull p,
.lca-entry--measured > .alignfull h2 {
	max-width: var(--lca-measure);
}

/* ---- Reading column and contents aside ----

   The designed interior pages put the reading column on the left and a panel
   in the right-hand third. Migrated text pages have no panel, so on a wide
   screen they take the same two-column measure and fill the right with the
   page's own contents; without enough headings to list, the column simply
   centres as before. */

.lca-page__body--aside {
	display: grid;
	gap: var(--lca-space-5);
	align-items: start;
}

@media (min-width: 1000px) {
	.lca-page__body--aside {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: var(--lca-space-6);
	}

	/* Left-aligned in its own column, the way the comps set the intro
	   paragraph — the auto margins are only for the single-column case. */
	.lca-page__body--aside .entry-content.lca-entry--measured > * {
		margin-inline: 0;
	}
}

.lca-toc {
	align-self: start;
	padding: var(--lca-space-3);
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

/* The column, not just the contents box: with a help card under the
   contents the whole stack should travel together. */
.lca-aside {
	display: grid;
	gap: var(--lca-space-3);
	align-self: start;
}

@media (min-width: 1000px) {
	.lca-aside {
		position: sticky;
		top: var(--lca-space-3);
	}
}

.lca-aside__help {
	padding: var(--lca-space-3);
	background: var(--lca-sand);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

.lca-aside__title {
	margin: 0 0 var(--lca-space-1);
	font-size: var(--lca-fs-h4);
}

.lca-aside__text {
	margin: 0 0 var(--lca-space-2);
	color: var(--lca-muted);
	font-size: var(--lca-fs-small);
}

.lca-aside__phone {
	margin: 0 0 var(--lca-space-2);
	font-size: var(--lca-fs-lead);
	font-weight: 700;
}

.lca-aside__phone a {
	color: var(--lca-navy);
	text-decoration: none;
}

.lca-aside__phone a:hover {
	text-decoration: underline;
}

.lca-aside__cta {
	display: block;
	text-align: center;
}

/* The booking page is the one interior page with no right-hand column: the
   booking form takes the full width of the container. */
.lca-page__body--wide .entry-content.lca-entry--measured > * {
	margin-inline: 0;
}

.lca-page__body--wide .entry-content.lca-entry--measured > .lca-booking,
.lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-shortcode,
.lca-page__body--wide .entry-content.lca-entry--measured > form,
.lca-page__body--wide .entry-content.lca-entry--measured > div {
	max-width: none;
}

/* This page has no right-hand column, so its content uses the whole width -
   no reading measure. Mixing the two was what made the lower half alternate
   between full-width and half-width blocks. */
.lca-page__body--wide .entry-content :is( p, h2, h3, h4, h5, li, blockquote, dd, ul, ol ) {
	max-width: none;
}

/* The booking form renders into a shadow root, so nothing inside it can be
   reached from here. Two things it needs, and both have to out-specify the
   measure rule on `.entry-content.lca-entry--measured > *`, which is why the
   full chain is spelled out: the whole column to lay out in, and its own
   scroll box so that on a narrow screen its internal layout cannot drag the
   page sideways with it. */
.lca-page__body--wide .entry-content.lca-entry--measured > sjd-form,
.lca-page__body--wide .entry-content.lca-entry--measured > .lca-rawblock,
.lca-page__body--wide .entry-content.lca-entry--measured > hr,
.lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-separator,
.lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-group {
	display: block;
	width: 100%;
	max-width: none;
}

.lca-page__body--wide .entry-content.lca-entry--measured > sjd-form {
	overflow-x: auto;
}

/* The safety notice sits inside an outer group that carries WordPress's
   global padding, which held the card 24px in from the column while the
   hero and the heading above it ran the full width. On a page with no
   sidebar the card should line up with them. */
.lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-group.has-global-padding {
	padding-inline: 0;
}

/* The call-out is the one exception to the full-width rule above: a
   full-width card with its copy held to a reading measure and centred
   inside it. Core's constrained layout supplies the centring; this only
   restores the width cap that the rule above removes. */
.lca-page__body--wide .entry-content .is-style-lca-alert > :is( p, h2, h3, h4, li, blockquote ) {
	max-width: var(--lca-measure);
}

@media (min-width: 1000px) {
	.lca-toc {
		position: sticky;
		/* Clear of nothing in particular — the header does not stick — but a
		   little breathing room reads better than flush to the viewport. */
		top: var(--lca-space-3);
		max-height: calc(100vh - var(--lca-space-5));
		overflow-y: auto;
	}
}

.lca-toc__heading {
	margin: 0 0 var(--lca-space-2);
	color: var(--lca-muted);
	font-family: var(--lca-font-sans);
	font-size: var(--lca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--lca-ls-eyebrow);
	text-transform: uppercase;
}

.lca-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.lca-toc__item + .lca-toc__item {
	border-top: 1px solid var(--lca-line-soft);
}

.lca-toc__link {
	display: block;
	padding: 9px 0;
	color: var(--lca-ink);
	font-size: var(--lca-fs-small);
	line-height: 1.35;
	text-decoration: none;
}

.lca-toc__link:hover,
.lca-toc__link:focus-visible {
	color: var(--lca-terracotta);
	text-decoration: underline;
}

/* Jumping to a heading should not tuck it under the top of the window. */
.entry-content h2[id],
.entry-content h3[id] {
	scroll-margin-top: var(--lca-space-4);
}

/* ---- Directory grids ----

   Car rental desks, airlines, shops, dining. The migration left each entry
   as a full-width two-column band with a rule under it, so twenty entries
   were twenty screens. As a grid of cards the same twenty fit on one, and
   the card's own edge does the job the rules were doing. */

.lca-directory {
	display: grid;
	/* 230px rather than 200px: at the measured column width 200px fits four
	   cards, and four leaves so little room inside the padding that every
	   entry's address breaks across three lines. Three wider cards read as
	   one address per two lines. */
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--lca-space-3);
	margin-block: var(--lca-space-5);
}

/* A core/group emits WordPress's flow layout, whose `> * { margin-block-start }`
   rule skips the first child. Inside a grid that staggers the first card of
   each row and doubles the row gap, so the grid takes its spacing back. */
.lca-directory > *,
.lca-dircard > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.lca-dircard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

/* The logos are supplied at wildly different shapes and on different
   grounds, so each sits in a fixed white box and is contained, never
   cropped — a cropped wordmark is a broken wordmark. */
.lca-dircard__logo {
	display: grid;
	place-items: center;
	height: 104px;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	padding: var(--lca-space-2);
	background: var(--lca-white);
	border-bottom: 1px solid var(--lca-line-soft);
}

/* The image fills the box and object-fit letterboxes inside it, so a logo of
   any shape is contained rather than cropped and can never push past the
   divider onto the text below. A max-height cap cannot do this: a percentage
   max-height resolves to none against an auto-height grid area, and an
   absolute one is wrong the moment the box height changes. */
/* The cap is an absolute length, not a percentage: the box is 104px tall
   with 16px of padding and a 1px rule, and a percentage height resolves to
   auto against the optimiser's inline <picture> wrapper — which is how the
   logos ended up at their natural 150px and clipped. */
.lca-dircard__logo picture {
	display: block;
	width: auto;
	margin-inline: auto;
}

.lca-dircard__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 71px;
	/* On the image, not the <picture> wrapper: blocks.css gives that wrapper
	   width:100% at equal specificity and loads later, so centring it there
	   does nothing. Centring here works whichever rule wins on the wrapper. */
	margin-inline: auto;
	border-radius: 0;
	object-fit: contain;
}

/* The migration left two shapes of card. Some wrap their text in a
   .lca-dircard__body; most drop the paragraph straight into the card, and on
   the car rental page none of the 19 entries has the wrapper at all. Every
   rule below therefore matches the paragraph whether or not it is wrapped —
   written only against __body they were dead selectors, and the text sat hard
   against the card border with no padding at all. */
.lca-dircard__body,
.lca-dircard > :not( .lca-dircard__logo ) {
	padding: var(--lca-space-2) var(--lca-space-3) var(--lca-space-3);
}

/* Only the wrapper grows. Applied to a bare paragraph it would stretch each
   one in a multi-paragraph card instead of filling the card once. */
.lca-dircard__body {
	flex: 1;
}

.lca-dircard__body p,
.lca-dircard > p {
	margin: 0;
	color: var(--lca-body);
	line-height: 1.5;
}

.lca-dircard__body p + p,
.lca-dircard > p + p {
	margin-top: 0.4em;
}

/* The entry name is the first link and carries the scan, so it gets the
   weight; the phone number under it stays a link but reads as detail. */
/* inline-block, not block. Every card in the migration already ends the name
   with a <br> — either after the <strong> or after the <a> wrapping it — so a
   block here produced two line breaks and a gap under every entry name. This
   keeps the margin working without adding a break of its own. */
.lca-dircard__body strong,
.lca-dircard > :not( .lca-dircard__logo ) strong {
	display: inline-block;
	margin-bottom: 2px;
	font-size: var(--lca-fs-base);
	line-height: 1.25;
}

/* text-decoration does not propagate into an atomic inline-level box, so
   making the name an inline-block stopped the anchor's underline painting on
   it. Per the note below that underline is load-bearing, not decoration, so
   it is set on the name explicitly. Both nestings the migration produced are
   covered; a <strong> that is not a link is untouched. */
.lca-dircard a > strong,
.lca-dircard strong > a {
	text-decoration: underline;
}

/* No text-decoration:none here. Navy link text on the card's grey body copy
   is 2.15:1 — below the 3:1 WCAG F73 wants before colour alone may mark a
   link — so the underline is load-bearing, not decoration. */
.lca-dircard__body a,
.lca-dircard__body strong a,
.lca-dircard > :not( .lca-dircard__logo ) a {
	color: var(--lca-ink);
}

.lca-dircard__body a:hover,
.lca-dircard__body a:focus-visible,
.lca-dircard > :not( .lca-dircard__logo ) a:hover,
.lca-dircard > :not( .lca-dircard__logo ) a:focus-visible {
	color: var(--lca-terracotta);
	text-decoration: underline;
}

/* A directory is wider than the reading measure, so it breaks out of it. */
.lca-entry--measured > .lca-directory {
	max-width: 100%;
}

@media (max-width: 599px) {
	.lca-directory {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--lca-space-2);
	}

	.lca-dircard__logo {
		height: 80px;
	}

	.lca-dircard__logo img {
		max-height: 47px;
	}

}

/* A page that wraps text around a picture needs a wider column than one
   that is pure prose. At the 600px reading measure, a 280px image leaves a
   286px ribbon of text beside it - about 34 characters a line, which is
   unreadable. Widening the measure to 780px on exactly the pages that
   float something gives roughly 55 characters beside the image and keeps
   every other page at the reading measure. The old site ran its whole
   column at ~915px; this is the same shape, without pushing the plain
   paragraphs on these pages past a hundred characters a line. */
.entry-content:has( > .alignright, > .alignleft ) {
	--lca-measure: 780px;
}

/* However wide the column, a floated picture never takes so much of it that
   the text beside it stops being readable. 42% of a 780px column is 328px,
   leaving about 55 characters a line; in the narrower column a post uses it
   scales down with it. */
.entry-content > .alignright,
.entry-content > .alignleft,
.entry-content.lca-entry--measured > .alignright,
.entry-content.lca-entry--measured > .alignleft {
	max-width: min( 340px, 42% );
	height: auto;
}

/* Two pictures on the same side stack instead of sitting shoulder to
   shoulder with a sliver of text beside them. */
.entry-content > .alignright {
	clear: right;
}

.entry-content > .alignleft {
	clear: left;
}

/* ---- Wrapped images, last word ----

   These sit at the end of the file on purpose. The contents-aside rule
   above zeroes the inline margins on every child of the measured column so
   the prose starts hard against the left edge; applied to a floated figure
   that also flattens it back against the column's right edge, reopening the
   canyon the margin exists to close. Same declarations, enough specificity
   to survive that rule, and the phone reset repeated to match. */

.lca-page__body--aside .entry-content.lca-entry--measured > .alignright,
.entry-content.lca-entry--measured > .alignright {
	margin-left: var(--lca-space-4);
	margin-right: max( 0px, calc( 100% - var(--lca-measure) ) );
}

.lca-page__body--aside .entry-content.lca-entry--measured > .alignleft,
.entry-content.lca-entry--measured > .alignleft {
	margin-left: 0;
	margin-right: var(--lca-space-4);
}

@media (max-width: 781px) {
	.lca-page__body--aside .entry-content.lca-entry--measured > .alignright,
	.lca-page__body--aside .entry-content.lca-entry--measured > .alignleft,
	.entry-content.lca-entry--measured > .alignright,
	.entry-content.lca-entry--measured > .alignleft {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}

	/* Nothing wraps at this width, so the proportional cap that reserves a
	   readable ribbon beside a float has no job left to do and the picture
	   takes the column. This repeats the reset from the earlier breakpoint
	   because the cap is declared between the two. */
	.entry-content > .alignright,
	.entry-content > .alignleft,
	.entry-content.lca-entry--measured > .alignright,
	.entry-content.lca-entry--measured > .alignleft {
		max-width: 100%;
	}
}

/* A raw HTML block holds third-party markup we do not control - the currency
   converter widget lays itself out about 1700px wide - so it scrolls inside
   its own box rather than pushing the whole page sideways. */
.lca-rawblock {
	max-width: 100%;
	overflow-x: auto;
}