/**
 * Components.
 *
 * Every value here traces to an inline style in the handoff prototypes,
 * except where a comment says otherwise. Two categories of change were made
 * deliberately and are marked inline: WCAG AA contrast corrections, and
 * responsive behaviour, which the handoff never designed.
 *
 * @package LCA
 */

/* ===================================================================== */
/* Buttons                                                                */
/* ===================================================================== */

.lca-btn {
	display: inline-flex;
	gap: var(--lca-space-1);
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	background: var(--lca-terracotta);
	color: var(--lca-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.2;
	text-align: center;
	border: 0;
	border-radius: var(--lca-radius-btn);
	cursor: pointer;
	transition: background-color var(--lca-transition);
}

.lca-btn:hover {
	background: var(--lca-terracotta-dark);
	color: var(--lca-white);
}

.lca-btn--navy {
	background: var(--lca-navy);
}

.lca-btn--navy:hover {
	background: var(--lca-navy-dark);
}

.lca-btn--teal {
	background: var(--lca-teal);
}

.lca-btn--teal:hover {
	background: var(--lca-teal-dark);
}

.lca-btn--ghost {
	background: transparent;
	color: var(--lca-navy);
	border: 1px solid var(--lca-line);
}

.lca-btn--ghost:hover {
	background: var(--lca-sand-alt);
	color: var(--lca-navy);
}

/* ===================================================================== */
/* Eyebrow, breadcrumb                                                    */
/* ===================================================================== */

.lca-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	color: var(--lca-terracotta);
	font-size: var(--lca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--lca-ls-eyebrow);
	text-transform: uppercase;
}

.lca-eyebrow--pill {
	padding: 6px 12px;
	background: var(--lca-terracotta);
	color: var(--lca-white);
	border-radius: 6px;
}

.lca-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lca-space-1);
	margin: 0 0 var(--lca-space-2);
	padding: 0;
	list-style: none;
	font-size: var(--lca-fs-small);
}

.lca-breadcrumb__list li + li::before {
	margin-right: var(--lca-space-1);
	content: "/";
	opacity: 0.6;
}

/* ===================================================================== */
/* Heroes                                                                 */
/* ===================================================================== */

.lca-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--lca-radius-hero);
}

.lca-hero__media,
.lca-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lca-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--lca-scrim-page);
}

.lca-hero__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--lca-space-3) var(--lca-space-3) var(--lca-space-4);
	color: var(--lca-white);
}

/* 20ch resolved to about 430px, which broke a title as ordinary as "Book
   Transportation Now" onto two lines while shorter titles sat on one. An
   absolute cap keeps the wrap point the same on every page, for the same
   reason the reading measure is not in ch either. */
.lca-hero__body h1,
.lca-hero__body h2 {
	margin: 0 0 12px;
	max-width: min( 100%, 720px );
	color: var(--lca-white);
}

.lca-hero__body p {
	max-width: 46ch;
	margin: 0;
	color: rgb(255 255 255 / 0.92);
	font-size: var(--lca-fs-lead);
}

/* Homepage hero: 600px at desktop, reduced on phones. The handoff had no
   mobile treatment, and a 600px band on a 667px-tall phone leaves nothing
   else in the first screen. */
.lca-hero--home {
	height: 380px;
}

@media (min-width: 600px) {
	.lca-hero--home {
		height: 460px;
	}
}

@media (min-width: 900px) {
	.lca-hero--home {
		height: 600px;
	}

	.lca-hero__body {
		padding: 40px 40px 96px;
	}
}

/* The featured-image hero is rendered by the template rather than by a
   block, so it sits outside .entry-content and has to place itself on the
   container grid. */
.lca-hero-wrap {
	max-width: min( var(--lca-container), 100% - (var(--lca-gutter) * 2) );
	margin: var(--lca-space-3) auto 0;
}

/* Interior page hero: 260px, 14px radius, breadcrumb above the heading. */
.lca-hero--page {
	height: 220px;
	border-radius: var(--lca-radius-hero-page);
}

