/**
 * Plan Heavy page widgets (Elementor).
 *
 * Styles for the custom page-building widgets (hero, chip row, quick cards,
 * editorial rail, feature cards, pricing tiers, CTA band, contact form, mode
 * band). Every value derives from the live design tokens in inc/tokens.php so
 * imported pages match the rest of the site. All classes are prefixed
 * .ph-el- so they never collide with the search, listing, or Elementor core
 * styles. Colours, spacing, borders, and typography remain overridable per
 * widget from the Elementor Style tab; these are the on-brand defaults.
 */

.ph-el {
	--ph-el-pink: var(--ph-color-primary, #e8568a);
	--ph-el-pink-dark: #c23a6c;
	--ph-el-pink-soft: #fdeef4;
	--ph-el-ink: var(--ph-color-ink, #21253a);
	--ph-el-ink-soft: var(--ph-color-ink-soft, #5a5f73);
	--ph-el-line: var(--ph-color-line, #e6e8ee);
	--ph-el-surface: var(--ph-color-surface, #ffffff);
	--ph-el-bg: var(--ph-color-bg, #f5f7fa);
	--ph-el-open: #3baa6b;
	--ph-el-open-soft: #e9f6ee;
	--ph-el-amber: #e0a638;
	--ph-el-amber-soft: #fdf6e7;
	--ph-el-family: #8a5be1;
	--ph-el-family-soft: #f3edfc;
	--ph-el-vegan: #2e9e6b;
	--ph-el-open-ink: #1f7d54;
	--ph-el-amber-ink: #8a5f0b;
	--ph-el-family-ink: #5d4490;
	--ph-el-vegan-ink: #1f7d54;
	--ph-el-r-sm: 8px;
	--ph-el-r-md: 14px;
	--ph-el-r-lg: 20px;
	--ph-el-shadow: 0 2px 10px rgba(33, 37, 58, 0.06);
	--ph-el-shadow-lift: 0 8px 24px rgba(33, 37, 58, 0.10);
	--ph-el-wrap: 1120px;
}

/* Shared building blocks ------------------------------------------------ */
.ph-el * { box-sizing: border-box; }
.ph-el__wrap { max-width: var(--ph-el-wrap); margin: 0 auto; }
.ph-el__eyebrow {
	font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; margin-bottom: 10px; color: var(--ph-el-ink-soft);
}
.ph-el__sec-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; margin-bottom: 18px;
}
.ph-el__sec-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--ph-el-ink); margin: 0; }
.ph-el__sec-sub { font-size: 13.5px; color: var(--ph-el-ink-soft); margin: 3px 0 0; }
.ph-el__sec-link { font-size: 13.5px; font-weight: 700; color: var(--ph-el-pink-dark); white-space: nowrap; text-decoration: none; }
.ph-el__btn {
	display: inline-block; background: var(--ph-el-pink); color: #fff;
	border: 1.5px solid var(--ph-el-pink); border-radius: 999px;
	padding: 11px 22px; font-size: 14px; font-weight: 700; text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s; cursor: pointer;
}
.ph-el__btn:hover { background: var(--ph-el-pink-dark); border-color: var(--ph-el-pink-dark); color: #fff; }
.ph-el__btn--ghost { background: transparent; color: var(--ph-el-ink); border-color: var(--ph-el-line); }
.ph-el__btn--ghost:hover { background: transparent; border-color: var(--ph-el-ink); color: var(--ph-el-ink); }
.ph-el__btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.ph-el__btn--ghost-light:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }

/* Hero ------------------------------------------------------------------ */
.ph-el-hero { padding: 56px 22px 60px; }
.ph-el-hero--gradient { background: linear-gradient(160deg, #9c4a28, #c96a3a 70%, #dd8048); color: #fff; }
.ph-el-hero--ink { background: var(--ph-el-ink); color: #fff; }
.ph-el-hero--light { background: var(--ph-el-surface); color: var(--ph-el-ink); border-bottom: 1px solid var(--ph-el-line); }
.ph-el-hero__eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.ph-el-hero--gradient .ph-el-hero__eyebrow { color: #ffd9c2; }
.ph-el-hero--ink .ph-el-hero__eyebrow { color: #ffd0e0; }
.ph-el-hero--light .ph-el-hero__eyebrow { color: var(--ph-el-pink-dark); }
.ph-el-hero__title { font-size: 38px; font-weight: 800; letter-spacing: -1.1px; line-height: 1.12; margin: 0; max-width: 600px; }
.ph-el-hero__sub { font-size: 15.5px; margin-top: 14px; max-width: 500px; line-height: 1.5; }
.ph-el-hero--gradient .ph-el-hero__sub, .ph-el-hero--ink .ph-el-hero__sub { opacity: 0.9; }
.ph-el-hero--light .ph-el-hero__sub { color: var(--ph-el-ink-soft); }
.ph-el-hero__btns { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.ph-el-hero__stats { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.ph-el-hero__stat-num { font-size: 26px; font-weight: 800; line-height: 1.1; }
.ph-el-hero__stat-lab { font-size: 12px; opacity: 0.85; }
.ph-el-hero--light .ph-el-hero__stat-lab { opacity: 1; color: var(--ph-el-ink-soft); }

/* Chip row -------------------------------------------------------------- */
.ph-el-chips { padding: 22px; }
.ph-el-chips__row { display: flex; gap: 9px; flex-wrap: wrap; }
.ph-el-chips__chip {
	display: inline-block; border: 1px solid var(--ph-el-line); background: var(--ph-el-surface);
	border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 700;
	color: var(--ph-el-ink-soft); text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ph-el-chips__chip:hover { border-color: var(--ph-el-pink); color: var(--ph-el-pink-dark); }
.ph-el-chips__chip.is-on { background: var(--ph-el-pink); border-color: var(--ph-el-pink); color: #fff; }

/* Quick cards ----------------------------------------------------------- */
.ph-el-quick { padding: 22px; }
.ph-el-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ph-el-quick__card {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	border-radius: var(--ph-el-r-md); padding: 20px 22px; text-decoration: none;
	border: 1px solid transparent;
}
.ph-el-quick__title { font-weight: 800; font-size: 15px; }
.ph-el-quick__sub { font-size: 12.5px; color: var(--ph-el-ink-soft); margin-top: 3px; }
.ph-el-quick__arrow { font-size: 19px; font-weight: 700; }
.ph-el-quick__card--open { background: var(--ph-el-open-soft); }
.ph-el-quick__card--open .ph-el-quick__title, .ph-el-quick__card--open .ph-el-quick__arrow { color: var(--ph-el-open-ink); }
.ph-el-quick__card--amber { background: var(--ph-el-amber-soft); }
.ph-el-quick__card--amber .ph-el-quick__title, .ph-el-quick__card--amber .ph-el-quick__arrow { color: var(--ph-el-amber-ink); }
.ph-el-quick__card--family { background: var(--ph-el-family-soft); }
.ph-el-quick__card--family .ph-el-quick__title, .ph-el-quick__card--family .ph-el-quick__arrow { color: var(--ph-el-family-ink); }
.ph-el-quick__card--pink { background: var(--ph-el-pink-soft); }
.ph-el-quick__card--pink .ph-el-quick__title, .ph-el-quick__card--pink .ph-el-quick__arrow { color: var(--ph-el-pink-dark); }

/* Editorial rail -------------------------------------------------------- */
.ph-el-rail { padding: 44px 22px; }
.ph-el-rail__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: 262px; gap: 16px;
	overflow-x: auto; padding-bottom: 8px; scrollbar-width: none;
}
.ph-el-rail__track::-webkit-scrollbar { display: none; }
.ph-el-lcard {
	background: var(--ph-el-surface); border: 1px solid var(--ph-el-line);
	border-radius: var(--ph-el-r-md); box-shadow: var(--ph-el-shadow); overflow: hidden;
	text-decoration: none; color: inherit; display: block;
	transition: box-shadow 0.15s, transform 0.15s;
}
.ph-el-lcard:hover { box-shadow: var(--ph-el-shadow-lift); transform: translateY(-2px); }
.ph-el-lcard__img { position: relative; height: 140px; background: linear-gradient(140deg, #d8dde6, #eef1f6); }
.ph-el-lcard__img--food { background: linear-gradient(140deg, #e8c8b0, #f2e2d2); }
.ph-el-lcard__img--cafe { background: linear-gradient(140deg, #cfd9c8, #e8eee2); }
.ph-el-lcard__img--bar { background: linear-gradient(140deg, #c8cfe0, #e2e6f2); }
.ph-el-lcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-el-lcard__badge {
	position: absolute; top: 10px; left: 10px; background: var(--ph-el-surface);
	border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 800;
	box-shadow: var(--ph-el-shadow); color: var(--ph-el-ink);
}
.ph-el-lcard__logo {
	position: absolute; right: 12px; bottom: -12px; width: 40px; height: 40px;
	border-radius: 10px; background: var(--ph-el-ink); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800;
	font-size: 15px; border: 3px solid var(--ph-el-surface);
}
.ph-el-lcard__logo--img { background: var(--ph-el-surface); overflow: hidden; padding: 0; }
.ph-el-lcard__logo--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; }
.ph-el-lcard__body { padding: 16px 16px 10px; }
.ph-el-lcard__title { font-size: 15.5px; font-weight: 800; letter-spacing: -0.3px; }
.ph-el-lcard__desc { font-size: 12.5px; color: var(--ph-el-ink-soft); margin-top: 4px; min-height: 32px; }
.ph-el-lcard__meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.ph-el-lcard__meta .price { color: var(--ph-el-ink-soft); }
.ph-el-lcard__meta .open { color: var(--ph-el-open-ink); }
.ph-el-lcard__meta .closed { color: var(--ph-el-ink-soft); }
.ph-el-lcard__foot {
	display: flex; align-items: center; justify-content: space-between;
	border-top: 1px solid var(--ph-el-line); padding: 9px 16px; margin-top: 6px;
	font-size: 11.5px; color: var(--ph-el-ink-soft);
}
.ph-el-rail__empty { font-size: 13.5px; color: var(--ph-el-ink-soft); padding: 8px 0; }

/* Feature cards --------------------------------------------------------- */
.ph-el-features { padding: 44px 22px; }
.ph-el-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ph-el-features__grid--stacked { grid-template-columns: 1fr; gap: 16px; }
.ph-el-feature {
	background: var(--ph-el-surface); border-radius: var(--ph-el-r-md);
	box-shadow: var(--ph-el-shadow); padding: 22px 24px;
}
.ph-el-feature__icon { font-size: 22px; }
.ph-el-feature__title { font-size: 15.5px; font-weight: 800; margin: 10px 0 6px; }
.ph-el-feature__text { font-size: 13px; color: var(--ph-el-ink-soft); line-height: 1.5; }
.ph-el-feature__text a { color: var(--ph-el-pink); font-weight: 700; text-decoration: none; }

/* Pricing tiers --------------------------------------------------------- */
.ph-el-tiers { padding: 44px 22px; }
.ph-el-tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.ph-el-tier {
	background: var(--ph-el-surface); border: 1px solid var(--ph-el-line);
	border-radius: var(--ph-el-r-lg); padding: 26px 24px; position: relative;
}
.ph-el-tier--hot { border: 2px solid var(--ph-el-pink); box-shadow: var(--ph-el-shadow-lift); }
.ph-el-tier__flag {
	position: absolute; top: -11px; left: 24px; background: var(--ph-el-pink);
	color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.05em; padding: 4px 12px; border-radius: 999px;
}
.ph-el-tier__name { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ph-el-ink-soft); }
.ph-el-tier__name--gold { color: var(--ph-el-amber-ink); }
.ph-el-tier__price { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin: 10px 0 2px; }
.ph-el-tier__per { font-size: 12.5px; color: var(--ph-el-ink-soft); margin-bottom: 16px; }
.ph-el-tier__list { list-style: none; font-size: 13.5px; margin: 0; padding: 0; }
.ph-el-tier__list li { padding: 7px 0 7px 24px; position: relative; border-top: 1px solid var(--ph-el-line); }
.ph-el-tier__list li::before { content: '\2713'; position: absolute; left: 2px; color: var(--ph-el-open-ink); font-weight: 800; }
.ph-el-tier__list li.is-no { color: var(--ph-el-ink-soft); }
.ph-el-tier__list li.is-no::before { content: '\00d7'; color: var(--ph-el-ink-soft); font-weight: 700; }
.ph-el-tier .ph-el__btn { width: 100%; text-align: center; margin-top: 18px; }
.ph-el-tiers__note { font-size: 12.5px; color: var(--ph-el-ink-soft); margin-top: 16px; text-align: center; }
.ph-el-tier--gold { border: 2px solid var(--ph-el-amber); box-shadow: var(--ph-el-shadow-lift); }
.ph-el-tier__flag--gold { background: var(--ph-el-amber-soft); color: #8a5f0b; }
.ph-el-tier__list--gold li:not(.is-no)::before { content: '\2605'; color: var(--ph-el-amber-ink); }
.ph-el-tier__note { font-size: 12px; color: var(--ph-el-ink-soft); margin-top: 14px; line-height: 1.5; }

/* CTA band -------------------------------------------------------------- */
.ph-el-cta { padding: 44px 22px; }
.ph-el-cta__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
}
.ph-el-cta__title { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }
.ph-el-cta__text { font-size: 13.5px; color: var(--ph-el-ink-soft); margin: 6px 0 0; max-width: 520px; }

/* Contact form ---------------------------------------------------------- */
.ph-el-form { padding: 44px 22px; }
.ph-el-form__card {
	background: var(--ph-el-surface); border: 1px solid var(--ph-el-line);
	border-radius: var(--ph-el-r-md); box-shadow: var(--ph-el-shadow); padding: 28px;
}
.ph-el-form__title { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.ph-el-form__field { display: block; margin-bottom: 16px; }
.ph-el-form__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ph-el-form__topics { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-el-form__topic {
	border: 1px solid var(--ph-el-line); background: var(--ph-el-surface); border-radius: 999px;
	padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--ph-el-ink-soft); cursor: pointer;
}
.ph-el-form__topic.is-on { background: var(--ph-el-pink); border-color: var(--ph-el-pink); color: #fff; }
.ph-el-form__input {
	width: 100%; border: 1px solid var(--ph-el-line); border-radius: var(--ph-el-r-sm);
	padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--ph-el-ink);
	background: var(--ph-el-surface);
}
.ph-el-form__input:focus { outline: 2px solid var(--ph-el-pink); outline-offset: 1px; border-color: var(--ph-el-pink); }
textarea.ph-el-form__input { min-height: 120px; resize: vertical; }
.ph-el-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ph-el-form__note { font-size: 12px; color: var(--ph-el-ink-soft); margin-top: 12px; }
.ph-el-form__status { font-size: 13.5px; font-weight: 700; margin-top: 12px; }
.ph-el-form__status.is-ok { color: var(--ph-el-open-ink); }
.ph-el-form__status.is-err { color: var(--ph-el-pink-dark); }

/* Mode band ------------------------------------------------------------- */
.ph-el-modes { padding: 44px 22px; text-align: center; }
.ph-el-modes__title { font-size: 21px; font-weight: 800; }
.ph-el-modes__sub { font-size: 13.5px; color: var(--ph-el-ink-soft); margin: 8px auto 20px; }
.ph-el-modes__row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ph-el-mode {
	border: 1.5px solid var(--ph-el-line); background: var(--ph-el-surface); border-radius: 999px;
	padding: 10px 20px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--ph-el-ink);
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ph-el-mode--vegan:hover { border-color: var(--ph-el-vegan); color: var(--ph-el-vegan-ink); background: #eef8f2; }
.ph-el-mode--halal:hover { border-color: #1d8a8a; color: #1d8a8a; background: #e9f4f4; }
.ph-el-mode--access:hover { border-color: #2b6fc4; color: #2b6fc4; background: #ecf2fb; }
.ph-el-mode--family:hover { border-color: var(--ph-el-family); color: var(--ph-el-family-ink); background: var(--ph-el-family-soft); }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 880px) {
	.ph-el-hero__title { font-size: 28px; }
	.ph-el-features__grid, .ph-el-tiers__grid { grid-template-columns: 1fr; }
	.ph-el-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ══ Hero gradient variants (venues, creators, plans) ═══════════ */
.ph-el-hero--green  { background: linear-gradient(160deg, #14543a, #1f7d54 70%, #2a9968); color: #fff; }
.ph-el-hero--purple { background: linear-gradient(160deg, #45356b, #5d4490 70%, #6c4fa8); color: #fff; }
.ph-el-hero--pink   { background: linear-gradient(160deg, #8a2e54, #c2436f 70%, var(--ph-el-pink)); color: #fff; }
.ph-el-hero--green .ph-el-hero__title, .ph-el-hero--purple .ph-el-hero__title, .ph-el-hero--pink .ph-el-hero__title { color: var(--ph-el-ink); }
.ph-el-hero--green .ph-el-hero__eyebrow  { color: #9fdcbd; }
.ph-el-hero--purple .ph-el-hero__eyebrow { color: #d5c8f5; }
.ph-el-hero--pink .ph-el-hero__eyebrow   { color: #ffd0e0; }
.ph-el-hero--green .ph-el-hero__sub,
.ph-el-hero--purple .ph-el-hero__sub,
.ph-el-hero--pink .ph-el-hero__sub { opacity: 0.94; }
/* White solid button reads on the coloured heroes. */
.ph-el-hero--green .ph-el__btn:not(.ph-el__btn--ghost):not(.ph-el__btn--ghost-light),
.ph-el-hero--purple .ph-el__btn:not(.ph-el__btn--ghost):not(.ph-el__btn--ghost-light),
.ph-el-hero--pink .ph-el__btn:not(.ph-el__btn--ghost):not(.ph-el__btn--ghost-light) { background: #fff; color: var(--ph-el-ink); border-color: #fff; }
.ph-el-hero--green .ph-el__btn:not(.ph-el__btn--ghost):not(.ph-el__btn--ghost-light) { color: #1f7d54; }

/* ══ Plan cards ════════════════════════════════════════════════ */
.ph-el-plans { padding: 44px 22px; }
.ph-el-plans__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.ph-el-plan { display: block; background: var(--ph-el-surface); border: 1px solid var(--ph-el-line); border-radius: var(--ph-el-r-md); overflow: hidden; box-shadow: var(--ph-el-shadow); text-decoration: none; color: var(--ph-el-ink); transition: box-shadow 0.15s, transform 0.15s; }
.ph-el-plan:hover { box-shadow: var(--ph-el-shadow-lift); transform: translateY(-2px); }
.ph-el-plan__img { height: 128px; background: linear-gradient(135deg, #3a3f55, #21253a); background-size: cover; background-position: center; position: relative; }
.ph-el-plan__tag { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ph-el-pink-dark); font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.ph-el-plan__body { padding: 14px 16px 16px; }
.ph-el-plan__title { font-weight: 800; font-size: 15px; }
.ph-el-plan__desc { font-size: 12.5px; color: var(--ph-el-ink-soft); margin-top: 4px; }
.ph-el-plans__empty { border: 2px dashed var(--ph-el-line); border-radius: var(--ph-el-r-md); padding: 28px; text-align: center; color: var(--ph-el-ink-soft); font-size: 13.5px; font-weight: 600; }

/* ══ Notice strip ══════════════════════════════════════════════ */
.ph-el-notice { padding: 8px 22px 24px; }
.ph-el-notice__box { display: flex; align-items: center; gap: 14px; background: var(--ph-el-pink-soft); border: 1px solid #f6d6e4; border-radius: var(--ph-el-r-md); padding: 16px 18px; flex-wrap: wrap; }
.ph-el-notice__icon { font-size: 22px; }
.ph-el-notice__txt { flex: 1 1 240px; }
.ph-el-notice__title { font-weight: 800; font-size: 14.5px; }
.ph-el-notice__sub { font-size: 12.5px; color: var(--ph-el-ink-soft); }
.ph-el-notice__btn { background: var(--ph-el-pink); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.ph-el-notice__btn:hover { background: var(--ph-el-pink-dark); }

/* ══ B2B split cells ═══════════════════════════════════════════ */
.ph-el-split { padding: 44px 22px; }
.ph-el-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ph-el-split__cell { border-radius: var(--ph-el-r-lg); padding: 34px 30px; color: #fff; }
.ph-el-split__cell--curator { background: linear-gradient(150deg, #5d4490, #45356b); }
.ph-el-split__cell--biz { background: linear-gradient(150deg, #1f7d54, #14543a); }
.ph-el-split__cell--pink { background: linear-gradient(150deg, #c2436f, #8a2e54); }
.ph-el-split__eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.ph-el-split__title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin: 8px 0 0; color: var(--ph-el-ink); }
.ph-el-split__text { font-size: 14px; opacity: 0.94; margin: 10px 0 0; }
.ph-el-split__btn { display: inline-block; margin-top: 18px; background: #fff; color: var(--ph-el-ink); border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.ph-el-split__cell--biz .ph-el-split__btn { color: #1f7d54; }
.ph-el-split__cell--curator .ph-el-split__btn { color: #5d4490; }

/* ══ Stats panel ═══════════════════════════════════════════════ */
.ph-el-stats { padding: 44px 22px; }
.ph-el-stats__grid--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 880px; margin: 0 auto; }
.ph-el-stats__box { background: #edeff5; border-radius: var(--ph-el-r-md); padding: 24px 22px; }
.ph-el-stats__blabel { font-size: 12px; font-weight: 700; color: var(--ph-el-ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.ph-el-stats__bnum { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin-top: 8px; color: var(--ph-el-ink); }
.ph-el-stats__unit { font-size: 15px; font-weight: 700; color: var(--ph-el-ink-soft); letter-spacing: 0; }
.ph-el-stats__bdelta { font-size: 14px; color: var(--ph-el-ink-soft); font-weight: 700; }
.ph-el-stats__bnote { font-size: 12.5px; color: var(--ph-el-ink-soft); margin: 6px 0 0; }
.ph-el-stats__card { background: var(--ph-el-surface); border: 1px solid var(--ph-el-line); border-radius: var(--ph-el-r-md); box-shadow: var(--ph-el-shadow-lift); padding: 24px; max-width: 560px; margin: 0 auto; }
.ph-el-stats__card-title { font-weight: 800; font-size: 14px; margin-bottom: 16px; }
.ph-el-stats__grid--card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ph-el-stats__tile { background: var(--ph-el-bg); border-radius: var(--ph-el-r-sm); padding: 14px; }
.ph-el-stats__tlabel { font-size: 11px; color: var(--ph-el-ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ph-el-stats__tnum { font-size: 23px; font-weight: 800; margin-top: 2px; }
.ph-el-stats__delta { font-size: 12px; color: var(--ph-el-open-ink); font-weight: 700; }
.ph-el-stats__foot { text-align: center; font-size: 12px; color: var(--ph-el-ink-soft); margin-top: 18px; }

/* ══ Steps ═════════════════════════════════════════════════════ */
.ph-el-steps { padding: 44px 22px; }
.ph-el-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.ph-el-step__num { width: 38px; height: 38px; border-radius: 50%; background: var(--ph-el-pink-soft); color: var(--ph-el-pink-dark); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ph-el-step__title { font-weight: 700; font-size: 15px; margin-top: 12px; }
.ph-el-step__text { font-size: 13px; color: var(--ph-el-ink-soft); margin: 4px 0 0; }

/* ══ FAQ ═══════════════════════════════════════════════════════ */
.ph-el-faq { padding: 44px 22px; }
.ph-el-faq__wrap { max-width: 760px; }
.ph-el-faq__title { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 18px; }
.ph-el-faq__item { border-bottom: 1px solid var(--ph-el-line); padding: 4px 0; }
.ph-el-faq__item summary { cursor: pointer; font-weight: 700; font-size: 14.5px; padding: 14px 0; list-style: none; position: relative; padding-right: 28px; }
.ph-el-faq__item summary::-webkit-details-marker { display: none; }
.ph-el-faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 20px; font-weight: 400; color: var(--ph-el-pink-dark); }
.ph-el-faq__item[open] summary::after { content: "\2212"; }
.ph-el-faq__item p { font-size: 13.5px; color: var(--ph-el-ink-soft); margin: 0 0 14px; line-height: 1.55; }

/* ══ Link-in-bio preview ═══════════════════════════════════════ */
.ph-el-bio { padding: 44px 22px; }
.ph-el-bio__split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.ph-el-bio__card { background: var(--ph-el-surface); border: 1px solid var(--ph-el-line); border-radius: var(--ph-el-r-lg); box-shadow: var(--ph-el-shadow-lift); padding: 26px; text-align: center; max-width: 330px; margin: 0 auto; width: 100%; }
.ph-el-bio__avatar { width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(135deg, #c2a0f3, #8a5fd0); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 23px; font-weight: 800; color: #fff; }
.ph-el-bio__handle { font-weight: 800; font-size: 16px; margin-top: 10px; }
.ph-el-bio__badge { display: inline-block; margin-top: 6px; background: #fdf3e0; color: #a06a0a; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.ph-el-bio__rows { display: grid; gap: 8px; margin-top: 18px; }
.ph-el-bio__row { padding: 11px; border: 1.5px solid var(--ph-el-line); border-radius: 999px; font-weight: 700; font-size: 13px; }
.ph-el-bio__row--primary { background: var(--ph-el-pink); color: #fff; border-color: var(--ph-el-pink); }
.ph-el-bio__url { font-size: 11px; color: var(--ph-el-ink-soft); margin-top: 14px; }

/* ══ Site footer ═══════════════════════════════════════════════ */
.ph-el-foot { background: var(--ph-el-ink); color: #c4c9d8; }
.ph-el-foot__modes { background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 22px; }
.ph-el-foot__modes-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ph-el-foot__modes-txt { font-weight: 800; font-size: 15px; color: #fff; }
.ph-el-foot__modes-txt small { display: block; font-weight: 500; font-size: 12px; color: #9aa1b4; margin-top: 2px; }
.ph-el-foot__modes-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-el-foot__mode { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ph-el-foot__mode--vegan:hover { background: #2e9e6b; border-color: #2e9e6b; }
.ph-el-foot__mode--halal:hover { background: #1d8a8a; border-color: #1d8a8a; }
.ph-el-foot__mode--accessible:hover { background: #2b6fc4; border-color: #2b6fc4; }
.ph-el-foot__mode--family:hover { background: #8a5be1; border-color: #8a5be1; }
.ph-el-foot__main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 44px 22px 30px; }
.ph-el-foot__brand { font-size: 20px; font-weight: 800; color: #fff; }
.ph-el-foot__pin { color: var(--ph-el-pink-dark); margin-left: 2px; }
.ph-el-foot__blurb { font-size: 13px; color: #9aa1b4; margin: 10px 0 0; max-width: 300px; line-height: 1.5; }
.ph-el-foot__col h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin: 0 0 12px; }
.ph-el-foot__col a { display: block; font-size: 13.5px; color: #b4bacb; text-decoration: none; padding: 5px 0; }
.ph-el-foot__col a:hover { color: #fff; }
.ph-el-foot__col a.is-muted { color: #6b7288; }
.ph-el-foot__bar { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ph-el-foot__bar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; flex-wrap: wrap; font-size: 12px; color: #9aa1b4; }
.ph-el-foot__legal a, .ph-el-foot__social a { color: #b4bacb; text-decoration: none; margin-left: 14px; }
.ph-el-foot__legal a:hover, .ph-el-foot__social a:hover { color: #fff; }

/* ══ Responsive: stack the two-column bands on mobile ══════════ */
@media (max-width: 720px) {
	.ph-el-split__grid, .ph-el-bio__split, .ph-el-stats__grid--card { grid-template-columns: 1fr; }
	.ph-el-foot__main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
	.ph-el-foot__main { grid-template-columns: 1fr; }
}

/* ══ Curator guides (city hub) ═════════════════════════════════ */
.ph-el-guides { padding: 44px 22px; }
.ph-el-guides__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ph-el-guide { display: block; background: var(--ph-el-surface); border: 1px solid var(--ph-el-line); border-radius: var(--ph-el-r-md); box-shadow: var(--ph-el-shadow); padding: 20px; text-align: center; text-decoration: none; color: var(--ph-el-ink); transition: box-shadow 0.15s, transform 0.15s; }
.ph-el-guide:hover { box-shadow: var(--ph-el-shadow-lift); transform: translateY(-2px); }
.ph-el-guide__avatar { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #f4a0c4, var(--ph-el-pink)); color: #fff; font-weight: 800; font-size: 20px; }
.ph-el-guide__name { display: block; font-weight: 800; font-size: 14.5px; margin-top: 10px; }
.ph-el-guide__tag { display: block; font-size: 12px; color: var(--ph-el-ink-soft); margin-top: 3px; line-height: 1.4; }
.ph-el-guides__empty { border: 2px dashed var(--ph-el-line); border-radius: var(--ph-el-r-md); padding: 26px; text-align: center; color: var(--ph-el-ink-soft); font-size: 13.5px; font-weight: 600; }

/* ══ CTA coloured card variants (creators purple, venues green) ═ */
.ph-el-cta__inner--purple, .ph-el-cta__inner--green, .ph-el-cta__inner--pink {
	flex-direction: column; text-align: center; align-items: center; gap: 8px;
	border-radius: var(--ph-el-r-lg); padding: 40px 34px; color: #fff;
}
.ph-el-cta__inner--purple { background: linear-gradient(150deg, #5d4490, #45356b); }
.ph-el-cta__inner--green  { background: linear-gradient(150deg, #1f7d54, #14543a); }
.ph-el-cta__inner--pink   { background: linear-gradient(150deg, #c2436f, #8a2e54); }
.ph-el-cta__inner--purple .ph-el-cta__title, .ph-el-cta__inner--green .ph-el-cta__title, .ph-el-cta__inner--pink .ph-el-cta__title { color: #fff; }
.ph-el-cta__inner--purple .ph-el-cta__text, .ph-el-cta__inner--green .ph-el-cta__text, .ph-el-cta__inner--pink .ph-el-cta__text { color: rgba(255,255,255,0.9); max-width: 460px; }
.ph-el-cta__inner--purple .ph-el__btn, .ph-el-cta__inner--green .ph-el__btn, .ph-el-cta__inner--pink .ph-el__btn { background: #fff; border-color: #fff; margin-top: 10px; }
.ph-el-cta__inner--purple .ph-el__btn { color: #5d4490; }
.ph-el-cta__inner--green .ph-el__btn { color: #1f7d54; }
.ph-el-cta__inner--pink .ph-el__btn { color: var(--ph-el-pink-dark); }

/* ══ Breadcrumb (city + category landing) ══════════════════════ */
.ph-el-crumb { padding: 14px 22px 0; font-size: 12.5px; }
.ph-el-crumb a { color: var(--ph-el-pink-dark); font-weight: 700; text-decoration: none; }
.ph-el-crumb a:hover { text-decoration: underline; }
.ph-el-crumb__sep { color: var(--ph-el-ink-soft); margin: 0 6px; }

/* ══ Cities nav dropdown (drop into any Elementor header) ══════ */
.ph-el-citynav { position: relative; display: inline-block; }
.ph-el-citynav__btn { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ph-el-pink-dark); background: var(--ph-el-pink-soft); border: 1px solid #f4c0d1; border-radius: 999px; padding: 7px 15px; display: inline-flex; align-items: center; gap: 5px; }
.ph-el-citynav__btn::-webkit-details-marker { display: none; }
.ph-el-citynav__btn::after { content: "\25BE"; font-size: 11px; }
.ph-el-citynav[open] .ph-el-citynav__btn::after { content: "\25B4"; }
.ph-el-citynav__panel { position: absolute; top: calc(100% + 12px); right: 0; width: 320px; background: var(--ph-el-surface); border: 1px solid var(--ph-el-line); border-radius: var(--ph-el-r-md); box-shadow: var(--ph-el-shadow-lift); padding: 14px; z-index: 50; }
.ph-el-citynav__panel::before { content: ""; position: absolute; top: -6px; right: 26px; width: 11px; height: 11px; background: var(--ph-el-surface); border-left: 1px solid var(--ph-el-line); border-top: 1px solid var(--ph-el-line); transform: rotate(45deg); }
.ph-el-citynav__head { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ph-el-ink-soft); margin-bottom: 8px; }
.ph-el-citynav__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: var(--ph-el-r-sm); font-size: 13.5px; font-weight: 600; color: var(--ph-el-ink); text-decoration: none; }
a.ph-el-citynav__row:hover { background: var(--ph-el-bg); }
.ph-el-citynav__row.is-on { background: var(--ph-el-pink-soft); font-weight: 800; }
.ph-el-citynav__row.is-soon { color: var(--ph-el-ink-soft); cursor: default; }
.ph-el-citynav__meta { font-size: 11px; font-weight: 600; color: var(--ph-el-ink-soft); }
.ph-el-citynav__divider { border-top: 1px solid var(--ph-el-line); margin: 10px 0 9px; }
.ph-el-citynav__empty { font-size: 12.5px; color: var(--ph-el-ink-soft); padding: 4px 10px 8px; }
.ph-el-citynav__quick { display: flex; gap: 7px; flex-wrap: wrap; }
.ph-el-citynav__pill { border: 1px solid var(--ph-el-line); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--ph-el-ink); text-decoration: none; }
.ph-el-citynav__pill:hover { border-color: var(--ph-el-pink); color: var(--ph-el-pink-dark); }

/* ── Editorial rail cards: replicate the account Favourites card design.
   The ph-favs__ styles live in account.css which does not load on the
   homepage or city pages, so the card rules are mirrored here (scoped to the
   rail via .ph-el-railcard) so the rail is self-contained. Values match the
   Favourites card. */
.ph-el-railcard.ph-favs__card {
	background: var(--ph-color-surface, #fff);
	border: 1px solid var(--ph-color-line, #e6e8ee);
	border-radius: var(--ph-radius-md, 14px);
	overflow: visible;
	position: relative;
	display: flex; flex-direction: column;
	box-shadow: var(--ph-shadow-card, 0 1px 3px rgba(0,0,0,.06));
	width: 100%;
	transition: box-shadow 0.15s, transform 0.15s;
}
.ph-el-railcard.ph-favs__card:hover { box-shadow: var(--ph-el-shadow-lift, 0 8px 24px rgba(0,0,0,.1)); transform: translateY(-2px); }
.ph-el-railcard .ph-favs__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: visible; border-radius: var(--ph-radius-md, 14px) var(--ph-radius-md, 14px) 0 0; }
.ph-el-railcard .ph-favs__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--ph-radius-md, 14px) var(--ph-radius-md, 14px) 0 0; }
.ph-el-railcard .ph-favs__img--placeholder { display: block; width: 100%; height: 100%; background: var(--ph-color-bg, #f5f7fa); border-radius: var(--ph-radius-md, 14px) var(--ph-radius-md, 14px) 0 0; }
.ph-el-railcard .ph-favs__logo {
	position: absolute; left: 10px; bottom: -18px;
	width: 52px; height: 52px; border-radius: 50%;
	object-fit: cover; background: var(--ph-color-surface, #fff);
	border: 2.5px solid var(--ph-color-surface, #fff);
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
	z-index: 10;
}
.ph-el-railcard .ph-favs__body { padding: var(--ph-space-3, 12px); padding-top: calc(var(--ph-space-3, 12px) + 20px); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ph-el-railcard .ph-favs__info-col { display: contents; }
.ph-el-railcard .ph-favs__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ph-space-2, 8px); }
.ph-el-railcard .ph-favs__title { font-size: var(--ph-text-body, 15px); font-weight: 700; color: var(--ph-color-ink, #21253a); text-decoration: none; line-height: 1.3; flex: 1; }
.ph-el-railcard .ph-favs__title:hover { color: var(--ph-color-primary, #e8568a); }
.ph-el-railcard .ph-favs__desc { font-size: var(--ph-text-small, 13px); color: var(--ph-color-ink-soft, #5a5f73); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ph-el-railcard .ph-favs__meta { display: flex; align-items: center; gap: var(--ph-space-2, 8px); flex-wrap: wrap; font-size: var(--ph-text-small, 13px); color: var(--ph-color-ink-soft, #5a5f73); }
.ph-el-railcard .ph-favs__price { font-weight: 700; color: var(--ph-color-ink, #21253a); }
.ph-el-railcard .ph-favs__cuisine::before { content: '\B7'; margin-right: var(--ph-space-1, 4px); }
.ph-el-railcard .ph-favs__type { font-size: 11px; font-weight: 600; color: var(--ph-color-ink-soft, #5a5f73); }
.ph-el-railcard .ph-favs__type::before { content: '\B7'; margin-right: 4px; }
.ph-el-railcard .ph-favs__catrow {
	width: calc(100% + var(--ph-space-3, 12px) * 2);
	margin: auto calc(-1 * var(--ph-space-3, 12px)) calc(-1 * var(--ph-space-3, 12px));
	padding: 7px var(--ph-space-3, 12px);
	border-top: 1px solid var(--ph-color-line, #e6e8ee);
	background: var(--ph-color-bg, #f5f7fa);
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--ph-space-2, 8px); flex-wrap: wrap;
}
.ph-el-railcard .ph-favs__catpills { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-el-railcard .ph-favs__catpill {
	padding: 2px 8px; border-radius: var(--ph-radius-pill, 999px);
	font-size: 10px; font-weight: 600;
	background: color-mix(in srgb, var(--ph-color-primary, #e8568a) 10%, transparent);
	color: var(--ph-color-primary, #e8568a);
}


/* ── City hub: category tiles ────────────────────────────────
   Four across on desktop and tablet, two on a phone. A tablet has the width
   for four, and dropping to one on mobile wasted most of the screen. */
@media (max-width: 1024px) {
	.ph-el-quick__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
	.ph-el-quick__card { padding: 14px; }
	.ph-el-quick__title { font-size: 15px; }
	.ph-el-quick__sub { font-size: 11.5px; }
}
@media (max-width: 700px) {
	.ph-el-quick__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── City hub hero with a photograph ─────────────────────────
   The scrim keeps the headline and stats readable whatever image is chosen,
   rather than relying on the picture happening to be dark in the right
   places. The gradient stays underneath as the fallback while it loads. */
.ph-el-hero--photo {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.ph-el-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,16,26,.55) 0%, rgba(20,16,26,.78) 100%);
	pointer-events: none;
}
.ph-el-hero--photo > .ph-el__wrap { position: relative; z-index: 1; }

/* ── Place cards inside a city rail ──────────────────────────
   The rail is a grid with fixed auto-columns, so the card width comes from
   the track rather than the card. Widened a little for the richer card, and
   the card must fill its column or it sits narrow inside it. */
.ph-el-rail__track { grid-auto-columns: 284px; scroll-snap-type: x proximity; }
.ph-el-rail__track .ph-favs__card--place { width: 100%; scroll-snap-align: start; }
@media (max-width: 700px) {
	.ph-el-rail__track { grid-auto-columns: 78%; }
}

/* Open status badge on the card image. */
.ph-favs__openbadge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: #1f9d61;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 999px;
}
.ph-favs__openbadge--soon { background: #d98324; }

/* Rating line under the meta row. */
.ph-favs__ratingrow { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; }
.ph-favs__rating { font-weight: 800; color: #d9a441; }
.ph-favs__ratingcount { color: #5a6076; }