/*
 * Trellis — page & component styles (loaded after tokens.css + base.css).
 * Step 2: the shared listing card and archive row.
 */

/* ---------- listing media (markup from trellis-core: .p-media) ---------- */
.p-media { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--placeholder); }
.p-media.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-media.no-photo {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	color: #9fb0c4;
	background-image: linear-gradient(135deg, color-mix(in srgb, var(--navy-800) 9%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--navy-800) 9%, transparent) 50%, color-mix(in srgb, var(--navy-800) 9%, transparent) 75%, transparent 75%);
	background-size: 16px 16px;
}
.p-media.no-photo .icon { width: 30px; height: 30px; }
.p-media.no-photo span { font-size: 11px; font-weight: var(--fw-semibold); opacity: .8; }

/* =========================================================================
 * Listing card — ONE card for every list on the site (template-parts/listing-card.php).
 *
 * The archive row and the front-page card used to be two different designs of
 * the same object. They are now one stack — title, rating + open state,
 * address, summary, photo strip, actions — and the variant only changes the
 * frame: --list is full width, --grid is a column of a 3-up grid whose photo
 * strip is pulled to the top edge. Same order, same weights, both breakpoints.
 * ====================================================================== */
.l-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
/* The text block (head → chips). On a phone it stacks exactly like its
   siblings; on desktop it becomes the body column of the list card. */
.l-card-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.l-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.l-card-title { font-size: var(--fs-h3); font-weight: var(--fw-black); line-height: 1.5; }
.l-card-title a { color: var(--text); }
.l-card-title a:hover { color: var(--navy-900); }
.l-card--list .l-card-title { font-size: 18px; }

.l-card-sub { font-size: var(--fs-meta); color: var(--muted); line-height: 1.7; }

/* One line of title or credential under the name. Long ones wrap rather than
   overflow — an import can hold an unbroken run, hence overflow-wrap. */
.l-card-headline { margin-top: -4px; font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--text-soft); line-height: 1.7; overflow-wrap: anywhere; }

/* rating · open-now, on one line */
.l-card-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.l-fact { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.l-fact svg { flex-shrink: 0; }
.l-open.is-open { color: var(--verified); }
.l-open.is-closed { color: var(--alert); }

.l-card-addr { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.7; }
.l-card-addr svg { flex-shrink: 0; margin-top: 3px; color: var(--icon); }

/* two lines, so a long write-up cannot make one result tower over the rest */
.l-card-sum {
	font-size: 13.5px; line-height: 1.9; color: var(--text-soft);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* "خدمات: …" — list card only, at most four, clamped like the summary. */
.l-card-svc {
	font-size: var(--fs-meta); line-height: 1.8; color: var(--text-soft); overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.l-card-svc-label { font-weight: var(--fw-bold); color: var(--text); }

/* ---------- photo strip ----------
 * A plain scroll-snap row: it drags, wheels and keyboards with no JavaScript,
 * and directory.js only adds the arrows when the track actually overflows. */
.l-gal { position: relative; }
.l-gal-track {
	display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.l-gal-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .l-gal-track { scroll-behavior: auto; }
}
.l-gal-slide {
	flex: 0 0 auto; height: 96px; aspect-ratio: var(--ratio-media);
	display: block; scroll-snap-align: start;
	border-radius: var(--r-control); overflow: hidden; background: var(--placeholder);
}
.l-gal-slide .p-media { display: block; }
.l-gal-slide .p-media.no-photo { display: flex; }
/* The blurred backdrop copy is only shown by the desktop list card below. */
.p-media.has-photo .p-media-bg { display: none; }
.l-gal.is-single .l-gal-slide { height: 128px; }

.l-gal-arrow {
	position: absolute; inset-block-start: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; padding: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 50%;
	background: rgba(255,255,255,.94); color: var(--navy-800);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--navy-800) 16%, transparent);
}
.l-gal-arrow:hover { background: var(--white); border-color: var(--line-strong); }
.l-gal-arrow[hidden] { display: none; }
.l-gal-count { display: none; }
/* RTL: "previous" is toward the right edge, so its chevron is mirrored. */
.l-gal-arrow--prev { inset-inline-start: 6px; }
.l-gal-arrow--prev svg { transform: scaleX(-1); }
.l-gal-arrow--next { inset-inline-end: 6px; }

/* ---------- actions ----------
 * The phone is what the visitor came for, so it takes the solid fill and the
 * profile link steps back to an outline. */
.l-card-cta { display: flex; gap: 8px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--fill); }
.l-card-cta > .btn { flex: 1; min-width: 0; }
.reveal-phone.is-revealed { direction: ltr; unicode-bidi: isolate; }
.reveal-phone-noscript { font-size: var(--fs-meta); align-self: center; }

/* ---------- grid variant ---------- */
.l-card--grid { height: 100%; }
.l-card--grid .l-gal { order: -1; margin: -16px -16px 4px; }
.l-card--grid .l-gal-slide,
.l-card--grid .l-gal.is-single .l-gal-slide { flex-basis: 100%; height: auto; border-radius: 0; }
.l-card--grid .l-card-cta { margin-top: auto; }

@media (max-width: 720px) {
	.l-card { padding: 14px; gap: 9px; }
	.l-card-main { gap: 9px; }
	.l-card--list .l-card-title { font-size: 16.5px; }
	.l-gal-slide { height: 88px; }
	.l-gal.is-single .l-gal-slide { height: 116px; }
	.l-card--grid .l-gal { margin: -14px -14px 4px; }
	.l-card--grid .l-gal-slide,
	.l-card--grid .l-gal.is-single .l-gal-slide { height: auto; }
}
/* ---------- list variant, desktop ----------
 * Stacked full width, a wide card left most of its left half empty: short
 * lines of text, a 164px photo, two buttons. From tablet up it becomes a row —
 * the photo carousel takes a tall column on the start (right) side and the
 * text and actions share the rest — so the same content fills the width.
 * Below 721px none of this applies and the phone layout is untouched. */
@media (min-width: 721px) {
	.l-card--list {
		display: grid;
		grid-template-columns: clamp(210px, 32%, 280px) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"media body"
			"media cta";
		gap: 0 20px;
		padding: 18px;
	}
	.l-card--list .l-card-main { grid-area: body; }
	.l-card--list .l-card-cta { grid-area: cta; margin-top: 14px; }

	/* A square frame at the top of the column, the same on every card. It
	   used to stretch to the card's height, so each card's photo took a
	   different shape depending on how much text it had. The square fits the
	   shortest card; a longer one leaves some space under it. The track is
	   taken out of flow and each slide fills the whole frame, one at a time. */
	.l-card--list .l-gal { grid-area: media; align-self: start; aspect-ratio: 1 / 1; border-radius: var(--r-control); overflow: hidden; background: var(--placeholder); }
	.l-card--list .l-gal-track { position: absolute; inset: 0; gap: 0; }
	.l-card--list .l-gal-slide,
	.l-card--list .l-gal.is-single .l-gal-slide { flex: 0 0 100%; height: 100%; border-radius: 0; }
	/* Photos come in every shape, so a cropped fill would cut off heads or
	   shopfronts. The whole photo sits in it (contain) over a blurred copy
	   of itself, the same file, that fills what is left. */
	.l-card--list .p-media.has-photo img { position: relative; object-fit: contain; }
	.l-card--list .p-media.has-photo .p-media-bg {
		display: block; position: absolute; inset: 0;
		object-fit: cover; filter: blur(16px); transform: scale(1.2);
	}
	.l-card--list .l-gal-count {
		display: inline-flex; gap: 3px; position: absolute; z-index: 2;
		inset-block-end: 8px; inset-inline-start: 8px;
		padding: 3px 9px; border-radius: 999px;
		background: color-mix(in srgb, var(--navy-900) 72%, transparent); color: var(--white);
		font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.5;
	}
	.l-card--list .p-media.no-photo .icon { width: 40px; height: 40px; }
	.l-card--list .p-media.no-photo span { font-size: 12.5px; }
}
/* Only the narrowest phones cannot hold both actions on one line. */
@media (max-width: 340px) {
	.l-card-cta { flex-wrap: wrap; }
	.l-card-cta > .btn { flex: 1 0 100%; }
}

