/* ============================================================
   FlyToTirana — Tourism content components
   Hero (with Tirana skyline silhouette), category tiles,
   content cards, TripAdvisor-style rating bubbles, price tags.
   Color rule: green = brand/action, coral = price/rating/featured.
   Homepage-only palette — the repainted-block colors of Tirana's
   2000s facade program, used as a wayfinding system per category:
   mustard = Things To Do, teal = Hotels, terracotta = Restaurants,
   plum = Tours. New tokens only — sitewide vars are untouched.
============================================================ */

:root {
	--tirana-ink: #241A12;
	--tirana-ink-2: #382A1E;
	--tirana-plaster: #F6EFE3;
	--tirana-plaster-dim: #EDE3D2;
	--tirana-mustard: #E8A33D;
	--tirana-mustard-dark: #C48A2C;
	--tirana-teal: #2E6E63;
	--tirana-teal-dark: #1F4E46;
	--tirana-terracotta: #C1502E;
	--tirana-terracotta-dark: #9E3F24;
	--tirana-plum: #6B3350;
	--tirana-plum-dark: #4E2439;
	--font-display-2: 'Bricolage Grotesque', var(--font-display);
}

/* --- Hero --- */
.wf-tt-hero {
	position: relative;
	background: var(--tirana-ink);
	padding: 96px 0 0;
	color: var(--tirana-plaster);
	text-align: center;
	overflow: hidden;
}

.wf-tt-hero__inner {
	position: relative;
	z-index: 2;
	padding-bottom: 56px;
}

.wf-tt-hero__eyebrow {
	font-family: var(--font-display-2);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tirana-mustard);
	margin-bottom: 14px;
}

.wf-tt-hero__heading {
	font-family: var(--font-display-2);
	font-size: clamp(34px, 5vw, 50px);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 16px;
	letter-spacing: -0.01em;
	color: var(--tirana-plaster);
}

.wf-tt-hero__sub {
	color: rgba(246,239,227,0.75);
	font-size: 17px;
	max-width: 560px;
	margin: 0 auto 32px;
}

.wf-tt-search {
	position: relative;
	z-index: 2;
	background: #FFFFFF;
	border-radius: 14px;
	padding: 10px;
	display: flex;
	gap: 8px;
	max-width: 640px;
	margin: 0 auto;
	box-shadow: var(--shadow-lg);
}

.wf-tt-search input {
	flex: 1;
	border: none;
	outline: none;
	padding: 12px 16px;
	font-size: 15px;
	color: var(--text-primary);
	border-radius: 8px;
	font-family: var(--font-body);
}

.wf-tt-search button {
	background: var(--tirana-mustard);
	color: var(--tirana-ink);
	border: none;
	border-radius: 8px;
	padding: 12px 24px;
	font-family: var(--font-display-2);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background var(--dur) ease;
}

.wf-tt-search button:hover {
	background: var(--tirana-mustard-dark);
}

/* Color-block skyline — Tirana's repainted apartment facades, one
   block silhouetted as the Pyramid of Tirana. Rises into place once
   on load; the page's one orchestrated motion moment. */
.wf-tt-skyline {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	height: 128px;
}

.wf-tt-skyline__block {
	flex: 1 0 auto;
	border-radius: 3px 3px 0 0;
	opacity: 0;
	transform: translateY(24px);
	animation: wfSkylineRise 0.7s var(--ease-out) forwards;
}

.wf-tt-skyline__block:nth-child(1) { flex-grow: 6; height: 38%; background: var(--tirana-plaster-dim); animation-delay: 0.05s; }
.wf-tt-skyline__block:nth-child(2) { flex-grow: 8; height: 68%; background: var(--tirana-teal); animation-delay: 0.12s; }
.wf-tt-skyline__block:nth-child(3) { flex-grow: 5; height: 48%; background: var(--tirana-ink-2); animation-delay: 0.08s; }
.wf-tt-skyline__block:nth-child(4) { flex-grow: 10; height: 84%; background: var(--tirana-mustard); animation-delay: 0.18s; }
.wf-tt-skyline__block:nth-child(5) { flex-grow: 7; height: 58%; background: var(--tirana-plaster-dim); clip-path: polygon(0 100%, 50% 0%, 100% 100%); border-radius: 0; animation-delay: 0.1s; }
.wf-tt-skyline__block:nth-child(6) { flex-grow: 6; height: 42%; background: var(--tirana-terracotta); animation-delay: 0.22s; }
.wf-tt-skyline__block:nth-child(7) { flex-grow: 9; height: 96%; background: var(--tirana-ink-2); animation-delay: 0.15s; }
.wf-tt-skyline__block:nth-child(8) { flex-grow: 5; height: 52%; background: var(--tirana-plum); animation-delay: 0.26s; }
.wf-tt-skyline__block:nth-child(9) { flex-grow: 8; height: 62%; background: var(--tirana-teal); animation-delay: 0.2s; }
.wf-tt-skyline__block:nth-child(10) { flex-grow: 6; height: 40%; background: var(--tirana-mustard); animation-delay: 0.28s; }
.wf-tt-skyline__block:nth-child(11) { flex-grow: 8; height: 50%; background: var(--tirana-terracotta); animation-delay: 0.32s; }

