/**
 * Frontend styles — the destination page's own visual system.
 *
 * Registered but not enqueued until the rendering layer exists — the asset
 * manager gates it behind the "aitab/assets/enqueue_frontend" filter, which
 * defaults to false. K2: previously this file defined only the token layer;
 * it now also styles every element `modules/travel/Rendering/` actually
 * renders (`.aitab-page`, `.aitab-hero`, `.aitab-section`, `.aitab-grid`,
 * `.aitab-card`, `.aitab-button`), scoped entirely under `.aitab-page` so
 * nothing here ever reaches into the active theme's own markup (Kadence or
 * otherwise) — this plugin adds its own scoped classes, it does not read or
 * depend on any theme's runtime CSS/JS.
 *
 * @package AITAB
 */

:root {
	--aitab-color-accent: #1b6b63;
	--aitab-color-accent-hover: #124e48;
	--aitab-color-accent-soft: #e6efec;
	--aitab-color-ink: #1f2823;
	--aitab-color-text: inherit;
	--aitab-color-muted: #5c655f;
	--aitab-color-border: #e3e6df;
	--aitab-color-border-strong: #cdd3cb;
	--aitab-color-surface: #fff;
	--aitab-color-surface-sunken: #f6f7f3;
	--aitab-radius: 6px;
	--aitab-radius-lg: 10px;
	--aitab-gap: 1rem;
	--aitab-gap-lg: 2.75rem;
	--aitab-font-size-sm: 0.875rem;
	--aitab-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Cambria, serif;
	--aitab-content-width: 1180px;
	--aitab-shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.07);
	--aitab-shadow-md: 0 6px 20px rgba(20, 30, 25, 0.09);
}

.aitab-block {
	margin-block: var(--aitab-gap);
	color: var(--aitab-color-text);
}

.aitab-block *,
.aitab-block *::before,
.aitab-block *::after {
	box-sizing: border-box;
}

/* Page container --------------------------------------------------------- */

.aitab-page {
	max-width: var(--aitab-content-width);
	margin-inline: auto;
	padding-inline: 1.5rem;
	color: var(--aitab-color-text);
}

.aitab-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Section rhythm ---------------------------------------------------------- */

.aitab-page > .aitab-hero {
	margin-inline: calc(-1 * 1.5rem);
	margin-bottom: var(--aitab-gap-lg);
}

.aitab-section,
.aitab-page > .aitab-overview,
.aitab-page > .aitab-essentials {
	margin-block: var(--aitab-gap-lg);
}

.aitab-section:first-of-type {
	margin-top: 0;
}

.aitab-page h2 {
	font-family: var(--aitab-font-heading);
	font-weight: 600;
	font-size: 1.65rem;
	line-height: 1.25;
	color: var(--aitab-color-ink);
	margin: 0 0 1.1rem;
}

.aitab-page h3 {
	font-family: var(--aitab-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--aitab-color-ink);
	margin: 0 0 0.4rem;
}

/* A sub-heading nested under Plan Your Trip (headingLevel() override) reads
 * as an action-panel label, not a second page-level heading. */
.aitab-section--travel-plan-your-trip h3 {
	font-family: inherit;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aitab-color-muted);
	font-weight: 600;
}

/* Hero ---------------------------------------------------------------------
 * K2: capped height + object-fit:cover replaces the previous unconstrained
 * <img>, which rendered at native aspect ratio (measured ~1265px tall on a
 * 772px viewport before any title appeared). Title/tagline now sit directly
 * under the image, not after it.
 */

.aitab-hero {
	display: block;
}

.aitab-hero .aitab-hero__media {
	position: relative;
	max-height: 46vh;
	min-height: 220px;
	overflow: hidden;
}

.aitab-hero .aitab-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.aitab-hero .aitab-hero__body {
	max-width: var(--aitab-content-width);
	margin-inline: auto;
	padding: 1.5rem 1.5rem 0;
}

