/* ==========================================================================
   Photographic layer: hero, feature sections, destination and airport cards.
   Loaded after main.css.
   ========================================================================== */

/* ---------------------------------------------------------- photo hero --- */

.sa-hero--photo {
	position: relative;
	isolation: isolate;
	padding: 0;
	min-height: clamp(30rem, 78vh, 46rem);
	display: grid;
	align-items: end;
	overflow: clip;
	background: var(--sa-green-dk);
}

.sa-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 42%;
}

/* The scrim darkens the side the headline sits on and lets the photograph
   stay a photograph on the other. A full-surface wash makes every hero on the
   web look the same, and wastes the picture you paid attention to choosing. */
.sa-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(100deg,
			rgba(7,28,22,.93) 0%,
			rgba(7,28,22,.82) 26%,
			rgba(7,28,22,.52) 46%,
			rgba(7,28,22,.18) 66%,
			rgba(7,28,22,.04) 86%),
		linear-gradient(to top, rgba(7,28,22,.62) 0%, rgba(7,28,22,.12) 30%, transparent 55%);
}

/* Narrow screens have no spare width for the photograph to show beside the
   text, so the wash becomes vertical instead. */
@media (max-width: 900px) {
	.sa-hero__scrim {
		background:
			linear-gradient(to top,
				rgba(7,28,22,.92) 0%, rgba(7,28,22,.78) 38%, rgba(7,28,22,.42) 64%, rgba(7,28,22,.1) 100%),
			linear-gradient(to right, rgba(7,28,22,.3) 0%, transparent 70%);
	}
}

.sa-hero__inner {
	position: relative; z-index: 2;
	max-width: 76rem; width: 100%;
	margin-inline: auto;
	padding: clamp(3rem, 9vw, 6rem) 1.25rem clamp(2.5rem, 5vw, 3.5rem);
	color: #fff;
}
@media (min-width: 1000px) {
	.sa-hero__inner { padding-bottom: 9rem; }
	/* Keep the headline off the right half so the picture is not just wallpaper. */
	.sa-hero__inner > * { max-width: 36rem; }
	.sa-hero--photo h1 { max-width: 15ch; }
	.sa-hero--photo .sa-hero__lead { max-width: 44ch; }
}

