/*
 * Theme Name:  Atria Travel Theme
 * Description: Lightweight, RTL-ready travel theme for the Atria Travel Framework.
 *              Presentation only — no booking or pricing logic lives here.
 * Version:     1.0.0
 * Author:      Atria Travel
 * Text Domain: atria-travel
 * Tags:        travel, rtl-language-support, custom-menu, featured-images
 *
 * --------------------------------------------------------------------------
 * TABLE OF CONTENTS
 * 1. Design tokens (CSS custom properties)
 * 2. Reset & base
 * 3. Typography
 * 4. Layout utilities
 * 5. Skip link
 * 6. Header & navigation
 * 7. Hero section
 * 8. Card grid
 * 9. Tour card
 * 10. Single tour
 * 11. Pagination
 * 12. Footer
 * 13. RTL overrides
 * 14. Responsive (tablet 768 px +, desktop 1024 px +)
 * 15. Price estimator widget
 * 16. Enquiry form
 * --------------------------------------------------------------------------
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

/*
 * Two-layer token architecture:
 *
 * LAYER 1 — --atria-* (canonical / source of truth)
 *   Direct mirror of tokens/atria-tokens.css from the design export.
 *   Change a value here and it propagates automatically.
 *
 * LAYER 2 — --color-*, --font-*, --text-*, --space-* (bridge aliases)
 *   Existing template names, all resolved through Layer 1.
 *   Templates never need to be touched when a brand token changes.
 */

