/*!
 * Koval Legal Group — hub pages (pages/hub.html). §7 serves the archived reserve
 * template prototype/archive/country.html (no country pages on the site — decision 2026-10-02).
 * Page layer on top of klg.css: tokens only, mobile-first (base = 360px),
 * min-width queries upward. Becomes part of theme/klg/assets/css in Stage 3.
 *  1. (moved to klg.css: parent pill aria-current="true", --hub-tint via body[data-cat])
 *  2. Hub hero (tint card, facts, top services, founder badge)
 *  3. TOC — chips (< 1000px) and sticky sidebar (>= 1000px)
 *  4. Hub layout + service sections (H2 card, help list, price box, SEO text)
 *  5. Blocks: when, take-on, documents, notes
 *  6. Related hubs
 *  7. Country page: verdict, compare, country list, steps
 */


/* ============ 2. Hub hero ============ */
.hub-hero{padding-top:var(--s1)}
.hub-hero__card{border-radius:var(--r-xl);padding:var(--s4) var(--s4) var(--s5);display:grid;gap:var(--s5)}
.hub-hero__text{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.hub-hero__text .breadcrumbs{margin-block:-8px -6px} /* crumb links are 44px tall */
.hub-hero__title{font-size:clamp(2.125rem,1.45rem + 2.6vw,4rem);max-width:13em}
.hub-hero__lead{color:var(--ink-3)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hub-hero__text .facts{order:1} /* phones: CTA first, so it is above the dock on 360×640 */
.facts .pill{font-size:14px;font-weight:500}
.hub-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s1)}
.hub-hero__actions .btn{flex:1 1 100%}
.hub-hero__aside{display:grid;gap:var(--s3);align-content:start;min-width:0}

.top-card{background:var(--bg);border-radius:var(--r-lg);padding:var(--s3) var(--s4) var(--s2);display:flex;flex-direction:column}
.top-card__title{font-size:14px;color:var(--muted);padding-top:var(--s1)}
.top-card__row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding-block:10px;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:16px;line-height:1.35;
}
.top-card__row:last-child{border-bottom:0}
.top-card__row:hover{color:var(--teal)}
.top-card__price{font-weight:600;white-space:nowrap}

.founder-badge{background:var(--bg);border-radius:var(--r-lg);padding:var(--s3) var(--s4) var(--s3) var(--s3);display:flex;align-items:center;gap:14px;margin:0}
.founder-badge__img{width:56px;height:56px;flex-shrink:0;border-radius:50%;object-fit:cover;background:var(--mist)}
.founder-badge__text{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4;color:var(--muted)}
.founder-badge__text strong{font-size:16px;font-weight:600;color:var(--ink)}

@media (min-width:600px){
  .hub-hero__card{padding:var(--s6)}
  .hub-hero__text{gap:var(--s4)}
  .hub-hero__actions .btn{flex:0 1 auto}
  .hub-hero__text .facts{order:0}
}
/* 768–1023: the aside stays one column (two columns left an empty gap under the founder badge, review R1-09) */
@media (min-width:1024px){
  .hub-hero{padding-top:var(--s3)}
  .hub-hero__card{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s7);padding:56px;align-items:center}
}

/* ============ 3. TOC ============ */
/* chips: horizontal swipe, bleeding to the screen edges like the category bar
   (.hub-toc prefix: must beat klg.css `ul[class]{padding:0}` or the side padding is lost) */
/* < 1000px the chip row sticks under the header (a hub page is ~26 000px tall on a phone);
   hub.js adds .is-stuck for the hairline. Anchors after it land below header + chip row. */
