/* ==========================================================================
   Asia Trip Guide — theme.css
   Mobile-first. Base styles target ~360px; min-width queries scale up.
   Breakpoints: 600 / 900 / 1100 / 1400
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/*
	 * Palette — "indigo and marigold on bone".
	 *
	 * Ground is a warm bone rather than a cool grey: every photograph in this
	 * catalogue is either snow (cool) or sandstone, marigold and brass (warm).
	 * A warm neutral flatters both; a cool grey makes the sandstone look dirty.
	 *
	 * Three tiers, so the eye always lands in the same order:
	 *   action   primary actions only — enquire, submit, the one button per view
	 *   accent   navigation, links, structure, dark bands
	 *   gold     endorsement only (badges, ratings, eyebrows on dark)
	 *
	 * The action colour is carried as a marigold FILL with near-black text on
	 * it (8.5:1), never as text on a light ground. That is what lets it stay
	 * genuinely bright: white on this marigold is 2.1:1, so any theme wanting
	 * white button text has to darken its orange until the colour goes muddy.
	 * Taking dark text instead buys both a vivid button and better contrast.
	 * --atg-highlight is the text-safe partner for the same warmth (4.9:1 on
	 * paper) and is what prices, eyebrows and emphasis use.
	 */

	/* Warm neutral ground */
	--atg-paper:        #faf7f2;
	--atg-surface:      #ffffff;
	--atg-surface-soft: #f7f3ec;
	--atg-surface-sunk: #f0eae0;
	--atg-ink:          #191b24;
	--atg-ink-muted:    #4a4e5e;
	--atg-ink-faint:    #636879;
	--atg-ink-rgb:      25, 27, 36;
	--atg-line:         #e9e3d8;
	--atg-line-strong:  #d9d2c4;

	/* Structure — indigo */
	--atg-accent:       #2d3f80;
	--atg-accent-deep:  #1e2a58;
	--atg-accent-soft:  #ebedf9;
	--atg-accent-ink:   #ffffff;
	/* Channels, so dark bands can set their own alpha and stay tied to the token. */
	--atg-accent-deep-rgb: 30, 42, 88;

	/* Primary action — marigold fill, dark ink on top */
	--atg-action:       #f2a516;
	--atg-action-deep:  #dd9309;
	--atg-action-ink:   #221803;

	/* Text-safe warmth — prices, eyebrows, emphasis, markers */
	--atg-highlight:      #a15c06;
	--atg-highlight-deep: #834a04;
	--atg-highlight-soft: #fdf2df;

	/* Endorsement */
	--atg-gold:         #f5c04a;
	--atg-gold-ink:     #3b2a08;

	/* Footer */
	--atg-footer-bg:    #191b24;
	--atg-footer-text:  #b3b7c4;
	--atg-footer-muted: #9297a6;

	/* Feedback */
	--atg-danger:       #b3261e;
	--atg-danger-soft:  #fdecea;
	--atg-success:      #15704a;
	--atg-success-soft: #e4f1ea;

	/* Type — Fraunces is a warm, slightly wonky serif that gives the headings
	   a hand-set, editorial voice; Manrope keeps UI text and prices clean and
	   legible at small sizes. Both are variable fonts. */
	--atg-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--atg-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Body tops out at 16px, headings at a restrained 34px (h2) and 52px
	   (hero) — the serif carries presence without needing the size. */
	--atg-text-xs:  0.6875rem;
	--atg-text-sm:  0.8125rem;
	--atg-text-base: 0.9375rem;
	--atg-text-md:  clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	--atg-text-lg:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--atg-h4:       clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--atg-h3:       clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);
	--atg-h2:       clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
	--atg-h1:       clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
	--atg-display:  clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

	/* Space — a 4px-derived scale */
	--atg-s1:  0.25rem;
	--atg-s2:  0.5rem;
	--atg-s3:  0.75rem;
	--atg-s4:  1rem;
	--atg-s5:  1.5rem;
	--atg-s6:  2rem;
	--atg-s7:  3rem;
	--atg-s8:  4rem;
	--atg-section: clamp(3rem, 8vw, 7rem);

	/* Layout */
	--atg-gutter: 1.125rem;
	--atg-max:    1280px;
	--atg-max-prose: 46rem;

	/* Shape */
	--atg-radius-sm: 6px;
	--atg-radius:    12px;
	--atg-radius-lg: 20px;
	--atg-radius-pill: 999px;

	--atg-shadow-sm: 0 1px 2px rgba(26, 22, 19, 0.05);
	--atg-shadow:    0 6px 24px -12px rgba(26, 22, 19, 0.22);
	--atg-shadow-lg: 0 24px 60px -24px rgba(26, 22, 19, 0.30);

	--atg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Set by JS so `100vh` behaves on mobile browsers */
	--atg-header-h: 64px;
}

@media (min-width: 600px) {
	:root { --atg-gutter: 1.5rem; }
}
@media (min-width: 900px) {
	:root { --atg-gutter: 2rem; --atg-header-h: 80px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

/* Any component `display` rule would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--atg-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--atg-paper);
	color: var(--atg-ink);
	font-family: var(--atg-font-body);
	font-size: var(--atg-text-md);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.atg-no-scroll { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
img { background: var(--atg-surface-sunk); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--atg-s3);
	font-family: var(--atg-font-display);
	font-weight: 700;
	line-height: 1.12;
	/* A serif carries its own rhythm — it wants far less negative tracking
	   than a geometric sans, and none at all at small sizes. */
	letter-spacing: -0.012em;
	text-wrap: balance;
}
h4, h5, h6 { letter-spacing: 0; line-height: 1.25; }

h1 { font-size: var(--atg-h1); }
h2 { font-size: var(--atg-h2); }
h3 { font-size: var(--atg-h3); }
h4 { font-size: var(--atg-h4); }
h5, h6 { font-size: var(--atg-text-md); font-weight: 600; }

p, ul, ol, dl, blockquote, table, figure, pre { margin: 0 0 var(--atg-s4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
	color: var(--atg-accent);
	text-decoration-color: color-mix(in srgb, var(--atg-accent) 35%, transparent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.2s var(--atg-ease), text-decoration-color 0.2s var(--atg-ease);
}
a:hover { color: var(--atg-accent-deep); text-decoration-color: currentColor; }

:focus-visible {
	outline: 2px solid var(--atg-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--atg-line);
	margin: var(--atg-s6) 0;
}

small { font-size: var(--atg-text-sm); }

::selection { background: var(--atg-accent); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.atg-container {
	width: 100%;
	max-width: calc(var(--atg-max) + var(--atg-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--atg-gutter);
}

.atg-container--prose { max-width: calc(var(--atg-max-prose) + var(--atg-gutter) * 2); }
.atg-container--wide  { max-width: calc(1560px + var(--atg-gutter) * 2); }

.atg-section { padding-block: var(--atg-section); }
.atg-section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.atg-section--sunk { background: var(--atg-surface-sunk); }
.atg-section--paper { background: var(--atg-surface); }

.atg-stack > * + * { margin-top: var(--atg-s4); }
.atg-stack-lg > * + * { margin-top: var(--atg-s6); }

/* Auto-fit grid: 1 col on mobile, fills up as space allows */
.atg-grid {
	display: grid;
	gap: var(--atg-s5);
	grid-template-columns: 1fr;
}
@media (min-width: 560px) {
	.atg-grid--2, .atg-grid--3, .atg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.atg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.atg-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.atg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sidebar layout — stacks on mobile, splits at 900 */
.atg-split {
	display: grid;
	gap: var(--atg-s6);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 900px) {
	.atg-split { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--atg-s7); }
	.atg-split--reverse { grid-template-columns: 21rem minmax(0, 1fr); }
	.atg-split__aside { position: sticky; top: calc(var(--atg-header-h) + 1.5rem); }
}
@media (min-width: 1100px) {
	.atg-split { grid-template-columns: minmax(0, 1fr) 23rem; }
	/* Must be restated here, or the rule above flips reversed layouts back. */
	.atg-split--reverse { grid-template-columns: 23rem minmax(0, 1fr); }
}

/*
 * Scroll rail — the mobile-first answer to a carousel.
 * Native scroll + snap on small screens, plain grid once everything fits.
 */
.atg-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem, 78%);
	gap: var(--atg-s4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--atg-gutter);
	padding-inline: var(--atg-gutter);
	margin-inline: calc(var(--atg-gutter) * -1);
	padding-bottom: var(--atg-s3);
	scrollbar-width: none; /* no visible scroll line — the peeking card is the cue */
}
.atg-rail > * { scroll-snap-align: start; }
.atg-rail::-webkit-scrollbar { display: none; }

@media (min-width: 600px) { .atg-rail { grid-auto-columns: minmax(15rem, 46%); } }
@media (min-width: 900px) { .atg-rail { grid-auto-columns: minmax(14rem, 31%); gap: var(--atg-s5); } }
@media (min-width: 1100px) {
	.atg-rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow: visible;
		padding-inline: 0;
		margin-inline: 0;
		padding-bottom: 0;
	}
	.atg-rail--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.atg-skip-link {
	position: absolute;
	left: var(--atg-gutter);
	top: -100px;
	z-index: 200;
	background: var(--atg-accent);
	color: #fff;
	padding: var(--atg-s3) var(--atg-s5);
	border-radius: 0 0 var(--atg-radius) var(--atg-radius);
	text-decoration: none;
	transition: top 0.2s var(--atg-ease);
}
.atg-skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */

.atg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--atg-font-body);
	font-size: var(--atg-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--atg-highlight);
	margin-bottom: var(--atg-s3);
}
.atg-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.atg-lede {
	font-size: var(--atg-text-lg);
	line-height: 1.5;
	color: var(--atg-ink-muted);
	max-width: 42ch;
}

.atg-section-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.atg-section-head__title { margin-bottom: var(--atg-s3); }
.atg-section-head__title em {
	/* Emphasis is colour, not slant — the italic cut of the display face is a
	   second font file, and it is not worth the download for a few words. */
	font-style: normal;
	color: var(--atg-highlight);
}
.atg-section-head p { color: var(--atg-ink-muted); max-width: 54ch; margin: 0; }

.atg-section-head__aside {
	display: flex;
	align-items: center;
	gap: var(--atg-s4);
	margin-top: var(--atg-s4);
}
.atg-section-head__aside .atg-arrow-link {
	font-size: var(--atg-text-base);
	text-transform: none;
	letter-spacing: 0;
	color: var(--atg-accent);
}
.atg-section-head__aside .atg-arrow-link:hover { color: var(--atg-accent-deep); }

@media (min-width: 900px) {
	.atg-section-head--row {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--atg-s6);
	}
	.atg-section-head--row > :first-child { max-width: 38rem; }
	.atg-section-head__aside { margin-top: 0; flex: none; }
}

.atg-muted { color: var(--atg-ink-muted); }
.atg-center { text-align: center; }
.atg-center .atg-lede, .atg-center .atg-section-head p { margin-inline: auto; }
.atg-center .atg-eyebrow::before { display: none; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.atg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 48px;               /* comfortable touch target */
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--atg-radius-pill);
	background: var(--atg-action);
	color: var(--atg-action-ink);
	font-family: var(--atg-font-body);
	font-size: var(--atg-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s var(--atg-ease), color 0.2s var(--atg-ease),
	            border-color 0.2s var(--atg-ease), transform 0.2s var(--atg-ease);
}
.atg-btn:hover { background: var(--atg-action-deep); color: var(--atg-action-ink); transform: translateY(-1px); }
.atg-btn:active { transform: translateY(0); }

