/**
 * Plan Heavy: single plan page, plans archive, plan card, and the
 * "Featured in these plans" block on the listing page.
 */

/* --- Single plan page --- */
.ph-plan__cover { position: relative; width: 100%; max-height: 46vh; overflow: hidden; }
.ph-plan__cover img { width: 100%; height: 46vh; object-fit: cover; display: block; }
.ph-plan__cover-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}

.ph-plan__body { padding-top: var(--ph-space-6); padding-bottom: var(--ph-space-8); }

.ph-plan__head { margin-bottom: var(--ph-space-5); }

.ph-plan__cats { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin-bottom: var(--ph-space-3); }
.ph-plan__cat {
	font-size: var(--ph-text-label); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--ph-color-primary); background: color-mix(in srgb, var(--ph-color-primary) 12%, transparent);
	padding: 4px 12px; border-radius: var(--ph-radius-pill);
}

.ph-plan__typechip {
	font-size: var(--ph-text-label); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: #fff; background: var(--ph-color-primary);
	padding: 4px 12px; border-radius: var(--ph-radius-pill);
}
.ph-plan__typechip--guide { background: var(--ph-color-ink); }

.ph-plan__title { font-size: var(--ph-text-h1); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 800; margin: 0 0 var(--ph-space-3); color: var(--ph-color-ink); line-height: 1.15; }

.ph-plan__standfirst { font-size: var(--ph-text-body); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ph-color-ink-soft); line-height: 1.55; margin: 0 0 var(--ph-space-3); }