.hub-toc{
  position:sticky;top:var(--header-h);z-index:5;margin-top:var(--s2);padding-block:8px;
  background:rgba(255,255,255,.94);border-bottom:1px solid transparent;transition:border-color .2s;
}
@supports (backdrop-filter:blur(1px)){.hub-toc{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.hub-toc.is-stuck{border-bottom-color:var(--line)}
.hub-toc~[id],.hub-toc~* [id]{scroll-margin-top:calc(var(--header-h) + 76px)} /* chip row = 44 + 2×8 + 1 */
.hub-toc .hub-toc__list{
  display:flex;gap:var(--s2);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.hub-toc__list::-webkit-scrollbar{display:none}
.hub-toc__list>li{flex-shrink:0}
.hub-toc__list>li:last-child{padding-right:var(--s5)}
.hub-toc__label{display:flex;align-items:center;font-size:14px;color:var(--muted);padding-right:var(--s1)}
.hub-toc__link{
  display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:15px;line-height:1.25;white-space:nowrap;text-decoration:none;
}
.hub-toc__link:hover{background:var(--mist);color:var(--ink)}
.hub-toc__link[aria-current]{background:var(--ink);color:var(--on-dark)}
@media (min-width:1000px){
  .hub-toc{display:none}
  .hub-toc~[id],.hub-toc~* [id]{scroll-margin-top:calc(var(--header-h) + 16px)}
}

/* sidebar: hidden on phones/tablets, sticky under the header from 1000px */
.hub-side{display:none}
.hub-side__title{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:0 12px var(--s2)}
.hub-side__list{display:flex;flex-direction:column;gap:0}
.hub-side__sep{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.hub-side__link{
  display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;
  color:var(--ink);font-size:15px;line-height:1.3;text-decoration:none;
}
.hub-side__link:hover{background:var(--surface);color:var(--ink)}
.hub-side__link[aria-current]{background:var(--hub-tint,var(--c-ratss));font-weight:600;box-shadow:inset 3px 0 0 var(--teal)}
.hub-side__cta{margin-top:var(--s4)}

/* ============ 4. Layout + service sections ============ */
.hub-layout{padding-top:var(--s5)}
.hub-main{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
@media (min-width:1000px){
  .hub-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s6);align-items:start;padding-top:var(--s7)}
  .hub-side{
    display:block;position:sticky;top:calc(var(--header-h) + var(--s4));
    max-height:calc(100vh - var(--header-h) - var(--s6));overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;padding:2px 4px 2px 2px;
  }
  .hub-main{gap:var(--s4)}
}
@media (min-width:1280px){.hub-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--s7)}}

.hub-intro{font-size:17px;line-height:1.75;color:var(--ink-2);max-width:72ch;margin-bottom:var(--s3)}

.hub-section{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5) var(--s4);
  display:flex;flex-direction:column;gap:var(--s4);min-width:0;transition:box-shadow .15s;
}
.hub-section:hover{box-shadow:var(--shadow-1)}
.hub-section__badge{align-self:flex-start}
.hub-section__title{font-size:clamp(1.5rem,1.3rem + .9vw,2rem);line-height:1.15;letter-spacing:-.02em}
.hub-section__lead{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:72ch}
.hub-section__grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.hub-section__seo{font-size:16px;line-height:1.7;max-width:72ch}
.hub-section__seo h3{font-size:19px}
.hub-section__seo>.placeholder{font-size:15px}
@media (min-width:600px){.hub-section{padding:var(--s6);border-radius:28px}}

.hub-help{background:var(--surface-2);border-radius:20px;padding:var(--s4) 20px;display:flex;flex-direction:column;gap:var(--s3)}
.hub-help__title{font-size:17px;line-height:1.3}
/* .check-list (+ --cols) moved to klg.css §26 */

.price-box{border-radius:20px;padding:var(--s4) 20px 20px;display:flex;flex-direction:column;gap:var(--s1)}
.price-box__label{font-size:14px;color:var(--muted)}
.price-box__price{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.price-box__term{font-size:15px;color:var(--ink-3)}
.price-box__note{font-size:14px;color:var(--muted)}
.price-box .btn{margin-top:var(--s3)}
@media (min-width:600px){.price-box .btn{align-self:flex-start}}

/* ============ 5. Blocks inside the main column ============ */
.hub-block{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s6);min-width:0}
.hub-main>.hub-block:first-child{margin-top:0} /* country page starts with a block, the hub with the intro */
.hub-block__title{font-size:clamp(1.625rem,1.25rem + 1.4vw,2.5rem);line-height:1.12}
.hub-block__lead{font-size:16px;color:var(--muted)}
.hub-block__note{font-size:14px;line-height:1.55;color:var(--muted)}
@media (min-width:1024px){.hub-block{margin-top:var(--s7)}}

