/**
 * AZA Destinations — [aza_featured_destinations] + [aza_destinations_list]
 * Figma-matched featured cards (grid / horizontal-scroll carousel) and the
 * filterable all-nonstop-destinations list. WCAG 2.1 AA throughout.
 */

.aza-featured,
.aza-destlist {
	--aza-red: var(--wp--preset--color--red, #a12a1d);
	--aza-dark-red: var(--wp--preset--color--dark-red, #8e2119);
	--aza-black: var(--wp--preset--color--black, #25150c);
	--aza-eggshell: var(--wp--preset--color--eggshell, #e2ddcc);
	--aza-yellow: var(--wp--preset--color--yellow, #ffd100);
	--aza-light-grey: var(--wp--preset--color--light-grey, #e6e6e6);
	font-family: Inter, sans-serif;
	color: var(--aza-black);
}

.aza-featured .aza-visually-hidden,
.aza-destlist .aza-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Shared chips ------------------------------------------------------- */

.aza-featured .aza-chip,
.aza-destlist .aza-chip {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	font: 700 14px/20px Manrope, sans-serif;
}

.aza-featured .aza-chip--airline,
.aza-destlist .aza-chip--airline {
	background: var(--aza-red);
	color: #fff;
}

/* An airline chip is how you book with that airline, so on routes flown by
   more than one carrier every airline gets its own way through. The pill shape
   already reads as a control; these rules stop it inheriting link underlines
   and give it the states a control needs. */
.aza-featured .aza-chip--book,
.aza-destlist .aza-chip--book {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.aza-featured .aza-chip--book:hover,
.aza-destlist .aza-chip--book:hover {
	background: var(--wp--preset--color--dark-red, #8e2119);
	text-decoration: underline;
}

.aza-featured .aza-chip--book:focus-visible,
.aza-destlist .aza-chip--book:focus-visible {
	outline: 3px solid var(--aza-black, #25150c);
	outline-offset: 2px;
}

.aza-featured .aza-chip--announced,
.aza-destlist .aza-chip--announced {
	background: var(--aza-yellow);
	color: var(--aza-black);
}

.aza-featured .aza-chip--seasonal,
.aza-destlist .aza-chip--seasonal {
	background: var(--aza-eggshell);
	color: var(--aza-black);
}

/* ---- Shared primary button ---------------------------------------------- */

.aza-featured .aza-btn-primary,
.aza-destlist .aza-btn-primary {
	display: inline-block;
	padding: 18px 20px;
	font: 500 16px/1 Inter, sans-serif;
	color: #fff;
	background: var(--aza-red);
	border: 0;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms ease;
}

.aza-featured .aza-btn-primary:hover,
.aza-destlist .aza-btn-primary:hover {
	background: var(--aza-dark-red);
}

.aza-featured .aza-btn-primary:focus-visible,
.aza-destlist .aza-btn-primary:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

/* Scroll-reveal rides the theme's .js-fadein-up observer (fade-in.js). */

/* ======================================================================== *
 * Featured destinations
 * ======================================================================== */

.aza-featured-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Card */

.aza-fd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 25px 1px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.aza-fd-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px 1px rgba(0, 0, 0, 0.2);
}

.aza-fd-media {
	position: relative;
	aspect-ratio: 8 / 5;
	background: var(--aza-eggshell);
	overflow: hidden;
}

.aza-fd-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.aza-fd-card:hover .aza-fd-media img {
	transform: scale(1.05);
}

.aza-fd-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.577%, var(--aza-black) 100%);
}

.aza-fd-code {
	position: absolute;
	left: 24px;
	bottom: 6px;
	z-index: 1;
	font: 700 72px/1.3 Manrope, sans-serif;
	color: #fff;
}

.aza-fd-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px;
	flex: 1 1 auto;
}

.aza-fd-city {
	margin: 0;
	font: 600 24px/32px Manrope, sans-serif;
	color: var(--aza-black);
}

.aza-featured .aza-fd-city a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the title anchor's hit area covers the whole card. */
.aza-featured .aza-fd-city a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.aza-featured .aza-fd-city a:hover,
.aza-featured .aza-fd-city a:focus {
	text-decoration: underline;
	text-decoration-color: var(--aza-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.aza-featured .aza-fd-city a:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

.aza-fd-state {
	margin: 0;
	font: 400 16px/24px Inter, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.aza-fd-chips {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Grid: collapsed cards behind "Load More" */

.aza-featured--grid .aza-fd-card[hidden] {
	display: none;
}

.aza-featured-morewrap {
	margin: 40px 0 0;
	text-align: center;
}

/* Carousel */

.aza-featured--carousel .aza-featured-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 12px 4px 28px;
	-webkit-overflow-scrolling: touch;
}

.aza-featured--carousel .aza-fd-card {
	flex: 0 0 384px;
	max-width: 384px;
	scroll-snap-align: start;
}

.aza-featured-track:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 4px;
}

.aza-featured-controls {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 8px;
}

.aza-featured-controls[hidden] {
	display: none;
}

.aza-featured button.aza-featured-nav {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	padding: 0;
	background: #fff;
	color: var(--aza-black);
	border: 1px solid var(--aza-black);
	border-radius: 50%;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

.aza-featured-nav--next svg {
	transform: rotate(180deg);
}

.aza-featured button.aza-featured-nav:hover,
.aza-featured button.aza-featured-nav:focus {
	background: var(--aza-black);
	border-color: var(--aza-black);
	color: #fff;
}

.aza-featured button.aza-featured-nav:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

.aza-featured button.aza-featured-nav[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Cards in a horizontal track skip the theme's scroll-reveal. The observer
   only counts the part of a card the track itself shows, and the next card
   peeks in by ~29px of 300 — just under its 10% threshold — so it stayed at
   opacity 0 until a scroll nudged it. Carousel layout scrolls at every width;
   the grid layout becomes a track below 768px. */
.aza-featured--carousel .aza-fd-card.js-fadein-up:not(.is-visible) {
	opacity: 1;
	transform: none;
}

/* Responsive: tablet 2-up, mobile horizontal scroll for BOTH layouts. */

@media (min-width: 768px) and (max-width: 1023px) {
	.aza-featured--grid .aza-featured-track {
		grid-template-columns: repeat(2, 1fr);
	}

	.aza-fd-code {
		font-size: 60px;
	}
}

@media (max-width: 767px) {
	.aza-featured--grid .aza-featured-track {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		padding: 12px 6px 20px;
		-webkit-overflow-scrolling: touch;
	}

	.aza-featured--grid .aza-fd-card,
	.aza-featured--carousel .aza-fd-card {
		flex: 0 0 min(300px, 82vw);
		max-width: min(300px, 82vw);
		scroll-snap-align: start;
	}

	/* On mobile every featured card rides the scroll track. */
	.aza-featured--grid .aza-fd-card[hidden] {
		display: flex;
	}

	.aza-featured--grid .aza-fd-card.js-fadein-up:not(.is-visible) {
		opacity: 1;
		transform: none;
	}

	.aza-featured--grid .aza-featured-morewrap {
		display: none;
	}

	/* Phones: a soft downward shadow. The desktop 25px halo is clipped by the
	   scroll track's padding and reads as a heavy grey band on a 300px card. */
	.aza-featured .aza-fd-card,
	.aza-featured .aza-fd-card:hover {
		transform: none;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.aza-featured-controls {
		margin-top: 0;
	}

	.aza-fd-code {
		font-size: 52px;
	}

	.aza-fd-city {
		font-size: 20px;
		line-height: 28px;
	}

	.aza-fd-state {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aza-fd-card,
	.aza-fd-media img {
		transition: none;
	}

	.aza-fd-card:hover {
		transform: none;
	}

	.aza-fd-card:hover .aza-fd-media img {
		transform: none;
	}

	.aza-featured--carousel .aza-featured-track,
	.aza-featured--grid .aza-featured-track {
		scroll-behavior: auto;
	}
}

/* ======================================================================== *
 * All nonstop destinations list
 * ======================================================================== */

.aza-destlist-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

/* Desktop: region pills and the search share one row, per the approved design. */
@media (min-width: 1100px) {
	.aza-destlist-controls {
		flex-wrap: nowrap;
	}

	.aza-destlist-filters {
		flex: 1 1 auto;
		min-width: 0;
	}

	.aza-destlist-search {
		flex: 0 1 508px;
		min-width: 300px;
	}
}

.aza-destlist-label {
	font: 600 16px/24px Manrope, sans-serif;
	white-space: nowrap;
}

.aza-destlist-filters {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	min-width: 0;
}

.aza-destlist-pills {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

/* `button.` + ancestor outranks the theme's button:not(...) primary-button
   styling, which would otherwise render the pills as solid red buttons. */
.aza-destlist button.aza-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 8px 10px;
	font: 600 14px/21px Inter, sans-serif;
	white-space: nowrap;
	color: var(--aza-black);
	background: #fff;
	border: 1px solid var(--aza-black);
	border-radius: 50px;
	cursor: pointer;
	transition: background 140ms ease;
}

.aza-destlist button.aza-pill:hover,
.aza-destlist button.aza-pill:focus {
	background: var(--wp--preset--color--very-light-grey, #f1f1f1);
	border-color: var(--aza-black);
	color: var(--aza-black);
}

.aza-destlist button.aza-pill[aria-pressed="true"] {
	background: var(--aza-light-grey);
	font-weight: 700;
}

.aza-destlist button.aza-pill:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

.aza-destlist button.aza-pill--sm {
	min-height: 45px;
	padding: 8px 12px;
}

/* Search */

.aza-destlist-search {
	display: flex;
	gap: 8px;
	align-items: stretch;
	flex: 0 1 508px;
	min-width: min(100%, 320px);
}

.aza-destlist-search input {
	flex: 1 1 auto;
	min-width: 0;
	/* 45px matches the region pills sharing this row (designer request).
	   The theme's global input rules use !important padding/font-size and
	   content-box sizing on [type=search] — counter all three or the box
	   renders ~75px tall. */
	box-sizing: border-box;
	height: 45px;
	padding: 0 14px !important;
	font: 400 14px/21px Inter, sans-serif;
	font-size: 14px !important;
	color: var(--aza-black);
	background: #fff;
	border: 1px solid var(--aza-black);
	border-radius: 4px;
}

/* ≥16px under 640px so iOS Safari doesn't auto-zoom the focused field. */
@media (max-width: 639px) {
	.aza-destlist-search input {
		font-size: 16px !important;
	}
}

.aza-destlist-search input::placeholder {
	color: #4f545c;
	opacity: 1;
}

.aza-destlist-search input:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

.aza-destlist-search .aza-btn-primary {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 45px;
	padding: 0 20px; /* height-driven, so the theme's line-height:1 can't skew it */
}

/* Meta row: count + sort */

.aza-destlist-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.aza-destlist-count {
	margin: 0;
	font: 400 14px/21px Inter, sans-serif;
}

.aza-destlist-sorts {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Rows */

.aza-destlist-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--aza-light-grey);
}

.aza-destlist-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 72px;
	padding: 10px 19px;
	background: #fff;
	border-bottom: 1px solid var(--aza-light-grey);
	transition: background 140ms ease;
}

/* Whole row is clickable when a booking link exists (stretched link). */
.aza-destlist-link {
	color: inherit;
	text-decoration: none;
}

.aza-destlist-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.aza-destlist-row:has(.aza-destlist-link):hover {
	background: var(--aza-light-grey);
}

.aza-destlist-row:focus-within {
	outline: 2px solid var(--aza-black);
	outline-offset: -2px;
}

.aza-destlist-link:focus-visible {
	outline: none; /* the row's focus-within ring is the visible indicator */
}

.aza-destlist-row[hidden] {
	display: none;
}

.aza-destlist-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 76px;
	min-height: 43px;
	padding: 4px 16px;
	font: 600 24px/21px Inter, sans-serif;
	background: var(--aza-light-grey);
	border-radius: 50px;
}

.aza-destlist-place {
	font: 600 24px/27px Manrope, sans-serif;
	min-width: 0;
}

.aza-destlist-chips {
	margin-left: auto;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.aza-destlist-empty {
	margin: 24px 0 0;
	font: 400 16px/24px Inter, sans-serif;
}

@media (max-width: 767px) {
	.aza-destlist-row {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 14px 12px;
	}

	.aza-destlist-code {
		min-width: 60px;
		min-height: 36px;
		font-size: 18px;
	}

	.aza-destlist-place {
		font-size: 18px;
		line-height: 24px;
	}

	.aza-destlist-chips {
		flex-basis: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}

	.aza-destlist-search {
		flex-basis: 100%;
	}

	.aza-destlist-search .aza-btn-primary {
		padding: 0 16px;
	}
}