.atg-btn--outline {
	background: transparent;
	color: var(--atg-ink);
	border-color: var(--atg-line-strong);
}
.atg-btn--outline:hover {
	background: var(--atg-ink);
	color: var(--atg-paper);
	border-color: var(--atg-ink);
}

.atg-btn--ghost { background: transparent; color: var(--atg-accent); padding-inline: 0.25rem; }
.atg-btn--ghost:hover { background: transparent; color: var(--atg-accent-deep); }

.atg-btn--light { background: var(--atg-surface); color: var(--atg-ink); }
.atg-btn--light:hover { background: var(--atg-paper); color: var(--atg-ink); }

/* Secondary action sitting on a photograph. */
.atg-btn--glass {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.42);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.atg-btn--glass:hover {
	background: #fff;
	color: var(--atg-accent-deep);
	border-color: #fff;
}

.atg-btn--block { width: 100%; }
.atg-btn--sm { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--atg-text-sm); }

.atg-btn__icon { flex: none; width: 1.05em; height: 1.05em; }
.atg-btn:hover .atg-btn__icon--slide { transform: translateX(3px); }
.atg-btn__icon--slide { transition: transform 0.2s var(--atg-ease); }

.atg-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--atg-s3);
}
.atg-btn-row > .atg-btn { flex: 1 1 12rem; }
@media (min-width: 600px) {
	.atg-btn-row > .atg-btn { flex: 0 0 auto; }
}

/* Text link with an animated rule */
.atg-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--atg-text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--atg-ink);
}
.atg-arrow-link svg { transition: transform 0.2s var(--atg-ease); }
.atg-arrow-link:hover { color: var(--atg-accent); }
.atg-arrow-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */

.atg-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--atg-paper) 88%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s var(--atg-ease), background 0.25s var(--atg-ease);
}
.atg-header.is-stuck {
	border-bottom-color: var(--atg-line);
	background: color-mix(in srgb, var(--atg-paper) 97%, transparent);
}

.atg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--atg-s4);
	min-height: var(--atg-header-h);
}

.atg-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
.atg-brand img { width: auto; max-height: 40px; background: none; }
@media (min-width: 900px) { .atg-brand img { max-height: 52px; } }
.atg-brand__text {
	font-family: var(--atg-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--atg-ink);
	line-height: 1.1;
}

.atg-header__actions { display: flex; align-items: center; gap: var(--atg-s2); }
.atg-header__cta { display: none; white-space: nowrap; }
@media (min-width: 1100px) { .atg-header__cta { display: inline-flex; } }

/* With a seven-item menu there is no room for the phone button on small
   laptops; the number is still in the popup, the footer and the drawer. */
@media (min-width: 1100px) and (max-width: 1279px) {
	.atg-header__cta--phone { display: none; }
}

/* Hamburger */
.atg-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: var(--atg-radius-sm);
}
.atg-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--atg-ink);
	border-radius: 2px;
	transition: transform 0.25s var(--atg-ease), opacity 0.2s var(--atg-ease);
	transform-origin: center;
}
.atg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.atg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.atg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1100px) { .atg-burger { display: none; } }

/* ---- Desktop nav (1100+) ---- */
.atg-nav { display: none; }

@media (min-width: 1100px) {
	.atg-nav { display: block; flex: 1 1 auto; }
	.atg-nav__list {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: clamp(0.25rem, 1.2vw, 1.25rem);
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.atg-nav__item { position: relative; }

	.atg-nav__link {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		padding: 0.65rem 0.6rem;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--atg-ink);
		text-decoration: none;
		white-space: nowrap;
		border-radius: var(--atg-radius-sm);
	}
	.atg-nav__link:hover,
	.atg-nav__item:focus-within > .atg-nav__link,
	.atg-nav__item.is-open > .atg-nav__link { color: var(--atg-accent); }

	.atg-nav__link svg { width: 0.7em; height: 0.7em; transition: transform 0.2s var(--atg-ease); }
	.atg-nav__item.is-open > .atg-nav__link svg { transform: rotate(180deg); }

	/* Dropdown panel — anchored to the item, or full width for mega */
	.atg-nav__panel {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 50%;
		transform: translate(-50%, 8px);
		min-width: 16rem;
		background: var(--atg-surface);
		border: 1px solid var(--atg-line);
		border-radius: var(--atg-radius);
		box-shadow: var(--atg-shadow-lg);
		padding: var(--atg-s4);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s var(--atg-ease), transform 0.2s var(--atg-ease), visibility 0.2s;
	}
	.atg-nav__item.is-open > .atg-nav__panel,
	.atg-nav__item:hover > .atg-nav__panel,
	.atg-nav__item:focus-within > .atg-nav__panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}

	/*
	 * Mega panels centre on the header, not on their menu item — an off-centre
	 * item like "Tour Packages" would otherwise push a 64rem panel off-screen.
	 * The item goes position:static so the panel's containing block becomes
	 * .atg-header__inner.
	 */
	.atg-header__inner { position: relative; }
	.atg-nav__item:has(> .atg-nav__panel--mega) { position: static; }

	.atg-nav__panel--mega {
		left: 50%;
		top: calc(100% - 0.5rem);
		width: min(64rem, calc(100vw - 4rem));
		padding: var(--atg-s6);
	}

	/* Invisible bridge over the gap between the link and the panel, so the
	   hover survives while the pointer travels down into it. */
	.atg-nav__panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 1.75rem;
	}
	/* 10rem minimum lets five destination columns share one row in the 64rem
	   panel; at 12rem the fifth (Kerala) wrapped onto a row of its own. */
	.atg-nav__mega-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: var(--atg-s5);
	}

	.atg-nav__col-title {
		display: block;
		font-family: var(--atg-font-body);
		font-size: var(--atg-text-xs);
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--atg-highlight);
		text-decoration: none;
		padding-bottom: var(--atg-s2);
		margin-bottom: var(--atg-s3);
		border-bottom: 1px solid var(--atg-line);
	}
	.atg-nav__col-title:hover { color: var(--atg-accent); }

	.atg-nav__sublist { list-style: none; margin: 0; padding: 0; }
	.atg-nav__sublist li + li { margin-top: 2px; }
	.atg-nav__sublist a {
		display: block;
		padding: 0.4rem 0.5rem;
		margin-inline: -0.5rem;
		border-radius: var(--atg-radius-sm);
		font-size: 0.9375rem;
		line-height: 1.4;
		color: var(--atg-ink-muted);
		text-decoration: none;
	}
	.atg-nav__sublist a:hover { background: var(--atg-accent-soft); color: var(--atg-accent-deep); }
	.atg-nav__empty { font-size: var(--atg-text-sm); color: var(--atg-ink-faint); font-style: italic; }
}

/* ---- Mobile drawer (< 1100) ---- */
.atg-drawer {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: var(--atg-paper);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.32s var(--atg-ease), visibility 0.32s;
	overscroll-behavior: contain;
}
.atg-drawer.is-open { transform: translateX(0); visibility: visible; }

@media (min-width: 1100px) { .atg-drawer { display: none; } }

.atg-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--atg-s4);
	min-height: var(--atg-header-h);
	padding-inline: var(--atg-gutter);
	border-bottom: 1px solid var(--atg-line);
}
.atg-drawer__close {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--atg-line);
	border-radius: 50%;
	background: transparent;
	color: var(--atg-ink);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
}
.atg-drawer__close:hover { background: var(--atg-surface-sunk); }

.atg-drawer__body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--atg-s4) var(--atg-gutter) var(--atg-s6);
}

.atg-drawer__foot {
	padding: var(--atg-s4) var(--atg-gutter);
	padding-bottom: calc(var(--atg-s4) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--atg-line);
	background: var(--atg-surface);
	display: grid;
	gap: var(--atg-s3);
}

.atg-mnav { list-style: none; margin: 0; padding: 0; }
.atg-mnav > li { border-bottom: 1px solid var(--atg-line); }

.atg-mnav__link,
.atg-mnav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--atg-s3);
	width: 100%;
	min-height: 56px;
	padding: 0.875rem 0;
	border: 0;
	background: none;
	font-family: var(--atg-font-display);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--atg-ink);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.atg-mnav__toggle svg { flex: none; width: 1rem; height: 1rem; color: var(--atg-ink-faint); transition: transform 0.25s var(--atg-ease); }
.atg-mnav__toggle[aria-expanded="true"] { color: var(--atg-accent); }
.atg-mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.atg-mnav__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s var(--atg-ease);
}
.atg-mnav__panel > div { overflow: hidden; }
.atg-mnav__toggle[aria-expanded="true"] + .atg-mnav__panel { grid-template-rows: 1fr; }

.atg-mnav__group { padding-bottom: var(--atg-s4); }
.atg-mnav__group + .atg-mnav__group { padding-top: var(--atg-s2); }
.atg-mnav__group-title {
	display: block;
	font-size: var(--atg-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--atg-highlight);
	text-decoration: none;
	margin-bottom: var(--atg-s2);
}
.atg-mnav__sublist { list-style: none; margin: 0; padding: 0; }
.atg-mnav__sublist a {
	display: block;
	padding: 0.5rem 0;
	font-size: 1rem;
	color: var(--atg-ink-muted);
	text-decoration: none;
	border-bottom: 1px dashed color-mix(in srgb, var(--atg-line) 70%, transparent);
}
.atg-mnav__sublist a:hover { color: var(--atg-accent); }

.atg-drawer__meta { margin-top: var(--atg-s6); display: grid; gap: var(--atg-s3); }
.atg-drawer__meta a {
	display: flex; align-items: center; gap: 0.6rem;
	font-size: var(--atg-text-base); color: var(--atg-ink-muted); text-decoration: none;
}
.atg-drawer__meta a:hover { color: var(--atg-accent); }
.atg-drawer__meta svg { width: 1.1em; height: 1.1em; flex: none; color: var(--atg-accent); }

.atg-overlay {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(var(--atg-ink-rgb), 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--atg-ease), visibility 0.3s;
}
.atg-overlay.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1100px) { .atg-overlay { display: none; } }

/* --------------------------------------------------------------------------
   7. Hero — a full-bleed photograph with the copy set over it, and a glass
   bar of proof figures resting on the bottom edge.
   -------------------------------------------------------------------------- */

.atg-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(1.5rem, 3.5vw, 2.25rem);
	padding-block: clamp(2.25rem, 5vw, 3.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--atg-accent-deep);
	color: #fff;
	overflow: hidden;
}

/*
 * Tall enough to read as a view rather than a banner, but short enough that
 * the proof bar clears the fold on a laptop once the header is subtracted.
 */
@media (min-width: 900px) {
	.atg-hero { min-height: min(78svh, 44rem); }
}

.atg-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--atg-accent-deep);
}
.atg-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Two scrims, not one: the upright gradient buys legibility for the bar at the
 * bottom, the sideways one covers the headline without dimming the whole
 * photograph. A single flat overlay dark enough for the text would kill it.
 */
