/* =====================================================================
   Pink City Trails - homepage v2 (Phase 4). Loaded on the front page only.
   Built on the tokens in ds.css.
   ===================================================================== */

/* page shell: the homepage starts flush under the header */
.pct-home-v2 main,
.pct-home-v2 main > .wp-block-group:first-child,
.pct-home-v2 .wp-block-post-content{margin-top:0 !important;padding-top:0 !important}
.pct-home-v2 .wp-block-post-content > *{margin-block:0}
.pct-home-v2 .ph{overflow-x:clip}
.ph :where(h2,h3){margin:0}
.ph .ds-head .ds-lead{margin-top:var(--ds-s4)}
.ph .ds-head h2 + .ds-lead{margin-top:var(--ds-s4)}
.ph .ds-eyebrow{margin:0 0 var(--ds-s4)}
.ph-ico{width:22px;height:22px;flex:none}

/* ---------- 1. Hero ---------- */
.ph-hero{
	position:relative;
	min-height:min(88svh, 960px);
	display:flex;align-items:flex-end;
	background:var(--ds-night);
	color:var(--ds-on-dark);
	overflow:hidden;
	isolation:isolate;
}
.ph-hero__media{position:absolute;inset:0;z-index:-1}
.ph-hero__img{
	width:100%;height:100%;object-fit:cover;object-position:50% 38%;
	transform:scale(1.06);
	animation:ph-settle 9s var(--ds-ease) .1s forwards;
}
@keyframes ph-settle{to{transform:scale(1)}}
.ph-hero__media::after{
	content:"";position:absolute;inset:0;
	background:
		linear-gradient(180deg, rgba(22,18,14,.30) 0%, rgba(22,18,14,0) 22%, rgba(22,18,14,.10) 48%, rgba(22,18,14,.86) 100%),
		linear-gradient(90deg, rgba(22,18,14,.62) 0%, rgba(22,18,14,.15) 55%, rgba(22,18,14,0) 75%);
}
.ph-hero__inner{
	width:100%;
	padding-top:clamp(120px, 16vh, 200px);
	padding-bottom:clamp(110px, 9vw, 150px);
}
.ph-hero__copy{max-width:60rem}
.ph .ph-hero__eyebrow{color:#F2C98A}
.ph-hero__title{
	font-family:var(--ds-serif);
	font-size:var(--ds-fs-display);
	font-weight:400;
	line-height:1.0;
	letter-spacing:-.032em;
	color:#fff;
	margin:0 0 .35em;
	max-width:13.5ch;
	text-wrap:balance;
}
.ph-hero__lead{
	font-size:var(--ds-fs-lg);
	line-height:1.55;
	color:rgba(246,241,233,.9);
	max-width:34em;
	margin:0 0 clamp(24px, 3vw, 36px);
}
.ph-hero__facts{
	list-style:none;
	margin:clamp(40px, 7vh, 80px) 0 0;
	padding:22px 0 0;
	border-top:1px solid rgba(246,241,233,.24);
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:14px 32px;
}
.ph-hero__facts li{display:flex;align-items:center;gap:12px;font-size:var(--ds-fs-sm);line-height:1.35;color:rgba(246,241,233,.92)}
.ph-hero__facts .ph-ico{color:#F2C98A}

/* ---------- 2. Finder (floats over the hero edge) ---------- */
.ph-finder{position:relative;z-index:3;margin-top:clamp(-76px, -4.5vw, -52px)}
.ph-finder__panel{
	background:var(--ds-paper);
	border-radius:var(--ds-r-md);
	box-shadow:var(--ds-shadow-2);
	padding:clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
}
.ph-finder__label{
	margin:0 0 10px;
	font-family:var(--ds-serif);
	font-size:var(--ds-fs-h4);
	line-height:1.2;
	color:var(--ds-ink);
}
.ph-finder .pct-finder,
.ph-finder form{margin:0 !important;padding:0 !important;border:0 !important;box-shadow:none !important;background:none !important}

/* ---------- 3. Intro ---------- */
.ph-intro__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px, 6vw, 120px);align-items:start}
.ph-intro__title{font-size:var(--ds-fs-h1);line-height:1.03;letter-spacing:-.028em;max-width:12ch}
.ph-intro__title em{font-style:italic;color:var(--ds-accent)}
.ph-intro__text{padding-top:clamp(0px, 2.4vw, 44px)}
.ph-intro__text .ds-lead{margin:0}
.ph-facts{
	display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:24px;margin:clamp(32px, 4vw, 56px) 0 0;padding-top:clamp(24px, 3vw, 36px);
	border-top:1px solid var(--ds-line);
}
.ph-facts div{margin:0}
.ph-facts dt{font-family:var(--ds-serif);font-size:clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);line-height:1;letter-spacing:-.03em;color:var(--ds-ink)}
.ph-facts dd{margin:10px 0 0;font-size:var(--ds-fs-sm);line-height:1.35;color:var(--ds-muted)}