:root {

	/* ======================================================================
	   LAYER 1 — Atria design tokens (canonical)
	   ====================================================================== */

	/* ── Color: surfaces ──────────────────────────────────────────────── */
	--atria-cream:         #F5EFE6;   /* page base */
	--atria-cream-soft:    #FBF9F5;   /* inputs / subtle surface */
	--atria-sand-band:     #EFE7D9;   /* alternating section band */
	--atria-surface:       #FFFFFF;   /* cards */

	/* ── Color: brand / action ────────────────────────────────────────── */
	--atria-sand:          #C9A86A;   /* tan, button hover, accents */
	--atria-gold:          #B8915A;   /* primary action / highlight */
	--atria-gold-deep:     #8A6A38;   /* gold text & links on light */
	--atria-gold-light:    #D8B97E;   /* eyebrow / accent on dark */

	/* ── Color: ink (dark sections) ───────────────────────────────────── */
	--atria-ink:           #1A1715;   /* near-black */
	--atria-ink-deep:      #0E0C0B;   /* deepest dark */
	--atria-ink-contrast:  #F7F1E7;   /* text on dark */

	/* ── Color: text on light ─────────────────────────────────────────── */
	--atria-text-body:     #4A423A;   /* primary body text */
	--atria-text:          #5A5048;   /* slightly lighter */
	--atria-text-muted:    #7A6F62;
	--atria-text-faint:    #9A8A72;
	--atria-nav-text:      #3A332D;   /* header/mobile nav link text — not part of the curated palette set */

	/* ── Color: utility ───────────────────────────────────────────────── */
	--atria-hairline:      rgba(26, 23, 21, 0.10);   /* border on light */
	--atria-hairline-dark: rgba(237, 229, 214, 0.12); /* border on dark */
	--atria-scrim:         rgba(15, 12, 10, 0.72);   /* hero overlay */
	--atria-whatsapp:      #1F8A4C;
	--atria-whatsapp-hover:#1B7A43;

	/* ── Typography: families ─────────────────────────────────────────── */
	--atria-font-display:  "Cormorant Garamond", Georgia, serif;
	--atria-font-body:     "Jost", system-ui, -apple-system, sans-serif;

	/* ── Typography: weights ──────────────────────────────────────────── */
	--atria-fw-light:    300;
	--atria-fw-regular:  400;
	--atria-fw-medium:   500;
	--atria-fw-semibold: 600;

	/* ── Typography: fluid size scale ─────────────────────────────────── */
	--atria-fs-eyebrow: 12px;
	--atria-fs-small:   14px;
	--atria-fs-body:    16.5px;
	--atria-fs-lead:    clamp(15px, 1.4vw, 18px);
	--atria-fs-h3:      clamp(20px, 2.2vw, 25px);
	--atria-fs-h2:      clamp(32px, 4.2vw, 52px);
	--atria-fs-h1:      clamp(42px, 6.4vw, 88px);

	/* ── Typography: line-height & tracking ───────────────────────────── */
	--atria-lh-tight:    1.08;
	--atria-lh-body:     1.75;
	--atria-ls-eyebrow:  0.26em;   /* uppercase eyebrows */
	--atria-ls-nav:      0.16em;   /* nav links + buttons */
	--atria-ls-wordmark: 0.16em;

	/* ── Layout ───────────────────────────────────────────────────────── */
	--atria-container:    1320px;
	--atria-content:      760px;                    /* readable prose width */
	--atria-gutter:       clamp(20px, 5vw, 72px);
	--atria-section-y:    clamp(64px, 8vw, 108px);  /* large section padding */
	--atria-section-y-sm: clamp(48px, 6vw, 84px);   /* medium section padding */

	/* ── Radius & shadow ──────────────────────────────────────────────── */
	--atria-radius-button: 2px;
	--atria-radius-pill:   999px;
	--atria-shadow-card:   0 18px 40px rgba(26, 23, 21, 0.14);

	/* ── Motion ───────────────────────────────────────────────────────── */
	--atria-ease: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	/* ======================================================================
	   LAYER 2 — Bridge aliases (template-facing names → canonical tokens)
	   Templates reference these; they never need updating when a token changes.
	   ====================================================================== */

	/* Colors */
	--color-bg:             var(--atria-cream);
	--color-bg-soft:        var(--atria-cream-soft);
	--color-bg-band:        var(--atria-sand-band);
	--color-surface:        var(--atria-surface);
	--color-sand:           var(--atria-sand);
	--color-gold:           var(--atria-gold);
	--color-gold-deep:      var(--atria-gold-deep);
	--color-gold-light:     var(--atria-gold-light);
	--color-ink:            var(--atria-ink);
	--color-ink-deep:       var(--atria-ink-deep);
	--color-text-on-dark:   var(--atria-ink-contrast);
	--color-text:           var(--atria-text-body);
	--color-text-base:      var(--atria-text);
	--color-text-muted:     var(--atria-text-muted);
	--color-text-faint:     var(--atria-text-faint);
	--color-nav-text:       var(--atria-nav-text);
	--color-border:         var(--atria-hairline);
	--color-border-dark:    var(--atria-hairline-dark);
	--color-scrim:          var(--atria-scrim);
	--color-whatsapp:       var(--atria-whatsapp);
	--color-whatsapp-hover: var(--atria-whatsapp-hover);

	/* Typography */
	--font-heading: var(--atria-font-display);
	--font-body:    var(--atria-font-body);
	--font-ar:      "Cairo", "Noto Sans Arabic", var(--atria-font-body);

	/* Type scale */
	--text-eyebrow: var(--atria-fs-eyebrow);
	--text-sm:      var(--atria-fs-small);
	--text-body:    var(--atria-fs-body);
	--text-lead:    var(--atria-fs-lead);
	--text-h3:      var(--atria-fs-h3);
	--text-h2:      var(--atria-fs-h2);
	--text-h1:      var(--atria-fs-h1);

	/* Line heights */
	--leading-heading: var(--atria-lh-tight);
	--leading-body:    var(--atria-lh-body);

	/* Letter spacing */
	--tracking-eyebrow: var(--atria-ls-eyebrow);
	--tracking-nav:     var(--atria-ls-nav);

	/* Spacing (no direct --atria-* vars; values match spacing scale) */
	--space-xs:  12px;
	--space-s:   18px;
	--space-m:   24px;
	--space-l:   clamp(32px, 4vw, 52px);
	--space-xl:  var(--atria-section-y-sm);
	--space-2xl: var(--atria-section-y);

	/* Layout */
	--container-max:    var(--atria-container);
	--container-gutter: var(--atria-gutter);
	--prose-width:      var(--atria-content);

	/* Radius */
	--radius:      var(--atria-radius-button);
	--radius-pill: var(--atria-radius-pill);

	/* Shadow */
	--shadow-card: var(--atria-shadow-card);

	/* Transition */
	--transition: var(--atria-ease);

	/* ======================================================================
	   LAYER 3 — Theme-only extras (no design-system equivalent)
	   ====================================================================== */
	/* --color-include / --color-exclude are DELIBERATELY left undefined here.
	   The six single-product "included/excluded" sections each reference them
	   with an inline fallback matching THEIR OWN historical exact shade
	   (e.g. var(--color-exclude, var(--atria-ink-contrast))) — since the
	   fallback only applies when the property is truly unset, this preserves
	   every section's current look with zero shared default needed. A chosen
	   color palette prints an actual :root value (via Theme Settings →
	   Colors & Fonts), which then cascades into all six sections uniformly,
	   overriding every fallback in one place. Form validation's "required /
	   error" red is a different, fixed concept — see --color-danger below. */
	--color-danger: #B04040;   /* form validation — required marker / error text */
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 300;
	line-height: var(--leading-body);
	color: var(--color-text);
	background-color: var(--color-bg);
}

/* Arabic body — switch to Arabic font stack */
:lang(ar) body,
[lang="ar"] body {
	font-family: var(--font-ar);
	line-height: 1.9;
}

img, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-gold-deep);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--color-gold);
	text-decoration: underline;
}

ul, ol {
	padding-inline-start: var(--space-m);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: var(--leading-heading);
	color: var(--color-ink);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-lead); }

/* Eyebrow label — small uppercase gold label above a heading */
.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--color-gold);
	margin-block-end: var(--space-s);
}

p { margin-block-end: var(--space-m); }
p:last-child { margin-block-end: 0; }

