/* Piknikovich — hub.css
   Cityhub archive/single shell (.pk-hub) and hub filter UI (.pk-filters).
   Namespace: .pk-hub-* / .pk-filter-*. */

.pk-front .pk-hub {
	max-width: var(--pk-container);
	margin: 0 auto;
	padding: 36px var(--pk-gutter) 72px;
}
.pk-front .pk-hub__header { margin: 0 0 28px; }
.pk-front .pk-hub__h1 {
	font-size: 38px; font-weight: 800; letter-spacing: -0.02em;
	margin: 0 0 10px; line-height: 1.15;
}
.pk-front .pk-hub__intro {
	color: var(--pk-muted); font-size: 16px; max-width: 820px;
	margin: 0;
}
.pk-front .pk-hub__intro > :last-child { margin-bottom: 0; }
.pk-front .pk-hub__map,
.pk-front .pk-hub__body {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	padding: 28px 32px;
	margin: 24px 0;
}
.pk-front .pk-hub__map { padding: 0; overflow: hidden; }
.pk-front .pk-hub-fallback {
	max-width: var(--pk-container); margin: 0 auto;
	padding: 80px var(--pk-gutter); text-align: center;
	color: var(--pk-muted);
}
.pk-front .pk-hub__listings { margin-top: 28px; }
.pk-front .pk-listings-empty {
	background: var(--pk-cream);
	border-radius: var(--pk-radius);
	padding: 40px;
	text-align: center;
	color: var(--pk-muted);
	margin: 0;
}