/* ---------- 4. Featured tours ---------- */
.ph-feat{padding-top:0}
.ph-feat__grid{
	display:grid;
	grid-template-columns:1.55fr 1fr;
	grid-template-rows:repeat(2, minmax(320px, 1fr));
	gap:clamp(16px, 1.6vw, 28px);
}
.ph-tour{
	position:relative;display:block;overflow:hidden;isolation:isolate;
	border-radius:var(--ds-r-md);
	background:var(--ds-night);
	color:#fff;text-decoration:none;
	box-shadow:var(--ds-shadow-1);
	transition:box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.ph-tour--lead{grid-row:span 2;min-height:680px}
.ph-tour:hover{box-shadow:var(--ds-shadow-2);transform:translateY(-4px)}
.ph-tour__media{position:absolute;inset:0;z-index:-1}
.ph-tour__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ds-ease)}
.ph-tour:hover .ph-tour__media img{transform:scale(1.05)}
.ph-tour__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(22,18,14,0) 35%, rgba(22,18,14,.55) 62%, rgba(22,18,14,.9) 100%)}
.ph-tour__body{
	position:absolute;left:0;right:0;bottom:0;
	display:flex;flex-direction:column;gap:12px;
	padding:clamp(20px, 2.4vw, 40px);
}
.ph .ph-tour__meta{margin:0;color:#F2C98A}
.ph-tour__meta i{font-style:normal;opacity:.7;margin:0 .2em}
.ph-tour__title{font-family:var(--ds-serif);font-size:var(--ds-fs-h3);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.ph-tour--lead .ph-tour__title{font-size:clamp(1.9rem, 1.3rem + 1.8vw, 3.25rem);max-width:16ch}
.ph-tour__desc{font-size:var(--ds-fs-base);line-height:1.55;color:rgba(246,241,233,.86);max-width:34em}
.ph-tour__foot{
	display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
	margin-top:6px;padding-top:14px;border-top:1px solid rgba(246,241,233,.26);
}
.ph-tour__price{font-size:var(--ds-fs-sm);color:rgba(246,241,233,.85)}
.ph-tour__price b{font-family:var(--ds-serif);font-weight:400;font-size:1.5em;color:#fff}
.ph-tour__go{display:inline-flex;align-items:center;gap:8px;font-size:var(--ds-fs-xs);font-weight:600;letter-spacing:var(--ds-track-caps);text-transform:uppercase}
.ph-tour__go .ph-ico{width:18px;height:18px;transition:transform var(--ds-dur) var(--ds-ease)}
.ph-tour:hover .ph-tour__go .ph-ico{transform:translateX(4px)}

/* ---------- 5. Book direct (night band) ---------- */
.ph-direct__head{max-width:46rem;margin-bottom:clamp(36px, 4vw, 64px)}
.ph-direct__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(28px, 4vw, 64px)}
.ph-direct__list li{padding-top:26px;border-top:1px solid rgba(246,241,233,.22)}
.ph-num{display:block;font-family:var(--ds-serif);font-style:italic;font-size:1.25rem;color:var(--ds-saffron);margin-bottom:18px}
.ph-direct__list h3{font-family:var(--ds-serif);font-size:var(--ds-fs-h4);line-height:1.2;margin:0 0 12px}
.ph-direct__list p{margin:0;line-height:1.65}

/* ---------- 6. Destinations ---------- */
.ph-dest__grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(12px, 1.4vw, 24px)}
.ph-dtile{
	position:relative;display:block;aspect-ratio:3/4;overflow:hidden;isolation:isolate;
	border-radius:var(--ds-r-md);background:var(--ds-sand);color:#fff;text-decoration:none;
}
.ph-dtile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ds-ease)}
.ph-dtile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(22,18,14,0) 45%, rgba(22,18,14,.78) 100%)}
.ph-dtile:hover .ph-dtile__img{transform:scale(1.06)}
.ph-dtile__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px, 1.8vw, 28px);display:flex;flex-direction:column;gap:6px}
.ph-dtile__name{font-family:var(--ds-serif);font-size:var(--ds-fs-h3);line-height:1.05;letter-spacing:-.02em}
.ph-dtile__count{display:inline-flex;align-items:center;gap:8px;font-size:var(--ds-fs-xs);font-weight:600;letter-spacing:var(--ds-track-caps);text-transform:uppercase;color:rgba(246,241,233,.9)}
.ph-dtile__count .ph-ico{width:16px;height:16px;transition:transform var(--ds-dur) var(--ds-ease)}
.ph-dtile:hover .ph-dtile__count .ph-ico{transform:translateX(4px)}