/* ==========================================================================
   4. Layout utilities
   ========================================================================== */

.atria-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.atria-grid {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: 1fr;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	word-wrap: normal;
}

/* ==========================================================================
   5. Skip link
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -9999px;
	inset-inline-start: var(--space-m);
	background: var(--color-ink);
	color: var(--color-text-on-dark);
	padding: 10px var(--space-m);
	border-radius: var(--radius);
	font-weight: 600;
	z-index: 9999;
}

.skip-link:focus {
	top: var(--space-m);
}

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */

/* ── Site header ──────────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Mathematically identical to rgba(245,239,230,0.92) at the default
	   --atria-cream value — but now follows the active color palette. */
	background: color-mix(in srgb, var(--atria-cream) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--atria-hairline);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 18px;
}

/* ── Brand lockup ─────────────────────────────────────────────────────────── */

.site-header__brand {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	line-height: 0.92;
	text-decoration: none;
	color: var(--atria-ink);
}

.site-header__brand:hover {
	text-decoration: none;
}

.site-header__wordmark {
	font-family: var(--atria-font-display);
	font-weight: 600;
	font-size: 26px;
	letter-spacing: var(--atria-ls-wordmark);
}

.site-header__tagline {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.55em;
	color: var(--atria-text-faint);
	margin-inline-start: 3px;
}

.site-header__logo {
	display: block;
	max-height: 40px;
	max-width: 220px;
	width: auto;
	height: auto;
}

/* ── Desktop navigation links ─────────────────────────────────────────────── */

.primary-nav {
	display: none; /* mobile-first; shown at 860 px+ */
}

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 38px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.primary-nav a {
	text-decoration: none;
	color: var(--color-nav-text);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: var(--atria-ls-nav);
	text-transform: uppercase;
	transition: color var(--atria-ease);
}

.primary-nav a:hover,
.primary-nav a:focus,
.primary-nav .current-menu-item > a {
	color: var(--atria-gold);
	text-decoration: none;
}

/* ── Nav CTA button ───────────────────────────────────────────────────────── */

.btn--nav {
	display: none; /* mobile-first; shown at 860 px+ */
	align-items: center;
	text-decoration: none;
	border: 1px solid var(--atria-gold);
	color: var(--atria-gold-deep);
	padding: 11px 22px;
	font-family: var(--atria-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: var(--atria-ls-nav);
	text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--atria-ease), color var(--atria-ease);
}

.btn--nav:hover {
	background: var(--atria-gold);
	color: var(--atria-ink);
	text-decoration: none;
}

/* ── Hamburger toggle ─────────────────────────────────────────────────────── */

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--atria-ink);
	line-height: 1;
}

/* ── Mobile menu panel ────────────────────────────────────────────────────── */

.mobile-menu {
	display: none;
	flex-direction: column;
	padding: 8px var(--atria-gutter) 28px;
	border-top: 1px solid rgba(26, 23, 21, 0.08);
}

.mobile-menu.is-open {
	display: flex;
}

.mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.mobile-menu a {
	display: block;
	text-decoration: none;
	color: var(--color-nav-text);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: var(--atria-ls-nav);
	text-transform: uppercase;
	padding: 13px 0;
	border-bottom: 1px solid rgba(26, 23, 21, 0.07);
	transition: color var(--atria-ease);
}

.mobile-menu a:hover {
	color: var(--atria-gold);
	text-decoration: none;
}

.mobile-menu__cta {
	display: block;
	text-align: center;
	text-decoration: none;
	background: var(--atria-gold);
	color: var(--atria-ink);
	padding: 15px;
	font-family: var(--atria-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--atria-ls-nav);
	text-transform: uppercase;
	margin-block-start: 14px;
	transition: background var(--atria-ease);
}

.mobile-menu__cta:hover {
	background: var(--atria-sand);
	text-decoration: none;
}

/* ── Floating WhatsApp button ─────────────────────────────────────────────── */

.whatsapp-float {
	position: fixed;
	inset-inline-end: clamp(18px, 3vw, 32px);
	bottom: clamp(18px, 3vw, 32px);
	z-index: 80;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: var(--atria-whatsapp);
	color: #fff;
	padding: 14px 20px 14px 16px;
	border-radius: var(--atria-radius-pill);
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background var(--atria-ease);
}

.whatsapp-float:hover {
	background: var(--atria-whatsapp-hover);
	text-decoration: none;
}

.whatsapp-float__label {
	display: none; /* shown at 860 px+ */
}

/* ==========================================================================
   7. Hero section
   ========================================================================== */

.hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	background: var(--color-ink) no-repeat center center / cover;
	color: var(--color-text-on-dark);
	overflow: hidden;
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-scrim);
}

.hero__content {
	position: relative;
	z-index: 1;
	padding-block: var(--space-2xl);
	text-align: center;
}