.atg-hero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to top,
			rgba(var(--atg-accent-deep-rgb), 0.94) 0%,
			rgba(var(--atg-accent-deep-rgb), 0.62) 38%,
			rgba(var(--atg-accent-deep-rgb), 0.28) 72%,
			rgba(var(--atg-accent-deep-rgb), 0.38) 100%
		),
		linear-gradient(to right, rgba(var(--atg-ink-rgb), 0.62), rgba(var(--atg-ink-rgb), 0) 68%);
}

/* No photograph configured: keep some depth so the panel is not a flat slab. */
.atg-hero:not(.atg-hero--photo)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(90% 70% at 15% 0%, rgba(255, 255, 255, 0.14), transparent 60%);
}

.atg-hero__inner { width: 100%; }
.atg-hero__copy { max-width: 36rem; }
@media (min-width: 1100px) { .atg-hero__copy { max-width: 42rem; } }

.atg-hero__flag {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4rem 0.9rem;
	margin-bottom: var(--atg-s4);
	border-radius: var(--atg-radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: var(--atg-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}
.atg-hero__flag svg { flex: none; color: var(--atg-gold); }

.atg-hero__title {
	font-size: var(--atg-display);
	color: #fff;
	margin-bottom: var(--atg-s4);
	text-shadow: 0 2px 24px rgba(var(--atg-ink-rgb), 0.35);
}
.atg-hero__title em { font-style: normal; color: var(--atg-gold); }

.atg-hero__body {
	max-width: 46ch;
	margin: 0 0 var(--atg-s5);
	font-size: var(--atg-text-lg);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 14px rgba(var(--atg-ink-rgb), 0.35);
}

.atg-hero__actions { gap: var(--atg-s3); }

/* Popular-destination shortcuts — wayfinding without a second button row. */
.atg-hero__jump {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
}
.atg-hero__jump-label {
	font-size: var(--atg-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.atg-hero__jump ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.atg-hero__jump a {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: var(--atg-radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: var(--atg-text-sm);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background 0.2s var(--atg-ease), color 0.2s var(--atg-ease), border-color 0.2s var(--atg-ease);
}
.atg-hero__jump a:hover,
.atg-hero__jump a:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--atg-accent-deep);
}

/* The proof bar */
.atg-hero__bar {
	display: grid;
	gap: var(--atg-s4);
	padding: clamp(1rem, 3vw, 1.5rem);
	border-radius: var(--atg-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
@media (min-width: 900px) {
	.atg-hero__bar {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--atg-s6);
		padding-inline: clamp(1.5rem, 3vw, 2.25rem);
	}
}

.atg-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--atg-s4) var(--atg-s5);
	margin: 0;
	padding: 0;
	border: 0;
}
@media (min-width: 700px) { .atg-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.atg-trust__n {
	display: block;
	font-family: var(--atg-font-display);
	/* Sized so "10,000+" fits a quarter of the bar; never wraps. */
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
	white-space: nowrap;
	line-height: 1;
	color: #fff;
	margin-bottom: 0.2rem;
}
/* Block, so the tight line-height applies — as an inline span it inherited the
   body's 1.65 and two-line labels opened up a large gap. */
.atg-trust__l {
	display: block;
	font-size: var(--atg-text-sm);
	color: rgba(255, 255, 255, 0.76);
	line-height: 1.35;
}

/*
 * Campaign capsule. Hidden on phones deliberately: the promo band further down
 * carries the same offer in full, so nothing is lost and the hero stays one
 * screen tall.
 */
.atg-hero__promo { display: none; }

@media (min-width: 900px) {
	.atg-hero__promo {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		max-width: 21rem;
		padding: 0.45rem 1rem 0.45rem 0.45rem;
		border-radius: var(--atg-radius-pill);
		background: rgba(255, 255, 255, 0.94);
		color: var(--atg-ink);
		text-decoration: none;
		transition: background 0.2s var(--atg-ease), transform 0.2s var(--atg-ease);
	}
	.atg-hero__promo:hover { background: #fff; transform: translateY(-1px); }
}
.atg-hero__promo img {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}
.atg-hero__promo small {
	display: block;
	font-size: var(--atg-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--atg-highlight);
}
.atg-hero__promo strong {
	display: block;
	font-size: var(--atg-text-sm);
	line-height: 1.3;
	color: var(--atg-ink);
}
.atg-hero__promo svg { flex: none; color: var(--atg-ink-faint); transition: transform 0.2s var(--atg-ease); }
.atg-hero__promo:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   8. Page header / breadcrumb
   -------------------------------------------------------------------------- */

.atg-page-head {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(15rem, 38vw, 24rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--atg-accent-deep);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.atg-page-head__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
}
.atg-page-head::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(var(--atg-accent-deep-rgb), 0.30) 0%,
		rgba(var(--atg-accent-deep-rgb), 0.55) 45%,
		rgba(var(--atg-accent-deep-rgb), 0.88) 100%);
}
.atg-page-head__title { color: #fff; margin-bottom: 0; }
.atg-page-head .atg-eyebrow { color: var(--atg-gold); }
/* Pale gold is for photo headers; on the white flat header it disappears. */
.atg-page-head--flat .atg-eyebrow { color: var(--atg-highlight); }
.atg-page-head__sub { color: rgba(255, 255, 255, 0.82); margin-top: var(--atg-s3); max-width: 50ch; }

.atg-page-head--flat {
	min-height: 0;
	background: var(--atg-surface);
	color: var(--atg-ink);
	border-bottom: 1px solid var(--atg-line);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.atg-page-head--flat::after { display: none; }
.atg-page-head--flat .atg-page-head__title { color: var(--atg-ink); }
.atg-page-head--flat .atg-page-head__sub { color: var(--atg-ink-muted); }

.atg-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 var(--atg-s4);
	padding: 0;
	font-size: var(--atg-text-sm);
	color: rgba(255, 255, 255, 0.72);
}
.atg-crumbs a { color: inherit; text-decoration: none; }
.atg-crumbs a:hover { color: #fff; text-decoration: underline; }
.atg-crumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.55; }
.atg-page-head--flat .atg-crumbs { color: var(--atg-ink-faint); }
.atg-page-head--flat .atg-crumbs a:hover { color: var(--atg-accent); }

/* Yoast's breadcrumb markup (used when Yoast is active). Without these rules its
   links inherited the accent green and vanished against the photo header. */
.atg-crumbs-yoast {
	margin: 0 0 var(--atg-s4);
	font-size: var(--atg-text-sm);
	color: rgba(255, 255, 255, 0.72);
}
.atg-crumbs-yoast a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.atg-crumbs-yoast a:hover { color: #fff; text-decoration: underline; }
.atg-crumbs-yoast .breadcrumb_last { color: #fff; }
.atg-page-head--flat .atg-crumbs-yoast { color: var(--atg-ink-faint); }
.atg-page-head--flat .atg-crumbs-yoast a { color: var(--atg-ink-muted); }
.atg-page-head--flat .atg-crumbs-yoast a:hover { color: var(--atg-accent); }
.atg-page-head--flat .atg-crumbs-yoast .breadcrumb_last { color: var(--atg-ink); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.atg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--atg-surface);
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius);
	overflow: hidden;
	transition: border-color 0.25s var(--atg-ease), box-shadow 0.25s var(--atg-ease), transform 0.25s var(--atg-ease);
}
.atg-card:hover {
	border-color: var(--atg-line-strong);
	box-shadow: var(--atg-shadow);
	transform: translateY(-2px);
}

.atg-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--atg-surface-sunk);
}
.atg-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--atg-ease);
}
.atg-card:hover .atg-card__media img { transform: scale(1.04); }
.atg-card__media--tall { aspect-ratio: 3 / 4; }

/* Placeholder when a package has no artwork yet */
.atg-card__img--empty {
	display: block;
	width: 100%; height: 100%;
	background:
		linear-gradient(135deg, var(--atg-accent-soft) 0%, var(--atg-surface-sunk) 100%);
}

.atg-card__badge {
	position: absolute;
	top: var(--atg-s3);
	left: var(--atg-s3);
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3rem 0.7rem;
	border-radius: var(--atg-radius-pill);
	background: color-mix(in srgb, var(--atg-surface) 92%, transparent);
	backdrop-filter: blur(6px);
	font-size: var(--atg-text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--atg-ink);
}

.atg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--atg-s3);
	padding: var(--atg-s4);
}
@media (min-width: 900px) { .atg-card__body { padding: var(--atg-s5); } }

/*
 * Card titles use the body sans, not the display serif. At card width the
 * serif set too large and too heavy, and long package names ran to 3–4 lines.
 * Clamped to two lines with a matching min-height, so every card's footer
 * lines up regardless of title length.
 */
.atg-card__title {
	font-family: var(--atg-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
	margin: 0;
	min-height: calc(1rem * 1.4 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: normal;   /* never break inside a word ("Kashmi / r") */
	word-break: normal;
	text-wrap: pretty;
}
@media (min-width: 900px) {
	.atg-card__title { font-size: 1rem; min-height: calc(1rem * 1.4 * 2); }
}
.atg-card__title a { color: inherit; text-decoration: none; }
/* Stretched link — whole card is clickable, inner links still work */
.atg-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.atg-card__title a:hover { color: var(--atg-accent); }

.atg-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	font-size: var(--atg-text-sm);
	color: var(--atg-ink-muted);
}
.atg-card__meta > span { display: inline-flex; align-items: center; gap: 0.35em; }
.atg-card__meta svg { width: 0.95em; height: 0.95em; flex: none; color: var(--atg-ink-faint); }

.atg-card__excerpt {
	font-size: var(--atg-text-base);
	color: var(--atg-ink-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.atg-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--atg-s3);
	margin-top: auto;
	padding-top: var(--atg-s3);
	border-top: 1px solid var(--atg-line);
}

.atg-price { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.2; min-width: 0; }
.atg-price__label {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--atg-ink-faint);
}
.atg-price__value {
	font-family: var(--atg-font-body);
	font-size: 1rem;
	font-weight: 700;
	color: var(--atg-highlight);
	white-space: nowrap;   /* "On request" must never split across two lines */
}
.atg-price__unit { font-size: var(--atg-text-xs); color: var(--atg-ink-faint); }

/* Destination tile — image with overlaid label */
.atg-tile {
	position: relative;
	display: block;
	border-radius: var(--atg-radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--atg-accent-deep);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
@media (min-width: 900px) { .atg-tile { aspect-ratio: 4 / 5; } }
.atg-tile img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--atg-ease);
}
.atg-tile::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(var(--atg-accent-deep-rgb), 0) 35%, rgba(var(--atg-accent-deep-rgb), 0.85) 100%);
}
.atg-tile:hover img { transform: scale(1.06); }
.atg-tile__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--atg-s4);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--atg-s3);
}
.atg-tile__name {
	font-family: var(--atg-font-display);
	font-size: var(--atg-h4);
	font-weight: 600;
	color: #fff;
	margin: 0;
	line-height: 1.15;
}
.atg-tile__count { font-size: var(--atg-text-xs); color: rgba(255,255,255,0.75); display: block; margin-top: 0.2rem; }
.atg-tile__arrow {
	flex: none;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
	border: 1px solid rgba(255,255,255,0.3);
	transition: background 0.25s var(--atg-ease);
}
.atg-tile:hover .atg-tile__arrow { background: var(--atg-surface); color: var(--atg-accent-deep); }