/* ---------- 7. Host ---------- */
.ph-host__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, 6vw, 110px);align-items:center}
.ph-host__media{aspect-ratio:4/5;overflow:hidden;border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow-1)}
.ph-host__img{width:100%;height:100%;object-fit:cover;display:block}
.ph-host__copy h2{margin-bottom:clamp(24px, 3vw, 40px)}
.ph-steps{list-style:none;margin:0 0 clamp(28px, 3vw, 44px);padding:0}
.ph-steps li{display:grid;grid-template-columns:minmax(120px, 170px) 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--ds-line-strong)}
.ph-steps li:last-child{border-bottom:1px solid var(--ds-line-strong)}
.ph-steps__when{font-size:var(--ds-fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-accent);padding-top:.3em}
.ph-steps p{margin:0;color:var(--ds-ink-soft)}
.ph-host .ds-row{gap:24px}

/* ---------- 8. Promises ---------- */
.ph-promise__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(24px, 3vw, 48px)}
.ph-promise__grid li{padding-top:26px;border-top:1px solid var(--ds-line)}
.ph-promise__grid .ph-ico{width:30px;height:30px;color:var(--ds-accent)}
.ph-promise__grid h3{font-family:var(--ds-serif);font-size:var(--ds-fs-h4);line-height:1.2;margin:18px 0 10px}
.ph-promise__grid p{margin:0;color:var(--ds-muted);font-size:var(--ds-fs-base)}
.ph-promise__note{margin:clamp(32px, 4vw, 56px) 0 0;font-size:var(--ds-fs-sm);color:var(--ds-muted)}
.ph-promise__note a{color:var(--ds-accent);text-underline-offset:.2em}

/* ---------- 9. Journal ---------- */
.ph-journal .ds-card__title{font-size:var(--ds-fs-h4)}
.ph-journal .ds-card__meta{line-height:1.55}

/* ---------- 10. Closing ---------- */
.ph-close .ds-lead{color:var(--ds-on-dark-muted);margin-inline:auto}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
	.ph-hero__facts{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.ph-promise__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 781px){
	.ph-hero{min-height:auto}
	.ph-hero__inner{padding-top:clamp(200px, 52vw, 300px);padding-bottom:84px}
	.ph-hero__media::after{background:linear-gradient(180deg, rgba(22,18,14,.15) 0%, rgba(22,18,14,.2) 30%, rgba(22,18,14,.88) 70%, rgba(22,18,14,.94) 100%)}
	.ph-hero__title{max-width:none}
	.ph-hero__cta .ds-btn{flex:1 1 100%}
	.ph-hero__facts{gap:14px 16px;margin-top:32px}
	.ph-hero__facts li{font-size:.875rem;align-items:flex-start}
	.ph-finder{margin-top:-40px}
	.ph-intro__grid,.ph-host__grid{grid-template-columns:1fr}
	.ph-intro__title{max-width:none}
	.ph-facts{grid-template-columns:repeat(2, minmax(0, 1fr));gap:28px 20px}
	.ph-feat__grid{grid-template-columns:1fr;grid-template-rows:none}
	.ph-tour,.ph-tour--lead{min-height:440px;grid-row:auto}
	.ph-direct__list{grid-template-columns:1fr}
	.ph-dest__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.ph-host__media{aspect-ratio:4/3}
	.ph-steps li{grid-template-columns:1fr;gap:6px}
	.ph-promise__grid{grid-template-columns:1fr}
	.ph-close .ds-row .ds-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){
	.ph-hero__img{animation:none;transform:none}
	.ph-tour:hover,.ph-tour:hover .ph-tour__media img,.ph-dtile:hover .ph-dtile__img{transform:none}
}