/* ================= homepage ================= */
.home-hero {
	background-color: var(--brand-primary);
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 48px 48px;
	padding: 64px 0 68px;
	color: var(--on-dark);
}
.home-hero-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-light, #f5c97a); font-size: 13px; font-weight: var(--fw-semibold); padding: 6px 12px; border-radius: var(--r-chip); }
.home-hero-title { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: 1.4; color: var(--on-dark); max-width: 780px; margin: 16px 0 0; text-wrap: balance; }
.home-hero-sub { font-size: 17px; line-height: 1.9; color: var(--on-dark-muted); max-width: 640px; margin-top: 14px; }

.home-hero-popular { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; font-size: var(--fs-sm); color: #7f91a8; }
.home-hero-popular a { border: 1px solid rgba(255,255,255,.18); color: #d3dde9; padding: 7px 14px; border-radius: var(--r-control); }
.home-hero-stats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; font-size: var(--fs-sm); color: #c7d3e1; }
.home-hero-stats strong { color: var(--on-dark); font-weight: var(--fw-bold); }
.home-hero-stats .d { width: 1px; height: 20px; background: rgba(255,255,255,.14); }

.home-cats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.home-cat { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; color: var(--text); }
.home-cat:hover { border-color: var(--line-strong); }
.home-cat-icon { width: 46px; height: 46px; border-radius: var(--r-control); background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--navy-700); }
.home-cat-icon svg { width: 24px; height: 24px; }
.home-cat-name { font-size: 16px; font-weight: var(--fw-bold); }
.home-cat-meta { font-size: 13px; color: var(--muted); }

.home-cities { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.home-city { display: flex; align-items: center; justify-content: space-between; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-control); padding: 16px 18px; color: var(--text); }
.home-city:hover { border-color: var(--line-strong); }
.home-city-name { font-size: 16px; font-weight: var(--fw-bold); }
.home-city-meta { font-size: 13px; color: var(--muted); }

.home-linkmod { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.home-linkmod h3 { font-size: 20px; font-weight: var(--fw-black); }
.home-linkmod p { font-size: var(--fs-sm); color: var(--muted); margin: 6px 0 16px; }

.home-plans {
	background-color: var(--navy-800);
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 48px 48px;
	padding: 60px 0;
	color: var(--on-dark-muted);
}
.home-plans-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.home-plans-head h2 { font-size: var(--fs-h2); font-weight: var(--fw-black); color: var(--on-dark); margin-top: 8px; }
.home-plans-head p { font-size: var(--fs-sm); line-height: 1.9; color: var(--on-dark-muted); margin-top: 8px; max-width: 640px; }
.home-plans-note { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.2); color: #c7d3e1; font-size: 13px; padding: 10px 14px; border-radius: var(--r-control); }
.home-plans-note svg { color: var(--accent); flex-shrink: 0; }
.home-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.home-plan { position: relative; background: var(--navy-600); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.home-plan.is-featured { border-color: rgba(14,122,92,.55); }
.home-plan-tag { position: absolute; inset-block-start: -10px; inset-inline-start: 24px; background: var(--verified); color: #fff; font-size: 11px; font-weight: var(--fw-black); padding: 4px 10px; border-radius: var(--r-chip); }
.home-plan-name { font-size: 20px; font-weight: var(--fw-black); color: var(--on-dark); }
.home-plan-price { font-size: 22px; font-weight: var(--fw-black); color: var(--on-dark); }
.home-plan-per { font-size: 13px; font-weight: var(--fw-semibold); color: #8fa3bc; }
.home-plan-desc { font-size: 13px; line-height: 1.9; }
.home-plan-features { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: #c7d3e1; }
.home-plan-features li { padding-inline-start: 18px; position: relative; }
.home-plan-features li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); }
.home-plan .btn { margin-top: auto; }

@media (max-width: 1000px) {
	.home-cats, .home-cities { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.home-plans-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.home-cats, .home-cities { grid-template-columns: 1fr; }
}

/* ================= listing archive ================= */
.p-arch-head, .p-arch-filter { border-bottom: 1px solid var(--line); }
.p-arch-head { padding: 24px 0 28px; }
/* Same two tracks as .p-arch-grid below, so the intro lines up with the
   results column and the facts card with the sidebar. */
.p-arch-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.p-arch-head-main { min-width: 0; }
.p-arch-head h1 { font-size: 32px; font-weight: var(--fw-black); line-height: 1.5; }
.p-arch-intro { margin-top: 10px; line-height: 2.1; color: var(--text-soft); font-size: 15px; text-align: justify; text-justify: inter-word; }
/* The fold is a phone-only affordance — see the ≤760px block. */
.p-intro-toggle { display: none; align-items: center; gap: 4px; margin-top: 2px; padding: 6px 0; min-height: var(--tap); background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--navy-700); cursor: pointer; }
.p-intro-toggle svg { transition: transform .2s ease; }
.p-intro-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.p-arch-jump { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.p-arch-jump-label { font-size: 13px; color: var(--muted); margin-inline-end: 2px; }
.p-arch-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: var(--fw-semibold); color: var(--navy-700); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.p-arch-jump a svg { color: var(--accent-ink); flex-shrink: 0; }
.p-arch-jump a:hover { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-ink); }
.p-arch-jump a:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* facts card beside the intro */
.p-arch-glance { overflow: hidden; border-top: 3px solid var(--accent); }
.p-glance-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; }
.p-glance-stats > div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 2px; padding: 16px 8px 14px; text-align: center; }
.p-glance-stats > div + div { border-inline-start: 1px solid var(--line); }
.p-glance-stats dd { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 26px; line-height: 1.25; font-weight: var(--fw-black); color: var(--navy-900); }
.p-glance-stats dd svg { color: var(--accent); }
.p-glance-stats dt { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* One number on its own reads as a sentence, not a column of one. */
.p-glance-stats.is-single > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 10px; padding: 16px 18px 14px; text-align: start; }
.p-glance-stats.is-single dd { font-size: 30px; }
.p-glance-stats.is-single dt { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-soft); }
.p-glance-points { list-style: none; margin: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.75; color: var(--text-soft); }
.p-glance-points li { display: flex; align-items: flex-start; gap: 8px; }
.p-glance-points svg { flex-shrink: 0; margin-top: 3px; color: var(--verified); }
.p-glance-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--muted); }
.p-glance-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.p-glance-foot a { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; font-weight: var(--fw-bold); color: var(--navy-700); }
.p-glance-foot a:hover { color: var(--accent-ink); }