.ph-plan__facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
	background: var(--ph-color-line); border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-md); overflow: hidden; margin: 0 0 var(--ph-space-6);
}
.ph-plan__fact { background: var(--ph-color-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.ph-plan__fact-label { font-size: var(--ph-text-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ph-color-ink-soft); }
.ph-plan__fact-value { font-size: var(--ph-text-small); font-weight: 600; color: var(--ph-color-ink); line-height: 1.4; }

.ph-plan__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin-bottom: var(--ph-space-4); }
.ph-plan__dot { opacity: .6; }

.ph-plan__save {
	display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--ph-text-small); font-weight: 700;
	padding: 10px 18px; border-radius: var(--ph-radius-pill); border: 1px solid var(--ph-color-line);
	background: #fff; color: var(--ph-color-ink); cursor: pointer;
}
.ph-plan__save .dashicons { font-size: 17px; width: 17px; height: 17px; color: var(--ph-color-ink-soft); }
.ph-plan__save:hover { border-color: var(--ph-color-primary); }
.ph-plan__save[aria-pressed="true"] { background: var(--ph-color-primary); border-color: var(--ph-color-primary); color: #fff; }
.ph-plan__save[aria-pressed="true"] .dashicons { color: #fff; }

.ph-plan__intro { font-size: var(--ph-text-body); line-height: 1.7; color: var(--ph-color-ink); margin-bottom: var(--ph-space-6); }
.ph-plan__intro p:last-child { margin-bottom: 0; }

/* Source video (TikTok/Instagram/YouTube/Vimeo) the plan was built from.
   Vertical sources (TikTok, Instagram) are capped to a comfortable width so
   they don't stretch full-bleed on desktop; horizontal sources fill the
   column at 16:9. Both scale down cleanly on mobile since width is 100%. */
.ph-plan__video { margin: 0 0 var(--ph-space-6); border-radius: var(--ph-radius-md); overflow: hidden; background: #000; }
.ph-plan__video iframe { width: 100%; height: 100%; display: block; border: 0; }
.ph-plan__video--vertical { max-width: 380px; aspect-ratio: 9 / 16; margin-left: auto; margin-right: auto; }
.ph-plan__video--horizontal { width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 480px) {
	.ph-plan__video--vertical { max-width: 100%; }
}

.ph-plan__stops-title { font-size: var(--ph-text-h3); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); font-weight: 800; color: var(--ph-color-ink); margin: 0 0 var(--ph-space-4); }

.ph-plan__stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ph-space-4); }
/* Guides have no set order: the number column goes and cards sit full width. */
.ph-plan__stops--guide .ph-plan__stop { display: block; }
.ph-plan__stop { display: flex; gap: var(--ph-space-3); align-items: flex-start; }
.ph-plan__stop-num {
	flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ph-color-ink);
	color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
	margin-top: 6px;
}
.ph-plan__stop-card {
	flex: 1; display: flex; gap: var(--ph-space-3); text-decoration: none; color: inherit;
	background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md);
	padding: var(--ph-space-3); transition: border-color .15s, box-shadow .15s;
}
.ph-plan__stop-card:hover { border-color: var(--ph-color-primary); box-shadow: var(--ph-shadow-card); }
.ph-plan__stop-img { width: 84px; height: 84px; border-radius: var(--ph-radius-sm); object-fit: cover; flex-shrink: 0; }
.ph-plan__stop-info { flex: 1; min-width: 0; }
.ph-plan__stop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ph-plan__stop-title { font-size: 16px; font-weight: 700; color: var(--ph-color-ink); }
.ph-plan__stop-time { font-size: var(--ph-text-label); font-weight: 700; color: var(--ph-color-primary); white-space: nowrap; }
.ph-plan__stop-sub { display: flex; gap: 8px; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin-top: 2px; }
.ph-plan__stop-sub span:not(:last-child)::after { content: '\B7'; margin-left: 8px; }
.ph-plan__stop-open {
	font-size: 11px; font-weight: 700; color: var(--ph-color-open, #1a7f37);
	background: color-mix(in srgb, var(--ph-color-open, #1a7f37) 12%, transparent);
	padding: 1px 8px; border-radius: var(--ph-radius-pill); white-space: nowrap;
}
.ph-plan__stop-open--soon { color: #92400e; background: #fef3c7; }
.ph-plan__stop-sub .ph-plan__stop-open::after { content: none; }
.ph-plan__stop-desc { font-size: var(--ph-text-small); color: var(--ph-color-ink); margin: 6px 0 0; line-height: 1.5; }
.ph-plan__stop-note { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin: 8px 0 0; line-height: 1.5; font-style: italic; }

.ph-plan__tips { margin-top: var(--ph-space-6); background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md); padding: var(--ph-space-4) var(--ph-space-5); }
.ph-plan__tips-title { font-size: var(--ph-text-h3); font-size: 1.05rem; font-weight: 800; color: var(--ph-color-ink); margin: 0 0 var(--ph-space-3); }
.ph-plan__tips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ph-plan__tips-list li { position: relative; padding-left: 22px; font-size: var(--ph-text-small); color: var(--ph-color-ink); line-height: 1.55; }
.ph-plan__tips-list li::before {
	content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px;
	border-radius: 50%; background: var(--ph-color-primary);
}

.ph-plan__empty { color: var(--ph-color-ink-soft); font-size: var(--ph-text-body); }

/* --- Plan card (archive grid + related-plans + homepage) --- */
.ph-plancard { display: block; text-decoration: none; color: inherit; border-radius: var(--ph-radius-md); overflow: hidden; background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); transition: box-shadow .15s, border-color .15s; }
.ph-plancard:hover { box-shadow: var(--ph-shadow-card); border-color: var(--ph-color-primary); }
.ph-plancard__media { position: relative; aspect-ratio: 4 / 3; background: var(--ph-color-bg); }
.ph-plancard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-plancard__media-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ph-color-bg), var(--ph-color-line)); }
.ph-plancard__cat {
	position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	background: rgba(255,255,255,.92); color: var(--ph-color-primary); padding: 3px 10px; border-radius: var(--ph-radius-pill);
}
.ph-plancard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.ph-plancard__type {
	position: absolute; top: 10px; left: 10px;
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: #fff; background: var(--ph-color-ink);
	padding: 3px 10px; border-radius: var(--ph-radius-pill);
}
/* When the guide badge is present the category moves to the right corner so
   the two never overlap. */
.ph-plancard__type + .ph-plancard__cat { left: auto; right: 10px; }
.ph-plancard__title { font-size: 14.5px; font-weight: 700; color: var(--ph-color-ink); line-height: 1.3; }
.ph-plancard__summary {
	font-size: 12px; color: var(--ph-color-ink-soft); line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-plancard__meta { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); }
.ph-plancard__dot { opacity: .6; }

/* --- Plans archive page --- */
.ph-plans { padding: var(--ph-space-6) 0 var(--ph-space-9); }
.ph-plans__head { margin-bottom: var(--ph-space-5); }
.ph-plans__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 800; margin: 0 0 6px; color: var(--ph-color-ink); }
.ph-plans__sub { font-size: var(--ph-text-body); color: var(--ph-color-ink-soft); margin: 0; max-width: 60ch; }