/* ---------- fixes after first browser pass ---------- */
.pct-home-v2 .pct-home-wrap{padding-left:0 !important;padding-right:0 !important}
.ph-hero{min-height:min(86svh, 920px)}
.ph-hero__inner{padding-top:clamp(96px, 12vh, 150px)}
.ph-hero__title{font-size:clamp(3rem, 1.9rem + 4.4vw, 6.25rem)}
.ph-hero__media::after{
	background:
		linear-gradient(180deg, rgba(22,18,14,.28) 0%, rgba(22,18,14,0) 20%, rgba(22,18,14,.12) 45%, rgba(22,18,14,.88) 100%),
		linear-gradient(90deg, rgba(22,18,14,.72) 0%, rgba(22,18,14,.35) 40%, rgba(22,18,14,0) 70%);
}
.ph-intro__title{font-size:clamp(2.25rem, 1.5rem + 2.7vw, 4.5rem);max-width:15ch}
.ph-host__img{object-position:50% 28%}
.ph-journal__grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 1000px){.ph-journal__grid{grid-template-columns:1fr}}
.ph-tour__body{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.ph-tour--lead .ph-tour__media::after{background:linear-gradient(180deg, rgba(22,18,14,0) 25%, rgba(22,18,14,.6) 55%, rgba(22,18,14,.92) 100%)}
@media (max-width: 781px){
	.ph-hero__inner{padding-top:clamp(180px, 46vw, 280px)}
	.ph-tour__media::after{background:linear-gradient(180deg, rgba(22,18,14,0) 15%, rgba(22,18,14,.65) 50%, rgba(22,18,14,.93) 100%)}
}

/* Gilda Display needs less negative tracking than Fraunces did */
.ph-hero__title{letter-spacing:-.015em}
.ph-intro__title,.ph-tour--lead .ph-tour__title,.ph-dtile__name,.ph-facts dt{letter-spacing:-.01em}
.ph-hero__title{max-width:16ch}

/* =====================================================================
   Hero v2.1 - the whole hero fits in one screen (header + hero = viewport).
   Desktop header (top bar + nav) = 124px; mobile header = 119px + 73px tab bar.
   ===================================================================== */
.ph-hero{
	min-height:0;
	height:calc(100svh - 124px);
	min-height:500px;
	max-height:880px;
}
.ph-hero__inner{
	padding-top:clamp(24px, 4vh, 56px);
	padding-bottom:clamp(72px, 10vh, 104px);
}
.ph .ph-hero__eyebrow{margin-bottom:clamp(10px, 1.6vh, 16px)}
.ph-hero__title{
	font-size:min(clamp(2.25rem, 1.2rem + 2.5vw, 4.25rem), 8svh);
	line-height:1.05;
	max-width:19ch;
	margin:0 0 clamp(12px, 2vh, 20px);
}
.ph-hero__lead{
	font-size:clamp(1rem, .94rem + .3vw, 1.1875rem);
	line-height:1.55;
	max-width:40em;
	margin:0 0 clamp(18px, 2.6vh, 28px);
}
.ph-hero__facts{
	margin-top:clamp(18px, 3.6vh, 40px);
	padding-top:clamp(12px, 1.8vh, 18px);
}
@media (max-height: 640px) and (min-width: 782px){
	.ph-hero__lead{display:none}
}

@media (max-width: 781px){
	.ph-hero{
		height:calc(100svh - 119px - 73px);
		min-height:540px;
		max-height:760px;
	}
	.ph-hero__inner{padding-top:20px;padding-bottom:60px}
	.ph-hero__media::after{
		background:linear-gradient(180deg, rgba(22,18,14,.10) 0%, rgba(22,18,14,.35) 30%, rgba(22,18,14,.86) 62%, rgba(22,18,14,.94) 100%);
	}
	.ph .ph-hero__eyebrow{font-size:.6875rem !important;letter-spacing:.14em;margin-bottom:10px}
	.ph-hero__title{font-size:clamp(2rem, 1.55rem + 2vw, 2.5rem);line-height:1.06;max-width:none;margin-bottom:12px}
	.ph-hero__lead{font-size:.9375rem;line-height:1.5;margin-bottom:18px}
	.ph-hero__cta{gap:10px}
	.ph-hero__cta .ds-btn{flex:0 0 auto}
	.ph-hero__facts{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px 14px;margin-top:20px;padding-top:14px}
	.ph-hero__facts li{font-size:.8125rem;gap:8px;line-height:1.3}
	.ph-hero__facts .ph-ico{width:18px;height:18px}
	.ph-close .ds-row .ds-btn{flex:0 0 auto}
}
@media (max-width: 781px) and (max-height: 700px){
	.ph-hero__lead{display:none}
}

/* small phones (iPhone SE class): keep both buttons on one row, tighten the facts */
@media (max-width: 400px){
	.ph-hero__cta .ds-btn{padding-inline:13px;letter-spacing:.09em}
}
@media (max-width: 781px) and (max-height: 700px){
	.ph-hero__inner{padding-bottom:50px}
	.ph-hero__facts{margin-top:14px;padding-top:10px;gap:8px 12px}
	.ph-hero__title{margin-bottom:14px}
}
/* very short phones: the four facts repeat further down the page, so the hero keeps only headline + buttons */
@media (max-width: 781px) and (max-height: 700px){
	.ph-hero{min-height:440px}
	.ph-hero__facts{display:none}
}

/* 'Most booked' on sand so it reads as its own section after 'Who we are' */
.pct-home-v2 .ph-feat{background:var(--ds-sand);padding-top:var(--ds-section)}