/* Stuck under the site header rather than at top:0, where the (taller,
   higher) header used to hide it completely. --arch-filter-h is its one-row
   height (14 + 44 + 14 + border); anchors and the guide's contents card
   clear it. Phones get it unstuck — see the ≤760px block. */
.p-archive { --arch-filter-h: 73px; }
.p-arch-filter { padding: 14px 0; position: sticky; top: var(--header-h); z-index: 20; background: var(--white); }
@media screen and (min-width: 783px) { body.admin-bar .p-arch-filter { top: calc(var(--header-h) + 32px); }
}
@media screen and (min-width: 761px) and (max-width: 782px) { body.admin-bar .p-arch-filter { top: calc(var(--header-h) + 46px); }
}
@media (min-width: 761px) { html:has(.p-arch-filter) { scroll-padding-top: calc(var(--header-h) + 73px + 12px); }
}
.p-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.p-filterbar-form { display: contents; }
.p-filter-select { position: relative; display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.p-filter-select svg { color: var(--icon); pointer-events: none; }
.p-filter-select select { border: 0; background: transparent; font: inherit; color: inherit; padding-inline-end: 18px; appearance: none; -webkit-appearance: none; }
.p-chip-toggle { display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-soft); }
/* The map button in the filter bar is for stacked layouts only; wide screens have the sidebar card. */
.p-map-chip { display: none; background: var(--white); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy-700); cursor: pointer; }
.p-chip-toggle svg { opacity: 0; width: 15px; }
.p-chip-toggle:hover { border-color: var(--navy-700); color: var(--navy-900); }
.p-chip-toggle.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.p-chip-toggle.is-on svg { opacity: 1; }
/* City hub: category tiles, popular trades and neighbourhoods under the heading
   (template-parts/listing/city-categories.php). */
.p-cityhub { margin-top: 20px; }
.p-citycats-title { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-soft); margin-bottom: 10px; }
.p-citycats-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.p-citycat { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
.p-citycat:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
.p-citycat:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.p-citycat-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-control); background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--navy-700); }
.p-citycat-icon svg { width: 22px; height: 22px; }
.p-citycat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-citycat-name { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; }
.p-citycat-meta { font-size: 12.5px; color: var(--muted); }
/* Popular trades and neighbourhoods: a labelled row of chips each. */
.p-cityrow { display: flex; align-items: baseline; gap: 6px 12px; margin-top: 14px; }
.p-cityrow-label { flex-shrink: 0; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--text-soft); }
.p-cityrow-links { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

/* The tiles' stand-in, at the free end of the filter bar's own row (so the
   stuck bar stays one row tall). It holds its space while hidden, and
   directory.js reveals it once the tiles scroll away. */
.p-filterbar-cats { flex: 1 1 0; min-width: 160px; display: flex; align-items: center; gap: 8px; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
.p-filterbar-cats::-webkit-scrollbar { display: none; }
.p-arch-filter.is-cats-away .p-filterbar-cats { opacity: 1; visibility: visible; transition-delay: 0s; }
.p-catchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-soft); white-space: nowrap; }
.p-catchip .c { font-size: 12px; font-weight: var(--fw-regular, 400); color: var(--muted); }
a.p-catchip:hover { border-color: var(--navy-700); color: var(--navy-900); }
.p-catchip.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.p-catchip.is-on .c { color: rgba(255, 255, 255, .75); }
@media (prefers-reduced-motion: reduce) { .p-filterbar-cats { transition: none; }
}

.p-filter-clear { margin-inline-start: auto; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--alert); }

.p-arch-body { padding: 24px 0 40px; }
.p-arch-grid { display: flex; gap: 24px; align-items: flex-start; }
.p-arch-results { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* The city hub's list, named under the hub (archive-listing.php). */
.p-arch-listhead { padding: 0 2px; }
.p-arch-listhead h2 { font-size: 20px; font-weight: var(--fw-black); line-height: 1.6; color: var(--navy-900); }
.p-arch-listhead p { margin-top: 2px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.p-arch-listhead a { font-weight: var(--fw-bold); color: var(--navy-700); white-space: nowrap; }
.p-arch-listhead a:hover { color: var(--accent-ink); }
.p-arch-count { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 2px; }
.p-arch-empty { padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.p-arch-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.p-side-map { overflow: hidden; display: block; width: 100%; padding: 0; font: inherit; text-align: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.p-side-map:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--navy-800) 8%, transparent); }
.p-side-map:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.p-side-map-canvas i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #E5484D; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.p-side-map-canvas { position: relative; display: block; height: 150px; background: var(--surface-2); background-image: linear-gradient(color-mix(in srgb, var(--navy-800) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--navy-800) 8%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
.p-side-map-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--navy-700); border-top: 1px solid var(--line); }
.p-side-block { padding: 18px; }
.p-side-block h3 { font-size: 16px; font-weight: var(--fw-black); margin-bottom: 12px; }
.p-side-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.p-side-links a { display: flex; justify-content: space-between; color: var(--text-soft); }
.p-side-links .c { color: var(--muted); font-size: 12px; }
.p-side-join { }

.p-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0 4px; }
.p-pager .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: 15px; font-weight: var(--fw-semibold); color: var(--text); }
.p-pager .page-numbers.current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.p-pager .page-numbers.dots { border: 0; }
.p-pager a.page-numbers:hover { border-color: var(--navy-700); }