/* --------------------------------------------------------------------------
   10. Prose (user-entered content from the editor / ACF blobs)
   -------------------------------------------------------------------------- */

.atg-prose { font-size: var(--atg-text-md); line-height: 1.75; color: var(--atg-ink); }
/* `.atg-readmore__inner` repeats the direct-child rules: content after the
   second paragraph is moved into it, and must look exactly as it did before. */
.atg-prose > * + *,
.atg-readmore__inner > * + * { margin-top: var(--atg-s4); }
.atg-prose > h2,
.atg-readmore__inner > h2 { font-size: var(--atg-h3); margin-top: var(--atg-s7); }
.atg-prose > h3,
.atg-readmore__inner > h3 { font-size: var(--atg-h4); margin-top: var(--atg-s6); }
.atg-prose > h4, .atg-prose > h5,
.atg-readmore__inner > h4, .atg-readmore__inner > h5 { font-size: var(--atg-text-lg); margin-top: var(--atg-s5); }
.atg-prose > h2:first-child, .atg-prose > h3:first-child { margin-top: 0; }

.atg-prose ul, .atg-prose ol { padding-left: 1.25rem; }
.atg-prose li + li { margin-top: 0.4rem; }
.atg-prose ul { list-style: none; padding-left: 0; }
.atg-prose ul > li {
	position: relative;
	padding-left: 1.6rem;
}
.atg-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0.35rem;
	top: 0.72em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--atg-highlight);
}
.atg-prose ul ul > li::before { background: var(--atg-line-strong); }

.atg-prose img { border-radius: var(--atg-radius); margin-inline: auto; }
.atg-prose figure { margin-inline: 0; }
.atg-prose figcaption { font-size: var(--atg-text-sm); color: var(--atg-ink-faint); text-align: center; margin-top: var(--atg-s2); }

.atg-prose blockquote {
	margin-inline: 0;
	padding: var(--atg-s4) var(--atg-s5);
	border-left: 3px solid var(--atg-highlight);
	background: var(--atg-highlight-soft);
	border-radius: 0 var(--atg-radius) var(--atg-radius) 0;
	font-style: italic;
	color: var(--atg-ink);
}
.atg-prose blockquote p:last-child { margin-bottom: 0; }

.atg-prose a { font-weight: 500; }

.atg-prose code {
	background: var(--atg-surface-sunk);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}
.atg-prose pre {
	background: var(--atg-ink);
	color: var(--atg-surface-sunk);
	padding: var(--atg-s4);
	border-radius: var(--atg-radius);
	overflow-x: auto;
}
.atg-prose pre code { background: none; padding: 0; }

/* Tables inside editor content — the common case is a price/itinerary grid */
.atg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--atg-text-base);
	background: var(--atg-surface);
}
.atg-prose :where(table) { display: block; overflow-x: auto; }
@media (min-width: 700px) { .atg-prose :where(table) { display: table; } }
.atg-prose th, .atg-prose td {
	border: 1px solid var(--atg-line);
	padding: 0.65rem 0.85rem;
	text-align: left;
	vertical-align: top;
}
.atg-prose th { background: var(--atg-surface-sunk); font-weight: 600; }

.atg-prose iframe, .atg-prose video { width: 100%; border-radius: var(--atg-radius); aspect-ratio: 16 / 9; }

/* Legacy content sometimes carries fixed widths — keep it inside the page */
.atg-prose [width], .atg-prose [style*="width"] { max-width: 100% !important; }

/* --------------------------------------------------------------------------
   11. Panels, accordion, FAQ
   -------------------------------------------------------------------------- */

.atg-panel {
	background: var(--atg-surface);
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius);
	padding: var(--atg-s5);
}
@media (min-width: 900px) { .atg-panel { padding: var(--atg-s6); } }
.atg-panel--sunk { background: var(--atg-surface-sunk); border-color: transparent; }
.atg-panel__title {
	font-size: var(--atg-h4);
	padding-bottom: var(--atg-s3);
	margin-bottom: var(--atg-s4);
	border-bottom: 1px solid var(--atg-line);
}

/*
 * Accordion. Progressive: if the ACF blob already contains <details>, it styles
 * natively. Otherwise JS upgrades heading+content pairs in .atg-autofaq.
 */
.atg-acc { border-top: 1px solid var(--atg-line); }
.atg-acc__item { border-bottom: 1px solid var(--atg-line); }
.atg-acc__btn {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--atg-s4);
	width: 100%;
	padding: var(--atg-s4) 0;
	border: 0;
	background: none;
	font-family: var(--atg-font-body);
	font-size: var(--atg-text-md);
	font-weight: 600;
	line-height: 1.4;
	color: var(--atg-ink);
	text-align: left;
	cursor: pointer;
}
.atg-acc__btn:hover { color: var(--atg-accent); }
.atg-acc__icon {
	position: relative;
	flex: none;
	width: 22px; height: 22px;
	margin-top: 0.2em;
	border-radius: 50%;
	border: 1px solid var(--atg-line-strong);
	transition: background 0.2s var(--atg-ease), border-color 0.2s var(--atg-ease);
}
.atg-acc__icon::before,
.atg-acc__icon::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s var(--atg-ease), transform 0.2s var(--atg-ease);
}
.atg-acc__icon::before { width: 9px; height: 1.5px; }
.atg-acc__icon::after  { width: 1.5px; height: 9px; }
.atg-acc__btn[aria-expanded="true"] .atg-acc__icon {
	background: var(--atg-accent);
	border-color: var(--atg-accent);
	color: #fff;
}
.atg-acc__btn[aria-expanded="true"] .atg-acc__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.atg-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s var(--atg-ease);
}
.atg-acc__panel > div { overflow: hidden; }
.atg-acc__item.is-open .atg-acc__panel { grid-template-rows: 1fr; }
.atg-acc__inner { padding-bottom: var(--atg-s5); color: var(--atg-ink-muted); }
.atg-acc__inner > *:first-child { margin-top: 0; }

/* Accordions converted from saved Bootstrap markup (inc/accordion.php) wrap the
   button in an <h3>; strip the heading's own type styles so the button sets them. */
.atg-acc__heading { margin: 0; font: inherit; letter-spacing: normal; }
.atg-acc__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; flex: 1; min-width: 0; }
.atg-acc__title { flex: 1 1 12rem; min-width: 0; }
.atg-acc__label {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.55rem;
	border-radius: var(--atg-radius-pill);
	background: var(--atg-accent-soft);
	color: var(--atg-accent-deep);
	font-size: var(--atg-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.atg-acc__btn[aria-expanded="true"] .atg-acc__title { color: var(--atg-accent-deep); }

/* Without JS every panel stays readable — and the inline head script adds
   `js` before first paint, so there is no open-then-snap-shut flash. */
html:not(.js) .atg-acc__panel { grid-template-rows: 1fr; }

/* ---- Read more / Read less (inc/readmore.php) ---- */

/*
 * Without JS the rest is simply shown and the button hidden. With JS (the `js`
 * class is set in <head> before first paint) it starts collapsed, so there is
 * no load-time jump. The grid 0fr → 1fr trick animates to the real height.
 */
/* Spacing: margins can't collapse across the grid wrapper, so the second
   paragraph's own bottom margin already supplies the gap — the wrapper and its
   first child add nothing. :where() keeps that reset at zero specificity, so a
   leading heading still gets its larger heading margin. */
.atg-readmore__rest { display: grid; grid-template-rows: 1fr; margin-top: 0 !important; }
.atg-readmore__inner { min-height: 0; }
.atg-readmore__inner > :where(:first-child) { margin-top: 0; }

html:not(.js) .atg-readmore__toggle { display: none; }

.js .atg-readmore__rest {
	position: relative;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--atg-ease);
}
.js .atg-readmore__rest.is-open { grid-template-rows: 1fr; }

/* overflow clips the animation; visibility keeps collapsed links out of the tab
   order and away from screen readers, and only switches off after it closes. */
.js .atg-readmore__rest .atg-readmore__inner {
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 0.45s;
}
.js .atg-readmore__rest.is-open .atg-readmore__inner {
	visibility: visible;
	transition: visibility 0s linear 0s;
}

/* Soft fade over the end of the second paragraph while collapsed */
.js .atg-readmore__rest::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 2.75rem;
	background: linear-gradient(180deg, transparent, var(--atg-readmore-bg, var(--atg-paper)));
	pointer-events: none;
	transition: opacity 0.3s var(--atg-ease);
}
.js .atg-readmore__rest.is-open::before { opacity: 0; }

/* The fade must match whatever background the content sits on */
.atg-section--paper { --atg-readmore-bg: var(--atg-surface); }
.atg-section--sunk  { --atg-readmore-bg: var(--atg-surface-sunk); }
.atg-panel          { --atg-readmore-bg: var(--atg-surface); }

.atg-readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin-top: var(--atg-s3);
	padding: 0.5rem 1.1rem 0.5rem 1.25rem;
	border: 1px solid var(--atg-line-strong);
	border-radius: var(--atg-radius-pill);
	background: var(--atg-surface);
	color: var(--atg-accent-deep);
	font-family: var(--atg-font-body);
	font-size: var(--atg-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s var(--atg-ease), border-color 0.2s var(--atg-ease), color 0.2s var(--atg-ease);
}
.atg-readmore__toggle:hover {
	background: var(--atg-accent);
	border-color: var(--atg-accent);
	color: #fff;
}
.atg-readmore__toggle svg { transition: transform 0.3s var(--atg-ease); }
.atg-readmore__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.js .atg-readmore__rest, .js .atg-readmore__rest .atg-readmore__inner { transition: none; }
}

@media print {
	.atg-readmore__rest { grid-template-rows: 1fr !important; }
	.atg-readmore__inner { visibility: visible !important; overflow: visible !important; }
	.atg-readmore__rest::before, .atg-readmore__toggle { display: none !important; }
}

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

.atg-faq-block > h2 { font-size: var(--atg-h2); margin-bottom: var(--atg-s3); }
.atg-faq-block .text { color: var(--atg-ink-muted); margin-bottom: var(--atg-s5); }
.atg-faq-block .text-b { color: var(--atg-accent); font-style: italic; }
.atg-faq-block .atg-acc {
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius);
	background: var(--atg-surface);
	padding-inline: var(--atg-s4);
}
@media (min-width: 700px) { .atg-faq-block .atg-acc { padding-inline: var(--atg-s5); } }
.atg-faq-block .atg-acc__item:last-child { border-bottom: 0; }

/* ---- Itinerary timeline ---- */

.atg-itinerary__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--atg-s3) var(--atg-s5);
	margin-bottom: var(--atg-s4);
}
.atg-itinerary__head h2 { margin-bottom: 0.25rem; }
.atg-itinerary__head p { margin: 0; font-size: var(--atg-text-base); }

.atg-acc--itinerary { border-top: 0; }

.atg-acc--itinerary .atg-acc__item {
	position: relative;
	padding-left: 2.5rem;
	border-bottom: 0;
}

