/**
 * Layout "grand" (the multi-day tour pages, preview 2026-09-28; inc/catalog.php tgt_catalog_layout()).
 * A private journey laid out like a travel house's brochure: the trip's photo fills the opening, the title over
 * it in a thin gold frame, the route in a glass bar; a map of the north of Morocco beside the days, where the
 * route is drawn as the visitor reads; the places of the nights in photos; the day being read on the booking
 * bar. Same words and headings as the page without it; the map and the photos are decoration (aria-hidden).
 * Works with the "grand" motion (catalog-motion-grand.css), which it brings.
 */

/* ---------------------------------------------------------------- the opening: the photo behind the title */
.tgc--l-grand .tgc-hero--roadtrip {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(880px, calc(100vh - var(--header-h, 76px)));
	padding: 56px 24px 34px;
	background: #141b2f;
}
.tgc--l-grand .tgc-hero--roadtrip::after {
	content: '';
	position: absolute;
	inset: 18px;
	z-index: 1;
	border: 1px solid rgba(232, 189, 120, .32);
	border-radius: 22px;
	pointer-events: none;
}
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__inner,
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__grid { position: static; }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__inner { width: 100%; max-width: 1200px; }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__grid { display: block; }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__copy { position: relative; z-index: 2; max-width: 640px; }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__title { font-size: clamp(36px, 2.4vw + 18px, 58px); text-shadow: 0 2px 24px rgba(10, 14, 26, .35); }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__lead { color: rgba(255, 255, 255, .88); }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__meta { background: rgba(20, 27, 47, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo { position: absolute; inset: 0; z-index: 0; margin: 0; max-width: none; }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo::before { display: none; }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(20, 27, 47, .95) 0%, rgba(20, 27, 47, .84) 32%, rgba(20, 27, 47, .42) 60%, rgba(20, 27, 47, .1) 100%),
		linear-gradient(0deg, rgba(20, 27, 47, .94) 0%, rgba(20, 27, 47, 0) 42%);
}
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo .tgc-g-kb { position: absolute; inset: 0; border-radius: 0; }
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: 62% 50%;
}
.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo figcaption { z-index: 2; right: 40px; bottom: auto; left: auto; top: 40px; }
.tgc--l-grand .tgc-routeline {
	position: relative;
	z-index: 2;
	margin-top: 40px;
	padding: 18px 22px 16px;
	border: 1px solid rgba(232, 189, 120, .26);
	border-radius: 18px;
	background: rgba(20, 27, 47, .5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------- the days beside the map */
.tgc--l-grand .tgc-journey { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 0 64px; align-items: start; max-width: 1200px; margin: 0 auto; }
.tgc--l-grand .tgc-journey .tgc-days { max-width: none; margin: 0; }
.tgc--l-grand .tgc-journey .tgc-day { grid-template-columns: 76px minmax(0, 1fr); }
.tgc--l-grand .tgc-journey .tgc-day__photo { grid-column: 2; max-width: none; margin-top: 22px; }
.tgc-jmap { position: sticky; top: calc(var(--header-h, 76px) + 28px); margin: 0; }
.tgc-jmap__card {
	position: relative;
	padding: 18px 18px 14px;
	border: 1px solid #e6d6b8;
	border-radius: 22px;
	background: #fbf6ec;
	box-shadow: 0 24px 50px rgba(27, 32, 51, .12);
}
.tgc-jmap__card::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(200, 164, 74, .28); border-radius: 16px; pointer-events: none; }
.tgc-jmap__kicker { margin: 2px 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #945614; }
.tgc-jmap svg { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--header-h, 76px) - 190px); border-radius: 14px; }
.tgc-jmap__now { display: flex; align-items: baseline; gap: 10px; min-height: 44px; margin: 12px 4px 2px; }
.tgc-jmap__now strong { flex: none; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 400; color: #202b4d; }
.tgc-jmap__now span { font-size: 13.5px; line-height: 1.45; color: #5d5648; }
.tgc-jmap__bar { display: flex; gap: 4px; margin: 6px 4px 0; }
.tgc-jmap__bar i { flex: 1; height: 3px; border-radius: 3px; background: #e6d6b8; transition: background .5s ease; }
.tgc-jmap__bar i.is-on { background: #c8a44a; }

/* The map itself. */
.tgc-jmap .m-sea { fill: #e7edf1; }
.tgc-jmap .m-land { fill: #f4ead8; stroke: #d8c3a0; stroke-width: 1.4; stroke-linejoin: round; }
.tgc-jmap .m-spain { fill: #efe6d6; stroke: #d8c3a0; stroke-width: 1.2; }
.tgc-jmap .m-ridge { fill: none; stroke: #c9ae84; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.tgc-jmap .m-dune { fill: none; stroke: #d9a45c; stroke-width: 1.3; stroke-linecap: round; opacity: .7; }
.tgc-jmap .m-sea-label { fill: #7f97aa; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 17px; letter-spacing: .12em; }
.tgc-jmap .m-area-label { fill: #a0845a; font-family: 'Trebuchet MS', Tahoma, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.tgc-jmap .m-route-all { fill: none; stroke: #b99b6a; stroke-width: 2.2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .8; }
.tgc-jmap .m-route { fill: none; stroke: #c8a44a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); }
.tgc-jmap .m-stop { fill: #fffdf9; stroke: #202b4d; stroke-width: 2.2; transition: fill .4s ease, r .4s ease; }
.tgc-jmap .m-stop.is-way { stroke-width: 1.6; }
.tgc-jmap .m-stop.is-done { fill: #c8a44a; stroke: #945614; }
.tgc-jmap .m-label { fill: #1b2033; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; paint-order: stroke; stroke: #f4ead8; stroke-width: 4px; stroke-linejoin: round; }
.tgc-jmap .m-label.is-way { fill: #5d5648; font-family: 'Trebuchet MS', Tahoma, sans-serif; font-size: 11.5px; }
.tgc-jmap .m-here { fill: #c8a44a; stroke: #fff; stroke-width: 2.5; transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); }
.tgc-jmap .m-here-ring { fill: none; stroke: #c8a44a; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: tgc-jmap-pulse 2.2s ease-out infinite; }
.tgc-jmap .m-compass { fill: none; stroke: #b99b6a; stroke-width: 1.2; }
.tgc-jmap .m-compass-n { fill: #945614; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; }
@keyframes tgc-jmap-pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---------------------------------------------------------------- the places of the nights, in photos */
.tgc--l-grand .tgc-stay { overflow: hidden; }
.tgc-stay__img { display: block; margin: -22px -22px 18px; aspect-ratio: 16 / 10; overflow: hidden; background: #efe3cf; }
.tgc-stay__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .6, .2, 1); }
.tgc--l-grand .tgc-stay:hover .tgc-stay__img img { transform: scale(1.05); }

/* ---------------------------------------------------------------- the day on the booking bar */
.tgc-sticky__day { display: none; margin: 0; min-width: 0; }
.tgc-sticky__day b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #e8bd78; }
.tgc-sticky__day span { display: block; overflow: hidden; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.tgc-sticky.is-day .tgc-sticky__day { display: block; flex: 1; }
.tgc-sticky.is-day .tgc-sticky__price,
.tgc-sticky.is-day .tgc-sticky__meta { display: none; }

/* ---------------------------------------------------------------- tablets and phones */
@media (max-width: 1099px) {
	.tgc--l-grand .tgc-journey { grid-template-columns: minmax(0, 1fr); }
	.tgc-jmap { position: static; max-width: 560px; margin: 0 auto 44px; }
	.tgc-jmap svg { max-height: 560px; }
}
@media (max-width: 899px) {
	.tgc--l-grand .tgc-hero--roadtrip { display: block; min-height: 0; padding: 0 16px 28px; }
	.tgc--l-grand .tgc-hero--roadtrip::after { display: none; }
	.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__grid { display: flex; flex-direction: column; align-items: stretch; }
	.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo { position: relative; inset: auto; order: -1; height: 56vh; min-height: 280px; max-height: 470px; margin: 0 -16px; }
	.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__photo::after { background: linear-gradient(0deg, #141b2f 0%, rgba(20, 27, 47, .6) 28%, rgba(20, 27, 47, 0) 62%); }
	.tgc--l-grand .tgc-hero--roadtrip .tgc-hero__copy { margin-top: -84px; }
	.tgc--l-grand .tgc-routeline { margin-top: 30px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.tgc-jmap .m-route, .tgc-jmap .m-here { transition: none; }
	.tgc-jmap .m-here-ring { animation: none; opacity: 0; }
}