/* concierge inline module */
.p-concierge { background: var(--navy-900); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 16px; color: var(--on-dark-muted); }
.p-concierge h3 { font-size: 18px; font-weight: var(--fw-black); color: var(--on-dark); }
.p-concierge p { font-size: var(--fs-sm); line-height: 1.9; }
.p-concierge-scope { font-size: 12.5px; color: var(--on-dark-faint); }
.p-concierge-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.p-concierge-fields .field { margin: 0; gap: 5px; }
.p-concierge-fields .field span { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--on-dark-faint); }
.p-concierge-fields .field--full { grid-column: 1 / -1; }
.p-concierge-fields input, .p-concierge-fields select, .p-concierge-fields textarea { background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line); color: var(--on-dark); border-radius: var(--r-control); padding: 10px 12px; font: inherit; }
.p-concierge-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line); color: var(--on-dark-faint); border-radius: var(--r-control); padding: 10px 12px; font: inherit; text-align: right; }
.p-concierge-picker > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-concierge-picker svg { color: var(--on-dark-faint); flex-shrink: 0; }
.p-concierge-picker:hover, .p-concierge-picker.is-set { color: var(--on-dark); }
.p-concierge .form-notice { border-radius: var(--r-control); border: 1px solid transparent; }
.p-concierge .form-notice.ok { background: rgba(14,122,92,.18); border-color: rgba(14,122,92,.45); color: #6FE3C0; }
.p-concierge .form-notice.err { background: rgba(180,64,47,.18); border-color: rgba(180,64,47,.45); color: #FFAB98; }
.p-concierge-again { align-self: flex-start; color: var(--on-dark-faint); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.p-concierge-again:hover { color: var(--on-dark); }

/* business-owner banner at the top of a list (template-parts/listing/owner-callout.php).
   Laid out by the width of the results column, not the screen: the same list
   is wider with the sidebar gone. */
.p-owner-wrap { container-type: inline-size; scroll-margin-top: calc(var(--header-h) + var(--arch-filter-h) + 16px); }
.p-owner { position: relative; overflow: hidden; border: 1px solid var(--accent-soft-border); border-radius: var(--r-card); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 45%, var(--white)) 0%, var(--white) 100%); color: var(--text); }
.p-owner::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--accent); }
.p-owner-main { display: flex; align-items: center; gap: 14px; padding: 14px 20px 12px; }
.p-owner-intro { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.p-owner-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--accent); color: var(--on-accent, var(--navy-900)); }
.p-owner-title { margin: 0; font-size: 15px; line-height: 1.5; font-weight: var(--fw-black); }
.p-owner-title em { font-style: normal; color: var(--accent-ink); }
.p-owner-sub { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.p-owner-sub b { color: var(--verified); font-weight: var(--fw-bold); }

.p-owner-form { display: flex; gap: 8px; flex: none; margin: 0; }
.p-owner-field input { width: 124px; height: var(--tap); padding: 0 12px; border: 1px solid var(--accent-soft-border); border-radius: var(--r-control); background: var(--white); font: inherit; font-size: 13.5px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.p-owner-field input[type="tel"] { width: 136px; direction: ltr; text-align: right; }
.p-owner-field input::placeholder { color: var(--icon); }
.p-owner-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.p-owner-field input[aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 15%, transparent); }
.p-owner-btn { display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 16px; border: 0; border-radius: var(--r-control); background: var(--navy-700); color: var(--white); font: inherit; font-size: 13.5px; font-weight: var(--fw-bold); white-space: nowrap; cursor: pointer; transition: background .15s, transform .1s; }
.p-owner-btn:hover { background: var(--navy-900); }
.p-owner-btn:active { transform: translateY(1px); }
.p-owner-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.p-owner-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.p-owner-err { display: none; margin: -4px 0 0; padding: 0 20px 10px; font-size: 11.5px; color: var(--alert); }
.p-owner-err.is-on { display: block; }

.p-owner-done { display: none; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--verified-soft-border); border-radius: var(--r-control); background: var(--verified-soft); color: var(--verified); font-size: 13.5px; font-weight: var(--fw-bold); }
.p-owner-done svg { width: 18px; height: 18px; flex: none; }
.p-owner.is-sent .p-owner-form { display: none; }
.p-owner.is-sent .p-owner-done { display: flex; }

/* the direct ways in */
.p-owner-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 20px 12px; border-top: 1px dashed var(--accent-soft-border); background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.p-owner-direct-label { margin-inline-end: 2px; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--muted); }
.p-owner-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.p-owner-chip { --chip: var(--navy-700); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--accent-soft-border); border-radius: 999px; background: var(--white); color: var(--text); font-size: 12.5px; font-weight: var(--fw-medium); transition: border-color .15s, background .15s; }
.p-owner-chip:hover { border-color: var(--chip); background: color-mix(in srgb, var(--chip) 7%, var(--white)); color: var(--text); }
.p-owner-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.p-owner-chip svg { width: 16px; height: 16px; flex: none; color: var(--chip); }
.p-owner-chip--tel { font-weight: var(--fw-bold); }
.p-owner-chip--tel .num { direction: ltr; unicode-bidi: isolate; }
/* each network in its own colour */
.p-owner-chip--whatsapp { --chip: #1FAA53; }
.p-owner-chip--telegram { --chip: #229ED9; }
.p-owner-chip--bale     { --chip: #18A59A; }
.p-owner-chip--rubika   { --chip: #E2412F; }
.p-owner-chip--eitaa    { --chip: #EF7B16; }
.p-owner-chip--instagram { --chip: #D6249F; }
.p-owner-chip--linkedin { --chip: #0A66C2; }
.p-owner-chip--youtube  { --chip: #E62117; }
.p-owner-chip--aparat   { --chip: #ED145B; }

@container (max-width: 760px) {
	.p-owner-main { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 12px; }
	.p-owner-form { display: grid; grid-template-columns: 1fr 1fr auto; }
	.p-owner-field input, .p-owner-field input[type="tel"] { width: 100%; }
	.p-owner-direct { padding: 10px 16px 12px; }
	.p-owner-err { padding-inline: 16px; }
}
@container (max-width: 480px) {
	.p-owner-title { font-size: 14.5px; }
	.p-owner-ic { width: 36px; height: 36px; }
	.p-owner-form { grid-template-columns: 1fr 1fr; }
	.p-owner-btn { grid-column: 1 / -1; justify-content: center; }
	/* A grid, not a column flexbox: as a flex item the chip grid's height was
	   measured before its width, as if every chip sat on a row of its own. */
	.p-owner-direct { display: grid; gap: 8px; }
	.p-owner-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
	.p-owner-chips li { display: flex; }
	.p-owner-chip { flex-direction: column; justify-content: center; width: 100%; height: 56px; padding: 4px 2px; border-radius: var(--r-card); font-size: 11px; gap: 3px; }
	.p-owner-chip svg { width: 20px; height: 20px; }
	.p-owner-chip--tel .num { display: none; }
}
@media (prefers-reduced-motion: reduce) { .p-owner * { transition: none !important; }
}

/* ---- editorial guide + FAQ under the results ---- */
.p-arch-copy { padding: 48px 0 44px; border-top: 1px solid var(--line); }
.p-copy-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.p-copy-grid.has-side { grid-template-columns: minmax(0, 1fr) 300px; }
.p-copy-main { min-width: 0; }
.p-copy-side { position: sticky; top: calc(var(--header-h) + var(--arch-filter-h) + 20px); }
body.admin-bar .p-copy-side { top: calc(var(--header-h) + var(--arch-filter-h) + 52px); }

.p-guide-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.p-guide-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-chip); background: var(--accent-soft); color: var(--accent-ink); font-weight: var(--fw-bold); }
.p-guide-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

.p-guide-body { position: relative; font-size: 15.5px; color: var(--text-soft); }
.p-guide-body > :first-child { margin-top: 0; }
.p-guide-body p { margin: 0 0 14px; line-height: 2.1; text-align: justify; text-justify: inter-word; }
.p-guide-body h2 { position: relative; margin: 36px 0 12px; padding-inline-start: 16px; font-size: 22px; line-height: 1.6; font-weight: var(--fw-black); color: var(--text); }
.p-guide-body h2::before { content: ""; position: absolute; inset-inline-start: 0; top: .3em; bottom: .3em; width: 4px; border-radius: 2px; background: var(--accent); }
.p-guide-body > h2:first-child { font-size: 26px; }
.p-guide-body h3 { margin: 26px 0 8px; font-size: 18px; line-height: 1.7; font-weight: var(--fw-bold); color: var(--navy-800); }
.p-guide-body h4 { margin: 20px 0 6px; font-size: 16px; font-weight: var(--fw-bold); color: var(--navy-800); }
.p-guide-body strong { color: var(--text); }
.p-guide-body a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; }
.p-guide-body a:hover { color: var(--accent-ink); }
.p-guide-body ul, .p-guide-body ol { margin: 0 0 16px; padding: 0; line-height: 2; }
.p-guide-body li { text-align: justify; text-justify: inter-word; }
.p-guide-body ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.p-guide-body ul > li { position: relative; padding-inline-start: 22px; }
.p-guide-body ul > li::before { content: ""; position: absolute; inset-inline-start: 5px; top: .85em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.p-guide-body ol { padding-inline-start: 24px; }
.p-guide-body ol > li::marker { color: var(--accent-ink); font-weight: var(--fw-bold); }
.p-guide-body blockquote { margin: 18px 0; padding: 14px 18px; border-inline-start: 4px solid var(--accent); border-radius: var(--r-control); background: var(--surface); color: var(--text); }
.p-guide-body blockquote p:last-child { margin-bottom: 0; }
.p-guide-body img { max-width: 100%; height: auto; border-radius: var(--r-card); }
.p-guide-body table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14px; }
.p-guide-body :is(th, td) { padding: 10px 12px; border: 1px solid var(--line); text-align: start; }
.p-guide-body th { background: var(--surface); color: var(--text); }

/* Folded only once directory.js is there to unfold it (header.php sets .js
   before first paint); without it the guide is simply shown whole. */
.p-fold-bar { display: none; }
.js .p-guide-body.is-foldable:not(.is-open):not(.is-fits) { max-height: 560px; overflow: hidden; }
.js .p-guide-body.is-foldable:not(.is-open):not(.is-fits)::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white) 85%); pointer-events: none; }
.js .p-guide-body.is-animating { overflow: hidden; transition: max-height .4s cubic-bezier(.2, .7, .2, 1); }
.js .p-fold-bar { display: flex; justify-content: center; margin-top: 8px; }
.p-fold-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font: inherit; font-size: 14px; font-weight: var(--fw-bold); color: var(--navy-700); cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--navy-800) 6%, transparent); transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.p-fold-btn:hover { border-color: var(--navy-700); color: var(--navy-900); box-shadow: 0 6px 18px color-mix(in srgb, var(--navy-800) 10%, transparent); }
.p-fold-btn:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.p-fold-btn svg { transition: transform .2s ease; }
.p-fold-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.p-faq { margin-top: 44px; }
.p-guide + .p-faq { padding-top: 36px; border-top: 1px solid var(--line); }
.p-copy-main > .p-faq:first-child { margin-top: 0; }
.p-faq h2 { margin-bottom: 16px; font-size: 22px; font-weight: var(--fw-black); color: var(--text); }
.p-faq-list { display: flex; flex-direction: column; gap: 10px; }
.p-faq-item { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); transition: border-color .2s ease, box-shadow .2s ease; }
.p-faq-item:hover { border-color: var(--line-strong); }
.p-faq-item[open] { border-color: var(--accent-soft-border); box-shadow: var(--shadow-card); }
.p-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--tap); padding: 14px 18px; list-style: none; cursor: pointer; font-size: 15.5px; line-height: 1.8; font-weight: var(--fw-bold); color: var(--text); border-radius: var(--r-card); }
.p-faq-item summary::-webkit-details-marker { display: none; }
.p-faq-item summary:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.p-faq-icon { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--navy-700); transition: transform .2s ease, background .2s ease, color .2s ease; }
.p-faq-item[open] .p-faq-icon { transform: rotate(45deg); background: var(--accent); color: var(--on-accent, var(--navy-900)); }
.p-faq-a { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 2.05; color: var(--text-soft); text-align: justify; text-justify: inter-word; }