/* The rail connecting one day's dot to the next */
.atg-acc--itinerary .atg-acc__item::before {
	content: "";
	position: absolute;
	left: calc(0.75rem - 1px);
	top: 2.4rem;
	bottom: -0.9rem;
	width: 2px;
	background: var(--atg-line);
}
.atg-acc--itinerary .atg-acc__item:last-child::before { display: none; }

/* The dot */
.atg-acc--itinerary .atg-acc__item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 1.2rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 2px solid var(--atg-accent);
	background: var(--atg-surface);
	box-shadow: 0 0 0 4px var(--atg-paper);
	transition: background 0.2s var(--atg-ease);
}
.atg-acc--itinerary .atg-acc__item.is-open::after {
	background: var(--atg-accent);
	box-shadow: 0 0 0 4px var(--atg-paper), inset 0 0 0 4px var(--atg-surface);
}
.atg-acc--itinerary .atg-acc__item:first-child::after { border-color: var(--atg-highlight); }
.atg-acc--itinerary .atg-acc__item:first-child.is-open::after { background: var(--atg-highlight); }

/* Label ("Day 01") sits above the route line in the itinerary */
.atg-acc--itinerary .atg-acc__text { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.atg-acc--itinerary .atg-acc__title { flex: none; font-size: var(--atg-text-md); line-height: 1.4; }
.atg-acc--itinerary .atg-acc__label { background: none; padding: 0; color: var(--atg-highlight); }

.atg-acc--itinerary .atg-acc__btn { padding-block: 1rem; }
.atg-acc--itinerary .atg-acc__inner {
	padding: var(--atg-s4) var(--atg-s4) var(--atg-s4);
	margin-bottom: var(--atg-s3);
	border-radius: var(--atg-radius);
	background: var(--atg-surface);
	border: 1px solid var(--atg-line);
	font-size: var(--atg-text-base);
	line-height: 1.7;
}
@media (min-width: 700px) {
	.atg-acc--itinerary .atg-acc__inner { padding: var(--atg-s5); }
}

/* Days with no description: a plain timeline entry, nothing to expand */
.atg-acc__item--empty .atg-acc__btn { cursor: default; }
.atg-acc__item--empty .atg-acc__btn:hover { color: inherit; }
.atg-acc--itinerary .atg-acc__item--empty::after { border-style: dashed; }

/* Leftover Bootstrap helpers inside day bodies (accordion-body-list) */
.atg-acc__inner .accordion-body-list { margin-top: var(--atg-s3); }

/* Native <details> coming from editor content */
.atg-prose details {
	border-bottom: 1px solid var(--atg-line);
	padding: var(--atg-s3) 0;
}
.atg-prose summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	padding-right: 1.5rem;
	position: relative;
}
.atg-prose summary::-webkit-details-marker { display: none; }
.atg-prose summary::after {
	content: "+";
	position: absolute;
	right: 0;
	color: var(--atg-accent);
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1;
}
.atg-prose details[open] summary::after { content: "\2013"; }

/* Inclusion / exclusion two-up */
.atg-incex { display: grid; gap: var(--atg-s4); }
@media (min-width: 700px) { .atg-incex { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.atg-incex__col { padding: var(--atg-s5); border-radius: var(--atg-radius); }
.atg-incex__col--in  { background: var(--atg-accent-soft); }
.atg-incex__col--out { background: var(--atg-surface-sunk); }

/* --------------------------------------------------------------------------
   12. Itinerary (day list)
   -------------------------------------------------------------------------- */

.atg-days { list-style: none; margin: 0; padding: 0; counter-reset: atg-day; }
.atg-days__item {
	position: relative;
	padding: 0 0 var(--atg-s5) 2.75rem;
	border-left: 1px solid var(--atg-line);
	margin-left: 0.85rem;
	counter-increment: atg-day;
}
.atg-days__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.atg-days__item::before {
	content: counter(atg-day, decimal-leading-zero);
	position: absolute;
	left: -0.85rem;
	top: 0;
	width: 1.7rem; height: 1.7rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--atg-accent);
	color: #fff;
	font-family: var(--atg-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.atg-days__title { font-size: var(--atg-text-lg); margin-bottom: var(--atg-s2); }
.atg-days__body { color: var(--atg-ink-muted); }

/* --------------------------------------------------------------------------
   13. Forms (incl. Contact Form 7)
   -------------------------------------------------------------------------- */

.atg-form { display: grid; gap: var(--atg-s3); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], input[type="password"],
select, textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--atg-line-strong);
	border-radius: var(--atg-radius-sm);
	background: var(--atg-surface);
	color: var(--atg-ink);
	font-family: inherit;
	font-size: 16px;        /* prevents iOS zoom-on-focus */
	line-height: 1.4;
	transition: border-color 0.2s var(--atg-ease), box-shadow 0.2s var(--atg-ease);
	-webkit-appearance: none;
	appearance: none;
}
textarea { min-height: 120px; resize: vertical; }

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235d554d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 12px;
	padding-right: 2.4rem;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--atg-accent);
	box-shadow: 0 0 0 3px var(--atg-accent-soft);
}

::placeholder { color: var(--atg-ink-faint); opacity: 1; }

label { display: block; font-size: var(--atg-text-sm); font-weight: 600; margin-bottom: var(--atg-s1); }

button, input[type="submit"], input[type="button"] { font-family: inherit; }

/* CF7 — the plugin emits its own wrappers, so normalise them here */
.wpcf7 { font-size: var(--atg-text-base); }
.wpcf7-form { display: grid; gap: var(--atg-s3); }
.wpcf7-form p { margin: 0; }
.wpcf7-form br { display: none; }
.wpcf7-form-control-wrap { display: block; }

.wpcf7 input[type="submit"] {
	min-height: 50px;
	width: 100%;
	padding: 0.8rem 1.5rem;
	border: 0;
	border-radius: var(--atg-radius-pill);
	background: var(--atg-action);
	color: var(--atg-action-ink);
	font-size: var(--atg-text-base);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s var(--atg-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--atg-action-deep); }

/*
 * Legacy form markup.
 * The saved CF7 forms wrap each field in <fieldset class="mflex jsb"> plus a
 * "Personal Details" heading (.ppdtlsc) and extra <p>/<br>. Browsers give
 * fieldsets a border and padding — those were the grey boxes around every
 * input. Neutralised here so the forms need no editing in the admin.
 */
.wpcf7 fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wpcf7 #contact { display: grid; gap: var(--atg-s3); }
.wpcf7 .ppdtlsc {
	font-size: var(--atg-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--atg-ink-faint);
}
.wpcf7 .ppdtlsc p { margin: 0; }
/* Inside the popup the dialog header already introduces the form. */
.atg-modal .wpcf7 .ppdtlsc { display: none; }

/* Compact message box — the form asks for rows="10", which is far too tall. */
.wpcf7 textarea {
	height: 6.25rem;
	min-height: 4.5rem;
	resize: vertical;
}

/* Field icons, keyed off the legacy classes the forms already carry */
.wpcf7 input.user-ico,
.wpcf7 input.call-ico,
.wpcf7 input.email-ico {
	padding-left: 2.75rem;
	background-repeat: no-repeat;
	background-position: 0.95rem center;
	background-size: 18px;
}
.wpcf7 input.user-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8178' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.wpcf7 input.call-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8178' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}
.wpcf7 input.email-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8178' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

/* Maths quiz: question as a label chip beside a short answer box */
.wpcf7 .wpcf7-quiz-label {
	flex: none;
	font-size: var(--atg-text-sm);
	font-weight: 600;
	color: var(--atg-ink-muted);
	white-space: nowrap;
}
.wpcf7 .wpcf7-quiz-label::before { content: "Quick check: "; font-weight: 400; color: var(--atg-ink-faint); }
.wpcf7 [data-name^="quiz"] { margin-top: var(--atg-s3); }
.wpcf7 [data-name^="quiz"] label {
	display: flex;
	align-items: center;
	gap: var(--atg-s3);
	margin: 0;
}
.wpcf7 input.wpcf7-quiz { max-width: 7rem; text-align: center; }

/* Submit sits in a <p> with CF7's spinner — keep the spinner inside the button */
.wpcf7 p:has(> .wpcf7-submit) { position: relative; margin-top: var(--atg-s2); }
.wpcf7 p:has(> .wpcf7-submit) .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 1rem;
	margin: 0;
	transform: translateY(-50%);
}

/*
 * Two columns for phone + email when the form is wide enough. A container query,
 * so the rule tracks the form's own width (modal, sidebar or contact page)
 * rather than the viewport.
 */
.atg-form-host { container-type: inline-size; }

@container (min-width: 25rem) {
	.wpcf7 #contact { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--atg-s3); }
	.wpcf7 #contact > * { grid-column: 1 / -1; }
	.wpcf7 #contact > fieldset:nth-of-type(2),
	.wpcf7 #contact > fieldset:nth-of-type(3) { grid-column: auto; }
}

.wpcf7-not-valid-tip { font-size: var(--atg-text-sm); color: var(--atg-danger); margin-top: 0.25rem; }
.wpcf7 .wpcf7-not-valid { border-color: var(--atg-danger); }
.wpcf7-response-output {
	margin: var(--atg-s2) 0 0 !important;
	padding: var(--atg-s3) var(--atg-s4) !important;
	border-width: 1px !important;
	border-radius: var(--atg-radius-sm);
	font-size: var(--atg-text-sm);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--atg-success) !important; background: var(--atg-success-soft); color: var(--atg-success); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--atg-danger) !important; background: var(--atg-danger-soft); color: var(--atg-danger); }
.wpcf7-spinner { margin-inline: auto; display: block; }

/* --------------------------------------------------------------------------
   14. Quote / enquiry widgets
   -------------------------------------------------------------------------- */

.atg-quote-card {
	background: var(--atg-accent-deep);
	color: #fff;
	border-radius: var(--atg-radius);
	padding: var(--atg-s5);
	overflow: hidden;
	position: relative;
}
.atg-quote-card h3, .atg-quote-card h4 { color: #fff; }
.atg-quote-card p { color: rgba(255,255,255,0.82); }
.atg-quote-card .atg-btn { background: var(--atg-action); color: var(--atg-action-ink); }
.atg-quote-card .atg-btn:hover { background: var(--atg-action-deep); color: var(--atg-action-ink); }

/* Photo-backed variant, used by the closing homepage CTA */
.atg-quote-card--image { isolation: isolate; }
.atg-quote-card__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.atg-quote-card--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Light enough for the photo to read; the vignette keeps centred text legible. */
	background:
		radial-gradient(ellipse at center, rgba(var(--atg-accent-deep-rgb), 0.55) 0%, rgba(var(--atg-accent-deep-rgb), 0.25) 75%),
		linear-gradient(180deg, rgba(var(--atg-accent-deep-rgb), 0.2), rgba(var(--atg-accent-deep-rgb), 0.55));
}
.atg-quote-card--image h2,
.atg-quote-card--image p { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35); }
.atg-quote-card--image .atg-btn--light { background: var(--atg-action); color: var(--atg-action-ink); }
.atg-quote-card--image .atg-btn--light:hover { background: var(--atg-action-deep); color: var(--atg-action-ink); }

