/**
 * Atheria — Utility Stylesheet
 *
 * Global base styles, section rhythm, surface helpers, GSAP hooks,
 * Elementor overrides, forms, and component-level utilities.
 * All values reference --ath-* tokens from atheria-tokens.css.
 *
 * Load order: atheria-tokens → atheria-utilities → atheria-motion → per-widget.
 *
 * @package Atheria_Core
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOBAL BASE
   ───────────────────────────────────────────────────────────────────────────── */

html { scroll-behavior: auto !important; } /* GSAP controls scroll — browser native off */

body {
	background:           var(--ath-frost);
	color:                var(--ath-arctic-navy);
	font-feature-settings: "kern" 1, "liga" 1;
	text-rendering:       optimizeLegibility;
	overflow-x:           hidden;
}

/* Elementor widget micro-fixes */
.elementor-widget-heading .elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p:last-child          { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   2. SECTION RHYTHM — fluid padding utility classes
   Side padding uses !important because Elementor's inline padding overrides
   would otherwise break the fluid rhythm on all breakpoints.
   ───────────────────────────────────────────────────────────────────────────── */

.section-xxl,
.section-xl,
.section-l,
.section-m,
.section-s,
.section-xs,
.section-xxs,
.section-header {
	padding-left:  clamp(var(--fluid-side-padding-min), 2.2vw + 0.75rem, var(--fluid-side-padding-max)) !important;
	padding-right: clamp(var(--fluid-side-padding-min), 2.2vw + 0.75rem, var(--fluid-side-padding-max)) !important;
}

.section-xxl {
	padding-top:    clamp(var(--section-xxl-padding-min), 3vw + 5rem,   var(--section-xxl-padding-max));
	padding-bottom: clamp(var(--section-xxl-padding-min), 3vw + 5rem,   var(--section-xxl-padding-max));
}
.section-xl {
	padding-top:    clamp(var(--section-xl-padding-min), 2.6vw + 4.5rem, var(--section-xl-padding-max));
	padding-bottom: clamp(var(--section-xl-padding-min), 2.6vw + 4.5rem, var(--section-xl-padding-max));
}
.section-l {
	padding-top:    clamp(var(--section-l-padding-min), 2.2vw + 4rem, var(--section-l-padding-max));
	padding-bottom: clamp(var(--section-l-padding-min), 2.2vw + 4rem, var(--section-l-padding-max));
}
.section-m {
	padding-top:    clamp(var(--section-m-padding-min), 2vw + 3rem, var(--section-m-padding-max));
	padding-bottom: clamp(var(--section-m-padding-min), 2vw + 3rem, var(--section-m-padding-max));
}
.section-s {
	padding-top:    clamp(var(--section-s-padding-min), 1.6vw + 2.4rem, var(--section-s-padding-max));
	padding-bottom: clamp(var(--section-s-padding-min), 1.6vw + 2.4rem, var(--section-s-padding-max));
}
.section-xs {
	padding-top:    clamp(var(--section-xs-padding-min), 1.2vw + 1.6rem, var(--section-xs-padding-max));
	padding-bottom: clamp(var(--section-xs-padding-min), 1.2vw + 1.6rem, var(--section-xs-padding-max));
}
.section-xxs {
	padding-top:    clamp(var(--section-xxs-padding-min), 0.9vw + 1rem, var(--section-xxs-padding-max));
	padding-bottom: clamp(var(--section-xxs-padding-min), 0.9vw + 1rem, var(--section-xxs-padding-max));
}
.section-header {
	padding-top:    clamp(var(--section-header-padding-min), 0.4vw + 0.85rem, var(--section-header-padding-max));
	padding-bottom: clamp(var(--section-header-padding-min), 0.4vw + 0.85rem, var(--section-header-padding-max));
}

/* Hero */
.section-hero                    { min-height: var(--section-hero-height) !important; }
.section-hero > .e-con-inner     { justify-content: center !important; }

/* Full-bleed */
.section-full                    { padding-left: 0 !important; padding-right: 0 !important; }
.section-full > .e-con-inner     { max-width: 100% !important; }

/* Max-width constrained */
.section-wide > .e-con-inner     { max-width: var(--section-wide) !important; }
.section-narrow > .e-con-inner   { max-width: var(--section-narrow) !important; }
.section-narrow-xs > .e-con-inner{ max-width: var(--section-narrow-xs) !important; }

/* Offset for fixed header */
.section-offset { padding-top: calc(var(--section-offset-header) + var(--section-l-padding-min)); }

@media (max-width: 767px) {
	.section-offset { padding-top: calc(var(--section-offset-header) + var(--section-m-padding-min)); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SURFACE HELPERS
   Colors without !important — Elementor Style tab always wins if needed.
   ───────────────────────────────────────────────────────────────────────────── */

.ath-surface-light     { background: var(--ath-frost);         color: var(--ath-arctic-navy); }
.ath-surface-limestone { background: var(--ath-frost);         color: var(--ath-arctic-navy); }
.ath-surface-dark      { background: var(--ath-arctic-navy);   color: var(--ath-frost); }
.ath-surface-cypress   { background: var(--ath-reflection);    color: var(--ath-frost); }
.ath-surface-mist      { background: var(--ath-arctic-mist);   color: var(--ath-arctic-navy); }

.ath-muted-text  { color: var(--ath-reflection); }
.ath-accent-text { color: var(--ath-arctic-blue); }

.ath-card {
	border:        1px solid var(--ath-arctic-mist);
	border-radius: var(--ath-radius-lg);
	overflow:      hidden;
	background:    var(--ath-frost);
}

.ath-image-wrap           { overflow: hidden; border-radius: var(--ath-radius-lg); background: var(--ath-reflection); }
.ath-image-wrap img       { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. GSAP ANIMATION HOOKS
   Classes applied to elements that the Motion Engine targets.
   will-change is set here; GSAP adds/removes it via its own internals too.
   ───────────────────────────────────────────────────────────────────────────── */

.ath-reveal,
.ath-image-reveal,
.ath-card-reveal,
.ath-text-reveal  { will-change: transform, opacity; }

.ath-no-overflow  { overflow: hidden; }
.ath-gsap-pinned  { overflow: clip; contain: paint; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. ELEMENTOR BUTTON UTILITIES
   Variant classes applied via Elementor Advanced → CSS Classes.
   No !important — the widget's own Style tab always takes precedence.
   ───────────────────────────────────────────────────────────────────────────── */

/* Accent (filled blue) */
.ath-btn-accent .elementor-button,
.elementor-button.ath-btn-accent {
	background-color: var(--ath-arctic-blue);
	border-color:     var(--ath-arctic-blue);
	color:            var(--ath-frost);
}
.ath-btn-accent .elementor-button:hover,
.ath-btn-accent .elementor-button:focus-visible,
.elementor-button.ath-btn-accent:hover,
.elementor-button.ath-btn-accent:focus-visible {
	background-color: transparent;
	color:            var(--ath-arctic-blue);
	border-color:     var(--ath-arctic-blue);
}

/* Secondary (outlined navy) */
.ath-btn-secondary .elementor-button,
.elementor-button.ath-btn-secondary {
	background-color: transparent;
	color:            var(--ath-arctic-navy);
	border-color:     var(--ath-arctic-navy);
}
.ath-btn-secondary .elementor-button:hover,
.ath-btn-secondary .elementor-button:focus-visible,
.elementor-button.ath-btn-secondary:hover,
.elementor-button.ath-btn-secondary:focus-visible {
	background-color: var(--ath-arctic-navy);
	color:            var(--ath-frost);
}

/* Light (frost fill — for use on dark surfaces) */
.ath-btn-light .elementor-button,
.elementor-button.ath-btn-light {
	background-color: var(--ath-frost);
	color:            var(--ath-arctic-navy);
	border-color:     var(--ath-frost);
}
.ath-btn-light .elementor-button:hover,
.ath-btn-light .elementor-button:focus-visible,
.elementor-button.ath-btn-light:hover,
.elementor-button.ath-btn-light:focus-visible {
	background-color: transparent;
	color:            var(--ath-frost);
	border-color:     var(--ath-frost);
}

/* Micro-interaction — subtle lift on hover (not branding, safe globally) */
.elementor-button {
	transition:
		background-color 0.35s var(--ath-ease-out),
		color            0.35s var(--ath-ease-out),
		border-color     0.35s var(--ath-ease-out),
		transform        0.35s var(--ath-ease-out);
}
.elementor-button:hover,
.elementor-button:focus-visible { transform: translateY(-1px); }

/* Focus ring — accessibility */
.elementor-button:focus-visible {
	outline:        2px solid var(--ath-arctic-blue);
	outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. FORM UTILITIES
   Focus state only. Field colors come from Theme Style → Form Fields.
   ───────────────────────────────────────────────────────────────────────────── */

.elementor-field-group .elementor-field,
.elementor-form input.elementor-field,
.elementor-form textarea.elementor-field,
.elementor-form select.elementor-field {
	transition:
		background-color 0.25s var(--ath-ease-out),
		border-color     0.25s var(--ath-ease-out),
		box-shadow       0.25s var(--ath-ease-out);
}

.elementor-field-group .elementor-field:focus,
.elementor-form input.elementor-field:focus,
.elementor-form textarea.elementor-field:focus,
.elementor-form select.elementor-field:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ath-arctic-blue) 20%, transparent);
	outline: 0;
}

.elementor-field-group .elementor-field::placeholder,
.elementor-form input.elementor-field::placeholder,
.elementor-form textarea.elementor-field::placeholder {
	color:   color-mix(in srgb, var(--ath-reflection) 80%, var(--ath-arctic-navy));
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. SPLIT EXPAND — clip image to section bounds during animation
   ───────────────────────────────────────────────────────────────────────────── */

.ath-split[data-ath-split-expand]                   { overflow: hidden; }
.ath-split[data-ath-split-expand] .ath-split__image-wrap { overflow: hidden; }
.ath-split[data-ath-split-expand] .ath-split__image {
	border-radius: 0 !important;
	overflow:      hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. ATHERIA BUTTON COMPONENT (custom widget)
   ───────────────────────────────────────────────────────────────────────────── */

.ath-btn-base,
.ath-btn,
.ath-cta-band__btn {
	position:                   relative;
	overflow:                   hidden;
	display:                    inline-flex;
	align-items:                center;
	justify-content:            center;
	gap:                        0.5em;
	padding:                    0.75rem 2rem;
	font-family:                var(--ath-font-body);
	font-weight:                650;
	font-size:                  var(--ath-size-btn);
	letter-spacing:             var(--ath-ls-btn);
	line-height:                1.4;
	border-radius:              10px;
	border:                     2px solid transparent;
	text-decoration:            none;
	cursor:                     pointer;
	white-space:                nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* Text span — stays above ::before in slide effects */
.ath-btn .ath-btn__text,
.ath-cta-band__btn .ath-btn__text {
	position:       relative;
	z-index:        1;
	pointer-events: none;
}

/* Button variants */
.ath-btn--solid   { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.ath-btn--outline { background-color: transparent; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.ath-btn--pill    { border-radius: 100px; }
.ath-btn--oval    { border-radius: 100px; }
.ath-btn--square  { border-radius: 0; }

/* Slide fills — shared ::before pattern */
.ath-btn--slide-left,
.ath-btn--slide-right,
.ath-btn--slide-top,
.ath-btn--slide-bottom,
.ath-btn--diagonal { transition: color 0.4s ease, border-color 0.35s ease; }

.ath-btn--slide-left::before,
.ath-btn--slide-right::before,
.ath-btn--slide-top::before,
.ath-btn--slide-bottom::before,
.ath-btn--diagonal::before {
	content:    '';
	position:   absolute;
	inset:      0;
	z-index:    0;
}

.ath-btn--slide-left::before   { transform: translateX(-101%);  transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--slide-right::before  { transform: translateX(101%);   transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--slide-top::before    { transform: translateY(-101%);  transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--slide-bottom::before { transform: translateY(101%);   transition: transform 0.5s var(--ath-ease-out); }
.ath-btn--diagonal::before     { transform: translateX(-110%) skewX(-18deg); transition: transform 0.55s var(--ath-ease-out); }

.ath-btn--slide-left:hover::before   { transform: translateX(0); }
.ath-btn--slide-right:hover::before  { transform: translateX(0); }
.ath-btn--slide-top:hover::before    { transform: translateY(0); }
.ath-btn--slide-bottom:hover::before { transform: translateY(0); }
.ath-btn--diagonal:hover::before     { transform: translateX(0) skewX(-18deg); }

/* Staggered letters — each character rolls out upward (staggered) on
   hover, revealing a duplicate set rolling in from below; leaving hover
   reverses the same transition, so letters exit downward and the
   original set returns from above. Letters are split into two stacked
   spans once by JS (atheria-motion.js); this rule only needs the
   duplicate structure to already exist in the DOM. */
.ath-btn--stagger-text .ath-btn__text {
	display:        inline-block;
	overflow:       hidden;
	vertical-align: top;
}
.ath-btn__letters {
	display:     inline-block;
	white-space: pre;
}
.ath-btn__letters--bottom {
	position: absolute;
	top:      0;
	left:     0;
}
.ath-btn__letter {
	display:          inline-block;
	transform:        translateY(0);
	transition:       transform 0.4s var(--ath-ease-out);
	transition-delay: calc(var(--i, 0) * 22ms);
}
.ath-btn__letters--bottom .ath-btn__letter { transform: translateY(100%); }

.ath-btn--stagger-text:hover .ath-btn__letters--top .ath-btn__letter    { transform: translateY(-100%); }
.ath-btn--stagger-text:hover .ath-btn__letters--bottom .ath-btn__letter { transform: translateY(0); }

/* Underline only */
.ath-btn--underline {
	background:    transparent;
	border-radius: 0;
	padding-left:  0;
	padding-right: 0;
	border-bottom: 1.5px solid currentColor;
	border-top:    none;
	border-left:   none;
	border-right:  none;
	transition:    opacity 0.3s ease, color 0.3s ease;
}
.ath-btn--underline:hover { opacity: 0.65; }

/* Ghost */
.ath-btn--ghost {
	background:            rgba(255, 255, 255, 0.06);
	backdrop-filter:       blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition:            background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.ath-btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }

/* Border draw */
.ath-btn--border-draw {
	background: transparent;
	transition: color 0.35s ease, background-color 0.35s ease;
}
.ath-btn--border-draw::before,
.ath-btn--border-draw::after {
	content:    '';
	position:   absolute;
	width:      0;
	height:     0;
	transition: width 0.35s ease, height 0.35s ease;
}
.ath-btn--border-draw::before { top: 0; left: 0; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.ath-btn--border-draw::after  { bottom: 0; right: 0; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }
.ath-btn--border-draw:hover::before,
.ath-btn--border-draw:hover::after { width: 100%; height: 100%; }

/* Icon */
.ath-btn__icon            { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; color: inherit; fill: currentColor; }
.ath-btn__icon svg        { width: 1em; height: 1em; fill: currentColor; }
.ath-btn__icon i          { font-size: 1em; line-height: 1; }

/* Focus */
.ath-cta-band__btn:focus-visible { outline: 2px solid var(--ath-arctic-blue); outline-offset: 3px; }

/* CTA band actions row */
.ath-cta-band__actions {
	display:     flex;
	flex-wrap:   wrap;
	gap:         1rem;
	align-items: center;
}
@media (max-width: 767px) {
	.ath-cta-band__actions                      { flex-direction: column; align-items: stretch; }
	.ath-cta-band__actions .ath-cta-band__btn   { text-align: center; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. SPLIT IMAGE / TEXT COMPONENT
   ───────────────────────────────────────────────────────────────────────────── */

.ath-split {
	display:               grid;
	grid-template-columns: var(--ath-split-img-col, 50%) minmax(0, 1fr);
	gap:                   5rem;
	align-items:           center;
}
.ath-split--image-right {
	grid-template-columns: minmax(0, 1fr) var(--ath-split-img-col, 50%);
}
.ath-split--image-right .ath-split__image-wrap { order: 2; }
.ath-split--image-right .ath-split__content    { order: 1; }

.ath-split__image-wrap { overflow: hidden; }
.ath-split__image      { width: 100%; aspect-ratio: 4/5; overflow: hidden; border-radius: 1rem; }
.ath-split__image img  { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.ath-split__eyebrow    { display: block; }
.ath-split__heading    { margin-bottom: 1.5rem; }
.ath-split__body       { margin-bottom: 2rem; }

@media (max-width: 1024px) {
	.ath-split,
	.ath-split--image-right {
		grid-template-columns: 1fr !important;
		gap:                   0.75rem;
		align-items:           start;
	}
	.ath-split--image-right .ath-split__image-wrap,
	.ath-split--image-right .ath-split__content { order: 0; }

	.ath-split--reverse-mobile .ath-split__image-wrap { order: 2; }
	.ath-split--reverse-mobile .ath-split__content    { order: 1; }

	.ath-split__image { aspect-ratio: 16/9; }
}
@media (max-width: 767px) {
	.ath-split        { gap: 1.25rem; }
	.ath-split__image { aspect-ratio: 4/3; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. AMENITIES LIST COMPONENT
   ───────────────────────────────────────────────────────────────────────────── */

.ath-amenities {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   1rem 1.5rem;
	list-style:            none;
	margin:                0;
	padding:               0;
}
.ath-amenity               { display: flex; align-items: center; gap: 0.625rem; }
.ath-amenity__icon         { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ath-arctic-blue); line-height: 1; }
.ath-amenity__icon svg     { width: 1em; height: 1em; fill: currentColor; }
.ath-amenity__label        { line-height: 1.4; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. CARD GRID COMPONENT  (shared base for Rooms Grid + Experience Grid)

   Architecture: one reusable card system.
     .ath-card-item             — shared shell (shell, image, content, title, cta)
     .ath-card-item--room       — room-specific additions (price, amenity pills)
     .ath-card-item--experience — experience-specific additions (duration, inclusions)
   Add a new CPT card by adding a --modifier only; the base never duplicates.
   ───────────────────────────────────────────────────────────────────────────── */

/* Grid wrapper — shared. Legacy .ath-rooms-cards kept as alias so existing
   Rooms Grid markup and any saved Elementor content keep working unchanged. */
.ath-cards-grid,
.ath-rooms-cards {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   2rem;
	align-items:           stretch;
}
@media (max-width: 1024px) {
	.ath-cards-grid,
	.ath-rooms-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 767px) {
	.ath-cards-grid,
	.ath-rooms-cards { grid-template-columns: 1fr; gap: 1.25rem; padding: 0 1.25rem; }
}

/* Card shell — shared.
   NOTE: block is .ath-card-item (NOT .ath-card) — .ath-card is a pre-existing
   generic surface utility elsewhere in this file; the grid shell must not
   inherit its border/radius, so it uses its own block name. */
.ath-card-item,
.ath-room-card             { display: flex; flex-direction: column; height: 100%; border-radius: 0.75rem; overflow: hidden; background: #fff; }
.ath-card__img-link,
.ath-room-card__img-link   { display: block; flex-shrink: 0; }
.ath-card__body,
.ath-room-card__body       { padding: 1.25rem 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; }

/* Card image — shared */
.ath-card__img-wrap,
.ath-room-img__wrap {
	position:      relative;
	overflow:      hidden;
	aspect-ratio:  4/3;
	border-radius: 0.75rem;
	background:    var(--ath-arctic-mist);
	/* Establish an independent clipping/stacking context so transformed
	   children (.ath-image-reveal scale(1.08), hover zoom) stay clipped by the
	   rounded corners in Chrome/Safari, which otherwise leak a transformed
	   descendant past a rounded overflow:hidden parent. The image itself has
	   NO border-radius — the wrapper's overflow does all the clipping, so a
	   scaled image still fills the rounded corners edge-to-edge. */
	isolation:     isolate;
	transform:     translateZ(0);
}
.ath-card__img,
.ath-room-img {
	position:      absolute;
	inset:         0;
	width:         100%;
	height:        100%;
	object-fit:    cover;
	display:       block;
	transition:    transform 0.7s var(--ath-ease-out);
	/* The image must have NO radius of its own: the wrapper's overflow:hidden
	   clips it to the wrapper's radius. A radius on the image (it was picking
	   up 28px elsewhere) made the image corners round *inside* the wrapper,
	   exposing the grey background at the four corners. Force square. */
	border-radius: 0 !important;
}
.ath-card__img--placeholder,
.ath-room-img--placeholder { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ath-arctic-mist); border-radius: 0 !important; }

/* Image hover effects — generic, shared across card types and other widgets */
.ath-img-hover-zoom:hover .ath-card__img,
.ath-img-hover-zoom:hover .ath-room-img           { transform: scale(1.06); }
.ath-img-hover-slide .ath-card__img,
.ath-img-hover-slide .ath-room-img                { transform: scale(1.06) translateX(-2%); }
.ath-img-hover-slide:hover .ath-card__img,
.ath-img-hover-slide:hover .ath-room-img          { transform: scale(1.06) translateX(2%); transition-duration: 4s; }

.ath-img-overlay {
	position:    absolute;
	inset:       0;
	background:  linear-gradient(to top, rgba(26, 40, 50, 0.75) 0%, rgba(26, 40, 50, 0) 55%);
	opacity:     0;
	transition:  opacity 0.45s ease;
	display:     flex;
	align-items: flex-end;
	padding:     1.5rem;
}
.ath-img-hover-overlay:hover .ath-img-overlay { opacity: 1; }
.ath-img-overlay__label {
	color:          var(--ath-frost);
	font-size:      0.875rem;
	font-family:    var(--ath-font-body);
	font-weight:    600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transform:      translateY(6px);
	transition:     transform 0.4s ease;
}
.ath-img-hover-overlay:hover .ath-img-overlay__label { transform: translateY(0); }

/* Card content — shared */
.ath-card__content,
.ath-room-content   { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

.ath-card__eyebrow,
.ath-room-eyebrow {
	display:        inline-block;
	font-family:    var(--ath-font-eyebrow, sans-serif);
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--ath-arctic-blue);
	margin-bottom:  0.625rem;
}
.ath-card__title,
.ath-room-title            { font-family: var(--ath-font-heading, serif); margin: 0 0 0.75rem; min-height: 2.4em; overflow-wrap: break-word; }
.ath-card__title a,
.ath-room-title a          { font-family: inherit; text-decoration: none; color: inherit; transition: color 0.25s ease; }
.ath-card__title a:hover,
.ath-room-title a:hover    { color: var(--ath-arctic-blue); }

.ath-card__meta,
.ath-room-meta             { font-family: var(--ath-font-body, sans-serif); font-size: 0.875rem; color: var(--ath-reflection); margin: 0 0 0.75rem; }
.ath-card__excerpt,
.ath-room-excerpt          { font-family: var(--ath-font-body, sans-serif); font-size: 0.9375rem; line-height: 1.65; color: var(--ath-reflection); margin: 0 0 1.25rem; }

.ath-card__cta,
.ath-room-cta { align-self: flex-start; margin-top: auto; }

/* Pill list — shared base (used by room amenities + experience inclusions).
   Legacy .ath-room-amenit* selectors are kept as aliases so widgets that still
   emit the old class names (e.g. Rooms Scroll Reveal) render identically. */
.ath-card__pills,
.ath-room-amenities {
	list-style:    none;
	margin:        0 0 1.5rem;
	padding:       0;
	display:       flex;
	flex-wrap:     wrap;
	gap:           0.5rem;
	min-height:    2.25rem;
	align-content: flex-start;
}
.ath-card__pill,
.ath-room-amenity {
	display:        inline-flex;
	align-items:    center;
	gap:            0.35rem;
	font-family:    var(--ath-font-body, sans-serif);
	font-size:      0.8125rem;
	font-weight:    500;
	color:          var(--ath-arctic-navy);
	border:         1px solid var(--ath-arctic-mist);
	border-radius:  100px;
	padding:        0.3rem 0.75rem;
	background:     transparent;
	transition:     background 0.2s ease, border-color 0.2s ease;
}
.ath-card__pill:hover,
.ath-room-amenity:hover { background: var(--ath-focus-tint); border-color: var(--ath-arctic-blue); }

.ath-card__pill-check,
.ath-room-amenity__check {
	display:       inline-block;
	flex-shrink:   0;
	width:         0.875rem;
	height:        0.875rem;
	border:        1.5px solid var(--ath-arctic-blue);
	border-radius: 50%;
	position:      relative;
}
.ath-card__pill-check::after,
.ath-room-amenity__check::after {
	content:    '';
	position:   absolute;
	top:        50%;
	left:       50%;
	transform:  translate(-55%, -60%) rotate(45deg);
	width:      0.25rem;
	height:     0.4rem;
	border-right:  1.5px solid var(--ath-arctic-blue);
	border-bottom: 1.5px solid var(--ath-arctic-blue);
}

/* ── Room-specific modifier: price ── */
.ath-card-item--room .ath-room-price        { display: inline-flex; align-items: baseline; gap: 0.25rem; font-family: var(--ath-font-body, sans-serif); font-weight: 600; color: var(--ath-arctic-blue); margin-bottom: 0.75rem; }
.ath-card-item--room .ath-room-price__night { font-size: 0.8em; font-weight: 400; opacity: 0.7; }

/* ── Experience-specific modifier: duration ── */
.ath-card-item--experience .ath-exp-duration { display: inline-flex; align-items: baseline; gap: 0.25rem; font-family: var(--ath-font-body, sans-serif); font-weight: 600; color: var(--ath-arctic-blue); margin-bottom: 0.75rem; }
/* ─────────────────────────────────────────────────────────────────────────────
   12. ACCESSIBILITY — REDUCED MOTION
   Overrides all animation and transition durations globally.
   GSAP also respects prefers-reduced-motion via the Motion Engine guard.
   ───────────────────────────────────────────────────────────────────────────── */

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

	.ath-reveal,
	.ath-image-reveal,
	.ath-card-reveal,
	.ath-text-reveal,
	.ath-line-reveal__line,
	.ath-blur-group-item,
	.ath-slide-reveal,
	.ath-scale-reveal {
		transform: none !important;
		opacity:   1 !important;
		filter:    none !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Experience Grid — optional header above the grid
   ───────────────────────────────────────────────────────────────────────────── */
.ath-exp-grid-section {
	/* Extra breathing room above the whole section when a header is shown. */
	padding-top: clamp(3rem, 6vw, 6rem);
}
.ath-exp-grid-header {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	max-width: 46rem;
	margin: 0 auto;
	padding-top: clamp(2rem, 4vw, 4rem);
}
.ath-exp-grid-header__eyebrow {
	font-family: var(--ath-font-eyebrow, sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ath-arctic-blue, #5289AD);
	margin-bottom: 1rem;
}
.ath-exp-grid-header__title {
	font-family: var(--ath-font-heading, serif);
	color: var(--ath-arctic-navy, #243C4C);
	font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
	line-height: 1.05;
	margin: 0;
}
.ath-exp-grid-header__title em {
	font-style: italic;
}
.ath-exp-grid-header__desc {
	font-family: var(--ath-font-body, sans-serif);
	color: var(--ath-reflection, #698696);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 1.25rem 0 0;
}