.p-copy-side .toc-card { padding: 18px; }
.p-copy-side .toc-list li { display: flex; align-items: baseline; }
.p-copy-side .toc-list a { flex: 1; min-width: 0; padding: 2px 0; transition: color .15s ease; }
.p-copy-side .toc-list a.is-active { color: var(--accent-ink); font-weight: var(--fw-bold); }
.p-guide-back { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); margin-top: 16px; border-radius: var(--r-control); background: var(--navy-800); color: var(--white); font-size: 13.5px; font-weight: var(--fw-bold); transition: background .15s ease; }
.p-guide-back:hover { background: var(--navy-900); color: var(--white); }
.p-guide-back:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.js .p-guide-body.is-animating { transition: none; }
	.p-fold-btn svg, .p-intro-toggle svg, .p-faq-icon { transition: none; }
}

.p-arch-links { padding: 44px 0; border-top: 1px solid var(--line); }
.p-arch-links h2 { font-size: 20px; font-weight: var(--fw-black); margin: 8px 0 14px; }
.p-linkgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.p-linkgrid a { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-control); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.p-linkgrid a:hover { border-color: var(--line-strong); }
/* Three blocks abreast leave too little width for a two-column link list. */
.grid-3 .p-linkgrid { grid-template-columns: 1fr; }

.p-arch-links-hub { margin: 24px 0 0; font-size: var(--fs-sm); }
.p-arch-links-hub a { font-weight: var(--fw-bold); color: var(--navy-700); }

@media (max-width: 1000px) {
	/* Stacked, the results column still has to stretch to the container.
	   Inherited align-items:flex-start sizes it to its content instead, and
	   the card photo strip then drags the whole page into a sideways scroll. */
	.p-arch-grid { flex-direction: column; align-items: stretch; }
	.p-arch-side { width: 100%; }
	.p-map-chip { display: inline-flex; }
	.p-concierge-fields { grid-template-columns: 1fr; }
	.p-linkgrid { grid-template-columns: 1fr; }

	/* One row that scrolls sideways, so the bar keeps the height the sticky
	   offsets assume instead of wrapping onto a second or third line. */
	.p-filterbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
	.p-filterbar::-webkit-scrollbar { display: none; }
	.p-filterbar > *, .p-filterbar-form > * { flex-shrink: 0; white-space: nowrap; }
	.p-arch-filter { padding: 12px 0; }

	.p-arch-head-grid, .p-copy-grid.has-side { grid-template-columns: minmax(0, 1fr); }
	.p-arch-head-grid { gap: 16px; }
	/* Stacked, a hub's card becomes a full-width row of numbers between the
	   ways in and the list, pushing the first result down for little; the
	   list head carries its ranking link instead. */
	.p-arch-glance.is-hub { display: none; }
	/* Stacked, the contents come before the text they index. */
	.p-copy-side { position: static; order: -1; }
}

