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

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

:root {
	/* Warm neutral base */
	--atg-paper:        #fbf9f6;
	--atg-surface:      #ffffff;
	--atg-surface-sunk: #f4f0ea;
	--atg-ink:          #1a1613;
	--atg-ink-muted:    #5d554d;
	--atg-ink-faint:    #8b8178;
	--atg-line:         #e6dfd5;
	--atg-line-strong:  #d4cabb;

	/* Single deep accent + sparing warm highlight */
	--atg-accent:       #14524a;
	--atg-accent-deep:  #0d3a34;
	--atg-accent-soft:  #e7efec;
	--atg-accent-ink:   #ffffff;
	--atg-highlight:    #b07d38;
	--atg-highlight-soft: #f6efe2;

	/* Feedback */
	--atg-danger:       #9c3327;
	--atg-success:      #2f6b46;

	/* Type */
	--atg-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--atg-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--atg-text-xs:  0.75rem;
	--atg-text-sm:  0.8125rem;
	--atg-text-base: 1rem;
	--atg-text-md:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--atg-text-lg:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--atg-h4:       clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--atg-h3:       clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--atg-h2:       clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--atg-h1:       clamp(2rem, 1.5rem + 2.6vw, 3.75rem);
	--atg-display:  clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);

	/* 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: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	font-optical-sizing: auto;
	text-wrap: balance;
}

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 {
	font-style: italic;
	color: var(--atg-accent);
}
.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-accent);
	color: var(--atg-accent-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-accent-deep); color: var(--atg-accent-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); }

.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.25rem;
	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(26, 22, 19, 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
   -------------------------------------------------------------------------- */

.atg-hero {
	position: relative;
	padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 7vw, 5.5rem);
	overflow: hidden;
}

.atg-hero__grid { display: grid; gap: clamp(2rem, 6vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
	.atg-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
	/* No hero image configured: let the copy use the full measure. */
	.atg-hero__grid--solo { grid-template-columns: minmax(0, 46rem); }
}

.atg-hero__title {
	font-size: var(--atg-display);
	margin-bottom: var(--atg-s4);
}
.atg-hero__title em { font-style: italic; color: var(--atg-accent); }
.atg-hero__body { margin-bottom: var(--atg-s5); }

/*
 * Hero visual: a main photo, a smaller photo overlapping its lower-left corner,
 * and a stat chip on the upper right. On phones the inset shrinks and tucks
 * inside the frame so nothing hangs off the screen edge.
 */
.atg-hero__visual {
	position: relative;
	padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

.atg-hero__media {
	position: relative;
	border-radius: var(--atg-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--atg-surface-sunk);
	box-shadow: var(--atg-shadow-lg);
}
@media (min-width: 900px) {
	.atg-hero__visual { padding: 0 0 3rem 3rem; }
	.atg-hero__media { aspect-ratio: 4 / 5; }
}
.atg-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.atg-hero__inset {
	position: absolute;
	right: 1rem;
	bottom: 0;
	width: 42%;
	aspect-ratio: 4 / 3;
	border-radius: var(--atg-radius);
	overflow: hidden;
	border: 5px solid var(--atg-paper);
	box-shadow: var(--atg-shadow-lg);
	background: var(--atg-surface-sunk);
}
.atg-hero__inset img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
	.atg-hero__inset { right: auto; left: 0; width: 46%; border-width: 6px; }
}

.atg-hero__chip {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: 15rem;
	padding: 0.6rem 0.9rem 0.6rem 0.6rem;
	border-radius: var(--atg-radius);
	background: color-mix(in srgb, var(--atg-surface) 94%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--atg-shadow);
	font-size: var(--atg-text-sm);
	line-height: 1.3;
	color: var(--atg-ink-muted);
}
.atg-hero__chip strong { display: block; font-size: var(--atg-text-base); color: var(--atg-ink); }
.atg-hero__chip-icon {
	flex: none;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--atg-accent-soft);
	color: var(--atg-accent);
}