.hero__title {
	font-size: var(--text-h1);
	color: var(--color-text-on-dark);
	margin-block-end: var(--space-m);
	line-height: var(--leading-heading);
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero__subtitle {
	font-size: var(--text-lead);
	color: rgba(247, 241, 231, 0.85);
	max-width: 640px;
	margin-inline: auto;
	margin-block-end: var(--space-l);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius);
	border: 1px solid transparent;
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition), transform var(--transition);
}

.btn:focus-visible {
	outline: 3px solid var(--color-gold-light);
	outline-offset: 3px;
}

/* Primary — solid gold */
.btn--primary {
	padding: 17px 34px;
	background: var(--color-gold);
	color: var(--color-ink);
	border-color: var(--color-gold);
}

.btn--primary:hover {
	background: var(--color-sand);
	border-color: var(--color-sand);
	color: var(--color-ink);
	text-decoration: none;
}

/* Outline — on light bg */
.btn--outline {
	padding: 16px 33px; /* 17px - 1px border = 16px optical */
	background: transparent;
	color: var(--color-gold-deep);
	border-color: var(--color-gold);
}

.btn--outline:hover {
	background: var(--color-gold);
	color: var(--color-ink);
	text-decoration: none;
}

/* Outline on dark — for hero / dark-bg usage */
.btn--outline-dark {
	padding: 16px 33px;
	background: transparent;
	color: var(--color-text-on-dark);
	border-color: rgba(247, 241, 231, 0.45);
}

.btn--outline-dark:hover {
	background: rgba(247, 241, 231, 0.10);
	color: var(--color-text-on-dark);
	border-color: rgba(247, 241, 231, 0.45);
	text-decoration: none;
}

/* WhatsApp pill */
.btn--whatsapp {
	padding: 14px 28px;
	background: var(--color-whatsapp);
	color: #fff;
	border-color: var(--color-whatsapp);
	border-radius: var(--radius-pill);
}

.btn--whatsapp:hover {
	background: var(--color-whatsapp-hover);
	border-color: var(--color-whatsapp-hover);
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   8. Card grid / sections
   ========================================================================== */

.section {
	padding-block: var(--space-xl);
}

.section--band {
	background: var(--color-bg-band);
}

.section__header {
	text-align: center;
	margin-block-end: var(--space-l);
}

.section__title {
	font-size: var(--text-h2);
	margin-block-end: var(--space-s);
}

.section__subtitle {
	font-size: var(--text-lead);
	color: var(--color-text-muted);
	max-width: 600px;
	margin-inline: auto;
}

/* ==========================================================================
   9. Tour card
   ========================================================================== */

.tour-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-border);
	transition: box-shadow var(--transition), transform var(--transition);
}

.tour-card:hover {
	box-shadow: 0 24px 56px rgba(26, 23, 21, 0.20);
	transform: translateY(-3px);
}

.tour-card__image {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--color-bg-band);
}

.tour-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--transition);
}

.tour-card:hover .tour-card__image img {
	transform: scale(1.05);
}

.tour-card__body {
	padding: var(--space-m);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-xs);
}

.tour-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 500;
	color: var(--color-ink);
}

.tour-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.tour-card__price {
	font-family: var(--font-body);
	font-size: var(--text-lead);
	font-weight: 600;
	color: var(--color-gold-deep);
	margin-block-start: auto;
	padding-block-start: var(--space-xs);
}

.tour-card__price span {
	font-size: var(--text-sm);
	font-weight: 300;
	color: var(--color-text-muted);
}

/* ==========================================================================
   10. Single tour
   ========================================================================== */

.single-tour {
	padding-block: var(--space-xl);
}

.single-tour__hero {
	aspect-ratio: 21/9;
	overflow: hidden;
	border-radius: var(--radius);
	margin-block-end: var(--space-l);
	background: var(--color-bg-band);
}

.single-tour__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-tour__layout {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: 1fr;
}

.single-tour__content h2 {
	margin-block: var(--space-l) var(--space-s);
}

.single-tour__sidebar {
	background: var(--color-bg-soft);
	border-radius: var(--radius);
	padding: var(--space-m);
	border: 1px solid var(--color-border);
	align-self: start;
}

/* ==========================================================================
   11. Itinerary accordion
   ========================================================================== */

/* Container — sits inside .single-tour__content */
.tour-accordion {
	margin-block-start: 0;
}

/* Dividers between days */
.tour-accordion__item {
	border-bottom: 1px solid var(--color-border);
}

.tour-accordion__item:first-child {
	border-top: 1px solid var(--color-border);
}

/* Strip h3 margin so the button controls all spacing */
.tour-accordion__heading {
	margin: 0;
}

/* Trigger button — styled as a heading, not a native button */
.tour-accordion__trigger {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--space-m);
	width:           100%;
	padding:         var(--space-m) 0;
	background:      none;
	border:          none;
	cursor:          pointer;
	text-align:      left;
	color:           var(--color-ink);
	font-family:     var(--font-heading);
	font-size:       var(--text-h3);
	font-weight:     500;
	line-height:     1.2;
}