@media (max-width: 760px) {
	/* A phone has no height to spare for a second sticky bar under the
	   header (and the header's own search strip hangs there), so here the
	   filters scroll away with the page. */
	.p-arch-filter { position: static; }
	.p-archive { --arch-filter-h: 0px; }
	/* With the bar unstuck there is nothing for the strip to hang from. */
	.p-filterbar-cats { display: none; }
	/* The tiles as one sideways row, so the first result stays near the top. */
	.p-cityhub { margin-top: 14px; }
	.p-citycats-title { font-size: 14px; margin-bottom: 8px; }
	.p-citycats-grid { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
	.p-citycats-grid::-webkit-scrollbar { display: none; }
	.p-citycats-grid > li { flex-shrink: 0; }
	.p-citycat { align-items: center; gap: 10px; padding: 10px 14px 10px 12px; }
	.p-citycat-icon { width: 36px; height: 36px; }
	.p-citycat-icon svg { width: 20px; height: 20px; }
	.p-citycat-name { font-size: 14px; white-space: nowrap; }
	.p-cityrow { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
	.p-cityrow-label { font-size: 13px; }
	.p-cityrow-links { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
	.p-cityrow-links::-webkit-scrollbar { display: none; }
	.p-arch-head { padding: 16px 0 20px; }
	.p-arch-head h1 { font-size: 24px; }
	.p-arch-intro { font-size: 14.5px; line-height: 2; }
	/* Four lines, then "ادامهٔ توضیحات" — so the first result is not a full
	   screen down. Still one <p> in the HTML; only the paint is clipped. */
	.js .p-arch-intro.is-foldable:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
	.js .p-intro-toggle { display: inline-flex; }
	.p-arch-jump { margin-top: 6px; }
	/* The nav's aria-label still names it; visually the chips speak for themselves. */
	.p-arch-jump-label { display: none; }
	.p-arch-jump a { min-height: 40px; }
	/* Stacked above the list on a phone, the card has to stay short. */
	.p-glance-stats > div { padding: 10px 6px 8px; }
	.p-glance-stats dd { font-size: 21px; }
	.p-glance-stats dt { font-size: 12px; }
	.p-glance-stats.is-single > div { padding: 10px 14px 8px; }
	.p-glance-stats.is-single dd { font-size: 24px; }
	.p-glance-points { padding: 10px 14px; gap: 4px; font-size: 12.5px; line-height: 1.7; }
	.p-glance-points svg { width: 14px; height: 14px; }
	.p-glance-foot { padding: 4px 14px; }
	.p-glance-foot a { min-height: var(--tap); }

	.p-arch-copy { padding: 32px 0; }
	.p-guide-body { font-size: 15px; }
	.p-guide-body h2 { font-size: 19px; margin-top: 28px; }
	.p-guide-body > h2:first-child { font-size: 21px; }
	.p-guide-body h3 { font-size: 16.5px; }
	.js .p-guide-body.is-foldable:not(.is-open):not(.is-fits) { max-height: 620px; }
	.p-faq h2 { font-size: 19px; }
	.p-faq-item summary { padding: 12px 14px; font-size: 15px; }
	.p-faq-a { padding: 0 14px 14px; font-size: 14.5px; }
}

/* ================= auth pages ================= */
.p-auth { display: flex; gap: 32px; align-items: flex-start; max-width: 900px; }
.p-auth-card { padding: 28px; flex: 1; max-width: 460px; }
.p-auth-form .field { margin-bottom: 14px; }
.p-auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-soft); margin: 4px 0 16px; }
.p-auth-otp-switch { margin-top: 14px; }
.p-auth-alt { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.p-auth-alt a { font-weight: var(--fw-bold); color: var(--navy-700); }
.p-auth-quote { flex: 1; padding-top: 40px; }
.p-auth-quote blockquote { margin: 0; font-size: 18px; line-height: 1.9; font-weight: var(--fw-semibold); color: var(--text); }
.p-auth-quote cite { display: block; margin-top: 10px; font-style: normal; color: var(--muted); font-size: 13.5px; }
@media (max-width: 800px) { .p-auth { flex-direction: column; } .p-auth-quote { display: none; }
}

.p-otp-input { font-size: 22px; letter-spacing: 6px; text-align: center; direction: ltr; }
.p-otp-input--phone { letter-spacing: 2px; text-align: right; }
.p-otp-debug-code { font-size: 20px; font-weight: var(--fw-black); letter-spacing: 4px; direction: ltr; display: inline-block; margin-inline-start: 6px; }
.p-linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: var(--fw-bold); color: var(--navy-700); cursor: pointer; text-decoration: underline; }

/* claim */
.p-claim { max-width: 720px; }

.field-required { color: var(--alert); font-size: 11.5px; font-weight: var(--fw-bold); margin-inline-start: 4px; }

/* ================= dashboard ================= */

.p-dash-block h2 { font-size: 17px; font-weight: var(--fw-black); margin-bottom: 10px; }

.p-rte-area h3 { font-size: 17px; font-weight: var(--fw-black); color: var(--text); margin: 14px 0 6px; }


/* ================= generic pages / blog / checkout ================= */
.p-page-head { margin-bottom: 20px; }
.p-page-head h1 { font-size: 30px; font-weight: var(--fw-black); margin-top: 8px; }
.p-prose h2 { font-size: 21px; font-weight: var(--fw-black); margin: 24px 0 10px; }
.p-prose h3 { font-size: 17px; font-weight: var(--fw-bold); margin: 18px 0 8px; }
.p-prose p { margin: 0 0 12px; line-height: 2.05; color: var(--text-soft); }
.p-prose ul, .p-prose ol { margin: 0 0 12px; padding-inline-start: 22px; line-height: 2; color: var(--text-soft); }
.p-prose a:not(.btn) { color: var(--navy-700); text-decoration: underline; }

.p-404, .p-search { max-width: 640px; }
.p-404 h1 { font-size: 28px; font-weight: var(--fw-black); margin: 8px 0; }
.p-404-actions { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.p-404-search, .p-search .search-form { margin-top: 16px; }

.p-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p-search-hit { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.p-search-hit:hover { border-color: var(--line-strong); }
.p-search-kind { font-size: 12px; font-weight: var(--fw-bold); color: var(--muted); }
.p-search-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); }
.p-search-excerpt { font-size: 13.5px; color: var(--text-soft); }

.blog-grid { align-items: start; }
.blog-card-media { display: block; aspect-ratio: var(--ratio-media); position: relative; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body .chip { align-self: flex-start; }
.blog-card-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.7; }
.blog-card-title a { color: var(--text); }

/* contact */
.p-contact-page { max-width: 720px; }
.p-contact-purpose { border: 0; padding: 0; margin: 0 0 16px; }
.p-contact-purpose legend { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-soft); margin-bottom: 8px; }
.p-purpose-opt { display: block; border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.p-purpose-opt.is-on { border-color: var(--navy-700); background: var(--surface); }
.p-purpose-opt input { margin-inline-end: 8px; }
.p-purpose-label { font-weight: var(--fw-bold); }
.p-purpose-blurb { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; padding-inline-start: 22px; }

.p-faq details { padding: 16px 18px; margin-bottom: 10px; }
.p-faq summary { font-weight: var(--fw-bold); cursor: pointer; }
.p-faq details p { margin-top: 10px; color: var(--text-soft); line-height: 2; }

.checkout-instructions p { line-height: 2; color: var(--text-soft); }
.checkout-address code { display: inline-block; background: var(--fill); padding: 8px 12px; border-radius: var(--r-chip); word-break: break-all; }
.checkout-reference-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.checkout-reference-form input { min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); font: inherit; }

/* ================= breadcrumb ================= */
.breadcrumb { padding: 12px 0; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--navy-900); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: var(--fw-bold); }
.breadcrumb .sep { color: #b0bccb; flex-shrink: 0; }

/* ================= single-listing ================= */

.p-prose p { margin: 0 0 10px; line-height: 2.05; color: var(--text-soft); }

.p-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.p-sec-ico { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.p-sec-ico svg { width: 21px; height: 21px; }
.p-sec-titles { min-width: 0; }

.p-sec-head p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.p-sec-aside { margin-inline-start: auto; }

/* ================= gallery lightbox (single-listing gallery + portfolio) ================= */

@keyframes tr-lightbox-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

/* =========================================================================
 * Reviews (#reviews) — summary, filterable histogram, review cards, form
 * ====================================================================== */

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; }
.stars svg.on { fill: var(--rating); }
.stars svg.off { fill: #d7dee7; }

.bar { flex: 1; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--rating); border-radius: 999px; }

@keyframes p-review-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.p-review-head { display: flex; align-items: center; gap: 12px; }

.p-review-body { position: relative; color: var(--text-soft); line-height: 2; }
.p-review-body p { margin: 0; }
.p-review-body.is-clamped { max-height: calc(2em * 4); overflow: hidden; }
.p-review-body.is-clamped::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2em; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white)); pointer-events: none; }

