/* Terrain360 media (3.0): hero, card, roundel, chip, thumb and journey strip, one stylesheet
 * for every surface. Replaces t360-journey.css and the per-template copies. Only our
 * poster, roundel and strip are styled: the Terrain360 viewer inside the iframe is not ours. */

:root {
	--t360-scrim-rgb: 20, 12, 6;
	--t360-on-dark: #FAF8F5;
	--t360-on-dark-soft: rgba(250, 248, 245, 0.84);
	--t360-label: rgba(20, 12, 6, 0.62);
	--t360-bar: rgba(20, 12, 6, 0.9);
	--t360-gutter: max(1.25rem, calc(50vw - 620px));
}

/* ---------- hero ---------- */
.t360-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #221610;
	color: var(--t360-on-dark);
}
.t360-hero__media {
	position: relative;
	height: clamp(460px, 72vh, 760px);
	overflow: hidden;
	background: #221610;
}
.t360-hero--band .t360-hero__media { height: clamp(320px, 52vh, 560px); }
.t360-hero--none .t360-hero__media {
	height: clamp(360px, 48vh, 520px);
	background: linear-gradient(135deg, #2C1810 0%, #3D2E1F 100%);
}
.t360-hero__img,
.t360-hero__media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.t360-hero__img { object-fit: cover; }
.t360-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top,
		rgba(var(--t360-scrim-rgb), 0.93) 0%,
		rgba(var(--t360-scrim-rgb), 0.78) 22%,
		rgba(var(--t360-scrim-rgb), 0.52) 45%,
		rgba(var(--t360-scrim-rgb), 0.2) 70%,
		rgba(var(--t360-scrim-rgb), 0.04) 100%);
}
/* review_stills.py measured this still's text band too bright for the standard scrim. */
.t360-hero--scrim-strong .t360-hero__scrim {
	background: linear-gradient(to top,
		rgba(var(--t360-scrim-rgb), 0.95) 0%,
		rgba(var(--t360-scrim-rgb), 0.88) 26%,
		rgba(var(--t360-scrim-rgb), 0.74) 50%,
		rgba(var(--t360-scrim-rgb), 0.42) 75%,
		rgba(var(--t360-scrim-rgb), 0.12) 100%);
}
.t360-hero__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 var(--t360-gutter) clamp(1.5rem, 4vh, 2.75rem);
	pointer-events: none;
}
.t360-hero__body > * { max-width: 44rem; pointer-events: auto; }
.t360-hero__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--t360-on-dark-soft);
}
.t360-hero__title {
	margin: 0 0 0.6rem;
	font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
	font-weight: 700;
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.06;
	color: #fff;
	text-shadow: 0 1px 22px rgba(var(--t360-scrim-rgb), 0.55);
}
.t360-hero--band .t360-hero__title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.t360-hero__lede {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--t360-on-dark);
	text-shadow: 0 1px 16px rgba(var(--t360-scrim-rgb), 0.6);
}
.t360-hero__caption { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--t360-on-dark-soft); }
.t360-hero__extra { margin-top: 0.9rem; }
.t360-hero__pin {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	border: 3px solid #fff;
	background: #b8431f;
	box-shadow: 0 0 0 8px rgba(184, 67, 31, 0.35);
}
.t360-hero.is-armed .t360-hero__media { cursor: pointer; }
/* Once the tour is mounted the heading stays in the page, below the frame. */
.t360-hero.is-live .t360-hero__img,
.t360-hero.is-live .t360-hero__scrim,
.t360-hero.is-live .t360-hero__pin,
.t360-hero.is-live .t360-enter,
.t360-hero.is-live .t360-chip,
.t360-hero.is-live .t360-credit { display: none; }
.t360-hero.is-live .t360-hero__body { position: static; padding-top: 1.25rem; }

/* ---------- the roundel (the whole frame is the button; this is its visible face) ---------- */
.t360-enter {
	position: absolute;
	z-index: 3;
	right: var(--t360-gutter);
	bottom: clamp(1.5rem, 5vh, 3rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--t360-on-dark);
	text-decoration: none;
}
.t360-enter:hover,
.t360-enter:focus { color: var(--t360-on-dark); text-decoration: none; }
.t360-enter:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 6px; }
.t360-enter__ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	border: 2.5px solid rgba(250, 248, 245, 0.92);
	background: var(--t360-label);
	font-weight: 700;
	font-size: 1.3rem;
	transition: transform 0.18s ease, background 0.18s ease;
}
.t360-enter__label {
	padding: 0.5rem 1rem;
	border-radius: 2px;
	background: var(--t360-bar);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
}
.t360-enter__hint {
	padding: 0.25rem 0.7rem;
	background: var(--t360-bar);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t360-on-dark-soft);
	white-space: nowrap;
}
.t360-enter:hover .t360-enter__ring,
.t360-enter:focus-visible .t360-enter__ring {
	transform: scale(1.06);
	background: rgba(var(--t360-scrim-rgb), 0.96);
}