/* FAQ questions reuse the itinerary accordion's trigger styling, but a
   question isn't a heading — bring it down to body-scale (the itinerary
   day-trigger above keeps --text-h3, unaffected by this more specific rule). */
.atria-faqs .tour-accordion__trigger {
	font-family: var(--font-body);
	font-size:   var(--text-lead);
	font-weight: 500;
}

.tour-accordion__trigger:hover {
	color: var(--color-gold);
}

.tour-accordion__trigger:focus-visible {
	outline:        2px solid var(--color-gold);
	outline-offset: 3px;
	border-radius:  var(--radius);
}

/* Chevron icon — rotates when the panel is open */
.tour-accordion__icon {
	flex-shrink: 0;
	color:       var(--color-gold);
	transition:  transform var(--transition);
	line-height: 0; /* remove extra height from inline-SVG */
}

.tour-accordion__trigger[aria-expanded="true"] .tour-accordion__icon {
	transform: rotate(180deg);
}

/* Panel content area */
.tour-accordion__panel {
	padding-block-end: var(--space-l);
}

/* Day image */
.tour-day__figure {
	margin: 0 0 var(--space-m);
}

.tour-day__figure img {
	width:         100%;
	max-height:    360px;
	object-fit:    cover;
	border-radius: var(--radius);
	display:       block;
}

/* ==========================================================================
   13. Pagination
   ========================================================================== */

.atria-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding-block: var(--space-l);
}

.atria-pagination a,
.atria-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-xs);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 500;
	border: 1px solid var(--color-border);
	transition: background var(--transition), color var(--transition);
}

.atria-pagination a {
	background: var(--color-surface);
	color: var(--color-text-base);
}

.atria-pagination a:hover {
	background: var(--color-ink);
	color: var(--color-text-on-dark);
	text-decoration: none;
}

.atria-pagination span.current {
	background: var(--color-gold);
	color: var(--color-ink);
	border-color: var(--color-gold);
	font-weight: 600;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	background: var(--atria-ink);
	color: #EDE5D6;
}

.site-footer__body {
	padding-block-start: clamp(56px, 6vw, 80px);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(36px, 4vw, 56px);
	padding-block-end: clamp(36px, 4vw, 56px);
}

/* ── Brand column ─────────────────────────────────────────────────────────── */

.site-footer__brand {
	max-width: 340px;
}

.site-footer__wm {
	display: flex;
	flex-direction: column;
	line-height: 0.92;
	margin-block-end: 18px;
}

.site-footer__wm-name {
	font-family: var(--atria-font-display);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: var(--atria-ls-wordmark);
	color: #F7F1E7;
}

.site-footer__wm-sub {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.55em;
	color: #9a8a72;
	margin-inline-start: 3px;
}

.site-footer__logo {
	display: block;
	max-height: 48px;
	max-width: 260px;
	width: auto;
	height: auto;
}

.site-footer__blurb {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: rgba(237, 229, 214, 0.6);
	font-weight: 300;
}

/* ── Link columns ─────────────────────────────────────────────────────────── */

.site-footer__col h4 {
	margin: 0 0 18px;
	font-family: var(--atria-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #9a8a72;
	text-transform: uppercase;
}

.site-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__col a {
	text-decoration: none;
	color: rgba(237, 229, 214, 0.82);
	font-size: 14px;
	transition: color var(--atria-ease);
}

.site-footer__col a:hover {
	color: var(--atria-sand);
	text-decoration: none;
}

/* ── Bottom bar ───────────────────────────────────────────────────────────── */

.site-footer__bottom {
	border-top: 1px solid rgba(237, 229, 214, 0.12);
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-block: 26px 40px;
}

.site-footer__copy {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: rgba(237, 229, 214, 0.5);
}

.site-footer__legal {
	display: flex;
	gap: 24px;
}

.site-footer__legal a {
	text-decoration: none;
	color: rgba(237, 229, 214, 0.5);
	font-size: 12px;
	letter-spacing: 0.06em;
	transition: color var(--atria-ease);
}

.site-footer__legal a:hover {
	color: var(--atria-sand);
	text-decoration: none;
}

/* ==========================================================================
   13. RTL overrides
   ========================================================================== */

[dir="rtl"] .mobile-menu ul,
[dir="rtl"] .site-footer__col ul {
	text-align: right;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

/* Content grids (768 px +) */

@media (min-width: 768px) {

	.atria-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.single-tour__layout {
		grid-template-columns: 1fr 340px;
	}
}

/* Navigation + footer columns (860 px +) */

@media (min-width: 860px) {

	.nav-toggle {
		display: none;
	}

	.primary-nav {
		display: block;
	}

	.btn--nav {
		display: inline-flex;
	}

	.whatsapp-float__label {
		display: inline;
	}

	.site-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

/* Desktop (1024 px +) */

@media (min-width: 1024px) {

	.atria-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hero {
		min-height: 70vh;
	}
}

/* ==========================================================================
   15. Homepage sections
   ========================================================================== */

/* ── Shared homepage section header ───────────────────────────────────────── */

.hp-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-block-end: clamp(32px, 4vw, 52px);
}

.hp-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--atria-gold);
}