.p-review-reply { margin-top: 2px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: var(--r-control); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }

.p-review-reply p { margin: 0; font-size: var(--fs-sm); line-height: 1.9; color: var(--text-soft); }

.p-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; padding: 12px 14px; background: var(--surface); border-radius: var(--r-control); font-size: 13px; line-height: 1.9; color: var(--text-soft); cursor: pointer; }
.p-consent input { width: 18px; height: 18px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--navy-700); cursor: pointer; }

/* ---- single sidebar ---- */

.card--dark { background: var(--navy-600); border-radius: var(--r-card); padding: 20px; color: var(--on-dark-muted); display: flex; flex-direction: column; gap: 12px; }
.card--dark h3 { font-size: 16px; font-weight: var(--fw-black); color: var(--on-dark); }
.card--dark p { font-size: 13.5px; line-height: 1.9; }
.btn.on-dark { border-color: rgba(255,255,255,.28); color: var(--on-dark); }
.btn.on-dark:hover { border-color: rgba(255,255,255,.5); color: var(--on-dark); }

@media (max-width: 640px) {
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.p-review-head { flex-wrap: wrap; }
}

.home-plan--ads{border-style:dashed}

/* ================= specialty picker modal =================
 * The one overlay left in the theme: the concierge lead form's "specialty"
 * field (template-parts/search/specialty-modal.php, driven by
 * assets/js/global-search.js). archive-listing.php prints it next to the only
 * form that opens it, rather than the header printing it on every page.
 *
 * The header's own search capsule, city popover and dropdowns are chrome, so
 * they live in base.css with the rest of the bar.
 */
html.search-open { overflow: hidden; }

.search-overlay { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--brand-primary-deep) 55%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; overflow-y: auto; }
.picker-modal { width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
.search-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.search-panel-head h2 { font-size: 18px; font-weight: var(--fw-black); }
.search-panel-close { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--fill); color: var(--text-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.search-panel-close:hover { background: var(--line); }

.picker-search {
	margin: 16px 20px 0; display: flex; align-items: center; gap: 10px; height: var(--tap); padding: 0 14px;
	border: 1px solid var(--line-strong); border-radius: var(--r-control);
}
.picker-search svg { color: var(--icon); flex-shrink: 0; }
.picker-search input { border: 0; flex: 1; font-size: 15px; color: var(--text); background: transparent; }
.picker-body { padding: 16px 20px 4px; overflow-y: auto; }
.picker-group { margin-top: 14px; }
.picker-group:first-child { margin-top: 0; }
.picker-label { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--muted); margin: 0 0 8px; }
.picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.picker-item { display: block; padding: 10px 8px; border: 1px solid var(--line); border-radius: var(--r-control); font-size: 14px; font-weight: var(--fw-semibold); color: var(--text); text-align: center; }
.picker-item:hover { border-color: var(--navy-700); color: var(--navy-900); }
.picker-item.is-on { border-color: var(--navy-800); background: var(--navy-800); color: var(--white); }
/* A top-level specialty is itself selectable, so its group chip renders as a
   filled, accent-tinted pill rather than a plain label. */
.picker-item--parent { display: inline-flex; padding: 8px 16px; border-color: var(--accent-soft-border); background: var(--accent-soft); color: var(--accent-ink); }
.picker-item--parent:hover { border-color: var(--accent); color: var(--accent-ink); }
.picker-item--parent.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent, var(--navy-900)); }
.picker-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 24px 0; }
.picker-foot { border-top: 1px solid var(--line); padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.picker-keyword {
	display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
	border: 1px solid var(--accent-soft-border); border-radius: var(--r-control); background: var(--accent-soft);
	font-size: 14px; font-weight: var(--fw-bold); color: var(--accent-ink); padding: 0 14px;
}
.picker-keyword:hover { border-color: var(--accent); }
.picker-keyword span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-keyword svg { flex-shrink: 0; }
.picker-clear { width: 100%; height: 44px; font-size: 14px; font-weight: var(--fw-bold); color: var(--navy-700); }
.picker-clear:hover { color: var(--navy-900); }

@media (max-width: 640px) {
	.picker-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.search-overlay { padding: 0; align-items: flex-end; }
	.picker-modal { max-width: none; border-radius: var(--r-card) var(--r-card) 0 0; max-height: 90vh; }
}

.home-plan-tag--alt{background:transparent;border:1px solid currentColor}

/* ================= browse hubs (/specialties/, /locations/) ================= */
.p-hub-intro { font-size: var(--fs-sm); color: var(--muted); max-width: 72ch; margin-top: 10px; }
.p-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: start; }
.p-hub-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; }
.p-hub-card-title {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	font-size: 16px; font-weight: var(--fw-bold); margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.p-hub-card-title a { color: var(--text); }
.p-hub-card-title a:hover { color: var(--navy-900); text-decoration: underline; }
.p-hub-count { font-size: 12px; font-weight: var(--fw-medium); color: var(--muted); flex-shrink: 0; }
.p-hub-list { list-style: none; margin: 0; padding: 0; }
.p-hub-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; font-size: 14px; }
.p-hub-list a { color: var(--text-soft); }
.p-hub-list a:hover { color: var(--navy-900); }
.p-hub-kids { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.p-hub-kids a { font-size: 12px; color: var(--muted); background: var(--fill); border-radius: var(--r-chip); padding: 2px 8px; }
.p-hub-cross { margin-top: 26px; font-size: var(--fs-sm); color: var(--muted); }
.p-hub-cross a { font-weight: var(--fw-bold); color: var(--navy-700); }

@media (max-width: 1000px) { .p-hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* /specialties/: the homepage hero's ground, then a card per category. */
.p-hubhero {
	background-color: var(--brand-primary);
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 48px 48px;
	padding: 4px 0 44px;
	color: var(--on-dark);
}
.p-hubhero .breadcrumb ol, .p-hubhero .breadcrumb a { color: var(--on-dark-faint); }
.p-hubhero .breadcrumb a:hover, .p-hubhero .breadcrumb [aria-current="page"] { color: var(--on-dark); }
.p-hubhero .breadcrumb .sep { color: rgba(255,255,255,.3); }
.p-hubhero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 18px; }
.p-hubhero-title { font-size: 36px; font-weight: var(--fw-black); line-height: 1.45; color: var(--on-dark); }
.p-hubhero-sub { font-size: 15.5px; line-height: 1.9; color: var(--on-dark-muted); max-width: 620px; margin-top: 10px; }
.p-hubhero-popular { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: var(--on-dark-faint); }
.p-hubhero-popular > span { margin-inline-end: 2px; }
.p-hubhero-popular a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border: 1px solid rgba(255,255,255,.18); color: #d3dde9; padding: 0 12px; border-radius: var(--r-control); transition: border-color .15s, background-color .15s; }
.p-hubhero-popular a:hover { border-color: var(--accent); color: var(--on-dark); }
.p-hubhero-popular .c { font-size: 12px; color: var(--on-dark-faint); }
.p-hubhero-stats { display: flex; gap: 10px; margin: 0; }
.p-hubhero-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 116px; padding: 14px 18px; border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: rgba(255,255,255,.04); }
.p-hubhero-stats dd { margin: 0; font-size: 28px; font-weight: var(--fw-black); line-height: 1.3; color: var(--on-dark); }
.p-hubhero-stats > div:first-child dd { color: var(--accent-on-dark, var(--accent)); }
.p-hubhero-stats dt { font-size: 13px; color: var(--on-dark-muted); }