.atg-help {
	display: flex;
	align-items: flex-start;
	gap: var(--atg-s3);
	padding: var(--atg-s4);
	border: 1px dashed var(--atg-line-strong);
	border-radius: var(--atg-radius);
	background: var(--atg-surface);
}
.atg-help__icon {
	flex: none;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--atg-accent-soft);
	color: var(--atg-accent);
}
.atg-help a { display: block; font-weight: 600; text-decoration: none; }
.atg-help__label { font-size: var(--atg-text-sm); color: var(--atg-ink-faint); }

/* --------------------------------------------------------------------------
   15. Modal
   -------------------------------------------------------------------------- */

.atg-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: end center;
	padding: 0;
	background: rgba(var(--atg-ink-rgb), 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--atg-ease), visibility 0.25s;
	overscroll-behavior: contain;
}
.atg-modal.is-open { opacity: 1; visibility: visible; }

@media (min-width: 700px) {
	.atg-modal { place-items: center; padding: var(--atg-s5); }
}

/*
 * The dialog never scrolls as a whole. The header (title + close) is fixed and
 * only .atg-modal__body scrolls, so the close button can't scroll out of reach.
 */
.atg-modal__dialog {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 30rem;
	max-height: 92dvh;
	overflow: hidden;
	background: var(--atg-surface);
	border-radius: var(--atg-radius-lg) var(--atg-radius-lg) 0 0;
	box-shadow: var(--atg-shadow-lg);
	transform: translateY(24px);
	transition: transform 0.3s var(--atg-ease);
}
.atg-modal.is-open .atg-modal__dialog { transform: translateY(0); }

@media (min-width: 700px) {
	.atg-modal__dialog { border-radius: var(--atg-radius-lg); max-height: min(88dvh, 44rem); }
}

/* Two panels once there is room for the photo to earn its space */
@media (min-width: 860px) {
	.atg-modal__dialog:has(.atg-modal__aside) { max-width: 54rem; }
}

/* Grab handle on the mobile bottom sheet */
.atg-modal__dialog::before {
	content: "";
	position: absolute;
	top: 0.55rem; left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	width: 2.5rem; height: 4px;
	border-radius: 999px;
	background: var(--atg-line-strong);
}
@media (min-width: 700px) { .atg-modal__dialog::before { display: none; } }

/* ---- Photo panel ---- */

.atg-modal__aside { display: none; }

@media (min-width: 860px) {
	.atg-modal__aside {
		position: relative;
		isolation: isolate;
		display: flex;
		flex: 0 0 42%;
		align-items: flex-end;
		overflow: hidden;
		background: var(--atg-accent-deep);
		color: #fff;
	}
}

.atg-modal__aside-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.atg-modal__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(var(--atg-accent-deep-rgb), 0.15) 0%, rgba(var(--atg-accent-deep-rgb), 0.55) 45%, rgba(var(--atg-accent-deep-rgb), 0.94) 100%);
}

.atg-modal__aside-body { padding: var(--atg-s6); }
.atg-modal__aside .atg-eyebrow { color: var(--atg-gold); }

.atg-modal__aside-title {
	font-family: var(--atg-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0 0 var(--atg-s5);
	text-wrap: balance;
}

.atg-modal__points { list-style: none; margin: 0 0 var(--atg-s5); padding: 0; display: grid; gap: 0.6rem; }
.atg-modal__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--atg-text-base);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}
.atg-modal__points svg {
	flex: none;
	width: 20px; height: 20px;
	padding: 3px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(233, 216, 182, 0.2);
	color: var(--atg-gold);
}

.atg-modal__call {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding-top: var(--atg-s4);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.atg-modal__call:hover { color: var(--atg-gold); }
.atg-modal__call small { display: block; font-size: var(--atg-text-xs); font-weight: 400; color: rgba(255, 255, 255, 0.65); }
.atg-modal__call-icon {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
}

/* ---- Form panel ---- */

.atg-modal__main {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

.atg-modal__close {
	position: absolute;
	top: var(--atg-s4);
	right: var(--atg-s4);
	z-index: 3;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--atg-surface-sunk);
	color: var(--atg-ink-muted);
	cursor: pointer;
	transition: background 0.2s var(--atg-ease), color 0.2s var(--atg-ease), transform 0.2s var(--atg-ease);
}
.atg-modal__close:hover { background: var(--atg-ink); color: #fff; transform: rotate(90deg); }

.atg-modal__head {
	flex: none;
	padding: var(--atg-s6) calc(var(--atg-s5) + 2.5rem) var(--atg-s4) var(--atg-s5);
}
@media (min-width: 700px) {
	.atg-modal__head { padding: var(--atg-s6) calc(var(--atg-s6) + 2rem) var(--atg-s4) var(--atg-s6); }
}
.atg-modal__head h2 { font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem); margin-bottom: var(--atg-s2); }
.atg-modal__head p { color: var(--atg-ink-muted); font-size: 0.9375rem; line-height: 1.5; margin: 0; }

.atg-modal__subject {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 100%;
	margin-top: var(--atg-s3) !important;
	padding: 0.35rem 0.75rem;
	border-radius: var(--atg-radius-pill);
	background: var(--atg-accent-soft);
	color: var(--atg-accent-deep) !important;
	font-size: var(--atg-text-sm) !important;
	font-weight: 600;
}
.atg-modal__subject[hidden] { display: none !important; }
.atg-modal__subject span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atg-modal__subject svg { flex: none; }

.atg-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--atg-s2) var(--atg-s5) calc(var(--atg-s5) + env(safe-area-inset-bottom, 0px));
	scrollbar-width: thin;
	scrollbar-color: var(--atg-line-strong) transparent;
}
@media (min-width: 700px) {
	.atg-modal__body { padding: var(--atg-s2) var(--atg-s6) var(--atg-s6); }
}

/* --------------------------------------------------------------------------
   16. Mobile action bar
   -------------------------------------------------------------------------- */

.atg-actionbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 55;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1px;
	background: var(--atg-line);
	border-top: 1px solid var(--atg-line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: 0 -8px 24px -16px rgba(var(--atg-ink-rgb), 0.4);
}
@media (min-width: 900px) { .atg-actionbar { display: none; } }

.atg-actionbar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-height: 54px;
	border: 0;
	background: var(--atg-surface);
	color: var(--atg-ink);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.atg-actionbar__btn svg { width: 1.1em; height: 1.1em; flex: none; }
.atg-actionbar__btn--primary { background: var(--atg-accent); color: #fff; }
.atg-actionbar__btn--wa { color: #128c7e; }

/* Keep the bar from covering the last of the page */
body.has-actionbar { padding-bottom: 54px; }
@media (min-width: 900px) { body.has-actionbar { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.atg-footer {
	background: var(--atg-footer-bg);
	color: var(--atg-footer-text);
	padding-top: var(--atg-section);
}
.atg-footer a { color: var(--atg-footer-text); text-decoration: none; }
.atg-footer a:hover { color: #fff; }
.atg-footer h2, .atg-footer h3, .atg-footer h4 { color: #fff; }

.atg-footer__grid { display: grid; gap: var(--atg-s6); }
@media (min-width: 600px) { .atg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .atg-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--atg-s7); } }

.atg-footer__brand img { max-height: 48px; width: auto; background: none; margin-bottom: var(--atg-s4); }
.atg-footer__about { font-size: var(--atg-text-base); line-height: 1.6; max-width: 34ch; }

.atg-footer__title {
	font-family: var(--atg-font-body);
	font-size: var(--atg-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--atg-footer-muted);
	margin-bottom: var(--atg-s4);
}

.atg-footer__links { list-style: none; margin: 0; padding: 0; }
.atg-footer__links li + li { margin-top: 0.55rem; }
.atg-footer__links a { font-size: var(--atg-text-base); }

.atg-social { display: flex; gap: var(--atg-s2); margin-top: var(--atg-s5); }
.atg-social a {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.16);
	transition: background 0.2s var(--atg-ease), border-color 0.2s var(--atg-ease);
}
.atg-social a:hover { background: var(--atg-accent); border-color: var(--atg-accent); color: #fff; }
.atg-social svg { width: 18px; height: 18px; }

.atg-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--atg-s3); }
.atg-footer__contact li { display: flex; gap: 0.7rem; font-size: var(--atg-text-base); line-height: 1.5; }
.atg-footer__contact svg { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.3em; color: var(--atg-highlight); }

.atg-footer__bar {
	margin-top: var(--atg-section);
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-block: var(--atg-s5);
	padding-bottom: calc(var(--atg-s5) + env(safe-area-inset-bottom, 0px));
	font-size: var(--atg-text-sm);
	color: var(--atg-footer-muted);
	display: flex;
	flex-direction: column;
	gap: var(--atg-s3);
	align-items: center;
	text-align: center;
}
@media (min-width: 800px) {
	.atg-footer__bar { flex-direction: row; justify-content: space-between; text-align: left; }
}
.atg-footer__legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; justify-content: center; }

body.has-actionbar .atg-footer__bar { padding-bottom: calc(var(--atg-s5) + env(safe-area-inset-bottom, 0px)); }

/* --------------------------------------------------------------------------
   18. Pagination, comments, misc
   -------------------------------------------------------------------------- */

.atg-pagination { margin-top: var(--atg-s7); }
.atg-pagination .nav-links,
.atg-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--atg-s2);
	list-style: none;
	margin: 0; padding: 0;
}
.atg-pagination a.page-numbers,
.atg-pagination span.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px; height: 44px;
	padding-inline: 0.65rem;
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius-sm);
	background: var(--atg-surface);
	color: var(--atg-ink);
	font-size: var(--atg-text-base);
	font-weight: 500;
	text-decoration: none;
}
.atg-pagination a.page-numbers:hover { border-color: var(--atg-accent); color: var(--atg-accent); }
.atg-pagination .page-numbers.current {
	background: var(--atg-accent);
	border-color: var(--atg-accent);
	color: #fff;
}
.atg-pagination .page-numbers.dots { border-color: transparent; background: none; }
.atg-pagination .atg-flip { transform: rotate(180deg); }

.atg-post-nav {
	display: grid;
	gap: var(--atg-s3);
	margin-top: var(--atg-s7);
	padding-top: var(--atg-s5);
	border-top: 1px solid var(--atg-line);
}
@media (min-width: 700px) { .atg-post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.atg-post-nav a {
	display: block;
	padding: var(--atg-s4);
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius);
	background: var(--atg-surface);
	text-decoration: none;
	color: var(--atg-ink);
}
.atg-post-nav a:hover { border-color: var(--atg-accent); }
.atg-post-nav small { display: block; color: var(--atg-ink-faint); margin-bottom: 0.25rem; }
.atg-post-nav--next { text-align: right; }

.atg-comments { margin-top: var(--atg-s7); }
.atg-comments ol { list-style: none; margin: 0; padding: 0; }
.atg-comments .children { list-style: none; margin: var(--atg-s4) 0 0; padding-left: var(--atg-s4); border-left: 1px solid var(--atg-line); }
@media (min-width: 700px) { .atg-comments .children { padding-left: var(--atg-s6); } }
.atg-comments .comment-body {
	padding: var(--atg-s4);
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius);
	background: var(--atg-surface);
	margin-bottom: var(--atg-s4);
}
.atg-comments .comment-author img { border-radius: 50%; }
.atg-comments .comment-meta { font-size: var(--atg-text-sm); color: var(--atg-ink-faint); margin-bottom: var(--atg-s2); }