.ph-plans__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ph-space-5); }
.ph-plans__catlink {
	font-size: var(--ph-text-small); font-weight: 600; text-decoration: none; color: var(--ph-color-ink-soft);
	background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-pill);
	padding: 7px 16px;
}
.ph-plans__catlink:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-plans__catlink.is-active { background: var(--ph-color-primary); border-color: var(--ph-color-primary); color: #fff; }

.ph-plans__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ph-space-4); }

.ph-plans__empty { text-align: center; padding: var(--ph-space-8) var(--ph-space-4); color: var(--ph-color-ink-soft); }
.ph-plans__empty p { margin: 0 0 16px; }

.ph-plans__pager { display: flex; justify-content: center; gap: 6px; margin-top: var(--ph-space-6); }
.ph-plans__pager .page-numbers { text-decoration: none; padding: 7px 13px; border-radius: var(--ph-radius-sm); border: 1px solid var(--ph-color-line); color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }
.ph-plans__pager .page-numbers.current { background: var(--ph-color-primary); border-color: var(--ph-color-primary); color: #fff; }

/* --- Featured in these plans (listing page) --- */
.ph-featured-plans__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ph-space-3); }

@media (max-width: 640px) {
	.ph-plan__stop { gap: 10px; }
	.ph-plan__stop-card { flex-direction: column; }
	.ph-plan__stop-img { width: 100%; height: 150px; }
	.ph-plans__grid, .ph-featured-plans__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Plan actions (save + share) ──────────────────────────────────────── */
.ph-plan__actions { display: flex; align-items: center; gap: var(--ph-space-2); flex-wrap: wrap; }
.ph-plan__share {
	display: inline-flex;
	align-items: center;
	gap: var(--ph-space-1);
	padding: var(--ph-space-2) var(--ph-space-4);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	background: var(--ph-color-surface);
	color: var(--ph-color-ink);
	font-size: var(--ph-text-small);
	font-weight: 600;
	cursor: pointer;
}
.ph-plan__share:hover { border-color: var(--ph-color-ink-soft); }
.ph-plan__visibility {
	display: inline-block;
	padding: var(--ph-space-1) var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	font-size: var(--ph-text-small);
	font-weight: 600;
	color: var(--ph-color-ink-soft);
}

/* ── Curator profile ─────────────────────────────────────────────────── */
.ph-curator { padding: var(--ph-space-6) 0 var(--ph-space-8); }
.ph-curator__head {
	display: flex;
	align-items: center;
	gap: var(--ph-space-4);
	margin-bottom: var(--ph-space-6);
}
.ph-curator__avatar img { border-radius: 50%; display: block; }
.ph-curator__badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--ph-radius-pill);
	background: var(--ph-color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: var(--ph-space-1);
}
.ph-curator__name { font-size: var(--ph-text-h1); color: var(--ph-color-ink); margin: 0 0 var(--ph-space-1); }
.ph-curator__bio { color: var(--ph-color-ink-soft); font-size: var(--ph-text-body); margin: 0 0 var(--ph-space-1); max-width: 60ch; }
.ph-curator__count { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); margin: 0; }

@media (max-width: 719px) {
	.ph-curator__head { flex-direction: column; align-items: flex-start; }
}

/* ── Curator link-in-bio additions ───────────────────────────────────── */
.ph-curator__meta { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); margin: 0 0 var(--ph-space-3); }
.ph-curator__actions { display: flex; gap: var(--ph-space-2); margin-bottom: var(--ph-space-3); flex-wrap: wrap; }
.ph-curator__follow.is-following {
	background: var(--ph-color-surface);
	color: var(--ph-color-ink);
	border: 1px solid var(--ph-color-line);
}
.ph-curator__social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin: 0; padding: 0; }
.ph-curator__social a {
	display: inline-block;
	padding: var(--ph-space-1) var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	font-size: var(--ph-text-small);
	font-weight: 600;
	color: var(--ph-color-ink);
	text-decoration: none;
}
.ph-curator__social a:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }

.ph-curator__latest {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 var(--ph-space-6);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-md);
	overflow: hidden;
	text-decoration: none;
	background: var(--ph-color-surface);
	transition: box-shadow 0.15s;
}
.ph-curator__latest:hover { box-shadow: var(--ph-shadow-md); }
.ph-curator__latest-img { flex: 0 0 40%; max-width: 200px; background-size: cover; background-position: center; min-height: 120px; }
.ph-curator__latest-body { padding: var(--ph-space-4); display: flex; flex-direction: column; justify-content: center; gap: var(--ph-space-1); }
.ph-curator__latest-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ph-color-primary);
}
.ph-curator__latest-title { font-size: var(--ph-text-h3); font-weight: 700; color: var(--ph-color-ink); }
.ph-curator__latest-meta { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); }
.ph-curator__section-title { font-size: var(--ph-text-h3); color: var(--ph-color-ink); margin: 0 0 var(--ph-space-4); }