@media (min-width: 900px) {
	.atg-hero__chip { top: 2rem; left: auto; right: -1rem; }
}

/* Trust strip under the hero */
.atg-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--atg-s4);
	margin-top: var(--atg-s6);
	padding-top: var(--atg-s5);
	border-top: 1px solid var(--atg-line);
}
@media (min-width: 700px) { .atg-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--atg-s5); } }
.atg-trust__n {
	display: block;
	font-family: var(--atg-font-display);
	/* Sized so "10,000+" fits a quarter of the hero column; never wraps. */
	font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem);
	white-space: nowrap;
	line-height: 1;
	color: var(--atg-accent);
	margin-bottom: 0.25rem;
}
/* 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: var(--atg-ink-muted); line-height: 1.35; }

/* --------------------------------------------------------------------------
   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(13, 58, 52, 0.30) 0%,
		rgba(13, 58, 52, 0.55) 45%,
		rgba(13, 58, 52, 0.88) 100%);
}
.atg-page-head__title { color: #fff; margin-bottom: 0; }
.atg-page-head .atg-eyebrow { color: #e9d8b6; }
/* 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: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
	margin: 0;
	min-height: calc(1.0625rem * 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: 1.125rem; min-height: calc(1.125rem * 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-ink);
	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(13,58,52,0) 35%, rgba(13,58,52,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: #f3efe9;
	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-accent);
	color: #fff;
	font-size: var(--atg-text-base);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s var(--atg-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--atg-accent-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: #eef5f0; color: var(--atg-success); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--atg-danger) !important; background: #fbeeec; 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-highlight); color: #fff; }
.atg-quote-card .atg-btn:hover { background: #9a6c2f; }

/* 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(13, 58, 52, 0.55) 0%, rgba(13, 58, 52, 0.25) 75%),
		linear-gradient(180deg, rgba(13, 58, 52, 0.2), rgba(13, 58, 52, 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: #fff; color: var(--atg-accent-deep); }
.atg-quote-card--image .atg-btn--light:hover { background: var(--atg-highlight-soft); }

.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(26, 22, 19, 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(13, 58, 52, 0.15) 0%, rgba(13, 58, 52, 0.55) 45%, rgba(13, 58, 52, 0.94) 100%);
}

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

.atg-modal__aside-title {
	font-family: var(--atg-font-display);
	font-size: 1.625rem;
	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: #e9d8b6;
}

.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: #e9d8b6; }
.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.5rem, 1.3rem + 0.8vw, 1.875rem); 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(26,22,19,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-ink);
	color: #cfc6bb;
	padding-top: var(--atg-section);
}
.atg-footer a { color: #cfc6bb; 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: #8f857a;
	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: #8f857a;
	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(13,58,52,0.72), rgba(13,58,52,0.92));
}
@media (min-width: 900px) {
	.atg-lp__hero::after {
		background: linear-gradient(90deg, rgba(13,58,52,0.92) 45%, rgba(13,58,52,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: #e9d8b6; }

.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-display);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--atg-accent);
}
.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(13, 58, 52, 0.86), rgba(13, 58, 52, 0.94));
}
@media (min-width: 900px) {
	.atg-promo::after {
		background: linear-gradient(90deg, rgba(13, 58, 52, 0.94) 40%, rgba(13, 58, 52, 0.62) 100%);
	}
}

.atg-promo__inner { max-width: 40rem; }
.atg-promo .atg-eyebrow { color: #e9d8b6; }
.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: #fff; color: var(--atg-accent-deep); }
.atg-promo__actions .atg-btn:not(.atg-btn--outline):hover { background: var(--atg-highlight-soft); color: var(--atg-accent-deep); }
.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-accent);
	border-color: var(--atg-accent);
	color: #fff;
}
.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.375rem; }

/* ---- 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(1.0625rem, 1rem + 0.35vw, 1.25rem);
	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; }

/* --------------------------------------------------------------------------
   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; }
}