.hp-title {
	margin: 0;
	font-family: var(--atria-font-display);
	font-weight: 500;
	font-size: var(--atria-fs-h2);
	line-height: 1.06;
	color: var(--atria-ink);
}

.hp-view-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--atria-gold-deep);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--atria-ls-nav);
	text-transform: uppercase;
	white-space: nowrap;
	transition: gap var(--atria-ease), color var(--atria-ease);
}

.hp-view-all:hover {
	gap: 16px;
	color: var(--atria-gold);
	text-decoration: none;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hp-hero {
	position: relative;
	min-height: clamp(560px, 82vh, 860px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #F7F1E7;
}

.hp-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--atria-ink);
}

.hp-hero__gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(20, 16, 12, .78) 0%, rgba(20, 16, 12, .42) 42%, rgba(20, 16, 12, .08) 70%, rgba(20, 16, 12, 0) 100%),
		linear-gradient(0deg,  rgba(15, 12, 10, .55) 0%, rgba(15, 12, 10, 0)   45%);
}

.hp-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block-end: clamp(56px, 8vh, 96px);
}

.hp-hero__eyebrow {
	margin: 0 0 20px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--atria-gold-light);
}

.hp-hero__title {
	margin: 0;
	font-family: var(--atria-font-display);
	font-weight: 500;
	font-size: var(--atria-fs-h1);
	line-height: 1.02;
	letter-spacing: 0.005em;
	color: #F7F1E7;
	max-width: 14ch;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.hp-hero__subtitle {
	margin: 24px 0 0;
	font-size: var(--atria-fs-lead);
	line-height: 1.7;
	color: rgba(247, 241, 231, 0.86);
	max-width: 42ch;
	font-weight: 300;
}

.hp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 36px;
}

/* ── Stats bar ────────────────────────────────────────────────────────────── */

.hp-stats {
	background: var(--atria-sand-band);
	border-bottom: 1px solid rgba(26, 23, 21, 0.08);
}

.hp-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px;
	padding-block: clamp(28px, 4vw, 40px);
}

.hp-stats__item {
	text-align: center;
}

.hp-stats__item:not(:last-child) {
	border-inline-end: 1px solid rgba(26, 23, 21, 0.12);
}

/* Only present when at least one stat in the bar has an icon set — reserves
   equal height for every item (including icon-less ones) so numbers line up. */
.hp-stats__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 28px;
	margin-bottom: 10px;
	color: var(--atria-gold);
}

.hp-stats__icon svg {
	width: 28px;
	height: 28px;
}

.hp-stats__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.hp-stats__number {
	display: block;
	font-family: var(--atria-font-display);
	font-weight: 500;
	font-size: clamp(34px, 4vw, 46px);
	line-height: 1;
	color: var(--atria-ink);
}

.hp-stats__caption {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--atria-text-muted);
	text-transform: uppercase;
}

/* ── Featured products ────────────────────────────────────────────────────── */

.hp-products {
	padding-block: var(--atria-section-y);
}

.hp-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 2.4vw, 34px);
}

.hp-product-card {
	background: var(--atria-surface);
	border: 1px solid var(--atria-hairline);
	transition: box-shadow var(--atria-ease);
}

.hp-product-card:hover {
	box-shadow: var(--atria-shadow-card);
}

.hp-product-card a {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hp-product-card__img {
	display: block;
	width: 100%;
	height: clamp(230px, 22vw, 300px);
	object-fit: cover;
	background: var(--atria-sand-band);
}

.hp-product-card__body {
	padding: 24px 26px 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.hp-product-card__title {
	margin: 0;
	font-family: var(--atria-font-display);
	font-weight: 600;
	font-size: 25px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--atria-ink);
}

.hp-product-card__meta {
	margin: 8px 0 18px;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--atria-text-muted);
	text-transform: uppercase;
}

.hp-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(26, 23, 21, 0.10);
	padding-top: 16px;
	margin-top: auto;
}

.hp-product-card__from {
	font-size: 12px;
	color: var(--atria-text-faint);
	letter-spacing: 0.04em;
}

.hp-product-card__price {
	font-family: var(--atria-font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--atria-gold-deep);
}

/* ── Value section ────────────────────────────────────────────────────────── */

.hp-value {
	background: var(--atria-ink-deep);
	color: #F7F1E7;
}

.hp-value__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.hp-value__image {
	flex: 1 1 420px;
	min-height: clamp(300px, 42vw, 560px);
	position: relative;
	background: var(--atria-ink);
}

.hp-value__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-value__text {
	flex: 1 1 420px;
	padding: clamp(48px, 6vw, 92px) clamp(24px, 5vw, 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hp-value__eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--atria-sand);
}

.hp-value__heading {
	margin: 0;
	font-family: var(--atria-font-display);
	font-weight: 500;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.08;
	color: #F7F1E7;
}