@media (max-width: 559px) {
	.ph-curator__latest { flex-direction: column; }
	.ph-curator__latest-img { flex-basis: auto; max-width: none; width: 100%; min-height: 160px; }
}

/* Creator credit line, shown under the video (or on its own if the plan has
   no working video link but does have a credited creator). */
.ph-plan__credit { font-size: 13px; color: var(--ph-color-ink-soft); margin: 0 0 var(--ph-space-6); }
.ph-plan__credit a { color: var(--ph-color-primary); font-weight: 600; text-decoration: none; }
.ph-plan__credit a:hover { text-decoration: underline; }
.ph-plan__credit-platform { margin-left: 6px; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--ph-color-bg); color: var(--ph-color-ink-soft); }

/* ── Slots, choice options, hours popover (theme v1.74.0) ───────────────
   All values come from the design tokens in inc/tokens.php so a token change
   propagates here automatically (rule 2.1). No accent border-left anywhere. */

.ph-plan__body { display: grid; grid-template-columns: 1fr 330px; gap: var(--ph-space-5); align-items: start; }
.ph-plan__main { min-width: 0; }
.ph-plan__side { min-width: 0; display: flex; flex-direction: column; gap: var(--ph-space-4); position: sticky; top: var(--ph-space-4); align-self: start; }

.ph-plan__chips { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin-bottom: var(--ph-space-3); }
.ph-plan__chip { font-size: var(--ph-text-label); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 5px 14px; border-radius: var(--ph-radius-pill); }
.ph-plan__chip--plan { background: var(--ph-color-primary); color: #fff; }
.ph-plan__chip--guide { background: #fff; color: var(--ph-color-ink); }
.ph-plan__chip--cat { background: rgba(255,255,255,.92); color: var(--ph-color-ink); }

/* Plan hero: the stops themselves */
.ph-plan__hero { position: relative; display: grid; gap: 3px; background: #000; height: 400px; }
.ph-plan__hero--1 { grid-template-columns: 1fr; }
.ph-plan__hero--2 { grid-template-columns: 1.6fr 1fr; }
.ph-plan__hero--3 { grid-template-columns: 1.6fr 1fr 1fr; }
.ph-plan__herofig { position: relative; margin: 0; height: 100%; overflow: hidden; }
.ph-plan__herofig img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.ph-plan__herofig figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: var(--ph-text-small); font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.7); z-index: 3; }
.ph-plan__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(15,17,28,.82)); pointer-events: none; z-index: 2; }
.ph-plan__herotxt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding-bottom: var(--ph-space-5); }
.ph-plan__title { margin: 0; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); font-weight: 800; color: #fff; line-height: 1.08; text-shadow: 0 2px 16px rgba(0,0,0,.45); }

/* Action bar: price is the loud element, so the sidebar does not repeat it */
.ph-plan__actions { background: var(--ph-color-surface); border-bottom: 1px solid var(--ph-color-line); }
.ph-plan__actionsin { display: flex; align-items: center; gap: var(--ph-space-4); padding-top: var(--ph-space-3); padding-bottom: var(--ph-space-3); flex-wrap: wrap; }
.ph-plan__price { display: flex; flex-direction: column; line-height: 1.15; }
.ph-plan__price-amt { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; color: var(--ph-color-primary); }
.ph-plan__price-lab { font-size: var(--ph-text-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-color-ink-soft); margin-top: 3px; }
.ph-plan__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin-right: auto; }
.ph-plan__dot { opacity: .45; }

/* Bio and tips: plain panels, no accent edge */
.ph-plan__bio { margin-bottom: var(--ph-space-4); }
.ph-plan__biocats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--ph-space-3); }
.ph-plan__biocats span { font-size: var(--ph-text-label); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: color-mix(in srgb, var(--ph-color-primary) 12%, transparent); color: var(--ph-color-primary); border-radius: var(--ph-radius-pill); padding: 4px 12px; }
.ph-plan__goodknow { margin-bottom: var(--ph-space-5); }
.ph-plan__tiplist { list-style: none; margin: 0; padding: 0; }
.ph-plan__tiplist li { position: relative; padding-left: 20px; font-size: var(--ph-text-small); margin-bottom: 10px; line-height: 1.55; }
.ph-plan__tiplist li:last-child { margin-bottom: 0; }
.ph-plan__tiplist li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ph-color-primary); }

