/**
 * Atria Travel Theme — assets/css/single-daytour.css
 *
 * Styles for single-atria_daytour.php (Day Tour detail page).
 * Follows the same Atria Journey design language as single-package.css,
 * adapted for day tours: no hotel class, single itinerary text, dt- prefix.
 *
 * Sections:
 *   dt-hero        — 76vh full-bleed hero
 *   dt-bar         — sticky enquiry bar
 *   dt-overview    — two-column overview + at-a-glance sidebar
 *   dt-glance      — sidebar card (At a Glance)
 *   dt-estimator   — travelers-only estimator inside sidebar
 *   dt-itinerary   — single rich-text itinerary (sand background)
 *   dt-incl        — inclusions / exclusions (dark background)
 *   dt-related     — related day tour cards
 *   dt-cta         — dark enquiry CTA with form
 *
 * @package atria-travel
 */

/* ─────────────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────────────── */

.dt-hero {
	position: relative;
	min-height: clamp( 520px, 76vh, 800px );
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.dt-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dt-hero__bg--placeholder {
	background: var( --atria-ink, #1A1715 );
}

.dt-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba( 15, 12, 10, .85 ) 0%,
		rgba( 15, 12, 10, .20 ) 55%,
		rgba( 15, 12, 10, .35 ) 100%
	);
}

.dt-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block-end: clamp( 48px, 7vh, 84px );
}

.dt-hero__crumb {
	margin-block-end: 18px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba( 247, 241, 231, .72 );
}

.dt-hero__crumb a {
	color: inherit;
	text-decoration: none;
}
.dt-hero__crumb a:hover { color: #D8B97E; }

.dt-hero__crumb-active { color: #D8B97E; }

.dt-hero__title {
	margin: 0;
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: clamp( 42px, 6.2vw, 86px );
	font-weight: 500;
	line-height: 1.02;
	max-width: 16ch;
	color: #F7F1E7;
	text-shadow: 0 2px 30px rgba( 0, 0, 0, .4 );
}

.dt-hero__specs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-block-start: 24px;
}

.dt-hero__spec {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba( 247, 241, 231, .90 );
	font-size: 14px;
	letter-spacing: .04em;
}

/* ─────────────────────────────────────────────────────────────────────────
   STICKY BAR
   ───────────────────────────────────────────────────────────────────────── */

.dt-bar {
	position: sticky;
	top: 72px;
	z-index: 40;
	background: rgba( 245, 239, 230, .96 );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid rgba( 26, 23, 21, .10 );
}

.dt-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
}