.hp-value__body {
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.8;
	color: rgba(247, 241, 231, 0.74);
	font-weight: 300;
	max-width: 46ch;
}

.hp-value__features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px 28px;
	margin-top: 36px;
	list-style: none;
	padding: 0;
}

.hp-value__feature {
	display: flex;
	align-items: center;
	gap: 13px;
}

.hp-value__feature-icon {
	display: inline-flex;
	flex: none;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(201, 168, 106, 0.5);
	border-radius: 50%;
	color: var(--atria-sand);
}

/* Sizes a chosen built-in/custom icon to fit the circle; the default
   checkmark keeps its own explicit width/height and is unaffected. */
.hp-value__feature-icon svg:not([width]) {
	width: 16px;
	height: 16px;
}

.hp-value__feature-icon img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.hp-value__feature-text {
	font-size: 14.5px;
	letter-spacing: 0.02em;
	color: #EDE5D6;
}

.hp-value__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--atria-sand);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--atria-ls-nav);
	text-transform: uppercase;
	margin-top: 36px;
	transition: gap var(--atria-ease);
}

.hp-value__link:hover {
	gap: 16px;
	text-decoration: none;
}

/* ── Destination tiles ────────────────────────────────────────────────────── */

.hp-destinations {
	padding-block: var(--atria-section-y);
}

.hp-dest-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}

.hp-dest-tile {
	position: relative;
	display: block;
	text-decoration: none;
	height: clamp(260px, 26vw, 380px);
	overflow: hidden;
}

.hp-dest-tile:hover {
	text-decoration: none;
}

.hp-dest-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--atria-sand-band);
	transition: transform 600ms var(--atria-ease);
}

.hp-dest-tile:hover .hp-dest-tile__img {
	transform: scale(1.06);
}

.hp-dest-tile__gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(15, 12, 10, 0.72) 0%, rgba(15, 12, 10, 0) 52%);
}

.hp-dest-tile__label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.hp-dest-tile__name {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--atria-ls-nav);
	color: #F7F1E7;
	text-transform: uppercase;
}

.hp-dest-tile__arrow {
	color: #F7F1E7;
	flex-shrink: 0;
}

/* ── CTA band ─────────────────────────────────────────────────────────────── */

.hp-cta-band {
	position: relative;
	background: var(--atria-ink-deep);
	color: #F7F1E7;
	overflow: hidden;
}

.hp-cta-band__gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(14, 12, 11, 0.92) 0%, rgba(14, 12, 11, 0.60) 60%, rgba(14, 12, 11, 0.35) 100%);
}

.hp-cta-band__content {
	position: relative;
	z-index: 2;
	padding-block: clamp(64px, 8vw, 116px);
}

.hp-cta-band__eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--atria-gold-light);
}

.hp-cta-band__title {
	margin: 0;
	font-family: var(--atria-font-display);
	font-weight: 500;
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.08;
	color: #F7F1E7;
	max-width: 18ch;
}

.hp-cta-band__body {
	margin: 20px 0 36px;
	font-size: var(--atria-fs-lead);
	line-height: 1.7;
	color: rgba(247, 241, 231, 0.74);
	max-width: 44ch;
	font-weight: 300;
}

/* ==========================================================================
   16. Price estimator widget
   ========================================================================== */

/* Container — sits in the sidebar */
.atria-estimator {
	margin-block-start: var(--space-m);
	padding:            var(--space-m);
	background:         var(--color-bg);
	border:             1px solid var(--color-border);
	border-radius:      var(--radius);
}

/* Field wrapper */
.atria-estimator__field {
	margin-block-start: var(--space-s);
}

/* Label above each select */
.atria-estimator__field-label {
	display:         block;
	font-size:       var(--text-sm);
	color:           var(--color-text-muted);
	margin-block-end: 4px;
}

/* Select element */
.atria-estimator__select {
	display:     block;
	width:       100%;
	padding:     var(--space-xs) var(--space-s);
	border:      1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size:   var(--text-sm);
	background:  #fff;
	color:       var(--color-ink);
	cursor:      pointer;
}

.atria-estimator__select:focus-visible {
	outline:        2px solid var(--color-gold);
	outline-offset: 2px;
}

/* Live result area */
.atria-estimator__result {
	margin-block-start: var(--space-s);
	min-height:         1.5em;
}

/* Price display (when a bracket is found) */
.atria-estimator__result-total {
	margin: 0;
}

.atria-estimator__result-label {
	display:          block;
	font-size:        var(--text-sm);
	color:            var(--color-text-muted);
	margin-block-end: 2px;
}

.atria-estimator__result-price {
	display:     block;
	font-family: var(--font-heading);
	font-size:   var(--text-h3);
	font-weight: 500;
	color:       var(--color-ink);
	line-height: 1.1;
}

.atria-estimator__result-breakdown {
	display:    block;
	font-size:  var(--text-sm);
	font-weight: 300;
	color:      var(--color-text-muted);
	margin-block-start: 2px;
}