.p-hubcat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: start; }
.p-hubcat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.p-hubcat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.p-hubcat-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px; color: var(--text); }
.p-hubcat-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r-control); background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--navy-700); transition: background-color .15s, color .15s; }
.p-hubcat-icon svg { width: 24px; height: 24px; }
.p-hubcat-head:hover .p-hubcat-icon { background: var(--accent-soft); color: var(--accent-ink); }
.p-hubcat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.p-hubcat-title { font-size: 17px; font-weight: var(--fw-black); line-height: 1.5; }
.p-hubcat-head:hover .p-hubcat-title { color: var(--navy-900); text-decoration: underline; text-underline-offset: 4px; }
.p-hubcat-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.p-hubcat-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.p-hubcat-arrow { flex-shrink: 0; color: var(--icon); transition: transform .15s, color .15s; }
.p-hubcat-head:hover .p-hubcat-arrow, .p-hubcat-list a:hover .p-hubcat-arrow { color: var(--navy-700); transform: translateX(-3px); }
.p-hubcat-bar { display: flex; gap: 2px; height: 4px; margin: 0 20px; border-radius: 4px; overflow: hidden; background: var(--fill); }
.p-hubcat-bar span { background: var(--accent); }
.p-hubcat-bar span:nth-child(2) { opacity: .7; }
.p-hubcat-bar span:nth-child(3) { opacity: .5; }
.p-hubcat-bar span:nth-child(n+4) { opacity: .32; }
.p-hubcat-list { list-style: none; margin: 0; padding: 8px 8px 10px; border-top: 1px solid var(--line); }
.p-hubcat-bar + .p-hubcat-list { margin-top: 6px; border-top: 0; }
.p-hubcat-list a { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-control); font-size: 14.5px; font-weight: var(--fw-semibold); color: var(--text-soft); }
.p-hubcat-list a:hover { background: var(--surface); color: var(--navy-900); }
.p-hubcat-list .is-sub a { padding-inline-start: calc(12px + var(--depth, 1) * 18px); font-size: 13.5px; font-weight: var(--fw-medium, 500); }
.p-hubcat-list .n { flex: 1; min-width: 0; }
.p-hubcat-list .c { min-width: 32px; padding: 0 8px; border-radius: var(--r-chip); background: var(--fill); font-size: 12.5px; font-weight: var(--fw-bold); line-height: 24px; text-align: center; color: var(--muted); }
.p-hubcat-list a:hover .c { background: var(--white); }

.p-hubbands { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.p-hubband { padding: 22px 24px; }
.p-hubband.card { display: flex; flex-direction: column; gap: 12px; overflow: visible; }
.p-hubband h2 { font-size: 17px; font-weight: var(--fw-black); color: var(--text); }
.p-hubband.card--dark h2 { color: var(--on-dark); }
.p-hubband > p { font-size: 13.5px; color: var(--muted); margin: -6px 0 0; }
.p-hubband.card--dark > p { color: var(--on-dark-muted); }
.p-hubband-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-hubband-all { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 13.5px; font-weight: var(--fw-bold); }
.p-hubband-all .p-hubcat-arrow { color: currentColor; }
.p-hubband-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.p-hubband-ghost { border-color: rgba(255,255,255,.25); color: var(--on-dark); }
.p-hubband-ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }

@media (max-width: 1000px) {
	.p-hubhero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.p-hubcat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.p-hubbands { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.p-hubhero { padding-bottom: 32px; }
	.p-hubhero-title { font-size: 26px; }
	.p-hubhero-sub { font-size: 14.5px; }
	.p-hubhero-popular { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
	.p-hubhero-popular::-webkit-scrollbar { display: none; }
	.p-hubhero-popular > * { flex-shrink: 0; white-space: nowrap; }
	.p-hubhero-stats > div { flex: 1; min-width: 0; padding: 12px 14px; }
	.p-hubhero-stats dd { font-size: 22px; }
	.p-hubcat-grid { grid-template-columns: minmax(0, 1fr); }
	.p-hubband { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.p-hubcat-arrow { transition: none; }
	.p-hubcat-head:hover .p-hubcat-arrow, .p-hubcat-list a:hover .p-hubcat-arrow { transform: none; }
}

/* ================= blog: sidebar search + TOC card ================= */
.blog-search { display: flex; gap: 8px; }
.blog-search-input { flex: 1; height: var(--tap); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); font: inherit; color: var(--text); }
.blog-search-btn { width: var(--tap); height: var(--tap); flex-shrink: 0; border: 0; border-radius: var(--r-control); background: var(--navy-800); color: var(--white); display: flex; align-items: center; justify-content: center; }
.blog-search-btn:hover { background: var(--navy-900); }
.p-side-links a.is-active { color: var(--accent-ink); font-weight: var(--fw-bold); }

.toc-card summary { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); color: var(--text); cursor: pointer; list-style: none; font-size: 15px; }
.toc-card summary::-webkit-details-marker { display: none; }
.toc-card summary svg:first-child { color: var(--accent); flex-shrink: 0; }
.toc-chev { margin-inline-start: auto; transition: transform .2s ease; }
.toc-card details[open] .toc-chev { transform: rotate(180deg); }
.toc-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: toc; }
.toc-list li { counter-increment: toc; font-size: 13.5px; line-height: 1.6; }
.toc-list li::before { content: counter(toc) '.'; color: var(--accent-ink); font-weight: var(--fw-bold); margin-inline-end: 6px; }
.toc-list a { color: var(--text-soft); }
.toc-list a:hover { color: var(--navy-900); }

/* ================= blog: author page hero ================= */
.author-hero { display: flex; align-items: center; gap: 22px; margin-top: 10px; }
.author-hero-avatar { flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; }
.author-hero-avatar img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.author-hero-avatar-fallback { width: 84px; height: 84px; border-radius: 50%; background: var(--navy-700); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: var(--fw-black); }
.author-hero-eyebrow { font-size: 12px; font-weight: var(--fw-semibold); color: var(--muted); }
.author-hero-job { color: var(--accent-ink); font-size: 14px; margin: 4px 0 0; font-weight: var(--fw-semibold); }
.author-hero-bio { color: var(--text-soft); margin: 8px 0 0; max-width: 62ch; line-height: 1.9; }
.author-hero-credentials { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.author-hero-credentials li { font-size: 12.5px; color: var(--text-soft); background: var(--fill); border-radius: var(--r-chip); padding: 4px 10px; }
.author-hero-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.author-hero-count { color: var(--muted); font-size: 13.5px; }

@media (max-width: 700px) {
	.author-hero { flex-direction: column; text-align: center; align-items: center; }
	.author-hero-row { justify-content: center; }
}

@media (max-width: 640px) { .p-hub-grid { grid-template-columns: 1fr; }
}