.sa-hero--photo .sa-kicker { color: #F0DFBE; }
.sa-hero--photo .sa-kicker::before { background: var(--sa-gold); }

.sa-hero--photo h1 {
	color: #fff;
	font-size: clamp(2.5rem, 6.4vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -.034em;
	margin: 0 0 1.1rem;
	max-width: 17ch;
	text-shadow: 0 1px 30px rgba(6,26,21,.45);
}
.sa-hero--photo h1 em {
	font-style: normal;
	color: var(--sa-gold);
	font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120;
}

.sa-hero--photo .sa-hero__lead {
	color: rgba(255,255,255,.88);
	font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 2rem;
	text-shadow: 0 1px 16px rgba(6,26,21,.5);
}

.sa-hero--photo .sa-btn--ghost {
	color: #fff;
	border-color: rgba(255,255,255,.42);
	background: rgba(255,255,255,.07);
	backdrop-filter: blur(6px);
}
.sa-hero--photo .sa-btn--ghost:hover {
	background: rgba(255,255,255,.16);
	border-color: #fff;
	color: #fff;
}

.sa-credit {
	position: absolute; right: .9rem; bottom: .7rem; z-index: 3;
	font-size: .6875rem; line-height: 1.4;
	color: rgba(255,255,255,.52);
	max-width: 22rem; text-align: right;
}
.sa-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sa-credit a:hover { color: #fff; }

/* The board rides up over the join between hero and page: the single most
   effective way to stop a page reading as a stack of unrelated bands. */
.sa-overlap { margin-top: clamp(-5.5rem, -6vw, -2rem); position: relative; z-index: 3; }
@media (max-width: 999px) { .sa-overlap { margin-top: 0; } }

/* ------------------------------------------------------- numbers band --- */

.sa-band {
	background: var(--sa-surface);
	border: 1px solid var(--sa-rule);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(20,33,31,.05), 0 24px 54px -34px rgba(20,33,31,.4);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.sa-band > div {
	padding: 1.4rem 1.5rem;
	border-right: 1px solid var(--sa-rule);
}
.sa-band > div:last-child { border-right: 0; }
@media (max-width: 760px) {
	.sa-band > div { border-right: 0; border-bottom: 1px solid var(--sa-rule); }
	.sa-band > div:last-child { border-bottom: 0; }
}
.sa-band__n {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	font-weight: 700; letter-spacing: -.03em; line-height: 1;
	color: var(--sa-green);
	font-variant-numeric: tabular-nums;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48;
}
.sa-band__l { display: block; margin-top: .5rem; font-size: .875rem; line-height: 1.45; color: var(--sa-muted); }

/* --------------------------------------------------- destination cards --- */

.sa-dest {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
@media (min-width: 900px) {
	.sa-dest { grid-template-columns: repeat(6, 1fr); }
	.sa-dest > * { grid-column: span 2; }
	/* First two run wider: a deliberately uneven rhythm reads as edited,
	   an even grid of identical tiles reads as a template. */
	.sa-dest > :nth-child(1), .sa-dest > :nth-child(2) { grid-column: span 3; }
}

.sa-tile {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 17rem;
	border-radius: 4px; overflow: clip;
	padding: 1.3rem 1.4rem 1.4rem;
	color: #fff; text-decoration: none;
	background: var(--sa-green-dk);
}
.sa-dest > :nth-child(1), .sa-dest > :nth-child(2) { min-height: 22rem; }

.sa-tile img {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s var(--sa-ease), filter .5s var(--sa-ease);
}
.sa-tile::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(7,28,22,.95) 0%, rgba(7,28,22,.88) 20%, rgba(7,28,22,.58) 46%, rgba(7,28,22,.14) 80%);
	transition: background .4s var(--sa-ease);
}
.sa-tile:hover img { transform: scale(1.055); }
.sa-tile:hover::after { background: linear-gradient(to top, rgba(7,28,22,.96) 0%, rgba(7,28,22,.9) 22%, rgba(7,28,22,.62) 50%, rgba(7,28,22,.18) 84%); }

.sa-tile__eyebrow {
	text-shadow: 0 1px 8px rgba(7,28,22,.9);
	font-size: .625rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
	color: var(--sa-gold); margin: 0 0 .45rem;
	display: flex; align-items: center; gap: .5rem;
}
.sa-tile__eyebrow::after { content: ""; flex: 1; height: 1px; background: rgba(201,138,43,.35); }

.sa-tile__title {
	text-shadow: 0 1px 12px rgba(7,28,22,.7);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 600;
	line-height: 1.16; letter-spacing: -.022em; margin: 0 0 .4rem; color: #fff;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36;
}
.sa-tile__text { font-size: .9375rem; line-height: 1.55; color: rgba(255,255,255,.8); margin: 0; }
.sa-tile__meta {
	margin-top: .85rem; font-size: .75rem; letter-spacing: .04em;
	color: rgba(255,255,255,.62); display: flex; gap: .7rem; align-items: center;
}
.sa-tile__meta b { color: var(--sa-gold); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The tile's text sits above the gradient; the link overlay above everything. */
.sa-tile > :not(img) { position: relative; z-index: 2; }
a.sa-tile::before { content: ""; position: absolute; inset: 0; z-index: 3; }
a.sa-tile:focus-visible { outline: 2px solid var(--sa-gold); outline-offset: 3px; }

/* ------------------------------------------------------ feature blocks --- */

.sa-feature { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 980px) {
	.sa-feature { grid-template-columns: 7fr 5fr; }
	.sa-feature--flip > :first-child { order: 2; }
}
.sa-feature__media { position: relative; border-radius: 4px; overflow: clip; }
.sa-feature__media img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 980px) { .sa-feature__media img { aspect-ratio: 3/4; } }
.sa-feature__media .sa-credit { color: rgba(255,255,255,.72); text-shadow: 0 1px 6px rgba(0,0,0,.6); }

.sa-feature__body h2 { margin-top: 0; font-size: clamp(1.7rem, 3.1vw, 2.35rem); letter-spacing: -.026em; }
.sa-feature__body > * + * { margin-top: 1.1rem; }
.sa-feature__body p { color: var(--sa-ink); line-height: 1.72; }

/* A compact data list used inside feature blocks. */
.sa-mini {
	border-top: 1px solid var(--sa-rule);
	display: grid; gap: 0;
}
.sa-mini > div {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: .62rem 0; border-bottom: 1px solid var(--sa-rule);
	font-size: .9375rem;
}
.sa-mini dt, .sa-mini span:first-child { color: var(--sa-muted); }
.sa-mini b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sa-ink); }

/* ---------------------------------------------------- airport showcase --- */

.sa-showcase { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.sa-air {
	background: var(--sa-surface); border: 1px solid var(--sa-rule); border-radius: 4px;
	overflow: clip; display: flex; flex-direction: column;
	transition: transform .25s var(--sa-ease), box-shadow .25s var(--sa-ease), border-color .25s var(--sa-ease);
	position: relative;
}
.sa-air:hover {
	transform: translateY(-3px); border-color: color-mix(in srgb, var(--sa-green) 40%, var(--sa-rule));
	box-shadow: 0 2px 4px rgba(20,33,31,.05), 0 26px 46px -26px rgba(20,33,31,.4);
}
.sa-air__media { position: relative; aspect-ratio: 16/10; overflow: clip; background: var(--sa-tint); }
.sa-air__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sa-ease); }
.sa-air:hover .sa-air__media img { transform: scale(1.04); }
.sa-air__code {
	position: absolute; left: .85rem; top: .85rem;
	background: rgba(8,30,24,.82); color: var(--sa-gold);
	border: 1px solid rgba(201,138,43,.4); border-radius: 2px;
	font-size: .75rem; font-weight: 700; letter-spacing: .1em;
	padding: .26rem .5rem; backdrop-filter: blur(4px);
}
.sa-air__body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.sa-air__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem; font-weight: 600; line-height: 1.22; letter-spacing: -.02em; margin: 0;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 30;
}
.sa-air__title a { color: var(--sa-ink); text-decoration: none; }
.sa-air__title a::before { content: ""; position: absolute; inset: 0; }
.sa-air__title a:hover { color: var(--sa-green); }
.sa-air__where { font-size: .8125rem; color: var(--sa-muted); margin: 0; }
.sa-air__text { font-size: .9375rem; line-height: 1.6; color: var(--sa-muted); margin: 0; }
.sa-air__stat {
	margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--sa-rule);
	display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
	font-size: .8125rem; color: var(--sa-muted);
}
.sa-air__stat b {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem; color: var(--sa-green); font-weight: 700;
	font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* ------------------------------------------------------------ sections --- */

.sa-section--dark { background: var(--sa-green-dk); color: #D8E4DB; }
.sa-section--dark h2, .sa-section--dark h3 { color: #fff; }
.sa-section--dark p { color: rgba(216,228,219,.82); }
.sa-section--dark a { color: var(--sa-gold); }
.sa-section--dark .sa-sectionhead p { color: rgba(216,228,219,.72); }
.sa-section--dark .sa-kicker { color: var(--sa-gold); }

.sa-eyebrow {
	display: flex; align-items: center; gap: .7rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sa-green); margin: 0 0 .9rem;
}
.sa-eyebrow::before { content: ""; width: 1.7rem; height: 2px; background: var(--sa-gold); flex: 0 0 auto; }
.sa-section--dark .sa-eyebrow { color: var(--sa-gold); }

/* ---------------------------------------------------------------- FAQ --- */

.sa-faq { border-top: 1px solid var(--sa-rule); }
.sa-faq details {
	border-bottom: 1px solid var(--sa-rule);
	padding: 1.05rem 0;
}
.sa-faq summary {
	cursor: pointer; list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em;
	color: var(--sa-ink);
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
}
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary::after {
	content: ""; flex: 0 0 auto; width: 11px; height: 11px;
	border-right: 2px solid var(--sa-gold); border-bottom: 2px solid var(--sa-gold);
	transform: rotate(45deg) translate(-2px,-2px);
	transition: transform .22s var(--sa-ease);
}
.sa-faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.sa-faq details > div { padding-top: .75rem; font-size: .9875rem; line-height: 1.7; color: var(--sa-muted); }
.sa-faq details > div > * + * { margin-top: .8rem; }

/* ------------------------------------------------------ figure credits --- */

.sa-figcredit { font-size: .75rem; color: var(--sa-muted); margin-top: .4rem; }
.sa-figcredit a { color: inherit; }

/* ------------------------------------------------------------ in-entry --- */

.sa-entry .sa-note + .sa-note { margin-top: 1rem; }

/* On a phone the credit sits directly under the buttons, so it has to step
   back: attribution is a licence obligation, not a design element. */
@media (max-width: 760px) {
	.sa-credit {
		position: static;
		text-align: left;
		max-width: none;
		margin: 1.4rem 0 0;
		padding-inline: 1.25rem;
		font-size: .625rem;
		color: rgba(255,255,255,.4);
	}
	.sa-hero--photo { padding-bottom: .9rem; }
}