/* "Contact us" fallback when no price is available */
.atria-estimator__quote {
	font-size:  var(--text-sm);
	font-style: italic;
	color:      var(--color-text-muted);
	margin:     0;
}

/* ==========================================================================
   16. Enquiry form
   ========================================================================== */

.atria-form__field {
	margin-block-end: var(--space-s);
}

.atria-form__label {
	display:          block;
	font-size:        var(--text-sm);
	color:            var(--color-text-muted);
	margin-block-end: 4px;
}

.atria-form__req {
	color: var(--color-danger);
}

.atria-form__input,
.atria-form__select,
.atria-form__textarea {
	display:       block;
	width:         100%;
	padding:       var(--space-xs) var(--space-s);
	border:        1px solid var(--color-border);
	border-radius: var(--radius);
	font-family:   var(--font-body);
	font-size:     var(--text-sm);
	color:         var(--color-ink);
	background:    #fff;
	line-height:   1.4;
}

.atria-form__input:focus-visible,
.atria-form__select:focus-visible,
.atria-form__textarea:focus-visible {
	outline:        2px solid var(--color-gold);
	outline-offset: 2px;
	border-color:   var(--color-gold);
}

.atria-form__textarea {
	resize:     vertical;
	min-height: 80px;
}

.atria-form__field--error .atria-form__input,
.atria-form__field--error .atria-form__select,
.atria-form__field--error .atria-form__textarea {
	border-color: var(--color-danger);
}

.atria-form__error {
	display:            block;
	font-size:          var(--text-sm);
	color:              var(--color-danger);
	margin-block-start: 4px;
}

.atria-form__summary-error {
	padding:          var(--space-s) var(--space-m);
	background:       hsl(0, 80%, 97%);
	border:           1px solid hsl(0, 60%, 75%);
	border-radius:    var(--radius);
	margin-block-end: var(--space-m);
	font-size:        var(--text-sm);
	color:            hsl(0, 45%, 32%);
}

.atria-form__submit {
	width:              100%;
	margin-block-start: var(--space-m);
}

/* Honeypot — off-screen; aria-hidden on parent stops AT from reading it */
.atria-hp {
	position: absolute;
	left:     -9999px;
	width:    1px;
	height:   1px;
	overflow: hidden;
}

.atria-enquiry-success {
	padding:            var(--space-m);
	background:         hsl(142, 55%, 95%);
	border:             1px solid hsl(142, 45%, 72%);
	border-radius:      var(--radius);
	margin-block-start: var(--space-m);
}

.atria-enquiry-success__title {
	font-family:      var(--font-heading);
	font-size:        var(--text-lead);
	font-weight:      600;
	color:            hsl(142, 40%, 28%);
	margin-block-end: var(--space-xs);
}

.atria-enquiry-success p {
	font-size: var(--text-sm);
	color:     hsl(142, 35%, 30%);
	margin:    0;
}

/* Shared highlight diamond icon — used across all product single templates. */
.atria-hl-diamond {
	display:      inline-block;
	flex-shrink:  0;
	width:        10px;
	height:       10px;
	background:   var( --atria-gold, #B8915A );
	transform:    rotate( 45deg );
	border-radius: 1px;
	margin-top:   5px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   At-a-Glance facts strip — shared across all six product single templates.
   Placed below the overview two-column grid so the booking sidebar stays
   compact (estimator + CTAs only) and the page height follows real content.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.atria-fact-strip {
	display:            flex;
	flex-wrap:          wrap;
	gap:                0;
	padding-block:      clamp( 18px, 2.5vw, 28px );
	border-block:       1px solid rgba( 26, 23, 21, .10 );
	margin-block-start: clamp( 28px, 3vw, 40px );
}

.atria-fact {
	flex:           1 1 130px;
	min-width:      0;
	padding-inline: clamp( 12px, 1.8vw, 22px );
	box-shadow:     -1px 0 0 rgba( 26, 23, 21, .10 );
}

.atria-fact:first-child {
	padding-inline-start: 0;
	box-shadow:           none;
}

.atria-fact__label {
	display:          block;
	font-family:      var( --font-body, 'Jost', sans-serif );
	font-size:        10px;
	font-weight:      600;
	letter-spacing:   .14em;
	text-transform:   uppercase;
	color:            rgba( 26, 23, 21, .40 );
	margin-block-end: 5px;
}

.atria-fact__value {
	display:     block;
	font-family: var( --font-body, 'Jost', sans-serif );
	font-size:   14px;
	font-weight: 500;
	color:       var( --atria-ink, #1A1715 );
}

@media ( max-width: 600px ) {
	.atria-fact-strip {
		display:               grid;
		grid-template-columns: 1fr 1fr;
		gap:                   20px 0;
	}

	.atria-fact {
		padding-inline: 0;
		box-shadow:     none;
	}

	.atria-fact:nth-child( even ) {
		padding-inline-start: 14px;
		box-shadow:           -1px 0 0 rgba( 26, 23, 21, .10 );
	}
}