.when-grid{display:grid;gap:var(--s3)}
.when-card{background:var(--surface);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:6px}
.when-card__title{font-size:17px;line-height:1.35}
.when-card__text{font-size:15px;line-height:1.55;color:var(--muted)}
@media (min-width:600px){.when-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.take-on{background:var(--sage);color:var(--sage-ink);border-radius:var(--r-xl);padding:var(--s5) var(--s4)}
.take-on .hub-block__title{color:var(--sage-ink)}
.take-on__list{display:grid;gap:10px}
.take-on__list>li{background:var(--bg);border-radius:18px;padding:16px 18px;font-size:15px;line-height:1.5;color:var(--ink)}
@media (min-width:600px){.take-on{padding:var(--s6)}.take-on__list{grid-template-columns:repeat(2,minmax(0,1fr))}}

.doc-list{display:flex;flex-direction:column;gap:10px;counter-reset:doc}
.doc-list>li{
  counter-increment:doc;display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border-radius:18px;padding:16px 18px;font-size:16px;line-height:1.5;
}
.doc-list>li::before{
  content:counter(doc);width:32px;height:32px;flex-shrink:0;border-radius:10px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-weight:600;margin-top:-4px;
}
.docs__head{display:flex;flex-direction:column;gap:var(--s2)}

/* ============ 6. Related hubs ============ */
.related__title{font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem);margin-bottom:var(--s4)}
.related{display:grid;gap:var(--s3)}
.related .card__title{font-size:19px}
@media (min-width:768px){.related{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ============ 7. Country page ============ */

.verdict{background:var(--bg);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:var(--s2)}
.verdict__label{font-size:14px;color:var(--muted)}
.verdict__country{font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.verdict__tag{
  align-self:flex-start;border-radius:var(--r-pill);padding:8px 14px;
  background:var(--taupe);color:var(--clay-ink);font-size:15px;font-weight:600;line-height:1.3;
}
.verdict__text{font-size:15px;line-height:1.6;color:var(--ink-2)}
.verdict__note{font-size:14px;line-height:1.5;color:var(--muted)}
@media (min-width:600px){.verdict{padding:var(--s5)}}

.compare{display:grid;gap:var(--s3)}
.compare__item{border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px}
.compare__item--yes{background:var(--sage);border-color:transparent;color:var(--sage-ink)}
.compare__status{font-size:14px;font-weight:600;color:var(--muted)}
.compare__item--yes .compare__status{color:var(--sage-ink)}
.compare__title{font-size:19px}
.compare__text{font-size:15px;line-height:1.55}
@media (min-width:600px){.compare{grid-template-columns:repeat(2,minmax(0,1fr))}}


.c-steps .step{background:var(--surface)}

.country-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.country-list__link{
  display:flex;align-items:center;min-height:52px;height:100%;padding:12px 16px;border-radius:var(--r-md);
  background:var(--c-apostyl);color:var(--ink);font-size:15px;font-weight:500;line-height:1.3;text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
a.country-list__link:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.country-list__link[aria-current]{background:var(--ink);color:var(--on-dark)}
@media (min-width:600px){.country-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.country-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

.price-box--wide{padding:20px}
@media (min-width:600px){.price-box--wide{padding:var(--s5)}}

/* ============ 8. Theme additions (WordPress hub template, not in design/css/pages/hub.css) ============ */
/* hub_intro is WYSIWYG HTML (paragraphs) → wrapper div instead of the design's single <p> */
.hub-intro>*+*{margin-top:1em}
/* section without a price box (cross-link sections, «—»): CTA under the help list */
.hub-section__cta{align-self:stretch}
@media (min-width:600px){.hub-section__cta{align-self:flex-start}}
/* long terms («залежить від режиму роботи консульства») may wrap in the narrow 1000–1279 column */
/* long terms («залежить від режиму роботи консульства») and multi-part prices («несудимість — від 1 600 грн;
   довідка ВПО … — [ціна]») wrap instead of pushing the table out of the column; numbers/«від X грн» are
   kept together with &nbsp; by klg_hub_price_html() */
.hub-main .price-table__price{white-space:normal}
@media (min-width:600px){.hub-main .price-table__term{white-space:normal}}
/* Markdown tables inside section text (e.g. ФОП vs ТОВ): scroll inside the card, never the page */
.hub-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md)}
.hub-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.hub-table th,.hub-table td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.hub-table thead th{border-top:0;background:var(--surface);font-weight:500;color:var(--muted);font-size:14px}
/* «Що бере на себе юрист» with an odd number of items (field hub_lawyer_does, 4–6): the last one spans both columns */
@media (min-width:600px){.take-on__list>li:last-child:nth-child(odd){grid-column:1/-1}}

/* T8-price-cta: unknown prices (inc/price-cta.php) */
.price-box__tbd{font-size:15px;font-weight:500;color:var(--ink-3)}
.price-box__price--tbd{font-size:19px;font-weight:600;letter-spacing:0;line-height:1.35}
.top-card__price--cta{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}