@media (min-width: 600px) {
	.lca-hero--page {
		height: 260px;
	}
}

.lca-hero--page .lca-hero__body {
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--lca-space-3);
}

.lca-hero--page .lca-breadcrumb__list,
.lca-hero--page .lca-breadcrumb a,
.lca-hero--page .lca-breadcrumb span {
	color: rgb(255 255 255 / 0.85);
}

@media (min-width: 900px) {
	.lca-hero--page .lca-hero__body {
		padding: var(--lca-space-4);
	}
}

/* ===================================================================== */
/* Cards                                                                  */
/* ===================================================================== */

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

.lca-card__media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.lca-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--lca-space-1);
	padding: var(--lca-space-3);
}

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

.lca-card__foot {
	margin-top: auto;
	padding-top: var(--lca-space-2);
	border-top: 1px solid var(--lca-line-soft);
	font-weight: 700;
}

.lca-card__price {
	color: var(--lca-terracotta);
	font-size: var(--lca-fs-h4);
	font-variant-numeric: tabular-nums;
}

.lca-card__icon {
	display: grid;
	width: 44px;
	height: 44px;
	margin-bottom: var(--lca-space-1);
	place-items: center;
	border-radius: var(--lca-radius-btn);
}

/* ===================================================================== */
/* Colour card row                                                        */
/*                                                                        */
/* The design's hover was `opacity: 0.85` on the whole card, which fades   */
/* the white label along with the background. Measured, that dropped four  */
/* of the five transportation cards below AA — including teal and          */
/* terracotta, which pass at rest. Hover now darkens the ground only, so    */
/* the label keeps its full contrast.                                      */
/* ===================================================================== */

.lca-colorcard {
	display: flex;
	flex-direction: column;
	gap: var(--lca-space-1);
	padding: 28px;
	color: var(--lca-white);
	transition: background-color var(--lca-transition);
}

.lca-colorcard h3,
.lca-colorcard h4 {
	margin: 0;
	color: var(--lca-white);
	font-family: var(--lca-font-sans);
	font-size: var(--lca-fs-h4);
	font-weight: 700;
}

.lca-colorcard p {
	margin: 0;
	color: rgb(255 255 255 / 0.9);
	font-size: var(--lca-fs-small);
}

.lca-colorcard--teal { background: var(--lca-teal); }
.lca-colorcard--teal:hover { background: var(--lca-teal-dark); }
.lca-colorcard--terracotta { background: var(--lca-terracotta); }
.lca-colorcard--terracotta:hover { background: var(--lca-terracotta-dark); }
.lca-colorcard--navy { background: var(--lca-navy); }
.lca-colorcard--navy:hover { background: var(--lca-navy-dark); }
.lca-colorcard--gold { background: var(--lca-gold); }
.lca-colorcard--gold:hover { background: var(--lca-gold-dark); }
.lca-colorcard--cyan { background: var(--lca-cyan); }
.lca-colorcard--cyan:hover { background: var(--lca-cyan-dark); }

/* ===================================================================== */
/* Quick-link photo tiles                                                 */
/*                                                                        */
/* The design put white 14px labels over a flat colour overlay at 0.78     */
/* opacity on a photograph. Measured over a bright photo that lands at     */
/* 3.35–3.60:1 — below AA, and unpredictable because it depends on the     */
/* image. A bottom-anchored scrim under the label guarantees the ratio     */
/* regardless of the photograph.                                          */
/* ===================================================================== */

.lca-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.lca-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lca-tile__overlay {
	position: absolute;
	inset: 0;
	opacity: 0.78;
	transition: opacity var(--lca-transition);
}

.lca-tile:hover .lca-tile__overlay {
	opacity: 0.9;
}

.lca-tile__scrim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 60%;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.55) 100%);
}