.atg-empty {
	padding: var(--atg-s7) var(--atg-s5);
	text-align: center;
	border: 1px dashed var(--atg-line-strong);
	border-radius: var(--atg-radius);
	color: var(--atg-ink-muted);
	background: var(--atg-surface);
}

.atg-chips { display: flex; flex-wrap: wrap; gap: var(--atg-s2); list-style: none; margin: 0; padding: 0; }
.atg-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4rem 1rem;
	border: 1px solid var(--atg-line-strong);
	border-radius: var(--atg-radius-pill);
	background: var(--atg-surface);
	font-size: var(--atg-text-sm);
	font-weight: 500;
	color: var(--atg-ink);
	text-decoration: none;
	white-space: nowrap;
}
.atg-chips a:hover, .atg-chips .is-active a {
	background: var(--atg-accent);
	border-color: var(--atg-accent);
	color: #fff;
}

/* Back to top */
.atg-totop {
	position: fixed;
	right: var(--atg-gutter);
	bottom: calc(54px + var(--atg-s4) + env(safe-area-inset-bottom, 0px));
	z-index: 50;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 1px solid var(--atg-line);
	border-radius: 50%;
	background: var(--atg-surface);
	color: var(--atg-ink);
	cursor: pointer;
	box-shadow: var(--atg-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s var(--atg-ease), transform 0.25s var(--atg-ease), visibility 0.25s;
}
.atg-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 900px) { .atg-totop { bottom: calc(var(--atg-s6)); } }

/* Reveal-on-scroll — no-op without JS, so content is never hidden */
.atg-reveal { opacity: 1; }
.js .atg-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--atg-ease), transform 0.6s var(--atg-ease); }
.js .atg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .atg-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Landing pages (paid traffic — single column, form-forward)
   -------------------------------------------------------------------------- */

.atg-lp { --atg-header-h: 0px; }

.atg-lp__bar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--atg-surface);
	border-bottom: 1px solid var(--atg-line);
}
.atg-lp__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--atg-s3);
	min-height: 60px;
}
.atg-lp__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 700;
	font-size: var(--atg-text-base);
	color: var(--atg-accent);
	text-decoration: none;
	white-space: nowrap;
}
.atg-lp__phone svg { width: 1.05em; height: 1.05em; }

.atg-lp__hero {
	position: relative;
	padding-block: clamp(2rem, 6vw, 4rem);
	background: var(--atg-accent-deep);
	color: #fff;
	isolation: isolate;
	overflow: hidden;
}
.atg-lp__hero-bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
}
.atg-lp__hero::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(var(--atg-accent-deep-rgb), 0.72), rgba(var(--atg-accent-deep-rgb), 0.92));
}
@media (min-width: 900px) {
	.atg-lp__hero::after {
		background: linear-gradient(90deg, rgba(var(--atg-accent-deep-rgb), 0.92) 45%, rgba(var(--atg-accent-deep-rgb), 0.6) 100%);
	}
}

.atg-lp__hero-grid { display: grid; gap: var(--atg-s6); align-items: start; }
@media (min-width: 900px) {
	.atg-lp__hero-grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--atg-s7); }
}

.atg-lp__title { color: #fff; font-size: var(--atg-h1); }
.atg-lp__usp { list-style: none; margin: var(--atg-s5) 0 0; padding: 0; display: grid; gap: var(--atg-s2); }
@media (min-width: 600px) { .atg-lp__usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.atg-lp__usp li {
	display: flex; align-items: flex-start; gap: 0.6rem;
	font-size: var(--atg-text-base);
	color: rgba(255,255,255,0.9);
}
.atg-lp__usp svg { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.3em; color: var(--atg-gold); }

.atg-lp__formcard {
	background: var(--atg-surface);
	border-radius: var(--atg-radius-lg);
	padding: var(--atg-s5);
	box-shadow: var(--atg-shadow-lg);
	color: var(--atg-ink);
}
.atg-lp__formcard h2 {
	font-size: var(--atg-h4);
	text-align: center;
	margin-bottom: var(--atg-s2);
}
.atg-lp__formcard > p { text-align: center; font-size: var(--atg-text-sm); color: var(--atg-ink-muted); margin-bottom: var(--atg-s4); }

/* Landing package card — price-forward */
.atg-lp-card { display: flex; flex-direction: column; height: 100%;
	background: var(--atg-surface); border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius); overflow: hidden; }
.atg-lp-card__media { aspect-ratio: 16 / 10; }
.atg-lp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.atg-lp-card__body { padding: var(--atg-s4); display: flex; flex-direction: column; gap: var(--atg-s3); flex: 1; }
.atg-lp-card__price {
	display: flex; align-items: baseline; gap: 0.4rem;
	padding: var(--atg-s3) 0;
	border-block: 1px solid var(--atg-line);
}
.atg-lp-card__price b {
	font-family: var(--atg-font-body);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--atg-highlight);
}
.atg-lp-card__incl { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.atg-lp-card__incl li {
	font-size: var(--atg-text-xs);
	padding: 0.25rem 0.6rem;
	border-radius: var(--atg-radius-pill);
	background: var(--atg-surface-sunk);
	color: var(--atg-ink-muted);
}
.atg-lp-card__actions { display: grid; grid-template-columns: auto auto 1fr; gap: var(--atg-s2); margin-top: auto; }
.atg-lp-card__icon-btn {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 1px solid var(--atg-line-strong);
	border-radius: var(--atg-radius-sm);
	background: var(--atg-surface);
	color: var(--atg-ink);
	text-decoration: none;
}
.atg-lp-card__icon-btn:hover { border-color: var(--atg-accent); color: var(--atg-accent); }
.atg-lp-card__icon-btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   20. Homepage section layouts
   Each destination row gets its own shape so the page has rhythm instead of
   six identical carousels. They share the same card DNA, type scale and
   spacing, so the variety reads as one system.
   -------------------------------------------------------------------------- */

/* ---- 20.1 Mosaic — the uneven grid ---- */

.atg-mosaic {
	display: grid;
	gap: var(--atg-s3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(9.5rem, auto);
}

/* The lead tile is double-wide on phones too, so the grid never looks like a
   plain two-column list. */
.atg-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }

/* With the lead tile taking two columns, an eighth tile would otherwise sit
   alone on the last row. Let it run full width instead. */
.atg-mosaic > :nth-child(8) { grid-column: span 2; }

@media (min-width: 700px) {
	.atg-mosaic {
		gap: var(--atg-s4);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(11rem, auto);
	}
	/* Four columns: 1 (2×2) + 2,3 + 4,5 + 6 (wide) + 7,8 fills exactly. */
	.atg-mosaic > :nth-child(6) { grid-column: span 2; }
	.atg-mosaic > :nth-child(8) { grid-column: auto; }
}

@media (min-width: 1100px) {
	.atg-mosaic { grid-auto-rows: minmax(13rem, auto); }
}

/* Inside the mosaic the tile fills its cell instead of forcing an aspect box. */
.atg-mosaic .atg-tile { aspect-ratio: auto; height: 100%; min-height: 100%; }
.atg-mosaic > :first-child .atg-tile__name { font-size: var(--atg-h3); }

/* ---- 20.2 Promo band ---- */

.atg-promo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--atg-accent-deep);
	color: #fff;
	padding-block: clamp(3rem, 8vw, 5.5rem);
}
.atg-promo__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
}
.atg-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(var(--atg-accent-deep-rgb), 0.86), rgba(var(--atg-accent-deep-rgb), 0.94));
}
@media (min-width: 900px) {
	.atg-promo::after {
		background: linear-gradient(90deg, rgba(var(--atg-accent-deep-rgb), 0.94) 40%, rgba(var(--atg-accent-deep-rgb), 0.62) 100%);
	}
}

.atg-promo__inner { max-width: 40rem; }
.atg-promo .atg-eyebrow { color: var(--atg-gold); }
.atg-promo__title { color: #fff; font-size: var(--atg-h1); margin-bottom: var(--atg-s4); }
.atg-promo__text { color: rgba(255, 255, 255, 0.85); font-size: var(--atg-text-lg); line-height: 1.5; }
.atg-promo__actions { margin-top: var(--atg-s5); }
/* The default accent button vanishes against the deep-green band; go light. */
.atg-promo__actions .atg-btn:not(.atg-btn--outline) { background: var(--atg-action); color: var(--atg-action-ink); }
.atg-promo__actions .atg-btn:not(.atg-btn--outline):hover { background: var(--atg-action-deep); color: var(--atg-action-ink); }
.atg-promo__wa { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.atg-promo__wa:hover { background: #fff; border-color: #fff; color: var(--atg-accent-deep); }
.atg-promo__note {
	margin-top: var(--atg-s4);
	font-size: var(--atg-text-sm);
	color: rgba(255, 255, 255, 0.62);
}

/* ---- 20.3 Slider ---- */

.atg-slider { position: relative; }

/*
 * Slides have a FIXED width at every breakpoint. Never use minmax(0, …) here:
 * a zero minimum lets the grid shrink every slide until all of them fit, which
 * turns the slider into a row of unreadably narrow cards.
 *
 * The track bleeds past the container to the right edge of the viewport, so the
 * next card always peeks in — the cue that there is more to swipe.
 * `calc(50% - 50vw)` is exactly the distance from the container edge to the
 * viewport edge, because the container is centred.
 */
.atg-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 80%;
	gap: var(--atg-s4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	margin-left: calc(var(--atg-gutter) * -1);
	margin-right: calc(50% - 50vw);
	padding-inline: var(--atg-gutter);
	scroll-padding-inline: var(--atg-gutter);
	padding-block: var(--atg-s1) var(--atg-s3); /* room for the hover lift + shadow */
	scrollbar-width: none;
}
.atg-slider__track::-webkit-scrollbar { display: none; }
.atg-slider__track > * { scroll-snap-align: start; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
	.atg-slider__track { scroll-behavior: auto; }
}

@media (min-width: 600px) { .atg-slider__track { grid-auto-columns: 46%; } }
@media (min-width: 900px) { .atg-slider__track { grid-auto-columns: 31%; gap: var(--atg-s5); } }

@media (min-width: 1100px) {
	.atg-slider__track {
		/* Left edge aligns with the section heading; right edge bleeds. */
		margin-left: 0;
		padding-left: 0;
		scroll-padding-left: 0;
		grid-auto-columns: clamp(16.5rem, 22vw, 19.5rem);
	}
}

/* The bleed reaches 100vw, which includes the scrollbar gutter — clip it so the
   page itself never scrolls sideways. */
[data-atg-slider] { overflow-x: clip; }

/* Arrows: hidden on touch-first widths where swiping is the obvious gesture */
.atg-slider__nav { display: none; gap: var(--atg-s2); }

@media (min-width: 900px) {
	.atg-slider__nav { display: flex; }
}

.atg-slider__btn {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border: 1px solid var(--atg-line-strong);
	border-radius: 50%;
	background: var(--atg-surface);
	color: var(--atg-ink);
	cursor: pointer;
	transition: background 0.2s var(--atg-ease), color 0.2s var(--atg-ease),
	            border-color 0.2s var(--atg-ease), opacity 0.2s var(--atg-ease);
}
.atg-slider__btn:hover:not(:disabled) {
	background: var(--atg-accent);
	border-color: var(--atg-accent);
	color: #fff;
}
.atg-slider__btn:disabled { opacity: 0.32; cursor: default; }
.atg-slider__btn--prev svg { transform: rotate(180deg); }

/* Nothing to scroll: hide the controls rather than show dead ones */
[data-atg-slider].is-static .atg-slider__nav { display: none; }

/* ---- 20.4 Card CTA ---- */

.atg-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	flex: none;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--atg-line-strong);
	border-radius: var(--atg-radius-pill);
	font-size: var(--atg-text-sm);
	font-weight: 600;
	color: var(--atg-ink);
	white-space: nowrap;
	transition: background 0.2s var(--atg-ease), border-color 0.2s var(--atg-ease), color 0.2s var(--atg-ease);
}
.atg-card__cta svg { transition: transform 0.2s var(--atg-ease); }
.atg-card:hover .atg-card__cta {
	background: var(--atg-action);
	border-color: var(--atg-action);
	color: var(--atg-action-ink);
}
.atg-card:hover .atg-card__cta svg { transform: translateX(2px); }

/* The price strip on a tour page has room for a bigger number than a card does. */
.atg-panel .atg-price__value { font-size: 1.25rem; }

/* ---- 20.5 Overlay card — image-led, title on the photo ---- */

.atg-ocard {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--atg-radius-lg);
	overflow: hidden;
	background: var(--atg-accent-deep);
	isolation: isolate;
	color: #fff;
	transition: transform 0.3s var(--atg-ease), box-shadow 0.3s var(--atg-ease);
}
/* A modest shadow: the slider track is a scroll container and clips anything large. */
.atg-ocard:hover { transform: translateY(-3px); box-shadow: var(--atg-shadow); }