.ph-plan__stopstitle { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.ph-plan__stopssub { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin: 0 0 var(--ph-space-4); }

/* Slots */
.ph-plan__slots { position: relative; }
.ph-plan__slotwrap { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: var(--ph-space-3); margin-bottom: var(--ph-space-3); }
.ph-plan__node { text-align: center; padding-top: 6px; }
.ph-plan__node-n { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%; background: var(--ph-color-primary); color: #fff; font-weight: 800; font-size: 15px; }
.ph-plan__node-t { display: block; font-size: var(--ph-text-label); font-weight: 800; color: var(--ph-color-primary); }
.ph-plan__slot { background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md); overflow: hidden; min-width: 0; }
.ph-plan__slothead { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ph-color-line); flex-wrap: wrap; }
.ph-plan__slotkind { font-size: var(--ph-text-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ph-plan__slotcount { font-size: var(--ph-text-label); font-weight: 700; color: var(--ph-color-primary); background: color-mix(in srgb, var(--ph-color-primary) 12%, transparent); border-radius: var(--ph-radius-pill); padding: 3px 10px; }
.ph-plan__opts { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--ph-color-line); }
.ph-plan__opt { border: 1.5px solid var(--ph-color-line); background: #fff; border-radius: var(--ph-radius-pill); padding: 6px 14px; font: inherit; font-size: var(--ph-text-small); font-weight: 700; color: var(--ph-color-ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ph-plan__opt:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-plan__opt.is-on { border-color: var(--ph-color-primary); background: var(--ph-color-primary); color: #fff; }
.ph-plan__optpr { font-size: 11px; opacity: .85; }

.ph-plan__card { display: grid; grid-template-columns: 150px 1fr; text-decoration: none; color: inherit; }
.ph-plan__cardimg { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.ph-plan__cardin { display: block; padding: 15px 18px; min-width: 0; }
.ph-plan__cardtop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.ph-plan__cardtitle { font-size: 17px; font-weight: 800; }
.ph-plan__cardsub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin-bottom: 8px; }
.ph-plan__carddesc { display: block; font-size: var(--ph-text-small); margin-bottom: 8px; }
.ph-plan__cardnote { display: block; font-size: var(--ph-text-small); color: var(--ph-color-primary); font-weight: 600; }
.ph-plan__cardclash { display: block; margin-top: 9px; font-size: var(--ph-text-small); font-weight: 700; color: #b45309; }
.ph-plan__tag { font-size: 11px; font-weight: 700; background: var(--ph-color-bg); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-pill); padding: 2px 10px; color: var(--ph-color-ink-soft); }

/* A clashing option turns the whole slot amber, never a single edge */
.ph-plan__slot:has(.ph-plan__panel.has-clash:not([hidden])) { background: #fdf0d5; border-color: #e8c07a; }
.ph-plan__slot:has(.ph-plan__panel.has-clash:not([hidden])) .ph-plan__slothead,
.ph-plan__slot:has(.ph-plan__panel.has-clash:not([hidden])) .ph-plan__opts { border-bottom-color: #e8c07a; }
.ph-plan__slot.is-clash { background: #fdf0d5; border-color: #e8c07a; }
.ph-plan__slot.is-clash .ph-plan__slothead,
.ph-plan__slot.is-clash .ph-plan__opts { border-bottom-color: #e8c07a; }

.ph-plan__travel { display: flex; align-items: center; gap: 7px; font-size: var(--ph-text-small); font-weight: 600; color: var(--ph-color-ink-soft); margin: 0 0 var(--ph-space-3) 70px; }
.ph-plan__travel::before { content: '\1F6B6'; font-size: 13px; }
.ph-plan__travel--drive::before { content: '\1F697'; }
.ph-plan__travel--transit::before { content: '\1F68C'; }

.ph-plan__open { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--ph-radius-pill); background: color-mix(in srgb, var(--ph-color-open) 14%, transparent); color: var(--ph-color-open); white-space: nowrap; }
.ph-plan__open--soon { background: #fef3c7; color: #b45309; }
.ph-plan__open--over { position: absolute; right: 12px; top: 12px; z-index: 3; background: rgba(255,255,255,.94); }

/* Hours popover */
.ph-plan__hrs { position: relative; display: inline-flex; }
.ph-plan__hrs-btn { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--ph-color-line); background: #fff; color: var(--ph-color-ink-soft); font: inherit; font-size: 10.5px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ph-plan__hrs-btn:hover, .ph-plan__hrs-btn:focus { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-plan__hrs-pop { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); z-index: 40; width: 210px; background: var(--ph-color-ink); color: #fff; border-radius: var(--ph-radius-sm); padding: 12px 14px; box-shadow: var(--ph-shadow-card); display: none; text-align: left; }
.ph-plan__hrs:hover .ph-plan__hrs-pop, .ph-plan__hrs:focus-within .ph-plan__hrs-pop { display: block; }
.ph-plan__hrs-head { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #aab0c4; margin-bottom: 8px; }
.ph-plan__hrs-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ph-plan__hrs-table td { padding: 2px 0; color: #e6e8f2; }
.ph-plan__hrs-table td:last-child { text-align: right; font-weight: 600; }
.ph-plan__hrs-table tr.is-today td { color: #fff; font-weight: 800; }
.ph-plan__hrs-table td.is-closed { color: #8f95ac; }

/* Sidebar */
.ph-plan__facts div { padding: 10px 0; border-bottom: 1px solid var(--ph-color-line); }
.ph-plan__facts div:last-child { border-bottom: 0; }
.ph-plan__fact-l { display: block; font-size: var(--ph-text-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-color-ink-soft); }
.ph-plan__fact-v { display: block; font-size: var(--ph-text-small); font-weight: 700; margin-top: 2px; }
.ph-plan__vid { position: relative; border-radius: var(--ph-radius-sm); overflow: hidden; aspect-ratio: 9 / 11; background: #000; }
.ph-plan__vid iframe { width: 100%; height: 100%; border: 0; display: block; }
.ph-plan__spotline { margin: 11px 0 0; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); display: flex; align-items: center; gap: 6px; }
.ph-plan__spotline span { font-size: var(--ph-text-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ph-plan__spotline a, .ph-plan__spotline b { color: var(--ph-color-primary); }
.ph-plan__listedby { display: flex; align-items: center; gap: 11px; }
.ph-plan__listedby img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ph-plan__listedby b { display: block; font-size: var(--ph-text-small); }
.ph-plan__listedby small { font-size: 11.5px; color: var(--ph-color-ink-soft); }

/* Guide */
.ph-plan__ghero { background: var(--ph-color-ink); color: #fff; padding: var(--ph-space-7) 0 0; }
.ph-plan__gtitle { margin: 0 0 var(--ph-space-3); font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 800; line-height: 1.05; }
.ph-plan__gbio { max-width: 720px; margin-bottom: var(--ph-space-4); }
.ph-plan__gbio p { font-size: 1.05rem; line-height: 1.62; color: #dfe2ec; margin: 0 0 12px; }
.ph-plan__spotted { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--ph-radius-pill); padding: 8px 18px; margin: 0 0 var(--ph-space-4); }
.ph-plan__spotted span { font-size: var(--ph-text-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9aa0b5; }
.ph-plan__spotted a, .ph-plan__spotted b { color: var(--ph-color-primary); font-weight: 800; }
.ph-plan__gcta { padding-bottom: var(--ph-space-5); margin: 0; }
.ph-plan__gband { background: var(--ph-color-ink); padding-bottom: var(--ph-space-6); }
.ph-plan__gband-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #39405c; border: 1px solid #39405c; border-radius: var(--ph-radius-md); overflow: hidden; }
.ph-plan__gcell { background: #2a2f47; padding: 15px 18px; }
.ph-plan__gcell-l { display: block; font-size: var(--ph-text-label); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8f95ac; }
.ph-plan__gcell-v { display: block; font-size: var(--ph-text-small); font-weight: 700; color: #fff; margin-top: 3px; }
.ph-plan__picks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ph-space-4); }
.ph-pick { background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md); overflow: hidden; }
.ph-pick:hover { border-color: var(--ph-color-primary); box-shadow: var(--ph-shadow-card); }
.ph-pick.is-starred { border-color: #f0a726; box-shadow: 0 0 0 3px #fdf1dc; }
.ph-pick__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ph-color-bg); }
.ph-pick__media img { width: 100%; height: 100%; object-fit: cover; }

/* Guide pick gallery: the listing's own photos, paged with arrows. Arrows and
   dots only render when there is more than one photo, so a single-image pick
   looks exactly as it did. */
.ph-pick__arw {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s ease, background 0.15s ease;
}
.ph-pick__arw--prev { left: 8px; }
.ph-pick__arw--next { right: 8px; }
.ph-pick:hover .ph-pick__arw,
.ph-pick__arw:focus-visible { opacity: 1; }
.ph-pick__arw:hover { background: rgba(0, 0, 0, 0.65); }
.ph-pick__dots {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
}
.ph-pick__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
}
.ph-pick__dot.is-on { background: #fff; }

/* Touch has no hover, so the arrows stay visible on small screens. */
@media (hover: none) {
	.ph-pick__arw { opacity: 1; }
}
.ph-pick__num { position: absolute; left: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--ph-color-ink); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.ph-pick.is-starred .ph-pick__num { background: #f0a726; color: #fff; }
.ph-pick__star { position: absolute; left: 35px; top: 7px; color: #f0a726; font-size: 15px; z-index: 4; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ph-pick__cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(15,17,28,.85), transparent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 24px 13px 10px; z-index: 3; }
.ph-pick__in { padding: 16px 18px; }
.ph-pick__title { margin: 0 0 5px; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.ph-pick__title a { text-decoration: none; color: inherit; }
.ph-pick__sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin-bottom: 9px; }
.ph-pick__desc { margin: 0 0 10px; font-size: var(--ph-text-small); }
.ph-pick__why { margin: 0; font-size: var(--ph-text-small); background: color-mix(in srgb, var(--ph-color-primary) 8%, transparent); border-radius: var(--ph-radius-sm); padding: 10px 12px; }
.ph-pick__why b { color: var(--ph-color-primary); }

.ph-plan__route { margin-top: var(--ph-space-5); }
.ph-plan__routemap { height: 300px; border-radius: var(--ph-radius-sm); overflow: hidden; background: var(--ph-color-bg); }
.ph-plan__routemap-inner { width: 100%; height: 100%; }
.ph-plan__routecap { font-size: 11px; color: var(--ph-color-ink-soft); margin: 8px 2px 0; }
.ph-plan__empty { color: var(--ph-color-ink-soft); }

@media (max-width: 940px) {
  .ph-plan__body { grid-template-columns: 1fr; }
  .ph-plan__side { position: static; }
  .ph-plan__gband-in { grid-template-columns: 1fr 1fr; }
  .ph-plan__picks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ph-plan__hero { grid-template-columns: 1fr !important; height: 300px; }
  .ph-plan__herofig:nth-child(n+2) { display: none; }
  .ph-plan__slotwrap { grid-template-columns: 44px 1fr; gap: 8px; }
  .ph-plan__card { grid-template-columns: 1fr; }
  .ph-plan__cardimg { height: 170px; min-height: 0; }
  .ph-plan__travel { margin-left: 52px; }
}

/* ── v1.75.0 fixes ─────────────────────────────────────────────────────
   The guide hero sits on ink, so its title must be explicitly light: it was
   inheriting the ink body colour and rendering invisible against its own
   background. */
.ph-plan__gtitle { color: #fff; }

/* Spotted by and the call to action share one row, wrapping only when there
   is genuinely no space. */
.ph-plan__gcredit { display: flex; align-items: center; gap: var(--ph-space-3); flex-wrap: wrap; margin-bottom: var(--ph-space-4); }
.ph-plan__gcredit .ph-plan__spotted { margin: 0; }
.ph-plan__gcredit .ph-plan__gcta { margin: 0; padding-bottom: 0; }

/* Picks sit on a row-stretched grid so cards in the same row match height
   instead of each shrinking to its own content. */
.ph-plan__picks { align-items: stretch; }
.ph-pick { display: flex; flex-direction: column; }
.ph-pick__in { flex: 1; display: flex; flex-direction: column; }
.ph-pick__why { margin-top: auto; }

/* A listing with no image gets a slim header bar rather than a large empty
   panel, so a guide built before the photography lands still reads properly. */
.ph-pick__media.is-empty { aspect-ratio: auto; min-height: 0; background: var(--ph-color-bg); border-bottom: 1px solid var(--ph-color-line); padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.ph-pick__media.is-empty .ph-pick__num { position: static; box-shadow: none; }
.ph-pick__media.is-empty .ph-pick__star { position: static; }
.ph-pick__media.is-empty .ph-plan__open--over { position: static; margin-left: auto; }
.ph-pick__media.is-empty .ph-pick__cap { position: static; background: none; color: var(--ph-color-ink-soft); padding: 0; text-shadow: none; }

/* Venue logo, so a card is identifiable even without a photo. */
.ph-pick__logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--ph-color-line); margin-bottom: 8px; }
.ph-plan__cardlogo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--ph-color-line); flex-shrink: 0; }

/* Long venue names should wrap rather than force a narrow ragged column. */
.ph-pick__title { word-break: break-word; }
.ph-pick__title a { text-decoration: none; }

/* Plans / Guides / Everything switch on the archive */
.ph-plans__views { display: flex; gap: var(--ph-space-2); flex-wrap: wrap; margin-bottom: var(--ph-space-4); }
.ph-plans__viewlink { display: inline-block; padding: 8px 20px; border-radius: var(--ph-radius-pill); border: 1.5px solid var(--ph-color-line); background: var(--ph-color-surface); color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); font-weight: 700; text-decoration: none; }
.ph-plans__viewlink:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-plans__viewlink.is-active { background: var(--ph-color-ink); border-color: var(--ph-color-ink); color: #fff; }

/* ── v1.75.1 fixes ─────────────────────────────────────────────────────
   The hero had no bottom padding, so the last child's bottom margin collapsed
   out through it and exposed a strip of page background between the hero and
   the facts band. Padding on the parent stops the collapse. */
.ph-plan__ghero { padding-bottom: var(--ph-space-5); }
.ph-plan__gband { margin-top: 0; }

/* Picks were locked to two columns, so in the narrower main column beside the
   sidebar each card fell to about 240px and every line of text wrapped. They
   now fit as many readable columns as the space allows and never go below a
   width the copy can live in. */
.ph-plan__picks { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1100px) { .ph-plan__picks { grid-template-columns: 1fr; } }

/* Link out when a source video cannot be embedded. */
.ph-plan__vidlink { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); text-decoration: none; color: var(--ph-color-ink); font-size: var(--ph-text-small); font-weight: 700; }
.ph-plan__vidlink:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-plan__vidlink-play { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ph-color-primary); color: #fff; font-size: 11px; flex-shrink: 0; }

/* ── v1.75.2 ───────────────────────────────────────────────────────────
   Picks must sit side by side. The previous single-column override kicked in
   at 1100px, which is wider than most laptop windows, so cards stacked on the
   very screens that had room for two. The auto-fill track already collapses
   on its own, so the override only needs to apply on genuinely narrow screens. */
@media (max-width: 1100px) { .ph-plan__picks { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 560px) { .ph-plan__picks { grid-template-columns: 1fr; } }
.ph-plan__vid video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* ── v1.77.0 ───────────────────────────────────────────────────────────
   Picks sit two abreast on desktop, as drawn in the mockup, rather than the
   auto-fill track squeezing a third column in on wide screens. */
.ph-plan__picks { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .ph-plan__picks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .ph-plan__picks { grid-template-columns: 1fr; } }

/* Hero pills were carrying too much vertical weight against the title. */
.ph-plan__chip { padding: 3px 12px; font-size: 10.5px; letter-spacing: .045em; }

/* oEmbed returns its own iframe or blockquote; let it size itself rather
   than being cropped to the 9:11 frame used for known players. */
.ph-plan__vid--oembed { aspect-ratio: auto; background: transparent; }
.ph-plan__vid--oembed iframe,
.ph-plan__vid--oembed blockquote { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

/* Favourite control: the same heart and the same word as a listing page, so
   saving a plan does not read as a different feature from saving a venue.
   Filled only once saved, which is what makes the state readable at a glance. */
.ph-plan__save { display: inline-flex; align-items: center; gap: 7px; }
.ph-plan__heart { flex-shrink: 0; }
.ph-plan__save.is-fav { color: var(--ph-color-primary); border-color: var(--ph-color-primary); }
.ph-plan__save.is-fav .ph-plan__heart path { fill: var(--ph-color-primary); }

/* ── Guide hero with the cover behind it ─────────────────────
   The scrim is deliberately heavy: a guide headline and standfirst have to be
   readable over whatever photograph the guide happens to carry, so legibility
   wins and the image is atmosphere rather than subject. */
.ph-plan__ghero--photo {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.ph-plan__ghero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22,18,27,.72) 0%, rgba(22,18,27,.88) 100%);
	pointer-events: none;
}
.ph-plan__ghero--photo > .ph-container { position: relative; z-index: 1; }
.ph-plan__ghero--photo .ph-plan__gtitle,
.ph-plan__ghero--photo .ph-plan__gbio,
.ph-plan__ghero--photo .ph-plan__gbio p,
.ph-plan__ghero--photo .ph-plan__spotted,
.ph-plan__ghero--photo .ph-plan__spotted span { color: #fff; }
.ph-plan__ghero--photo .ph-plan__gbio { color: rgba(255,255,255,.92); }