.dt-bar__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.dt-bar__from {
	font-size: 12px;
	color: var( --atria-taupe-light, #9a8a72 );
	letter-spacing: .06em;
	text-transform: uppercase;
}

.dt-bar__amount {
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 30px;
	font-weight: 600;
	color: var( --atria-gold-deep, #8a6a38 );
	line-height: 1;
}

.dt-bar__unit {
	font-size: 12.5px;
	color: var( --atria-taupe, #7a6f62 );
}

.dt-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dt-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 13px 26px;
	transition: background .2s, border-color .2s, color .2s;
}

.dt-bar__btn--primary {
	background: var( --atria-gold, #B8915A );
	color: var( --atria-ink, #1A1715 );
}
.dt-bar__btn--primary:hover { background: var( --atria-gold-light, #C9A86A ); }

.dt-bar__btn--outline {
	background: transparent;
	border: 1px solid rgba( 26, 23, 21, .30 );
	color: var( --atria-stone, #3A332D );
}
.dt-bar__btn--outline:hover {
	border-color: var( --atria-gold, #B8915A );
	color: var( --atria-gold-deep, #8a6a38 );
}

/* ─────────────────────────────────────────────────────────────────────────
   OVERVIEW + AT A GLANCE  (two-column)
   ───────────────────────────────────────────────────────────────────────── */

.dt-overview {
	/* Top padding only. Bottom padding is intentionally 0:
	   the section height follows the taller column (left or sidebar),
	   and the next coloured band supplies its own padding-block-start.
	   This eliminates the large white gap that appears on sparse products
	   when the sidebar is taller than the left column. */
	padding-block-start: clamp( 56px, 7vw, 100px );
	padding-block-end:   0;
}

.dt-overview__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 40px, 5vw, 80px );
	align-items: start;
}

@media ( min-width: 860px ) {
	.dt-overview__grid {
		grid-template-columns: 1fr 340px;
	}
}

/* Main column */
.dt-overview__label {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var( --atria-gold, #B8915A );
}

.dt-overview__heading {
	margin: 0 0 24px;
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: clamp( 30px, 3.6vw, 46px );
	font-weight: 500;
	line-height: 1.1;
	color: var( --atria-ink, #1A1715 );
}

.dt-overview__prose {
	font-size: 16.5px;
	line-height: 1.8;
	color: #4a423a;
	font-weight: 300;
}
.dt-overview__prose p { margin: 0 0 18px; }
.dt-overview__prose p:last-child { margin-block-end: 0; }

/* Tour Highlights */
.dt-overview__hl-title {
	margin: 40px 0 20px;
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 24px;
	font-weight: 600;
	color: var( --atria-ink, #1A1715 );
}

.dt-overview__highlights {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 16px 28px;
}

.dt-overview__hl-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.dt-overview__hl-item > span:last-child {
	font-size: 15px;
	line-height: 1.5;
	color: var( --atria-stone, #3A332D );
}

/* ─────────────────────────────────────────────────────────────────────────
   AT A GLANCE SIDEBAR
   ───────────────────────────────────────────────────────────────────────── */

.dt-glance {
	background: #fff;
	border: 1px solid rgba( 26, 23, 21, .10 );
	padding: clamp( 20px, 2.2vw, 28px );
}

@media ( min-width: 1024px ) {
	.dt-glance {
		position: sticky;
		top: 150px;
	}
}

.dt-glance__heading {
	margin: 0 0 22px;
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 24px;
	font-weight: 600;
	color: var( --atria-ink, #1A1715 );
}

.dt-glance__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 0 20px;
	padding: 0;
}

.dt-glance__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid rgba( 26, 23, 21, .10 );
}
.dt-glance__row:last-child { border-bottom: none; }

.dt-glance__row dt {
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --atria-taupe-light, #9a8a72 );
}

.dt-glance__row dd {
	font-size: 15px;
	color: var( --atria-ink, #1A1715 );
	font-weight: 500;
	text-align: right;
	margin: 0;
}

.dt-glance__row--price dd {
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 24px;
	font-weight: 600;
	color: var( --atria-gold-deep, #8a6a38 );
	line-height: 1;
}

.dt-glance__price-val {
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 24px;
	font-weight: 600;
	color: var( --atria-gold-deep, #8a6a38 );
	line-height: 1;
}

.dt-glance__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: var( --atria-gold, #B8915A );
	color: var( --atria-ink, #1A1715 );
	padding: 16px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-block-end: 12px;
	transition: background .2s;
}
.dt-glance__cta:hover { background: var( --atria-gold-light, #C9A86A ); }

.dt-glance__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	background: transparent;
	border: 1px solid rgba( 26, 23, 21, .25 );
	color: var( --atria-stone, #3A332D );
	padding: 15px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: border-color .2s, color .2s;
}
.dt-glance__wa:hover {
	border-color: #1f8a4c;
	color: #1f8a4c;
}

/* ─────────────────────────────────────────────────────────────────────────
   TRAVELERS ESTIMATOR (inside sidebar — travelers only, no hotel class)
   ───────────────────────────────────────────────────────────────────────── */

.dt-estimator {
	margin-block: 14px;
	padding: 16px;
	background: var( --atria-sand-band, #EFE7D9 );
	border: 1px solid rgba( 26, 23, 21, .08 );
}

.dt-estimator__label {
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --atria-taupe-light, #9a8a72 );
}

.dt-estimator .atria-estimator__select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba( 26, 23, 21, .20 );
	background: #fff;
	font-size: 14px;
	color: var( --atria-ink, #1A1715 );
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a8a72' stroke-width='1.5' fill='none'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-inline-end: 36px;
}

.dt-estimator .atria-estimator__field-label {
	display: block;
	font-size: 12px;
	color: var( --atria-taupe-light, #9a8a72 );
	margin-block-end: 6px;
	letter-spacing: .04em;
}

.dt-estimator .atria-estimator__field {
	margin-block-end: 12px;
}

/* Result output */
#atria-estimator-result .atria-estimator__result-total {
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#atria-estimator-result .atria-estimator__result-label {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --atria-taupe-light, #9a8a72 );
}

#atria-estimator-result .atria-estimator__result-price {
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 26px;
	font-weight: 600;
	color: var( --atria-gold-deep, #8a6a38 );
	line-height: 1;
}

#atria-estimator-result .atria-estimator__result-breakdown {
	font-size: 12px;
	color: var( --atria-taupe-light, #9a8a72 );
}

#atria-estimator-result .atria-estimator__quote {
	margin: 10px 0 0;
	font-size: 13px;
	color: var( --atria-stone, #3A332D );
	line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────
   ITINERARY  (single rich-text, sand background)
   ───────────────────────────────────────────────────────────────────────── */

.dt-itinerary {
	background: var( --atria-sand-band, #EFE7D9 );
	border-top: 1px solid rgba( 26, 23, 21, .08 );
	border-bottom: 1px solid rgba( 26, 23, 21, .08 );
	padding-block: clamp( 56px, 7vw, 100px );
}

.dt-iti-inner {
	max-width: 980px;
	margin-inline: auto;
}

.dt-iti__label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var( --atria-gold, #B8915A );
}

.dt-iti__title {
	margin: 0 0 clamp( 24px, 3vw, 36px );
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: clamp( 30px, 4vw, 50px );
	font-weight: 500;
	line-height: 1.06;
	color: var( --atria-ink, #1A1715 );
}

.dt-iti__prose {
	font-size: 16px;
	line-height: 1.85;
	color: #4a423a;
	font-weight: 300;
}

.dt-iti__prose p { margin: 0 0 18px; }
.dt-iti__prose p:last-child { margin-block-end: 0; }

.dt-iti__prose h3,
.dt-iti__prose h4 {
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-weight: 600;
	color: var( --atria-ink, #1A1715 );
	margin: 28px 0 12px;
}

.dt-iti__prose ul,
.dt-iti__prose ol {
	padding-inline-start: 20px;
	margin-block-end: 18px;
}

.dt-iti__prose li { margin-block-end: 8px; }

/* ─────────────────────────────────────────────────────────────────────────
   INCLUSIONS / EXCLUSIONS  (dark background)
   ───────────────────────────────────────────────────────────────────────── */

.dt-incl {
	background: var(--atria-ink-deep);
	color: var(--color-text-on-dark);
	padding-block: clamp( 56px, 7vw, 100px );
}

.dt-incl__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: clamp( 36px, 5vw, 72px );
}

.dt-incl__col-label {
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
}

/* Fallback only applies while --color-include/--color-exclude are unset — a
   chosen color palette prints them at :root, overriding every fallback here. */
.dt-incl__col-label--in { color: var( --color-include, var( --atria-gold-light ) ); }
.dt-incl__col-label--ex { color: color-mix( in srgb, var( --color-exclude, var( --atria-ink-contrast ) ) 50%, transparent ); }

.dt-incl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dt-incl__item {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.dt-incl__icon--in {
	color: var( --color-include, var( --atria-gold-light ) );
	flex: none;
	margin-block-start: 2px;
}

.dt-incl__icon--ex {
	color: color-mix( in srgb, var( --color-exclude, var( --atria-ink-contrast ) ) 40%, transparent );
	flex: none;
	margin-block-start: 2px;
}

.dt-incl__item > span:last-child {
	font-size: 15.5px;
	line-height: 1.6;
	font-weight: 300;
}

.dt-incl__item:not( .dt-incl__item--ex ) > span:last-child {
	color: rgba( 247, 241, 231, .86 );
}

.dt-incl__item--ex > span:last-child {
	color: rgba( 247, 241, 231, .60 );
}

/* ─────────────────────────────────────────────────────────────────────────
   RELATED DAY TOURS
   ───────────────────────────────────────────────────────────────────────── */

.dt-related {
	padding-block: clamp( 56px, 7vw, 100px );
}

.dt-related__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-block-end: clamp( 28px, 3.5vw, 44px );
}

.dt-related__title {
	margin: 0;
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: clamp( 28px, 3.6vw, 44px );
	font-weight: 500;
	line-height: 1.06;
	color: var( --atria-ink, #1A1715 );
}

.dt-related__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var( --atria-gold-deep, #8a6a38 );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	transition: gap .25s;
}
.dt-related__all:hover { gap: 16px; }

.dt-related__grid {
	display: grid;
	/* auto-fill (not auto-fit) + a fixed upper bound keeps cards from
	   stretching to fill the row when there are only 1-2 related items;
	   unused tracks just stay empty instead, and the row centers. */
	grid-template-columns: repeat( auto-fill, minmax( 280px, 340px ) );
	justify-content: center;
	gap: clamp( 20px, 2.4vw, 34px );
}

/* Card */
.dt-related-card {
	display: block;
	text-decoration: none;
	background: #fff;
	border: 1px solid rgba( 26, 23, 21, .08 );
	color: inherit;
	transition: box-shadow .25s, transform .25s;
}
.dt-related-card:hover {
	box-shadow: 0 16px 38px rgba( 26, 23, 21, .13 );
	transform: translateY( -4px );
}

.dt-related-card__img {
	display: block;
	width: 100%;
	height: clamp( 220px, 20vw, 260px );
	object-fit: cover;
}

.dt-related-card__body { padding: 22px 24px 26px; }

.dt-related-card__title {
	margin: 0 0 6px;
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 23px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --atria-ink, #1A1715 );
}

.dt-related-card__meta {
	margin: 0 0 16px;
	font-size: 13px;
	letter-spacing: .06em;
	color: var( --atria-taupe, #7a6f62 );
}

.dt-related-card__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba( 26, 23, 21, .10 );
	padding-block-start: 14px;
}

.dt-related-card__from {
	font-size: 12px;
	color: var( --atria-taupe-light, #9a8a72 );
}

.dt-related-card__price {
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: 22px;
	font-weight: 600;
	color: var( --atria-gold-deep, #8a6a38 );
}

.dt-related-card__price--por {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var( --atria-taupe-light, #9a8a72 );
}

/* ─────────────────────────────────────────────────────────────────────────
   ENQUIRY CTA  (dark — background image + form)
   ───────────────────────────────────────────────────────────────────────── */

.dt-cta {
	position: relative;
	background: var( --atria-ink, #1A1715 );
	color: #F7F1E7;
	overflow: hidden;
}

.dt-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .28;
}

.dt-cta__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba( 20, 16, 12, .92 ) 0%,
		rgba( 20, 16, 12, .62 ) 70%,
		rgba( 20, 16, 12, .40 ) 100%
	);
}

.dt-cta__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp( 60px, 8vw, 116px );
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 40px, 5vw, 72px );
	align-items: start;
}

@media ( min-width: 860px ) {
	.dt-cta__inner { grid-template-columns: 1fr 1fr; }
}

.dt-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .30em;
	text-transform: uppercase;
	color: var( --atria-gold-light, #C9A86A );
}

.dt-cta__title {
	margin: 0;
	font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
	font-size: clamp( 32px, 4.8vw, 60px );
	font-weight: 500;
	line-height: 1.05;
	color: #F7F1E7;
	max-width: 16ch;
}

.dt-cta__sub {
	margin: 22px 0 0;
	font-size: clamp( 15px, 1.4vw, 18px );
	line-height: 1.7;
	color: rgba( 247, 241, 231, .78 );
	max-width: 52ch;
	font-weight: 300;
}

.dt-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-start: 38px;
}

.dt-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 18px 38px;
	transition: background .2s, color .2s, border-color .2s;
}

.dt-cta__btn--primary {
	background: var( --atria-gold, #B8915A );
	color: var( --atria-ink, #1A1715 );
}
.dt-cta__btn--primary:hover { background: var( --atria-gold-light, #C9A86A ); }

.dt-cta__btn--wa {
	background: transparent;
	border: 1px solid rgba( 247, 241, 231, .45 );
	color: #F7F1E7;
	padding-inline: 32px;
}
.dt-cta__btn--wa:hover { background: rgba( 247, 241, 231, .10 ); }

/* Enquiry form colour adjustments inside the dark section */
.dt-cta .atria-enquiry-form label,
.dt-cta .atria-enquiry__label {
	color: rgba( 247, 241, 231, .80 );
}

.dt-cta .atria-enquiry-form input,
.dt-cta .atria-enquiry-form select,
.dt-cta .atria-enquiry-form textarea {
	background: rgba( 255, 255, 255, .08 );
	border-color: rgba( 247, 241, 231, .25 );
	color: #F7F1E7;
}

.dt-cta .atria-enquiry-form input::placeholder,
.dt-cta .atria-enquiry-form textarea::placeholder {
	color: rgba( 247, 241, 231, .40 );
}