/* ===== Hub filter UI — .pk-filters form ===== */
.pk-front .pk-filters {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	padding: 20px 24px;
	margin: 0 0 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	align-items: start;
}
.pk-front .pk-filter { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pk-front .pk-filter > span,
.pk-front .pk-filter > legend {
	font-size: 13px; font-weight: 600; color: var(--pk-text);
	padding: 0 0 4px;
	margin: 0;
}
.pk-front .pk-filter--terms { gap: 10px; }
.pk-front .pk-filter--terms label {
	display: flex; align-items: center; gap: 10px;
	font-size: 14px; font-weight: 500; color: var(--pk-text);
	cursor: pointer;
	padding: 4px 0;
}
.pk-front .pk-filter--terms label:hover { color: var(--pk-green-dark); }

.pk-front .pk-filter-submit,
.pk-front a.pk-filter-submit:link,
.pk-front a.pk-filter-submit:visited,
.pk-front button.pk-filter-submit {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px; font-size: 14px; font-weight: 600;
	background: var(--pk-green-dark) !important; color: #fff !important;
	border: 1px solid var(--pk-green-dark) !important; border-radius: 999px;
	cursor: pointer;
	transition: background .15s, color .15s, transform .15s;
	box-shadow: 0 4px 14px rgba(37, 95, 56, 0.22);
}
.pk-front .pk-filter-submit:hover { background: #fff !important; color: var(--pk-green-dark) !important; transform: translateY(-1px); }
.pk-front .pk-filter-reset {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 20px; font-size: 14px; font-weight: 500;
	color: var(--pk-muted); border: 1px solid transparent; border-radius: 999px;
	text-decoration: none;
}
.pk-front .pk-filter-reset:hover { color: var(--pk-green-dark); }

@media (max-width: 900px) {
	.pk-front .pk-hub__h1 { font-size: 28px; }
	.pk-front .pk-hub { padding: 28px 20px 56px; }
}

/* SEO blocks, FAQ and internal-linking sections shared across hub +
   listing-archive surfaces. Restrained styling — content first, theme
   tokens only, no decorative chrome. */
.pk-front .pk-hub__h2 {
	font-size: 22px; font-weight: 600; line-height: 1.3;
	margin: 0 0 12px; color: var(--pk-text, #1d2530);
}
.pk-front .pk-hub__seo,
.pk-front .pk-hub__related,
.pk-front .pk-hub__faq { margin: 40px 0 0; }
.pk-front .pk-hub__seo-block { margin: 0 0 24px; }
.pk-front .pk-hub__seo-block p { margin: 0; line-height: 1.55; color: var(--pk-text, #2a3140); }

/* ------------------------------------------------------------------
   Editorial section composer
   - Used after the listings grid on hub & type-archive pages.
   - Section types: text, media_text, media_text_reversed, bullet_list,
     highlight. Each has its own template part; layout primitives live
     here so partials stay markup-only.
   - Vertical rhythm comes from one source: .pk-section padding + a
     light separator between sections.
   ------------------------------------------------------------------ */
.pk-front .pk-hub__content { margin: 48px 0 0; }
.pk-front .pk-section { padding: 40px 0; border-top: 1px solid var(--pk-border, #e5e7eb); }
.pk-front .pk-hub__content > .pk-section:first-child { border-top: 0; padding-top: 24px; }

.pk-front .pk-section__inner { max-width: 880px; margin: 0; }
.pk-front .pk-section__head { margin: 0 0 14px; }
.pk-front .pk-section__eyebrow {
	display: inline-block; margin: 0 0 8px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--pk-green-dark, #276749);
}
.pk-front .pk-section__title {
	font-size: 24px; font-weight: 600; line-height: 1.25;
	margin: 0; color: var(--pk-text, #1d2530);
}
.pk-front .pk-section__text {
	font-size: 16px; line-height: 1.6; color: var(--pk-text, #2a3140);
	margin: 12px 0 0; max-width: 70ch;
}

/* Media + text — alternating layout. */
.pk-front .pk-section--media .pk-section__inner,
.pk-front .pk-section--media-reversed .pk-section__inner {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px; align-items: center;
	max-width: 1080px;
}
.pk-front .pk-section--media-reversed .pk-section__media { order: 2; }
.pk-front .pk-section--media-reversed .pk-section__body  { order: 1; }
.pk-front .pk-section--media .pk-section__media,
.pk-front .pk-section--media-reversed .pk-section__media {
	border-radius: 14px; overflow: hidden;
	background: var(--pk-bg-soft, #f4f5f3);
	aspect-ratio: 4 / 3;
}
.pk-front .pk-section--media .pk-section__media img,
.pk-front .pk-section--media-reversed .pk-section__media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Graceful degradation when no listing thumbnail is available. */
.pk-front .pk-section--media-no-image .pk-section__inner {
	grid-template-columns: minmax(0, 1fr);
}

/* Bullet list — 2 column card grid. */
.pk-front .pk-section--bullets .pk-section__items {
	list-style: none; padding: 0; margin: 20px 0 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.pk-front .pk-section--bullets .pk-section__item {
	padding: 18px 18px 16px; border: 1px solid var(--pk-border, #e5e7eb);
	border-radius: 12px; background: #fff;
}
.pk-front .pk-section--bullets .pk-section__item-title {
	font-size: 16px; font-weight: 600; margin: 0 0 6px; line-height: 1.3;
	color: var(--pk-text, #1d2530);
}
.pk-front .pk-section--bullets .pk-section__item-text {
	font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--pk-text, #404756);
}

/* Highlight / callout. */
.pk-front .pk-section--highlight .pk-section__inner {
	background: var(--pk-bg-soft, #f4f5f3);
	border-radius: 16px; padding: 28px 28px 24px;
	border: 1px solid var(--pk-border, #e5e7eb);
}
.pk-front .pk-section--highlight .pk-section__cta { margin-top: 18px; }

@media (max-width: 768px) {
	.pk-front .pk-section { padding: 32px 0; }
	.pk-front .pk-section__title { font-size: 22px; }
	.pk-front .pk-section--media .pk-section__inner,
	.pk-front .pk-section--media-reversed .pk-section__inner {
		grid-template-columns: minmax(0, 1fr); gap: 20px;
	}
	.pk-front .pk-section--media-reversed .pk-section__media,
	.pk-front .pk-section--media-reversed .pk-section__body { order: initial; }
	.pk-front .pk-section--bullets .pk-section__items { grid-template-columns: minmax(0, 1fr); }
	.pk-front .pk-section--highlight .pk-section__inner { padding: 22px 20px 20px; }
}

/* ------------------------------------------------------------------
   City-root SEO/UX block — type cards, selection tips, chips, FAQ, CTA.
   Used only on /moskva/, /podmoskovie/, /sankt-peterburg/, /lenoblast/
   (city_root pages). Markup lives in template-parts/hub/city-seo-ux-block.php.
   ------------------------------------------------------------------ */
/* Top margin from listings/pagination to the bottom block - shared rule
   so both the big SEO/UX block (city-root) and the compact related-area
   block (district pages) sit at the same vertical rhythm. Tablet/mobile
   reduce the gap to keep the page feeling tight on small screens. */
.pk-front .pk-seoux { margin: 70px 0 0; padding: 8px 0 0; }
.pk-front .pk-seoux__container { max-width: 1060px; margin: 0 auto; }
.pk-front .pk-seoux__block { margin: 0 0 48px; }
.pk-front .pk-seoux__block:last-of-type { margin-bottom: 0; }

.pk-front .pk-seoux__head { margin: 0 0 18px; }
.pk-front .pk-seoux__title {
	font-size: 24px; font-weight: 600; line-height: 1.25;
	margin: 0 0 8px; color: var(--pk-text, #1d2530);
}
.pk-front .pk-seoux__lead {
	font-size: 16px; line-height: 1.55; color: var(--pk-text, #2a3140);
	margin: 0; max-width: 70ch;
}

/* --- Type cards (3-up) --- */
.pk-front .pk-seoux__type-cards {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.pk-front .pk-seoux__type-card {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 20px 18px; border: 1px solid var(--pk-border, #e6e8ec);
	border-radius: 16px; background: #fff;
	color: inherit; text-decoration: none;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pk-front .pk-seoux__type-card:hover {
	border-color: var(--pk-green, #2e7d46);
	box-shadow: 0 6px 18px rgba(15, 107, 58, 0.08);
	transform: translateY(-1px);
}
.pk-front .pk-seoux__type-icon {
	flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pk-green-soft, #eaf3ec); color: var(--pk-green, #2e7d46);
}
.pk-front .pk-seoux__type-icon svg { width: 22px; height: 22px; }
.pk-front .pk-seoux__type-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.pk-front .pk-seoux__type-card-title {
	font-size: 17px; font-weight: 600; line-height: 1.3;
	color: var(--pk-text, #1d2530);
}
.pk-front .pk-seoux__type-card-desc {
	font-size: 14px; line-height: 1.5; color: var(--pk-text, #404756);
}
.pk-front .pk-seoux__type-card-arrow {
	flex: 0 0 auto; color: var(--pk-green, #2e7d46);
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 4px; opacity: 0; transition: opacity .15s, transform .15s;
}
.pk-front .pk-seoux__type-card-arrow svg { width: 18px; height: 18px; }
.pk-front .pk-seoux__type-card:hover .pk-seoux__type-card-arrow { opacity: 1; transform: translateX(2px); }

/* Static variant - used on /besedki/, /gril-domiki/, /shatry/ for the
   3 informational content blocks. Plain <div>, no arrow, no hover lift.
   Border still present so cards don't lose their visual structure. */
.pk-front .pk-seoux__type-card--static { cursor: default; }
.pk-front .pk-seoux__type-card--static:hover {
	border-color: var(--pk-border, #e6e8ec);
	box-shadow: none;
	transform: none;
}

/* --- Selection tips (4-up) --- */
/* `ul.pk-seoux__tips` (not just `.pk-seoux__tips`) — matches base.css's
   `.pk-front:not(.home) ul` specificity so our reset of padding/margin
   wins, otherwise the global rule re-applies padding-left: 22px. */
.pk-front ul.pk-seoux__tips {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.pk-front .pk-seoux__tip {
	display: flex; flex-direction: column; gap: 8px;
	padding: 18px 16px; border: 1px solid var(--pk-border, #e6e8ec);
	border-radius: 14px; background: #fff;
}
.pk-front .pk-seoux__tip-icon {
	width: 36px; height: 36px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pk-green-soft, #eaf3ec); color: var(--pk-green, #2e7d46);
}
.pk-front .pk-seoux__tip-icon svg { width: 18px; height: 18px; }
.pk-front .pk-seoux__tip-title {
	font-size: 15px; font-weight: 600; line-height: 1.3;
	color: var(--pk-text, #1d2530);
}
.pk-front .pk-seoux__tip-text {
	font-size: 13.5px; line-height: 1.5; color: var(--pk-text, #404756);
}

/* --- Chip rows (types + regions, current region highlighted) --- */
.pk-front .pk-seoux__chips-row {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 0 0 12px;
}
.pk-front .pk-seoux__chips-row:last-child { margin-bottom: 0; }
.pk-front .pk-seoux__chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border: 1px solid var(--pk-border, #e6e8ec);
	border-radius: 999px; background: #fff;
	font-size: 14px; color: var(--pk-text, #1d2530); text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}
.pk-front .pk-seoux__chip-icon {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--pk-green, #2e7d46);
}
.pk-front .pk-seoux__chip-icon svg { width: 16px; height: 16px; }
.pk-front .pk-seoux__chip:hover {
	border-color: var(--pk-green, #2e7d46);
	color: var(--pk-green-dark, #0f6b3a);
}
.pk-front .pk-seoux__chip--active {
	background: var(--pk-green, #2e7d46);
	border-color: var(--pk-green, #2e7d46);
	color: #fff;
	cursor: default; pointer-events: none;
}
.pk-front .pk-seoux__chip--active .pk-seoux__chip-icon { color: #fff; }

/* --- FAQ accordion --- */
.pk-front .pk-seoux__faq {
	border: 1px solid var(--pk-border, #e6e8ec);
	border-radius: 14px; overflow: hidden; background: #fff;
}
.pk-front .pk-seoux__faq-item { border-top: 1px solid var(--pk-border, #e6e8ec); }
.pk-front .pk-seoux__faq-item:first-child { border-top: 0; }
.pk-front .pk-seoux__faq-q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	padding: 16px 18px;
	font-size: 16px; font-weight: 600; line-height: 1.4;
	color: var(--pk-text, #1d2530);
	cursor: pointer; list-style: none;
}
.pk-front .pk-seoux__faq-q::-webkit-details-marker { display: none; }
.pk-front .pk-seoux__faq-q::marker { content: ''; }
.pk-front .pk-seoux__faq-chev {
	flex: 0 0 24px; color: var(--pk-green, #2e7d46);
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .15s;
}
.pk-front .pk-seoux__faq-chev svg { width: 18px; height: 18px; }
.pk-front .pk-seoux__faq-item[open] .pk-seoux__faq-chev { transform: rotate(180deg); }
.pk-front .pk-seoux__faq-a {
	padding: 0 18px 18px;
	font-size: 14.5px; line-height: 1.55; color: var(--pk-text, #404756);
}

/* --- CTA card --- */
.pk-front .pk-seoux__cta {
	margin-top: 24px;
	display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 28px; align-items: center;
	padding: 28px 28px;
	border: 1px solid var(--pk-border, #e6e8ec); border-radius: 18px;
	background: var(--pk-green-soft, #eaf3ec);
}
.pk-front .pk-seoux__cta-media { display: flex; align-items: center; justify-content: center; }
.pk-front .pk-seoux__cta-media img {
	display: block; max-width: 100%; height: auto; max-height: 180px; object-fit: contain;
}
.pk-front .pk-seoux__cta-title {
	font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 8px;
	color: var(--pk-text, #1d2530);
}
.pk-front .pk-seoux__cta-text {
	font-size: 15px; line-height: 1.55; margin: 0 0 16px;
	color: var(--pk-text, #404756); max-width: 70ch;
}
.pk-front .pk-seoux__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-front .pk-seoux__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 20px; border-radius: 12px;
	font-size: 14.5px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s, border-color .15s, color .15s;
	-webkit-appearance: none; appearance: none;
}
.pk-front .pk-seoux__btn--primary {
	background: var(--pk-green, #2e7d46);
	border-color: var(--pk-green, #2e7d46);
	color: #fff;
}
.pk-front .pk-seoux__btn--primary:hover {
	background: var(--pk-green-dark, #0f6b3a);
	border-color: var(--pk-green-dark, #0f6b3a);
	color: #fff;
}
.pk-front .pk-seoux__btn--ghost {
	background: #fff; border-color: var(--pk-border, #e6e8ec);
	color: var(--pk-text, #1d2530);
}
.pk-front .pk-seoux__btn--ghost:hover {
	border-color: var(--pk-green, #2e7d46);
	color: var(--pk-green-dark, #0f6b3a);
}

@media (max-width: 1023px) {
	.pk-front .pk-seoux { margin-top: 48px; }
	.pk-front .pk-seoux__type-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pk-front .pk-seoux__tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.pk-front .pk-seoux { margin-top: 36px; }
	.pk-front .pk-seoux__block { margin-bottom: 36px; }
	.pk-front .pk-seoux__title { font-size: 22px; }
	.pk-front .pk-seoux__type-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pk-front .pk-seoux__tips { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.pk-front .pk-seoux__cta {
		grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 18px;
	}
	.pk-front .pk-seoux__cta-media { order: -1; }
	.pk-front .pk-seoux__cta-media img { max-height: 140px; }
	.pk-front .pk-seoux__btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Compact "Смотрите также" block for district / city sub-pages
   (city+district and city+district+type kinds).
   Pure internal-linking - chips + CTA, no FAQ, no large editorial
   text. Markup lives in template-parts/hub/related-area-links.php.

   Polish notes:
   - "Смотрите также" (h2) and "Другие города..." (h3) share the same
     visual size/weight/colour so the second heading doesn't look
     accidental. Spacing handled via group margins.
   - Section 1 has no subtitle: chips render directly under the main
     "Смотрите также" heading so we don't get a stutter like
     "Смотрите также / В Химках / [chips]".
   - The CTA mirrors the big city-root CTA (soft green card + image +
     22px title + button) so visitors see a consistent ask across
     surfaces.
   ------------------------------------------------------------------ */
.pk-front .pk-related-areas { margin: 70px 0 0; }
.pk-front .pk-related-areas__container { max-width: 1060px; margin: 0 auto; }

/* Both block headings share weight / colour / margin / line-height.
   Base.css has element-level rules
   `.pk-front:not(.home) h2 { 28/800 }` and `h3 { 22/700 }` with
   specificity (0,2,1) - to override we must match that specificity
   by including the tag in the selector. Loaded after base.css, so
   cascade picks our rule when specificity is equal. h3 stays h3 in
   the DOM for heading hierarchy.

   Sizes diverge: main "Смотрите также" (h2) renders at 22px, the
   "Другие города/районы..." subsection (h3) at 18px - small visual
   step down so it reads as a subsection without looking accidental. */
.pk-front h2.pk-related-areas__title,
.pk-front h3.pk-related-areas__subtitle {
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--pk-text, #1d2530);
	letter-spacing: 0;
}
.pk-front h2.pk-related-areas__title { font-size: 22px; }
.pk-front h3.pk-related-areas__subtitle { font-size: 18px; }

.pk-front .pk-related-areas__group { margin: 0 0 28px; }
.pk-front .pk-related-areas__group:last-of-type { margin-bottom: 28px; }

.pk-front .pk-related-areas__chips {
	display: flex; flex-wrap: wrap; gap: 8px;
}
.pk-front .pk-related-areas__chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border: 1px solid var(--pk-border, #e6e8ec);
	border-radius: 999px; background: #fff;
	font-size: 14px; line-height: 1.2;
	color: var(--pk-text, #1d2530); text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}
.pk-front .pk-related-areas__chip-icon {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--pk-green, #2e7d46);
}
.pk-front .pk-related-areas__chip-icon svg { width: 14px; height: 14px; }
a.pk-related-areas__chip:hover {
	border-color: var(--pk-green, #2e7d46);
	color: var(--pk-green-dark, #0f6b3a);
}
.pk-front .pk-related-areas__chip--active {
	background: var(--pk-green-soft, #eaf3ec);
	border-color: var(--pk-green, #2e7d46);
	color: var(--pk-green-dark, #0f6b3a);
	cursor: default;
}
.pk-front .pk-related-areas__chip--active .pk-related-areas__chip-icon {
	color: var(--pk-green-dark, #0f6b3a);
}

/* CTA card - same visual language as .pk-seoux__cta on city-root pages. */
.pk-front .pk-related-areas__cta {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 28px; align-items: center;
	margin: 24px 0 0;
	padding: 28px;
	border: 1px solid var(--pk-border, #e6e8ec); border-radius: 18px;
	background: var(--pk-green-soft, #eaf3ec);
}
.pk-front .pk-related-areas__cta--no-image {
	grid-template-columns: minmax(0, 1fr);
}
.pk-front .pk-related-areas__cta-media { display: flex; align-items: center; justify-content: center; }
.pk-front .pk-related-areas__cta-media img {
	display: block; max-width: 100%; height: auto; max-height: 180px; object-fit: contain;
}
.pk-front .pk-related-areas__cta-title {
	font-size: 22px; font-weight: 600; line-height: 1.25;
	margin: 0 0 8px; color: var(--pk-text, #1d2530);
}
.pk-front .pk-related-areas__cta-text {
	font-size: 15px; line-height: 1.55;
	margin: 0 0 16px; color: var(--pk-text, #404756);
	max-width: 70ch;
}
.pk-front .pk-related-areas__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-front .pk-related-areas__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 20px; border-radius: 12px;
	font-size: 14.5px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s, border-color .15s, color .15s;
	-webkit-appearance: none; appearance: none;
}
.pk-front .pk-related-areas__btn--primary {
	background: var(--pk-green, #2e7d46);
	border-color: var(--pk-green, #2e7d46);
	color: #fff;
}
.pk-front .pk-related-areas__btn--primary:hover {
	background: var(--pk-green-dark, #0f6b3a);
	border-color: var(--pk-green-dark, #0f6b3a);
	color: #fff;
}
.pk-front .pk-related-areas__btn--ghost {
	background: #fff;
	border-color: var(--pk-border, #e6e8ec);
	color: var(--pk-text, #1d2530);
}
.pk-front .pk-related-areas__btn--ghost:hover {
	border-color: var(--pk-green, #2e7d46);
	color: var(--pk-green-dark, #0f6b3a);
}

@media (max-width: 1023px) {
	.pk-front .pk-related-areas { margin-top: 48px; }
}

@media (max-width: 640px) {
	.pk-front .pk-related-areas { margin-top: 36px; }
	.pk-front h2.pk-related-areas__title { font-size: 20px; }
	/* h3 subsection stays at 18px on mobile too - already small enough
	   that further shrinking would make it feel like a label, not a heading. */
	.pk-front h3.pk-related-areas__subtitle { font-size: 18px; }
	.pk-front .pk-related-areas__cta {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px 20px; gap: 18px;
	}
	.pk-front .pk-related-areas__cta-media { order: -1; }
	.pk-front .pk-related-areas__cta-media img { max-height: 140px; }
	.pk-front .pk-related-areas__cta-title { font-size: 20px; }
	.pk-front .pk-related-areas__btn { width: 100%; }
}

.pk-front .pk-hub__related-group { margin: 0 0 24px; }
.pk-front .pk-hub__related-list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 8px 12px;
}
.pk-front .pk-hub__related-list a {
	display: inline-flex; align-items: center;
	padding: 8px 14px; border: 1px solid var(--pk-border, #e5e7eb); border-radius: 999px;
	font-size: 14px; color: var(--pk-text, #1d2530); text-decoration: none;
}
.pk-front .pk-hub__related-list a:hover {
	border-color: var(--pk-green, #2f855a); color: var(--pk-green-dark, #276749);
}

.pk-front .pk-faq { display: block; margin: 0; }
.pk-front .pk-faq__item {
	padding: 16px 0; border-bottom: 1px solid var(--pk-border, #e5e7eb);
}
.pk-front .pk-faq__item:last-child { border-bottom: 0; }
.pk-front .pk-faq__q { font-weight: 600; margin: 0 0 6px; line-height: 1.4; }
.pk-front .pk-faq__a { margin: 0; line-height: 1.55; color: var(--pk-text, #404756); }