.lca-tile__label {
	position: absolute;
	right: var(--lca-space-2);
	bottom: var(--lca-space-2);
	left: var(--lca-space-2);
	color: var(--lca-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.lca-tile__overlay--terracotta { background: var(--lca-terracotta); }
.lca-tile__overlay--teal { background: var(--lca-teal); }

/* ===================================================================== */
/* Tables                                                                 */
/*                                                                        */
/* The prototypes built the flight and weather grids from <div>s. They are */
/* real tables here: tabular data needs headers, scope and a caption to be */
/* navigable by screen reader (WCAG 1.3.1).                                */
/* ===================================================================== */

.lca-table-wrap {
	overflow-x: auto;
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

.lca-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: var(--lca-fs-small);
}

.lca-table caption {
	padding: var(--lca-space-2) var(--lca-space-3);
	color: var(--lca-body);
	font-size: var(--lca-fs-small);
	text-align: left;
}

.lca-table th {
	padding: 12px var(--lca-space-2);
	background: var(--lca-sand-alt);
	color: var(--lca-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 1px solid var(--lca-line);
}

.lca-table td {
	padding: 12px var(--lca-space-2);
	border-bottom: 1px solid var(--lca-line-soft);
	vertical-align: middle;
}

.lca-table tr:last-child td {
	border-bottom: 0;
}

.lca-table .is-num {
	font-variant-numeric: tabular-nums;
}

.lca-table .is-high { color: var(--lca-terracotta); font-weight: 600; }
.lca-table .is-low { color: var(--lca-teal); font-weight: 600; }

/* Status pills. Colour alone cannot carry "Delayed" versus "On Time"
   (WCAG 1.4.1), so each pill also states its status as text and the
   theme adds a shape difference through the leading marker. */

.lca-pill {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 4px 10px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	border-radius: 6px;
}

.lca-pill::before {
	width: 7px;
	height: 7px;
	background: currentcolor;
	content: "";
}

.lca-pill--ontime {
	background: oklch(96% 0.03 195);
	color: var(--lca-teal-dark);
}

.lca-pill--ontime::before { border-radius: 50%; }

.lca-pill--delayed {
	background: oklch(95% 0.04 45);
	color: #8f2f08;
}

.lca-pill--delayed::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.lca-pill--done {
	background: oklch(95% 0.02 285);
	color: var(--lca-navy);
}

.lca-pill--done::before { border-radius: 1px; }

/* ===================================================================== */
/* FAQ list                                                               */
/*                                                                        */
/* The prototype styled these as an accordion but gave them no interactive */
/* semantics at all. Built on <details>/<summary> so they actually open,   */
/* and are keyboard-operable and announced, with no JavaScript.            */
/* ===================================================================== */

.lca-faq {
	display: grid;
	gap: 0;
}

.lca-faq__item {
	padding-block: var(--lca-space-2);
	border-bottom: 1px solid var(--lca-line);
}

.lca-faq__q {
	display: flex;
	gap: var(--lca-space-2);
	align-items: baseline;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.lca-faq__q::-webkit-details-marker {
	display: none;
}

.lca-faq__q::after {
	flex-shrink: 0;
	color: var(--lca-terracotta);
	font-weight: 400;
	content: "+";
	transition: transform var(--lca-transition);
}

.lca-faq__item[open] .lca-faq__q::after {
	content: "−";
}

.lca-faq__a {
	padding-top: var(--lca-space-1);
	color: var(--lca-body);
}

/* ===================================================================== */
/* News list                                                              */
/* ===================================================================== */

.lca-news {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lca-news__item {
	display: grid;
	gap: 4px var(--lca-space-3);
	padding-block: var(--lca-space-2);
	border-bottom: 1px solid var(--lca-line);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.lca-news__item {
		grid-template-columns: 140px 1fr;
		align-items: baseline;
	}
}

.lca-news__tag {
	color: var(--lca-cyan);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-transform: uppercase;
}

.lca-news__title {
	margin: 0;
	font-family: var(--lca-font-sans);
	font-size: 16px;
	font-weight: 600;
}

/* ===================================================================== */
/* Alert box                                                              */
/* ===================================================================== */

.lca-alert {
	padding: var(--lca-space-3) 28px;
	background: oklch(93% 0.03 250);
	border-radius: var(--lca-radius-card);
}

.lca-alert__title {
	margin: 0 0 var(--lca-space-1);
	font-size: 22px;
}

.lca-alert p {
	max-width: var(--lca-measure);
	color: var(--lca-navy);
}

/* ===================================================================== */
/* Booking widget frame                                                   */
/*                                                                        */
/* Only the outer card is themed. The interior is left unstyled so the     */
/* vendor's own widget CSS is not fought by page styles — the handoff is   */
/* explicit about this, and it is the right call.                          */
/* ===================================================================== */

.lca-embed-frame {
	min-height: 640px;
	padding: var(--lca-space-3);
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

.lca-embed-frame__placeholder {
	display: grid;
	min-height: 560px;
	color: var(--lca-body);
	place-items: center;
	text-align: center;
}

/* ===================================================================== */
/* Overlapping widget card (homepage flight status)                       */
/* ===================================================================== */

.lca-widget {
	position: relative;
	z-index: 2;
	margin-top: -40px;
	margin-inline: var(--lca-space-2);
	padding: var(--lca-space-2);
	background: var(--lca-white);
	border-radius: var(--lca-radius-widget);
	box-shadow: var(--lca-shadow-widget);
}

@media (min-width: 900px) {
	.lca-widget {
		margin-inline: var(--lca-space-4);
	}
}


/* ===================================================================== */
/* 404                                                                    */
/*                                                                        */
/* Cards are text only and carry a brand fill with reversed type. All four */
/* fills are the palette's AA-corrected values, so white body text clears  */
/* 4.5:1 on every one of them (gold is the tightest at 4.55:1) — do not    */
/* swap in a lighter tint without re-measuring.                            */
/* ===================================================================== */

.lca-404__head {
	max-width: 46rem;
	margin-inline: auto;
}

/* Set on the elements, not just the wrapper: headings elsewhere in the theme
   carry their own alignment, and inheritance alone loses to them. */
.lca-404 .lca-404__head,
.lca-404 .lca-404__head .lca-eyebrow,
.lca-404 .lca-404__head h1,
.lca-404 .lca-404__head h2 {
	text-align: center;
}

.lca-404__lede {
	margin: var(--lca-space-1) 0 0;
	color: var(--lca-body);
	font-size: var(--lca-fs-h3);
}

.lca-404-cards {
	display: grid;
	margin: var(--lca-space-5) 0 var(--lca-space-4);
	gap: var(--lca-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lca-404-card {
	position: relative;
	border-color: transparent;
	transition: background-color var(--lca-transition), box-shadow var(--lca-transition);
}

.lca-404-card:hover {
	box-shadow: var(--lca-shadow-card);
}

.lca-404-card:focus-within {
	outline: var(--lca-focus-width) solid var(--lca-focus-color);
	outline-offset: var(--lca-focus-offset);
}

/* Reversed type. Set on the card so every child inherits, including the
   title link, which otherwise picks up the global link colour. */
.lca-404-card,
.lca-404-card p,
.lca-404-card .lca-card__title,
.lca-404-card .lca-card__title a {
	color: var(--lca-white);
}

.lca-404-card p {
	margin: 0;
}

.lca-404-card .lca-card__title a {
	text-decoration: none;
}

/* Stretches the one real link across the whole card, so the click target is
   the card while the tab stop and accessible name stay on a single link. */
.lca-404-card .lca-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lca-404-card--teal { background: var(--lca-teal); }
.lca-404-card--teal:hover { background: var(--lca-teal-dark); }

.lca-404-card--navy { background: var(--lca-navy); }
.lca-404-card--navy:hover { background: var(--lca-navy-dark); }

.lca-404-card--terracotta { background: var(--lca-terracotta); }
.lca-404-card--terracotta:hover { background: var(--lca-terracotta-dark); }

.lca-404-card--gold { background: var(--lca-gold); }
.lca-404-card--gold:hover { background: var(--lca-gold-dark); }

.lca-404__home {
	margin-top: var(--lca-space-3);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.lca-404-card {
		transition: none;
	}
}