@keyframes wfSkylineRise {
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.wf-tt-skyline__block {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* --- Category tiles (landing page) --- */
.wf-tt-categories {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 767px) {
	.wf-tt-categories {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wf-tt-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 32px 16px;
	background: #FFFFFF;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--text-primary);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color var(--dur) ease, opacity 0.5s var(--ease-out);
}

.wf-tt-categories .wf-reveal:nth-child(1) { transition-delay: 0s; }
.wf-tt-categories .wf-reveal:nth-child(2) { transition-delay: 0.08s; }
.wf-tt-categories .wf-reveal:nth-child(3) { transition-delay: 0.16s; }
.wf-tt-categories .wf-reveal:nth-child(4) { transition-delay: 0.24s; }

.wf-tt-cat-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

.wf-tt-cat-tile__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--indigo-light);
	color: var(--indigo-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	transition: transform var(--dur) var(--ease-out);
}

.wf-tt-cat-tile:hover .wf-tt-cat-tile__icon {
	transform: scale(1.08);
}

/* Wayfinding: each category keeps its color everywhere it appears on the page */
.wf-tt-categories .wf-tt-cat-tile:nth-child(1) .wf-tt-cat-tile__icon { background: var(--tirana-mustard); color: var(--tirana-ink); }
.wf-tt-categories .wf-tt-cat-tile:nth-child(2) .wf-tt-cat-tile__icon { background: var(--tirana-teal); color: #FFFFFF; }
.wf-tt-categories .wf-tt-cat-tile:nth-child(3) .wf-tt-cat-tile__icon { background: var(--tirana-terracotta); color: #FFFFFF; }
.wf-tt-categories .wf-tt-cat-tile:nth-child(4) .wf-tt-cat-tile__icon { background: var(--tirana-plum); color: #FFFFFF; }

.wf-tt-cat-tile__label {
	font-family: var(--font-display-2);
	font-weight: 700;
	font-size: 15px;
	text-align: center;
}

/* --- Content cards (hotels / restaurants / tours / experiences) --- */
.wf-tt-card {
	background: #FFFFFF;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color var(--dur) ease;
}

.wf-tt-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

.wf-tt-card__img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--ink-3);
	overflow: hidden;
}

.wf-tt-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.wf-tt-card:hover .wf-tt-card__img img {
	transform: scale(1.05);
}

.wf-tt-card__img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	font-size: 28px;
	background: var(--ink-3);
}

.wf-tt-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.wf-tt-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--coral);
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	z-index: 1;
}

.wf-tt-card__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.wf-tt-card__meta {
	font-size: 13px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.wf-tt-card__price {
	margin-top: auto;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--coral-dark);
}

.wf-tt-card__price span {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--text-tertiary);
}

/* --- Official star classification (hotel stars, price tiers) — kept literal --- */
.wf-tt-stars {
	color: var(--gold);
	font-size: 13px;
	letter-spacing: 1px;
}

.wf-tt-stars--empty {
	color: var(--ink-4);
}

.wf-tt-no-reviews {
	font-size: 12px;
	color: var(--text-tertiary);
}

/* --- Rating bubbles — TripAdvisor's own signature, used for review scores --- */
.wf-bubbles {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
}

.wf-bubble {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ink-4);
	display: inline-block;
}

.wf-bubble.filled {
	background: var(--coral);
}