.aitab-hero h1 {
	font-family: var(--aitab-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 2.85rem);
	line-height: 1.08;
	color: var(--aitab-color-ink);
	margin: 0 0 0.5rem;
}

.aitab-hero p {
	font-size: 1.1rem;
	color: var(--aitab-color-muted);
	max-width: 62ch;
	margin: 0;
}

/* Overview — editorial body copy ------------------------------------------ */

.aitab-overview-body {
	font-size: 1.05rem;
	line-height: 1.75;
	max-width: 72ch;
}

.aitab-overview-body p {
	margin: 0 0 1.1rem;
}

.aitab-overview-body ul,
.aitab-overview-body ol {
	max-width: 68ch;
	line-height: 1.65;
}

/* Essentials — a quiet fact strip, not a card ----------------------------- */

.aitab-essentials p {
	font-size: 0.95rem;
	color: var(--aitab-color-muted);
	letter-spacing: 0.01em;
	margin: 0;
	padding-block: 0.15rem;
}

/* Empty state / section note ---------------------------------------------- */

.aitab-empty-state {
	color: var(--aitab-color-muted);
	font-size: 0.95rem;
}

.aitab-section-note {
	color: var(--aitab-color-muted);
	font-size: var(--aitab-font-size-sm);
	margin: -0.4rem 0 1.1rem;
}

.aitab-section-note a {
	color: inherit;
	text-decoration: underline;
}

/* Disclosure ---------------------------------------------------------------
 * K2: the class already existed in the token layer with no caller — now
 * used exactly once, inside PlanYourTripSection, per the discovery report's
 * own "disclose once, quietly" recommendation.
 */

.aitab-disclosure {
	margin-block: var(--aitab-gap) 0;
	padding: 0.75rem 1rem;
	font-size: var(--aitab-font-size-sm);
	color: var(--aitab-color-muted);
	background: rgba(0, 0, 0, 0.03);
	border-radius: var(--aitab-radius);
}

/* Grid ---------------------------------------------------------------------
 * K2: CollectionRenderer now wraps non-empty card output in this element —
 * previously cards were concatenated with no container at all.
 */

.aitab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 1.75rem;
}

/* Card ----------------------------------------------------------------------
 * Base treatment shared by every section; per-section rules below vary the
 * grid/rhythm/emphasis so the page does not read as one repeated block.
 */

.aitab-card {
	display: flex;
	flex-direction: column;
	background: var(--aitab-color-surface);
	border: 1px solid var(--aitab-color-border);
	border-radius: var(--aitab-radius-lg);
	overflow: hidden;
	box-shadow: var(--aitab-shadow-sm);
}

.aitab-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.aitab-card figure {
	margin: 0;
	position: relative;
}

.aitab-card figcaption {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	background: rgba(20, 30, 25, 0.62);
	color: #fff;
	font-size: 0.7rem;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	line-height: 1.4;
}

.aitab-card h3 {
	margin: 1rem 1.1rem 0.3rem;
}

.aitab-card p {
	margin: 0 1.1rem 1rem;
	font-size: 0.95rem;
	color: var(--aitab-color-muted);
	line-height: 1.55;
	flex-grow: 1;
}

.aitab-card .aitab-button {
	margin: 0 1.1rem 1.1rem;
	align-self: flex-start;
}

/* Editorial cards (Top Attractions, Itineraries, Related Destinations) get
 * the quiet secondary link treatment by default — see .aitab-button below.
 * Commercial cards (isCommercial => true, from HotelItemMapper/OfferItemMapper/
 * ActivityItemMapper) render a filled primary button and a subtly warmer
 * border, so a visitor can feel the difference before reading either card. */

.aitab-card--commercial {
	border-color: var(--aitab-color-border-strong);
}

/* Button ---------------------------------------------------------------------
 * Two variants existed in code with no visual difference and no caller.
 * K2: primary is reserved for commercial CTAs; secondary/default is the
 * quiet editorial link style used everywhere else.
 */