.atg-ocard__img,
.atg-ocard img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--atg-ease);
}
.atg-ocard:hover img { transform: scale(1.05); }

/* Gradient only where the text sits, so the photo stays bright above it. */
.atg-ocard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(10, 20, 30, 0) 38%,
		rgba(10, 20, 30, 0.45) 62%,
		rgba(10, 20, 30, 0.82) 100%);
}

.atg-ocard__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--atg-s5) var(--atg-s4) var(--atg-s5);
	text-align: center;
}

.atg-ocard__title {
	margin: 0;
	font-family: var(--atg-font-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	overflow-wrap: normal;
	text-wrap: balance;
}
.atg-ocard__title a { color: inherit; text-decoration: none; }
.atg-ocard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.atg-ocard__meta {
	margin: var(--atg-s2) 0 0;
	font-size: var(--atg-text-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

.atg-ocard:focus-within { outline: 2px solid var(--atg-accent); outline-offset: 3px; }

/* ---- 20.6 Spotlight — one flagship package beside a ranked list ---- */

.atg-spotlight {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 900px) {
	.atg-spotlight {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: stretch;
	}
	.atg-queue { height: 100%; }
	/*
	 * Spread the rows down the full height of the spotlight card, but only
	 * when there are enough of them to spread. With two or three rows the
	 * gaps would be larger than the rows; those stay stacked at the top.
	 */
	.atg-queue:has(> :nth-child(4)) { align-content: space-between; }
}

.atg-spot {
	position: relative;
	display: grid;
	gap: var(--atg-s5);
	border-radius: var(--atg-radius-lg);
	overflow: hidden;
	background: var(--atg-surface);
	border: 1px solid var(--atg-line);
	box-shadow: var(--atg-shadow);
}

.atg-spot__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--atg-surface-sunk);
}
.atg-spot__media .atg-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--atg-ease);
}
.atg-spot:hover .atg-spot__media .atg-card__img { transform: scale(1.03); }

.atg-spot__body {
	padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
	display: grid;
	justify-items: start;
	gap: var(--atg-s3);
}

.atg-spot__rank {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: var(--atg-radius-pill);
	background: var(--atg-highlight-soft);
	color: var(--atg-highlight);
	font-size: var(--atg-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.atg-spot__title { margin: 0; font-size: var(--atg-h3); }
.atg-spot__title a { color: inherit; text-decoration: none; }
.atg-spot__title a:hover { color: var(--atg-accent); }

.atg-spot__text {
	margin: 0;
	color: var(--atg-ink-muted);
	font-size: var(--atg-text-base);
	line-height: 1.6;
}

.atg-spot__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--atg-s3) var(--atg-s5);
	width: 100%;
	padding-block: var(--atg-s3);
	border-block: 1px solid var(--atg-line);
}
.atg-spot__days {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--atg-text-sm);
	font-weight: 600;
	color: var(--atg-ink-muted);
}
.atg-spot__days svg { flex: none; color: var(--atg-accent); }

/* The ranked list. Starts at 02 — the spotlight card is number one. */
.atg-queue {
	list-style: none;
	counter-reset: atg-queue 1;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--atg-s3);
}
.atg-queue__item { counter-increment: atg-queue; }

.atg-queue__link {
	display: flex;
	align-items: center;
	gap: var(--atg-s4);
	padding: var(--atg-s4);
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius);
	background: var(--atg-surface);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s var(--atg-ease), transform 0.2s var(--atg-ease), box-shadow 0.2s var(--atg-ease);
}
.atg-queue__link::before {
	content: counter(atg-queue, decimal-leading-zero);
	flex: none;
	font-family: var(--atg-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--atg-line-strong);
	transition: color 0.2s var(--atg-ease);
}
.atg-queue__link:hover {
	border-color: var(--atg-accent);
	transform: translateX(3px);
	box-shadow: var(--atg-shadow);
}
.atg-queue__link:hover::before { color: var(--atg-highlight); }

.atg-queue__text { flex: 1 1 auto; min-width: 0; }
.atg-queue__text strong {
	display: block;
	font-size: var(--atg-text-base);
	font-weight: 600;
	line-height: 1.35;
	/* Two lines maximum, so every row in the list is the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.atg-queue__text small {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--atg-text-sm);
	color: var(--atg-ink-faint);
}
.atg-queue__go { flex: none; color: var(--atg-ink-faint); transition: transform 0.2s var(--atg-ease); }
.atg-queue__link:hover .atg-queue__go { transform: translateX(3px); color: var(--atg-accent); }

/* ---- 20.7 Stagger — even grid, middle column dropped ---- */

.atg-stagger {
	display: grid;
	gap: var(--atg-s5);
	grid-template-columns: minmax(0, 1fr);
	/*
	 * Cards size to their own content instead of stretching to the tallest in
	 * the row. Stretching plus the offset below left a dead band inside every
	 * card, because the footer is pinned to the bottom.
	 */
	align-items: start;
}
@media (min-width: 700px) {
	.atg-stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.atg-stagger { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--atg-s5); }
	/*
	 * Decoration only, and only once three columns exist — at two columns the
	 * offset would put the second card level with nothing.
	 */
	.atg-stagger > :nth-child(3n + 2) { margin-top: clamp(1.5rem, 4vw, 3rem); }
}

/* ---- 20.8 Index — numbered full-width rows ---- */

.atg-index {
	list-style: none;
	counter-reset: atg-index;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--atg-s3);
}
.atg-index__item { counter-increment: atg-index; }

.atg-index__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	/* Phones stack title and price under the thumbnail, so the number reads
	   better level with the top of the photo than floating beside its middle. */
	align-items: start;
	gap: var(--atg-s3) var(--atg-s4);
	padding: var(--atg-s3);
	border: 1px solid var(--atg-line);
	border-radius: var(--atg-radius);
	background: var(--atg-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s var(--atg-ease), box-shadow 0.2s var(--atg-ease);
}
.atg-index__link:hover {
	border-color: var(--atg-accent);
	box-shadow: var(--atg-shadow);
}

.atg-index__n {
	font-family: var(--atg-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--atg-line-strong);
	transition: color 0.2s var(--atg-ease);
}
.atg-index__link:hover .atg-index__n { color: var(--atg-highlight); }

.atg-index__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--atg-radius-sm);
	overflow: hidden;
	background: var(--atg-surface-sunk);
}
.atg-index__media .atg-card__img { width: 100%; height: 100%; object-fit: cover; }

/* Phones: number and thumbnail share the top line, text below spans both. */
.atg-index__main { grid-column: 1 / -1; min-width: 0; }

.atg-index__title {
	display: block;
	font-size: var(--atg-text-md);
	font-weight: 600;
	line-height: 1.35;
}
.atg-index__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.3rem;
	font-size: var(--atg-text-sm);
	color: var(--atg-ink-faint);
}
.atg-index__meta svg { flex: none; color: var(--atg-accent); }

.atg-index__price { grid-column: 1 / -1; line-height: 1.25; }
.atg-index__from {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--atg-ink-faint);
}
.atg-index__price strong {
	font-size: var(--atg-text-md);
	font-weight: 700;
	color: var(--atg-highlight);
	white-space: nowrap;
}
.atg-index__price small { font-size: var(--atg-text-sm); color: var(--atg-ink-faint); }

.atg-index__go {
	display: none;
	flex: none;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--atg-line-strong);
	place-items: center;
	color: var(--atg-ink);
	transition: background 0.2s var(--atg-ease), border-color 0.2s var(--atg-ease), color 0.2s var(--atg-ease);
}
.atg-index__link:hover .atg-index__go {
	background: var(--atg-action);
	border-color: var(--atg-action);
	color: var(--atg-action-ink);
}

@media (min-width: 700px) {
	.atg-index__link {
		grid-template-columns: auto 9rem minmax(0, 1fr) auto auto;
		align-items: center;
		gap: var(--atg-s5);
		padding: var(--atg-s3) var(--atg-s5) var(--atg-s3) var(--atg-s4);
	}
	.atg-index__media { width: 9rem; }
	.atg-index__main,
	.atg-index__price { grid-column: auto; }
	.atg-index__price { text-align: right; }
	.atg-index__go { display: grid; }
}

@media (min-width: 1100px) {
	.atg-index__link { grid-template-columns: auto 11rem minmax(0, 1fr) auto auto; }
	.atg-index__media { width: 11rem; }
	.atg-index__n { font-size: 1.1875rem; }
}

/* ---- 20.9 Showcase — one tall card, four beside it ---- */

.atg-showcase {
	display: grid;
	gap: var(--atg-s5);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
	.atg-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.atg-showcase {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr);
	}
	.atg-showcase > .atg-card--lead { grid-column: span 2; grid-row: span 2; }
	/* The lead card's photograph absorbs the extra height, not its text block. */
	.atg-showcase > .atg-card--lead .atg-card__media {
		aspect-ratio: auto;
		flex: 1 1 auto;
		min-height: 18rem;
	}
	.atg-showcase > .atg-card--lead .atg-card__title { font-size: var(--atg-h4); }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */

@media print {
	.atg-header, .atg-drawer, .atg-overlay, .atg-actionbar, .atg-totop,
	.atg-modal, .atg-footer, .atg-quote-card, .atg-split__aside { display: none !important; }
	body { background: #fff; font-size: 11pt; }
	.atg-page-head { min-height: 0; background: none; color: #000; padding-block: 0 1rem; }
	.atg-page-head::after, .atg-page-head__bg { display: none; }
	.atg-page-head__title { color: #000; }
	.atg-split { display: block; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}