/* --- Filter chips (category/tier/cuisine/city pills) --- */
.wf-tt-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.wf-tt-chip {
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid var(--border-dark);
	background: #FFFFFF;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}

.wf-tt-chip:hover {
	border-color: var(--indigo);
	color: var(--indigo-dark);
}

.wf-tt-chip.active {
	background: var(--indigo);
	border-color: var(--indigo);
	color: #FFFFFF;
}

.wf-tt-chip i {
	margin-right: 4px;
	font-size: 12px;
}

/* --- Homepage section headers: colored eyebrow + display face, per category --- */
.wf-services__header .section-title,
.wf-tt-intro .section-title {
	font-family: var(--font-display-2);
	font-weight: 800;
}

.section-label--mustard { color: var(--tirana-mustard); }
.section-label--teal { color: var(--tirana-teal); }
.section-label--terracotta { color: var(--tirana-terracotta); }
.section-label--plum { color: var(--tirana-plum); }
.section-label--neutral { color: var(--tirana-ink-2); }

.section-label--mustard::before,
.section-label--teal::before,
.section-label--terracotta::before,
.section-label--plum::before,
.section-label--neutral::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: currentColor;
	margin-right: 8px;
	vertical-align: middle;
}

/* Homepage alternating band — replaces bg-gray-50 with the warm plaster tone */
.wf-tt-band {
	background: var(--tirana-plaster);
}

/* --- Destination intro band --- */
.wf-tt-intro {
	background: var(--tirana-plaster-dim);
	padding: var(--section-pad-sm) 0;
}

.wf-tt-explore-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 12px;
	background: #FFFFFF;
	border: 1px solid var(--border-dark);
	border-top: 3px solid var(--tirana-mustard);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--text-primary);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

.wf-tt-explore-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.wf-tt-explore-tile .wf-tt-cat-tile__label {
	font-size: 14px;
}

/* --- Category-context wrapper (listing/detail pages) — carries the same
   wayfinding color from the homepage into that category's own pages --- */
.wf-cat--things-to-do { --wf-cat: var(--tirana-mustard); --wf-cat-dark: var(--tirana-mustard-dark); --wf-cat-on: var(--tirana-ink); }
.wf-cat--hotels { --wf-cat: var(--tirana-teal); --wf-cat-dark: var(--tirana-teal-dark); --wf-cat-on: #FFFFFF; }
.wf-cat--restaurants { --wf-cat: var(--tirana-terracotta); --wf-cat-dark: var(--tirana-terracotta-dark); --wf-cat-on: #FFFFFF; }
.wf-cat--tours { --wf-cat: var(--tirana-plum); --wf-cat-dark: var(--tirana-plum-dark); --wf-cat-on: #FFFFFF; }

.wf-cat .wf-page-hero {
	border-top: 4px solid var(--wf-cat);
}

.wf-cat .wf-page-title {
	font-family: var(--font-display-2);
	font-weight: 800;
}

.wf-cat .wf-tt-chip.active {
	background: var(--wf-cat);
	border-color: var(--wf-cat);
	color: var(--wf-cat-on);
}

.wf-cat .wf-tt-chip:hover {
	border-color: var(--wf-cat);
	color: var(--wf-cat-dark);
}

.wf-cat .wf-tt-card__badge {
	background: var(--wf-cat);
	color: var(--wf-cat-on);
}

.wf-cat .wf-tt-card__price {
	color: var(--wf-cat-dark);
}

.wf-cat .wf-tt-detail-cta,
.wf-cat .wf-tt-info-card {
	background: var(--tirana-plaster-dim);
	border-color: var(--tirana-plaster-dim);
}

.wf-cat .wf-tt-detail-cta {
	border-top: 3px solid var(--wf-cat);
}

.wf-cat .wf-tt-detail-cta__price {
	color: var(--wf-cat-dark);
}

/* --- Detail page: price/CTA card --- */
.wf-tt-detail-cta {
	background: var(--paper);
	border: 1px solid var(--border-paper);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
}

.wf-tt-detail-cta__price {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	color: var(--coral-dark);
	margin-bottom: 4px;
}

.wf-tt-detail-cta__price span {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--text-tertiary);
}

/* --- Detail page: structured info cards (location, reviews, features, parking) --- */
.wf-tt-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 24px 0;
}

.wf-tt-info-card {
	background: var(--paper);
	border: 1px solid var(--border-paper);
	border-radius: var(--radius);
	padding: 20px;
}

.wf-tt-info-card--full {
	grid-column: 1 / -1;
}

.wf-tt-info-card h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-tertiary);
	margin: 0 0 10px;
}

.wf-tt-info-card p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
}

.wf-tt-info-card .wf-tt-chips {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.wf-tt-info-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Empty state --- */
.wf-tt-empty {
	text-align: center;
	padding: 64px 16px;
	color: var(--text-secondary);
}

/* --- Scroll-reveal (progressive; respects reduced motion, no-JS-safe) --- */
.wf-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.wf-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.wf-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}