.aitab-button {
	display: inline-flex;
	align-items: center;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	border-radius: var(--aitab-radius);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.aitab-button--secondary {
	padding: 0;
	color: var(--aitab-color-accent);
	border-bottom: 1px solid transparent;
}

.aitab-button--secondary:hover {
	border-bottom-color: currentColor;
}

.aitab-button--primary {
	padding: 0.6rem 1.15rem;
	min-height: 44px;
	color: #fff;
	background: var(--aitab-color-accent);
	border: 1px solid var(--aitab-color-accent);
}

.aitab-button--primary:hover {
	background: var(--aitab-color-accent-hover);
	border-color: var(--aitab-color-accent-hover);
}

/* Top Attractions — photo-led discovery grid ------------------------------
 * H3-FIX: align-items: start stops a grid row from stretching an
 * image-less card to match a taller, image-bearing sibling's height — the
 * base `.aitab-grid` rule above has no `align-items`, so its default
 * `stretch` was doing exactly that (live-confirmed against Port-au-Prince:
 * both a 412px-image card and its image-less sibling rendered at an
 * identical 609px). Scoped to this section only, not the shared
 * `.aitab-grid` rule, so Where to Stay/Itineraries/Plan Your
 * Trip/Related Destinations are untouched. `.aitab-card`'s own
 * `p { flex-grow: 1 }` still anchors the button to the bottom of each
 * card's own content — this only removes the artificial extra height a
 * short card had nothing to grow into. */

.aitab-section--travel-top-attractions .aitab-grid {
	grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
	align-items: start;
}

/* Suggested Itineraries — fewer, larger, editorial feature cards, not a
 * dense grid: this is a plan to read, not a catalogue to scan. */

.aitab-section--travel-itineraries .aitab-grid {
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 2rem;
}

.aitab-section--travel-itineraries .aitab-card img {
	aspect-ratio: 16 / 9;
}

.aitab-section--travel-itineraries .aitab-card h3 {
	font-size: 1.3rem;
}

/* Where to Stay — informational listings, a calmer list-like rhythm ------- */

.aitab-section--travel-where-to-stay .aitab-grid {
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}

/* Plan Your Trip — an action panel, not a photo grid: sunken surface, two
 * compact CTA rows (flights, activities) rather than image cards. */

.aitab-section--travel-plan-your-trip {
	background: var(--aitab-color-surface-sunken);
	border: 1px solid var(--aitab-color-border);
	border-radius: var(--aitab-radius-lg);
	padding: 1.75rem 1.75rem 1.5rem;
}

.aitab-section--travel-plan-your-trip .aitab-grid {
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem;
}

.aitab-section--travel-plan-your-trip .aitab-card {
	flex-direction: row;
	align-items: center;
	box-shadow: none;
	border-color: var(--aitab-color-border);
}

.aitab-section--travel-plan-your-trip .aitab-card img {
	width: 6.5rem;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
}

.aitab-section--travel-plan-your-trip .aitab-card h3 {
	margin: 0 1rem 0.2rem 1rem;
	font-size: 1rem;
}

.aitab-section--travel-plan-your-trip .aitab-card p {
	margin: 0 1rem 0 1rem;
	font-size: 0.88rem;
}

.aitab-section--travel-plan-your-trip .aitab-card .aitab-button {
	margin: 0 1rem;
}

/* AffiliateOffersSection/ActivityOffersSection each still render their own
 * `.aitab-section` wrapper when composed inside Plan Your Trip (K2:
 * PlanYourTripSection renders each child's own render() output directly) —
 * override the shared section rhythm so the two sub-blocks sit close
 * together inside one compact panel rather than repeating full page-level
 * section spacing twice. */
.aitab-section--travel-plan-your-trip .aitab-section {
	margin: 0 0 1.5rem;
}

.aitab-section--travel-plan-your-trip .aitab-section:last-child {
	margin-bottom: 0;
}

.aitab-section--travel-plan-your-trip .aitab-disclosure {
	background: transparent;
	padding: 0.75rem 0 0;
	margin-top: 0.75rem;
	border-top: 1px solid var(--aitab-color-border);
	border-radius: 0;
}

/* PHASE F3 — the quiet "Flights shown from {airport}" note a successful
 * smart-origin resolution adds next to the flights sub-heading, plus its
 * own small "use default airport instead" revert control. Never present
 * until JavaScript actually swaps in a resolved origin; absent entirely
 * for a visitor who denies/lacks geolocation, or when no better airport
 * was found — the page reads identically to today either way. */

.aitab-origin-note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--aitab-color-muted);
	margin: 0.5rem 0 1rem;
}