/* ---------- chip and credit ---------- */
.t360-chip {
	position: absolute;
	z-index: 3;
	left: 0.9rem;
	top: 0.9rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(250, 248, 245, 0.35);
	background: var(--t360-bar);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
}
.t360-hero .t360-chip { left: var(--t360-gutter); top: 1.1rem; }
.t360-credit {
	position: absolute;
	z-index: 3;
	right: 0.9rem;
	top: 0.9rem;
	padding: 0.2rem 0.55rem;
	background: var(--t360-bar);
	color: #FAF8F5;
	font-size: 0.68rem;
}

/* ---------- card ---------- */
.t360-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(44, 24, 16, 0.1);
	border-radius: 10px;
	background: #fff;
}
.t360-card:focus-within { outline: 3px solid #8B6914; outline-offset: 2px; }
.t360-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E8DFD0; }
.t360-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.t360-card:hover .t360-card__img { transform: scale(1.04); }
.t360-card__blank { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #E8DFD0 0 12px, #EFE7DA 12px 24px); }
.t360-card__badge {
	position: absolute;
	z-index: 2;
	right: 0.6rem;
	top: 0.6rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, 0.9);
	background: rgba(20, 12, 6, 0.62);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
}
.t360-card .t360-chip { left: 0.6rem; top: 0.6rem; padding: 0.2rem 0.55rem; font-size: 0.7rem; }
.t360-card .t360-credit { top: auto; bottom: 0.5rem; right: 0.5rem; font-size: 0.62rem; }
.t360-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.95rem 0.95rem; }
.t360-card__eyebrow { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7A5C12; }
.t360-card__title { margin: 0; font-family: var(--font-heading, 'Playfair Display', Georgia, serif); font-size: 1.02rem; line-height: 1.25; color: #2C1810; }
.t360-card__link { color: inherit; text-decoration: none; }
.t360-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.t360-card__link:focus-visible { outline: none; }
.t360-card:hover .t360-card__title { color: #7A5C12; }
.t360-card__meta { margin: 0; font-size: 0.8rem; color: #5a3a20; }
.t360-card__tour {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #8a4b1c;
	text-decoration: none;
}
.t360-card__tour:hover { text-decoration: underline; }
/* Overlay variant (Explore chapter cards): the text sits on a 4:5 still. */
.t360-card--overlay { border: 0; border-radius: 8px; background: #221610; }
.t360-card--overlay .t360-card__media { aspect-ratio: 4 / 5; }
.t360-card--overlay .t360-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 12, 6, 0.92), rgba(20, 12, 6, 0.1) 62%);
}
.t360-card--overlay .t360-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0.75rem 0.8rem; }
.t360-card--overlay .t360-card__eyebrow { color: rgba(250, 248, 245, 0.9); }
.t360-card--overlay .t360-card__title,
.t360-card--overlay:hover .t360-card__title { color: #fff; font-size: 1.05rem; }
.t360-card--overlay .t360-card__meta { color: rgba(250, 248, 245, 0.88); }

/* ---------- thumb (archive rows) ---------- */
.t360-thumb { position: relative; display: block; flex: 0 0 auto; overflow: hidden; border-radius: 6px; background: #E8DFD0; }
.t360-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.t360-thumb .t360-chip { left: 0.3rem; top: 0.3rem; padding: 0.1rem 0.4rem; font-size: 0.6rem; }
.t360-thumb--far { display: flex; align-items: center; justify-content: center; padding: 0.3rem; background: #F2EDE6; }
.t360-thumb--far .t360-chip { position: static; border-color: rgba(138, 75, 28, 0.35); background: #fff; color: #5a3a20; }

/* ---------- journey block (ported from t360-journey.css) ---------- */
.t360j-narrow { max-width: 960px; margin: 0 auto; padding: 0 1rem; }
.t360j-pointcard { max-width: 460px; margin: 2rem auto; }
.t360j-inner { min-width: 0; }
.t360j {
	margin: 2.25rem 0;
	padding: 1.5rem 1.5rem 1.25rem;
	border-radius: 12px;
	background: #221610;
	color: #f4ece1;
	box-shadow: 0 10px 30px rgba(44, 24, 16, 0.25);
}
.t360j--hero { margin: 0; padding: 2rem clamp(1rem, 4vw, 3rem) 1.6rem; border-radius: 0; box-shadow: none; }
.t360j--hero .t360j-inner { max-width: 1240px; margin: 0 auto; }
.t360j--hero .t360j-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.t360j--hero .t360j-tile { width: 152px; }
.t360j--hero .t360j-thumb img,
.t360j--hero .t360j-blank { width: 152px; height: 152px; }
.t360j-eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a227; }
.t360j-title { margin: 0 0 0.4rem; font-family: 'Playfair Display', Georgia, serif; font-size: 1.55rem; line-height: 1.2; color: #faf6ed; }
.t360j-meta { margin: 0 0 1rem; font-size: 0.82rem; color: rgba(244, 236, 225, 0.8); }
.t360j-disclose { display: block; margin-top: 0.25rem; font-size: 0.75rem; font-style: italic; color: rgba(244, 236, 225, 0.72); }
.t360j-viewer { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.t360j-viewer.is-armed { cursor: pointer; }
.t360j-poster,
.t360j-viewer iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.t360j-viewer .t360-enter { right: 50%; bottom: 50%; transform: translate(50%, 50%); }
.t360j-viewer.is-live .t360-enter,
.t360j-viewer.is-live .t360j-poster { display: none; }
.t360j-strip {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	padding: 1rem 0 0.5rem;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(201, 162, 39, 0.5) transparent;
}
.t360j-tile { position: relative; flex: 0 0 auto; width: 132px; text-decoration: none; scroll-snap-align: start; }
.t360j-thumb { position: relative; display: block; overflow: hidden; border: 2px solid transparent; border-radius: 8px; transition: border-color 0.2s; }
.t360j-thumb img { display: block; width: 132px; height: 132px; object-fit: cover; transition: transform 0.35s; }
/* A frame the review withheld, or whose forward view it rejected, with no reviewed still of its own:
 * never its raw thumb, just the frame's place in the sequence (the tile still opens the tour there). */
.t360j-blank { display: block; width: 132px; height: 132px; background: repeating-linear-gradient(135deg, #2c1e15 0 10px, #34251a 10px 20px); }
.t360j-tile:hover .t360j-thumb img { transform: scale(1.07); }
.t360j-tile:hover .t360j-thumb,
.t360j-tile:focus-visible .t360j-thumb { border-color: #c9a227; }
.t360j-tile.is-active .t360j-thumb { border-color: #c9a227; box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.35); }
.t360j-spin { position: absolute; right: 6px; bottom: 6px; padding: 0.15rem 0.4rem; border-radius: 999px; background: rgba(20, 12, 8, 0.75); color: #f4ece1; font-size: 0.62rem; font-weight: 700; }
.t360j-num { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: #c9a227; }
.t360j-tile.is-anchor .t360j-num::after { content: ' · tagged location'; font-weight: 400; letter-spacing: 0; color: rgba(244, 236, 225, 0.72); }
.t360j-striplabel { margin: 0.1rem 0 0; font-size: 0.72rem; color: rgba(244, 236, 225, 0.72); }
.t360j-foot { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(244, 236, 225, 0.12); }
.t360j-foot a { font-size: 0.85rem; font-weight: 600; color: #c9a227; text-decoration: none; }
.t360j-foot a:hover { color: #e6c14a; text-decoration: underline; }
.t360j-nearcard { display: flex; align-items: center; gap: 0.9rem; margin: 1.75rem 0; padding: 0.9rem 1.15rem; border: 1px solid rgba(184, 115, 51, 0.3); border-radius: 10px; background: #f4ece1; }
.t360j-nearcard > i { font-size: 1.4rem; color: #b87333; }
.t360j-nearcard strong { display: block; font-size: 0.92rem; color: #2C1810; }
.t360j-nearcard span { display: block; margin-top: 0.1rem; font-size: 0.8rem; color: #5a3a20; }
.t360j-nearcard > a { margin-left: auto; white-space: nowrap; font-size: 0.85rem; font-weight: 600; color: #8a4b1c; text-decoration: none; }
.t360j-nearcard > a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.t360-hero__media { height: clamp(520px, 86vh, 720px); }
	.t360-hero--band .t360-hero__media { height: clamp(360px, 60vh, 520px); }
	.t360-hero--none .t360-hero__media { height: clamp(420px, 70vh, 560px); }
	.t360-hero .t360-enter { right: 50%; bottom: auto; top: 16%; transform: translateX(50%); }
}
@media (max-width: 640px) {
	.t360j { padding: 1.1rem 1rem 1rem; border-radius: 10px; }
	.t360j--hero { margin: 0; border-radius: 0; }
	.t360j-title { font-size: 1.3rem; }
	.t360j-tile { width: 108px; }
	.t360j-thumb img,
	.t360j-blank { width: 108px; height: 108px; }
	.t360j-nearcard { flex-wrap: wrap; }
	.t360j-nearcard > a { margin-left: 0; }
}
@media (max-width: 560px) {
	.t360-enter { gap: 0.45rem; }
	.t360-enter__ring { width: 64px; height: 64px; font-size: 1rem; border-width: 2px; }
	.t360-enter__label { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
	.t360-enter__hint { display: none; }
	.t360-hero__title { font-size: 1.9rem; }
	.t360-hero__lede { font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) {
	.t360-enter__ring,
	.t360-card__img,
	.t360j-thumb,
	.t360j-thumb img { transition: none; }
	.t360-card:hover .t360-card__img,
	.t360j-tile:hover .t360j-thumb img { transform: none; }
}