.aitab-origin-revert {
	font: inherit;
	color: var(--aitab-color-accent);
	background: none;
	border: none;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
}

.aitab-origin-revert:hover {
	color: var(--aitab-color-accent-hover);
}

/* Related Destinations — quiet, minimal, deliberately lower visual weight:
 * this is a footnote to the page, not another commercial or editorial
 * decision point. */

.aitab-section--travel-related-destinations h2 {
	font-size: 1.2rem;
	color: var(--aitab-color-muted);
}

.aitab-section--travel-related-destinations .aitab-grid {
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem;
}

.aitab-section--travel-related-destinations .aitab-card {
	flex-direction: row;
	align-items: center;
	box-shadow: none;
	border: none;
	background: transparent;
}

.aitab-section--travel-related-destinations .aitab-card img {
	width: 3.5rem;
	height: 3.5rem;
	aspect-ratio: 1 / 1;
	border-radius: 999px;
	flex-shrink: 0;
}

.aitab-section--travel-related-destinations .aitab-card h3 {
	margin: 0 0 0 0.85rem;
	font-size: 0.95rem;
}

.aitab-section--travel-related-destinations .aitab-card p {
	display: none;
}

.aitab-section--travel-related-destinations .aitab-card .aitab-button {
	position: absolute;
	inset: 0;
	margin: 0;
	color: transparent;
	font-size: 0;
}

.aitab-section--travel-related-destinations .aitab-card {
	position: relative;
}

/* Accessibility ------------------------------------------------------------ */

.aitab-block :focus-visible,
.aitab-page :focus-visible {
	outline: 2px solid var(--aitab-color-accent);
	outline-offset: 2px;
}

.aitab-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Responsive ----------------------------------------------------------------
 * The grid already collapses to one column via auto-fit/minmax with no
 * breakpoint needed; the rules below only adjust spacing/typography, which
 * auto-fit cannot.
 */

@media (max-width: 640px) {
	.aitab-page {
		padding-inline: 1.1rem;
	}

	.aitab-hero .aitab-hero__media {
		max-height: 34vh;
		min-height: 180px;
	}

	.aitab-hero .aitab-hero__body {
		padding-inline: 1.1rem;
	}

	.aitab-section,
	.aitab-page > .aitab-overview,
	.aitab-page > .aitab-essentials {
		margin-block: 2rem;
	}

	.aitab-section--travel-plan-your-trip {
		padding: 1.25rem 1.1rem;
	}

	.aitab-section--travel-plan-your-trip .aitab-card {
		flex-direction: column;
		align-items: stretch;
	}

	.aitab-section--travel-plan-your-trip .aitab-card img {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.aitab-section--travel-plan-your-trip .aitab-card h3,
	.aitab-section--travel-plan-your-trip .aitab-card p,
	.aitab-section--travel-plan-your-trip .aitab-card .aitab-button {
		margin-inline: 1.1rem;
	}

	.aitab-section--travel-plan-your-trip .aitab-card h3 {
		margin-top: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aitab-block *,
	.aitab-page * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}