/* ==========================================================================
   Guides / Poradnik section — Phase 2 (migration 209_guides.sql)
   Mirrors the events/classifieds list patterns; no rules above this block
   are touched.
   ========================================================================== */

.page-guides {
    /* Wrapper inherits site layout; no overrides needed. */
}

/* In-page section heading (Featured / Recent / Popular / etc.) */
.guides-section {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.guides-section > h2 {
    font-size: var(--fs-150);
    color: var(--color-gray-700);
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--color-primary);
}

/* Poradnik AI promo block — scoped to the guides index so it cannot affect
   any other .guides-section. Reuses existing tokens + the site's light-red
   gradient + .btn-primary CTA. (Added per owner request, 2026-05-25.) */
.page-guides .guides-section-ai {
    background: linear-gradient(135deg, var(--color-danger-bg-light) 0%, var(--color-white) 100%);
    border: 1px solid var(--color-gray-200);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.75rem;
}
.page-guides .guides-section-ai > h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.4rem;
    font-size: var(--fs-150);
    color: var(--color-gray-700);
}
.page-guides .guides-section-ai .page-desc {
    margin: 0 0 1rem 0;
    color: var(--color-gray-600);
}
.page-guides .guides-section-ai .btn {
    margin-top: 0.25rem;
}

/* =============================================================================
   GUIDE RICH COMPONENTS (guide-*) — PDF-style building blocks for guide bodies.
   Scoped to .guide-article-body so they never leak. Built from site tokens.
   Enabled by the guide-* class whitelist in GuideBodySanitizer.
   (Added per owner request, 2026-05-25 — owner-approved CSS.)
   ============================================================================= */

/* Callout / "what you need" / recommendation boxes.
   Selector intentionally NOT scoped under .guide-article-body so the callout
   component is reusable anywhere on the AI hub + AI article-shell (CTAs
   between header and body live outside .guide-article-body). The class
   name is unique to this component — no collisions verified 2026-05-31. */
.guide-callout {
    background: var(--color-gray-100);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.guide-callout-title {
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.4rem;
}
.guide-callout p:last-child,
.guide-callout ul:last-child { margin-bottom: 0; }
.guide-callout-info    { background: var(--color-info-bg);    border-left-color: var(--color-info); }
.guide-callout-tip     { background: var(--color-success-bg); border-left-color: var(--color-success); }
.guide-callout-warning { background: var(--color-warning-bg); border-left-color: var(--color-warning); }

/* Copy-ready prompt boxes in guide bodies (2026-09-06). Authoring contract:
   .guide-callout.guide-prompt > .guide-callout-title + .guide-prompt-body.
   guide-prompt-copy.js appends the .guide-prompt-actions row with the button.
   Body is monospace so the reader sees exactly what will be pasted into an
   AI chat; text still wraps (no horizontal scroll on phones). */
.guide-prompt {
    background: var(--color-gray-100);
    border-left-color: var(--color-gray-900);
}
.guide-prompt .guide-callout-title {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-gray-700);
    margin-bottom: 0.6rem;
}
.guide-prompt-body {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-sm);
    padding: 0.9rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--fs-088);
    line-height: 1.55;
    color: var(--color-gray-900);
    overflow-wrap: anywhere;
}
.guide-prompt-body p { margin: 0 0 0.85rem; }
.guide-prompt-body p:last-child { margin-bottom: 0; }
.guide-prompt-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0.75rem 0 0;
}
.guide-prompt-copy { cursor: pointer; }
.guide-prompt-copy:disabled { opacity: 0.75; cursor: default; }

/* Interactive decision flowchart (2026-10-23). Authoring contract in
   assets/js/guide-flow.js. Without JS every node shows as a static box;
   with JS (.guide-flow-js) only the current node is visible unless the
   reader toggles .guide-flow-showall. Opt-in: no existing guide uses it. */
.guide-article-body .guide-flow {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.guide-article-body .guide-flow-title {
    font-weight: 700;
    font-size: var(--fs-105);
    color: var(--color-gray-900);
    margin: 0 0 0.75rem;
}
.guide-article-body .guide-flow-node {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-left: 4px solid var(--color-info);
    border-radius: var(--border-radius-sm);
    padding: 0.9rem 1rem;
    margin: 0 0 0.75rem;
}
.guide-article-body .guide-flow-node:focus { outline: 2px solid var(--color-info); outline-offset: 2px; }
.guide-article-body .guide-flow-node p:last-child { margin-bottom: 0; }
.guide-article-body .guide-flow-tone-ok   { border-left-color: var(--color-success); background: var(--color-success-bg); }
.guide-article-body .guide-flow-tone-warn { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.guide-article-body .guide-flow-tone-risk { border-left-color: var(--color-error);   background: var(--color-error-bg); }
.guide-article-body .guide-flow-question {
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
}
.guide-article-body .guide-flow-options {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.guide-article-body .guide-flow-options > li { margin: 0; }
/* static (no-JS) option: plain text with an arrow */
.guide-article-body .guide-flow:not(.guide-flow-js) .guide-flow-options { display: block; }
.guide-article-body .guide-flow:not(.guide-flow-js) .guide-flow-options > li::before { content: "→ "; color: var(--color-info); font-weight: 700; }
.guide-article-body .guide-flow-option-btn {
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: var(--color-white);
    color: var(--color-info);
    border: 2px solid var(--color-info);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 0.85rem;
    min-height: 44px;
    line-height: 1.35;
}
.guide-article-body .guide-flow-option-btn:hover { background: var(--color-info-bg); }
.guide-article-body .guide-flow-option-btn:focus-visible { outline: 2px solid var(--color-gray-900); outline-offset: 2px; }
.guide-article-body .guide-flow-js .guide-flow-node { display: none; }
.guide-article-body .guide-flow-js .guide-flow-node.guide-flow-current,
.guide-article-body .guide-flow-js.guide-flow-showall .guide-flow-node { display: block; }
.guide-article-body .guide-flow-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}
.guide-article-body .guide-flow-controls .btn:disabled { opacity: 0.5; cursor: default; }
.guide-article-body .guide-flow-path {
    font-size: var(--fs-090);
    margin: 0 0 0.75rem;
}
.guide-article-body .guide-flow-path-title { font-weight: 700; margin: 0 0 0.25rem; }
.guide-article-body .guide-flow-path ol { margin: 0; padding-left: 1.25rem; }
.guide-article-body .guide-flow-path-q { color: var(--color-gray-600); }
@media (max-width: 600px) {
    .guide-article-body .guide-flow { padding: 0.85rem 0.75rem; }
    .guide-article-body .guide-flow-node { padding: 0.8rem 0.8rem; }
    .guide-article-body .guide-flow-js .guide-flow-options { flex-direction: column; }
    .guide-article-body .guide-flow-option-btn { width: 100%; }
    .guide-article-body .guide-flow-controls .btn { flex: 1 1 auto; }
}
@media print {
    .guide-article-body .guide-flow-js .guide-flow-node { display: block; }
    .guide-article-body .guide-flow-controls,
    .guide-article-body .guide-flow-path { display: none; }
}

/* Phase 2A — stack .guide-card children vertically so the optional tag-chip
   row (added below the wrapping anchor; nested <a> would be invalid HTML)
   sits BELOW the card content instead of competing for horizontal space.
   Cards without a second child render identically (one full-width child is
   visually the same in flex-row and flex-column). */

/* Tag chips (Phase 2A). Anchor element styled as a small pill — reuses
   existing badge tokens so it's visually consistent with .guide-card-badge
   but with a hover state since chips are navigational links. Containers
   .guide-card-tags / .guide-article-tags just add top spacing. */
.guide-card-tags,
.guide-article-tags { padding: 0.5rem 0 0.25rem; }
a.guide-tag-chip {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1.6;
    padding: 0.15rem 0.55rem;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border-radius: var(--border-radius-full);
    font-weight: 600;
    text-decoration: none;
}
a.guide-tag-chip:hover { background: var(--color-gray-200); color: var(--color-primary); }

/* Numbered step cards (CSS counter — no manual numbers) */
.guide-article-body .guide-steps {
    list-style: none;
    counter-reset: gstep;
    padding: 0;
    margin: 1.5rem 0;
}
.guide-article-body .guide-step {
    counter-increment: gstep;
    position: relative;
    padding: 0.75rem 0 0.75rem 3.25rem;
    border-bottom: 1px solid var(--color-gray-200);
}
.guide-article-body .guide-step:last-child { border-bottom: none; }
.guide-article-body .guide-step::before {
    content: counter(gstep);
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.guide-article-body .guide-step-title { font-weight: 700; margin-bottom: 0.15rem; }
.guide-article-body .guide-step p { margin: 0; }

/* Comparison cards (model/tool cards with bars + badge) */
/* NB: card + badge use the guide-rc-* namespace to avoid colliding with the
   existing .guide-card (listing cards) and .guide-badge (verified stamps). */
.guide-article-body .guide-rc-cards { display: grid; gap: 1rem; margin: 1.5rem 0; }
.guide-article-body .guide-rc-cards-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.guide-article-body .guide-rc-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 4px solid var(--color-gray-400);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
}
.guide-article-body .guide-rc-card-accent-green  { border-top-color: #2e9e5b; }
.guide-article-body .guide-rc-card-accent-blue   { border-top-color: var(--color-info); }
.guide-article-body .guide-rc-card-accent-purple { border-top-color: var(--color-accent-purple); }
.guide-article-body .guide-rc-card-head { font-weight: 700; font-size: var(--fs-105); margin-bottom: 0.4rem; }
.guide-article-body .guide-rc-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    border-radius: var(--border-radius-full);
    margin-bottom: 0.5rem;
}
.guide-article-body .guide-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; font-size: var(--fs-085); }
.guide-article-body .guide-bar-label { flex: 0 0 6rem; color: var(--color-gray-600); }
.guide-article-body .guide-bar-track { flex: 1; height: 8px; background: var(--color-gray-200); border-radius: var(--border-radius-full); overflow: hidden; }
.guide-article-body .guide-bar-fill { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.guide-article-body .guide-bar-5{width:5%}.guide-article-body .guide-bar-10{width:10%}.guide-article-body .guide-bar-15{width:15%}.guide-article-body .guide-bar-20{width:20%}.guide-article-body .guide-bar-25{width:25%}.guide-article-body .guide-bar-30{width:30%}.guide-article-body .guide-bar-35{width:35%}.guide-article-body .guide-bar-40{width:40%}.guide-article-body .guide-bar-45{width:45%}.guide-article-body .guide-bar-50{width:50%}.guide-article-body .guide-bar-55{width:55%}.guide-article-body .guide-bar-60{width:60%}.guide-article-body .guide-bar-65{width:65%}.guide-article-body .guide-bar-70{width:70%}.guide-article-body .guide-bar-75{width:75%}.guide-article-body .guide-bar-80{width:80%}.guide-article-body .guide-bar-85{width:85%}.guide-article-body .guide-bar-90{width:90%}.guide-article-body .guide-bar-95{width:95%}.guide-article-body .guide-bar-100{width:100%}

/* Ecosystem / feature grid of colored tiles */
.guide-article-body .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 1.25rem 0; }
.guide-article-body .guide-tile { padding: 0.6rem 0.75rem; border-radius: var(--border-radius-sm); background: var(--color-gray-700); color: var(--color-white); }
.guide-article-body .guide-tile strong { display: block; }
.guide-article-body .guide-tile span { font-size: 0.78rem; opacity: 0.85; }
.guide-article-body .guide-tile-navy   { background: #243b6b; }
.guide-article-body .guide-tile-green  { background: #2e9e5b; }
.guide-article-body .guide-tile-blue   { background: var(--color-info); }
.guide-article-body .guide-tile-purple { background: var(--color-accent-purple); }

/* Figure / diagram wrapper */
.guide-article-body .guide-figure { margin: 1.5rem 0; }
.guide-article-body .guide-figure img { max-width: 100%; height: auto; border-radius: var(--border-radius-sm); }
.guide-article-body .guide-figure.guide-figure-portrait { max-width: 520px; margin-left: auto; margin-right: auto; }
.guide-article-body .guide-figure.guide-figure-portrait img { display: block; width: 100%; }
.guide-article-body .guide-figure figcaption { font-size: var(--fs-085); color: var(--color-gray-500); text-align: center; margin-top: 0.4rem; }
.guide-article-body .guide-focal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.guide-article-body .guide-focal-grid .guide-figure { margin: 0; }
.guide-article-body .guide-focal-grid img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 600px) { .guide-article-body .guide-focal-grid { grid-template-columns: 1fr; } }
.guide-article-body .guide-scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.guide-article-body .guide-scene-grid .guide-figure { margin: 0; }
.guide-article-body .guide-scene-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.guide-article-body .guide-scene-grid.guide-uncropped-grid img { aspect-ratio: auto; object-fit: contain; }
@media (max-width: 600px) { .guide-article-body .guide-scene-grid { grid-template-columns: 1fr; } }
.guide-article-body .guide-portrait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.guide-article-body .guide-portrait-grid .guide-figure { margin: 0; }
.guide-article-body .guide-portrait-grid img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .guide-article-body .guide-portrait-grid { grid-template-columns: 1fr; } }

/* Bold definition lead-in rows */
.guide-article-body .guide-lead { margin: 0.55rem 0; }

/* Card grid (same minmax as .events-grid) */
.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Guide card base styles → moved to style.css (shared by guides, places, recipes) */

/* Country & category tile lists */
.guides-country-list,
.guides-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.guides-country-item a,
.guides-category-item a {
    display: block;
    padding: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-gray-700);
    transition: var(--transition);
    text-align: center;
    font-weight: 500;
}

.guides-country-item a:hover,
.guides-category-item a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.guides-country-item .country-flag {
    font-size: var(--fs-110);
    margin-right: 0.4rem;
}

/* Non-link category tiles on the landing page */
.guides-category-item-static {
    padding: 0.9rem 1rem;
    background: var(--color-gray-100);
    border-radius: var(--border-radius);
    text-align: center;
    font-size: var(--fs-095);
    color: var(--color-gray-700);
}

/* Sort tabs */
.guides-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.guides-sort a {
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-gray-700);
    font-size: var(--fs-090);
    font-weight: 500;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    transition: var(--transition);
}

.guides-sort a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.guides-sort a.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Empty state */
.page-guides .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    border-radius: var(--border-radius);
}

/* ===== Detail page article ===== */
.guide-article {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.guide-article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.guide-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: var(--fs-085);
}

.guide-meta-country {
    color: var(--color-primary);
    font-weight: 600;
}

.guide-meta-category {
    color: var(--color-gray-500);
}

.guide-badge {
    font-size: var(--fs-075);
    padding: 0.2rem 0.6rem;
    border-radius: var(--border-radius-full);
    font-weight: 600;
    line-height: 1.6;
}

.guide-badge-verified {
    background: #d1fae5;
    color: #065f46;
}

.guide-badge-needs-review {
    background: #fef3c7;
    color: #92400e;
}


.guide-article-summary {
    font-size: var(--fs-110);
    color: var(--color-gray-500);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.guide-article-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: var(--fs-085);
    color: var(--color-gray-500);
}

.guide-article-body {
    line-height: 1.7;
    color: var(--color-gray-700);
    font-size: var(--fs-100);
}

.guide-article-body pre.guide-code {
    overflow-x: auto;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-12);
    background: #111827;
    color: #f3f4f6;
    font-size: 0.86rem;
    line-height: 1.55;
    white-space: pre;
}

.guide-article-body h2 {
    font-size: var(--fs-150);
    color: var(--color-primary);
    margin: 2rem 0 1rem 0;
}

.guide-article-body h3 {
    font-size: var(--fs-120);
    color: var(--color-gray-700);
    margin: 1.5rem 0 0.75rem 0;
}

.guide-article-body p {
    margin: 0 0 1rem 0;
}

.guide-article-body ul,
.guide-article-body ol {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

.guide-article-body li {
    margin-bottom: 0.4rem;
}

.guide-article-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Tables inside guide bodies — guide HTML uses plain <table> markup */
.guide-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: var(--fs-095);
    border: 1px solid var(--color-gray-200);
}

.guide-article-body th,
.guide-article-body td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-gray-200);
}

.guide-article-body th {
    background: var(--color-gray-100);
    font-weight: 600;
    color: var(--color-gray-700);
}

.guide-article-body tbody tr:nth-child(even) {
    background: var(--color-gray-50);
}

.guide-article-body tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 600px) {
    .guide-article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* When the guide body ships its own Źródła/Sources table (hand-verified guides),
   the template skips the .guide-sources box and the in-body sources table — always
   the last table of the article — gets the same red accent bar instead.
   border-collapse:separate (not collapse) so border-radius can round the corners
   like .guide-callout boxes; cell borders below still draw the row lines. */
.guide-article-body.has-own-sources > table:last-of-type {
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.guide-article-body.has-own-sources > table:last-of-type th:first-child {
    border-top-left-radius: calc(var(--border-radius) - 4px);
}

.guide-article-body.has-own-sources > table:last-of-type th:last-child {
    border-top-right-radius: calc(var(--border-radius) - 1px);
}

.guide-article-body.has-own-sources > table:last-of-type tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--border-radius) - 4px);
}

.guide-article-body.has-own-sources > table:last-of-type tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--border-radius) - 1px);
}

/* Disclaimer */
.guide-disclaimer {
    display: block;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
    border-radius: var(--border-radius);
    font-size: var(--fs-090);
    color: #78350f;
    line-height: 1.5;
}

.guide-disclaimer strong {
    color: #92400e;
    display: inline-block;
    margin-right: 0.25rem;
}

/* Translation-pending notice */
.guide-translation-notice {
    background: var(--color-gray-100);
    border-left: 4px solid var(--color-gray-500);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    font-size: var(--fs-090);
    color: var(--color-gray-700);
}

/* Related guides */
.guide-related {
    margin-top: 2rem;
}

.guide-related > h2 {
    font-size: var(--fs-125);
    color: var(--color-gray-700);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .guides-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .guides-country-list,
    .guides-category-list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
    }

    .guides-country-item a,
    .guides-category-item a,
    .guides-category-item-static {
        padding: 0.75rem;
        font-size: var(--fs-090);
    }

    .guide-article {
        padding: 1.25rem;
    }

    .guide-article-title {
        font-size: var(--fs-150);
    }

    .guide-article-summary {
        font-size: var(--fs-100);
    }

    .guide-article-body {
        font-size: var(--fs-095);
    }

    .guide-article-body h2 {
        font-size: var(--fs-125);
    }

    .guides-sort {
        gap: 0.35rem;
    }

    .guides-sort a {
        padding: 0.4rem 0.75rem;
        font-size: var(--fs-085);
    }

    .guide-card-link {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .guide-article {
        padding: 1rem;
        border-radius: var(--border-radius);
    }

    .guide-article-title {
        font-size: 1.3rem;
    }

    .guides-section > h2 {
        font-size: var(--fs-120);
    }
}

/* Sources block on guide detail page (added in migration 212 / Phase 3.5) */
.guide-sources {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-gray-100);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-primary);
}

.guide-sources > h2 {
    font-size: var(--fs-125);
    color: var(--color-gray-700);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
}

.guide-sources ul {
    margin: 0;
    padding-left: 1.25rem;
}

.guide-sources li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.guide-sources a {
    color: var(--color-primary);
    text-decoration: underline;
}

.guide-sources .source-host {
    color: var(--color-gray-500);
    font-size: var(--fs-080);
    margin-left: 0.25rem;
}

/* =================================================================
   GUIDE FEEDBACK — "Was this helpful?" + "Report outdated info"
   ================================================================= */

.guide-helpful-widget {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.guide-helpful-heading {
    font-size: 1.15rem;
    color: var(--color-gray-700);
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.guide-helpful-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.guide-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: var(--color-white);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    font-size: var(--fs-095);
    font-weight: 500;
    color: var(--color-gray-700);
    transition: all 0.15s ease;
    min-width: 110px;
    justify-content: center;
}

.guide-helpful-btn:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.guide-helpful-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.guide-helpful-icon {
    font-size: var(--fs-120);
    line-height: 1;
}

.guide-helpful-count {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.1em 0.5em;
    background: var(--color-gray-100);
    border-radius: var(--border-radius-full);
    font-size: var(--fs-080);
    color: var(--color-gray-600);
    font-weight: 600;
}

.guide-helpful-yes.guide-helpful-active {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}
.guide-helpful-yes.guide-helpful-active .guide-helpful-count {
    background: #10b981;
    color: var(--color-white);
}

.guide-helpful-no.guide-helpful-active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}
.guide-helpful-no.guide-helpful-active .guide-helpful-count {
    background: #f59e0b;
    color: var(--color-white);
}

.guide-helpful-noreason {
    margin: 1rem auto 0.5rem auto;
    max-width: 500px;
    text-align: left;
    background: var(--color-gray-100);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.guide-helpful-noreason label {
    display: block;
    font-size: var(--fs-090);
    color: var(--color-gray-700);
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.guide-helpful-optional {
    font-weight: normal;
    color: var(--color-gray-500);
    font-size: var(--fs-085);
}

.guide-helpful-noreason-input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: var(--fs-090);
    resize: vertical;
    box-sizing: border-box;
}

.guide-helpful-noreason-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.guide-helpful-noreason-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
}

.guide-helpful-feedback {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: var(--border-radius);
    font-size: var(--fs-090);
    display: inline-block;
}

.guide-helpful-report-link {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-200);
}

.guide-report-trigger {
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    font-size: var(--fs-088);
    padding: 0.3rem 0.6rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.guide-report-trigger:hover {
    color: var(--color-primary);
}

/* ===== Report-outdated modal ===== */

.guide-report-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.guide-report-modal[hidden] {
    display: none;
}

.guide-report-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

.guide-report-content {
    position: relative;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 1.75rem;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.guide-report-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: var(--fs-175);
    line-height: 1;
    cursor: pointer;
    color: var(--color-gray-500);
    padding: 0.25rem 0.5rem;
}

.guide-report-close:hover { color: var(--color-primary); }

.guide-report-content h3 {
    margin: 0 0 0.5rem 0;
    color: var(--color-gray-700);
    font-size: var(--fs-125);
    padding-right: 2rem;
}

.guide-report-intro {
    color: var(--color-gray-600);
    font-size: var(--fs-090);
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}

.guide-report-form .form-row {
    display: block;
    margin-bottom: 1rem;
}

.guide-report-form .form-row label {
    display: block;
    font-size: var(--fs-088);
    font-weight: 500;
    color: var(--color-gray-700);
    margin-bottom: 0.3rem;
}

.guide-report-form .form-row label .required {
    color: var(--color-primary);
}

.guide-report-form input[type="text"],
.guide-report-form input[type="email"],
.guide-report-form input[type="url"],

.guide-report-form input:focus,
.guide-report-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fs-095);
    padding: 0.55rem 0.75rem;
    width: 100%;
.guide-report-form textarea { resize: vertical; min-height: 90px; }

.guide-report-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
}

.guide-report-result {
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--border-radius);
    font-size: var(--fs-090);
}

.guide-report-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid #b6e2bb;
}

.guide-report-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid #f1b0b7;
}

body.guide-report-modal-open { overflow: hidden; }

/* =================================================================
   COMMUNITY EXPERIENCES
   ================================================================= */

.guide-experiences {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
}

.guide-experiences > h2 {
    font-size: var(--fs-125);
    color: var(--color-gray-700);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.guide-experiences-intro {
    color: var(--color-gray-500);
    font-size: var(--fs-095);
    margin: 0.5rem 0 1.5rem 0;
}

.guide-experience-prompt {
    background: var(--color-gray-100);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-primary);
}

.guide-experience-prompt:last-child { margin-bottom: 0; }

.guide-experience-question {
    font-size: var(--fs-105);
    color: var(--color-gray-700);
    margin: 0 0 0.75rem 0;
    font-weight: 600;
    line-height: 1.4;
}

.guide-experience-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--color-white);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-gray-200);
    font-size: var(--fs-088);
    color: var(--color-gray-600);
}

.guide-experience-stats strong {
    color: var(--color-primary);
}

.guide-experience-stat-count {
    color: var(--color-gray-500);
    font-size: var(--fs-085);
}

.guide-experience-responses {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.guide-experience-response {
    padding: 0.85rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    margin-bottom: 0.6rem;
}

.guide-experience-response:last-child { margin-bottom: 0; }

.guide-experience-response-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    font-size: 0.82rem;
    color: var(--color-gray-500);
    margin-bottom: 0.35rem;
}

.guide-experience-response-author {
    color: var(--color-primary);
    font-weight: 600;
}

.guide-experience-response-value {
    color: var(--color-gray-700);
    line-height: 1.5;
    font-size: var(--fs-095);
}

.guide-experience-response-value strong { color: var(--color-primary); }

.guide-experience-empty {
    color: var(--color-gray-500);
    font-style: italic;
    margin: 0 0 1rem 0;
    font-size: var(--fs-092);
}

.guide-experience-more {
    color: var(--color-gray-500);
    font-size: var(--fs-088);
    text-align: center;
    margin: 0.5rem 0 1rem 0;
}

/* Expandable submission form */
.guide-experience-form-wrap {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
}

.guide-experience-form-wrap[open] {
    padding-bottom: 0.5rem;
}

.guide-experience-form-toggle {
    cursor: pointer;
    padding: 0.7rem 1rem;
    color: var(--color-primary);
    font-weight: 500;
    font-size: var(--fs-092);
    list-style: none;
    border-radius: var(--border-radius);
    user-select: none;
}

.guide-experience-form-toggle::-webkit-details-marker { display: none; }

.guide-experience-form-toggle::before {
    content: "+";
    display: inline-block;
    width: 1.2em;
    font-weight: 700;
    color: var(--color-primary);
}

.guide-experience-form-wrap[open] .guide-experience-form-toggle::before {
    content: "−";
}

.guide-experience-form-toggle:hover {
    background: var(--color-gray-100);
}

.guide-experience-form {
    padding: 0.5rem 1rem 1rem 1rem;
}

.guide-experience-form .form-row {
    display: block;
    margin-bottom: 0.85rem;
}

.guide-experience-form label {
    display: block;
    font-size: var(--fs-088);
    font-weight: 500;
    color: var(--color-gray-700);
    margin-bottom: 0.3rem;
}

.guide-experience-form .required { color: var(--color-primary); }

.guide-experience-form input[type="text"],
.guide-experience-form input[type="number"],
.guide-experience-form select,

.guide-experience-form input:focus,
.guide-experience-form select:focus,
.guide-experience-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.guide-experience-form textarea {
    resize: vertical;
    min-height: 70px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fs-095);
    padding: 0.5rem 0.7rem;
    width: 100%;
}

.guide-experience-location-inputs {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 0.5rem;
}

.guide-experience-anon-row { margin: 0.5rem 0 0.85rem 0; }

.guide-experience-anon-label {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal !important;
    margin: 0 !important;
    cursor: pointer;
    color: var(--color-gray-600);
    font-size: var(--fs-090);
}

.guide-experience-form-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.guide-experience-pre-mod-notice {
    color: var(--color-gray-500);
    font-size: var(--fs-080);
    font-style: italic;
    flex: 1;
}

.guide-experience-result {
    margin-top: 0.75rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--border-radius);
    font-size: var(--fs-090);
}

.guide-experience-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid #b6e2bb;
}

.guide-experience-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid #f1b0b7;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .guide-helpful-widget,
    .guide-experiences { padding: 1.25rem; }

    .guide-helpful-buttons { gap: 0.5rem; }
    .guide-helpful-btn { min-width: 95px; padding: 0.55rem 1rem; font-size: var(--fs-090); }

    .guide-experience-prompt { padding: 1rem; }
    .guide-experience-question { font-size: var(--fs-100); }

    .guide-experience-location-inputs {
        grid-template-columns: 1fr;
    }

    .guide-report-content { padding: 1.25rem; }
    .guide-report-content h3 { font-size: var(--fs-110); }
}

@media (max-width: 480px) {
    .guide-helpful-buttons { flex-direction: column; align-items: stretch; }
    .guide-helpful-btn { width: 100%; }
    .guide-helpful-noreason-actions { justify-content: stretch; }
    .guide-helpful-noreason-actions .btn { flex: 1; }
}

/* =================================================================
   GUIDES COUNTRY BANNER — auto-detected / chosen country indicator
   on /poradnik landing
   ================================================================= */

.guides-country-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem 0;
    background: linear-gradient(135deg, var(--color-danger-bg-light) 0%, var(--color-white) 100%);
    border: 1px solid #ffd5d5;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius);
    font-size: 0.93rem;
    color: var(--color-gray-700);
}

.guides-country-banner-allmode {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    border-left-color: var(--color-gray-500);
    color: var(--color-gray-600);
}

.guides-country-banner-label strong {
    color: var(--color-primary);
    margin-left: 0.3rem;
}

.guides-country-banner-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.guides-country-banner-actions .btn-link {
    color: var(--color-primary);
    padding: 0.2rem 0;
    font-size: var(--fs-088);
}

.guides-country-show-all {
    color: var(--color-gray-500) !important;
    font-size: var(--fs-085) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    .guides-country-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .guides-country-banner-actions {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =================================================================
   GUIDES SEARCH RESULTS — /poradnik?q=…
   ================================================================= */

.page-guides-search .guides-search-header {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
}

.page-guides-search .guides-search-header h1 {
    margin: 0 0 0.4rem 0;
    color: var(--color-gray-700);
    font-size: var(--fs-150);
}

.page-guides-search .guides-search-stats {
    color: var(--color-gray-500);
    font-size: var(--fs-095);
    margin: 0 0 0.6rem 0;
}

.page-guides-search .guides-search-stats strong {
    color: var(--color-primary);
}

.page-guides-search .guides-search-back a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--fs-090);
}

.page-guides-search .guides-search-back a:hover {
    text-decoration: underline;
}

.page-guides-search .guides-search-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
}

.page-guides-search .guides-search-empty p {
    color: var(--color-gray-500);
    margin: 0 0 1.25rem 0;
}

.page-guides-search .guides-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1rem;
}

.page-guides-search .guides-pagination a {
    padding: 0.5rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--fs-090);
}

.page-guides-search .guides-pagination a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.page-guides-search .page-guides-current {
    color: var(--color-gray-600);
    font-size: var(--fs-090);
}

@media (max-width: 768px) {
    .page-guides-search .guides-search-header { padding: 1rem; }
    .page-guides-search .guides-search-header h1 { font-size: var(--fs-120); }
}

/* ====================================================================
   Guide AI Questions — per-guide engagement widget (one-at-a-time)
   Scoped under .guide-ai-q-* to avoid interference with other widgets.
   ==================================================================== */
.guide-ai-q-section {
    margin: 2.5rem 0 2rem;
    padding: 1.5rem 1.5rem 1.75rem;
    background: var(--color-gray-50, #f8f9fa);
    border: 1px solid var(--color-gray-200, #e4e7eb);
    border-radius: var(--radius-8);
    position: relative;
}
.guide-ai-q-heading {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--color-text, #222);
}
.guide-ai-q-intro {
    margin: 0 0 1rem;
    color: var(--color-gray-600, #555);
    font-size: var(--fs-095);
}
.guide-ai-q-progress {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: var(--fs-085);
    color: var(--color-gray-500, #888);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.guide-ai-q-progress-current {
    color: var(--color-primary, #c8102e);
    font-size: var(--fs-100);
}
.guide-ai-q-card {
    margin-top: 0.75rem;
}
.guide-ai-q-card[hidden] {
    display: none;
}
.guide-ai-q-question {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--color-text, #222);
}
.guide-ai-q-stats {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200, #e4e7eb);
    border-radius: var(--radius-6);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: var(--fs-090);
    color: var(--color-gray-700, #444);
}
.guide-ai-q-stat strong { color: var(--color-text, #222); }
.guide-ai-q-stat-count { color: var(--color-gray-500, #888); }

.guide-ai-q-form .form-row {
    margin-bottom: 0.85rem;
}
.guide-ai-q-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: var(--fs-092);
    color: var(--color-gray-700, #444);
}
.guide-ai-q-form .required { color: var(--color-primary, #c8102e); }
.guide-ai-q-form input[type="text"],
.guide-ai-q-form input[type="number"],
.guide-ai-q-form select,
.guide-ai-q-form textarea {
    resize: vertical;
    min-height: 70px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300, #ccd0d6);
    border-radius: var(--radius-6);
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fs-095);
    padding: 0.55rem 0.75rem;
    width: 100%;
}
.guide-ai-q-form input:focus,
.guide-ai-q-form select:focus,
.guide-ai-q-form textarea:focus {
    outline: none;
    border-color: var(--color-primary, #c8102e);
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.15);
}
.guide-ai-q-location-inputs {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.5rem;
}
@media (max-width: 600px) {
    .guide-ai-q-location-inputs { grid-template-columns: 1fr; }
}
.guide-ai-q-anon-row { margin-bottom: 0.5rem; }
.guide-ai-q-anon-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-090);
    color: var(--color-gray-700, #444);
    cursor: pointer;
    font-weight: normal;
}
.guide-ai-q-displayname-row[hidden] { display: none; }

.guide-ai-q-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.guide-ai-q-submit { white-space: nowrap; }
.guide-ai-q-skip {
    background: transparent;
    border: none;
    color: var(--color-gray-600, #555);
    text-decoration: underline;
    font-size: var(--fs-088);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.guide-ai-q-skip:hover { color: var(--color-primary, #c8102e); }
.guide-ai-q-notice {
    color: var(--color-gray-500, #888);
    font-size: 0.82rem;
    margin-left: auto;
}
.guide-ai-q-result {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-6);
    font-size: var(--fs-092);
}
.guide-ai-q-success {
    background: var(--color-success-bg-light);
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}
.guide-ai-q-error {
    background: #ffebee;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
}

.guide-ai-q-responses-wrap {
    margin-top: 1rem;
    border-top: 1px solid var(--color-gray-200, #e4e7eb);
    padding-top: 0.85rem;
}
.guide-ai-q-responses-toggle {
    cursor: pointer;
    font-size: var(--fs-090);
    color: var(--color-gray-600, #555);
    list-style: none;
    padding: 0.2rem 0;
}
.guide-ai-q-responses-toggle::-webkit-details-marker { display: none; }
.guide-ai-q-responses-toggle:hover { color: var(--color-primary, #c8102e); }
.guide-ai-q-responses {
    list-style: none;
    padding: 0;
    margin: 0.65rem 0 0;
}
.guide-ai-q-response {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-gray-200, #e4e7eb);
}
.guide-ai-q-response:last-child { border-bottom: none; }
.guide-ai-q-response-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.82rem;
    color: var(--color-gray-500, #888);
    margin-bottom: 0.25rem;
}
.guide-ai-q-response-author {
    font-weight: 600;
    color: var(--color-gray-700, #444);
}
.guide-ai-q-response-date { margin-left: auto; }
.guide-ai-q-response-value {
    font-size: var(--fs-092);
    color: var(--color-text, #222);
    line-height: 1.45;
}
.guide-ai-q-response-more {
    margin: 0.5rem 0 0;
    font-size: var(--fs-085);
    color: var(--color-gray-500, #888);
    font-style: italic;
}

.guide-ai-q-done {
    text-align: center;
    padding: 1rem 0.5rem;
}
.guide-ai-q-done[hidden] { display: none; }
.guide-ai-q-done-title {
    margin: 0 0 0.5rem;
    font-size: var(--fs-120);
    color: var(--color-primary, #c8102e);
}
.guide-ai-q-done-body {
    margin: 0 0 1rem;
    color: var(--color-gray-700, #444);
    font-size: var(--fs-095);
}
.guide-ai-q-done-actions {
    display: inline-flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}
.guide-ai-q-jump-comments {
    align-self: center;
    color: var(--color-gray-600, #555);
    text-decoration: underline;
    font-size: var(--fs-092);
}
.guide-ai-q-jump-comments:hover { color: var(--color-primary, #c8102e); }

.guide-ai-q-number-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.guide-ai-q-number-wrap input[type="number"] {
    flex: 0 0 auto;
    max-width: 180px;
}
.guide-ai-q-unit {
    color: var(--color-gray-600, #555);
    font-size: var(--fs-092);
    font-weight: 500;
}

/* ====================================================================
   Guides country picker — multi-select on /poradnik banner
   ==================================================================== */
.guides-country-picker {
    display: inline-block;
    position: relative;
}
.guides-country-picker-toggle {
    cursor: pointer;
    color: var(--color-primary, #c8102e);
    text-decoration: underline;
    font-size: var(--fs-092);
    list-style: none;
    padding: 0.25rem 0.5rem;
}
.guides-country-picker-toggle::-webkit-details-marker { display: none; }
.guides-country-picker-form {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300, #ccd0d6);
    border-radius: var(--radius-6);
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 280px;
    max-width: 480px;
    margin-top: 0.4rem;
}
.guides-country-picker-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.guides-country-picker-legend {
    font-size: var(--fs-088);
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--color-gray-700, #444);
}
.guides-country-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
    margin-bottom: 0.85rem;
    max-height: 320px;
    overflow-y: auto;
}
@media (max-width: 480px) {
    .guides-country-picker-grid { grid-template-columns: 1fr; }
    .guides-country-picker-form { right: auto; left: 0; min-width: 240px; }
}
.guides-country-picker-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-092);
    cursor: pointer;
    padding: 0.2rem 0.1rem;
}
.guides-country-picker-option input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.guides-country-picker-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-gray-200, #e4e7eb);
    padding-top: 0.65rem;
}
.guides-country-banner-multi .guides-country-banner-label strong {
    font-weight: 600;
}

/* State picker — denser grid (50 states + DC need 3-4 columns) */
@media (max-width: 768px) {
    .guides-state-picker-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .guides-state-picker-grid { grid-template-columns: 1fr; }
}
.guides-state-code {
    display: inline-block;
    min-width: 1.8em;
    font-weight: 600;
    color: var(--color-text, #222);
    font-family: ui-monospace, monospace;
    font-size: var(--fs-085);
}
.guides-state-name {
    color: var(--color-gray-600, #555);
    font-size: var(--fs-088);
}
.guides-state-summary {
    color: var(--color-gray-600, #555);
    font-size: 0.9em;
    font-weight: normal;
    margin-left: 0.3rem;
}

/* ====================================================================
   Guide alert subscribe widget (button + modal)
   ==================================================================== */
.guide-alert-widget {
    margin: 1rem 0;
}
.guide-alert-trigger {
    background: var(--color-white);
    border: 1px solid var(--color-primary, #c8102e);
    color: var(--color-primary, #c8102e);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-6);
    cursor: pointer;
    font-size: var(--fs-095);
    font-weight: 500;
}
.guide-alert-trigger:hover {
    background: var(--color-primary, #c8102e);
    color: var(--color-white);
}

/* When the alert widget lives inside the article-meta row, push it to the
   right and shrink the trigger to match the badge / meta font-size. */
.guide-article-meta .guide-alert-widget {
    margin: 0 0 0 auto;
}
.guide-article-meta .guide-alert-trigger {
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--border-radius-full, 999px);
    line-height: 1.6;
}
.guide-alert-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.guide-alert-modal[hidden] { display: none; }
.guide-alert-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.guide-alert-modal-content {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-8);
    padding: 1.5rem;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    margin: 1rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.guide-alert-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-gray-500, #888);
}
.guide-alert-modal-close:hover { color: var(--color-text, #222); }
.guide-alert-modal-title {
    margin: 0 0 0.5rem;
    font-size: var(--fs-125);
}
.guide-alert-modal-intro {
    margin: 0 0 1rem;
    color: var(--color-gray-700, #444);
    font-size: var(--fs-092);
}
.guide-alert-field { margin-bottom: 0.85rem; }
.guide-alert-label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: var(--fs-090);
    color: var(--color-gray-700, #444);
}
.guide-alert-form input[type="text"],
.guide-alert-form input[type="email"],
.guide-alert-form select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-gray-300, #ccd0d6);
    border-radius: var(--radius-6);
    font-size: var(--fs-095);
    font-family: inherit;
    box-sizing: border-box;
}
.guide-alert-multi {
    border: 1px solid var(--color-gray-200, #e4e7eb);
    border-radius: var(--radius-6);
    background: var(--color-gray-50, #f8f9fa);
}
.guide-alert-multi-toggle {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-092);
    list-style: none;
    color: var(--color-gray-700, #444);
}
.guide-alert-multi-toggle::-webkit-details-marker { display: none; }
.guide-alert-multi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.75rem;
    padding: 0.5rem 0.75rem 0.75rem;
    max-height: 280px;
    overflow-y: auto;
    border-top: 1px solid var(--color-gray-200, #e4e7eb);
}
.guide-alert-states-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 480px) {
    .guide-alert-multi-grid { grid-template-columns: 1fr; }
    .guide-alert-states-grid { grid-template-columns: 1fr 1fr; }
}
.guide-alert-multi-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--fs-088);
    cursor: pointer;
}
.guide-alert-state-name {
    color: var(--color-gray-600, #555);
}
.guide-alert-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.guide-alert-disclaimer {
    color: var(--color-gray-500, #888);
    font-size: 0.82rem;
}
.guide-alert-result {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-6);
    font-size: var(--fs-092);
}
.guide-alert-success {
    background: var(--color-success-bg-light);
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}
.guide-alert-error {
    background: #ffebee;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
}

/* ====================================================================
   /poradnik actions row + stats — visually identical to /wydarzenia
   (same dimensions, colors, fonts as .events-actions / .events-stats)
   ==================================================================== */
.guides-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.guides-search-form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 300px;
}
.guides-search-form .search-field {
    flex: 1;
    position: relative;
}
.guides-search-form .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-110);
    color: var(--color-gray-500);
}
.guides-search-form .search-field input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-8);
    font-size: var(--fs-100);
    transition: border-color 0.2s;
}
.guides-search-form .search-field input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.guides-search-form .search-btn {
    padding: 0.875rem 1.5rem;
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-8);
    font-size: var(--fs-100);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-200);
}
.guides-search-form .search-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.guides-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1.5rem;
    background: var(--color-white, #fff);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}
.guides-stats .stat-item {
    text-align: center;
}
.guides-stats .stat-number {
    display: block;
    font-size: var(--fs-175);
    font-weight: 700;
    color: var(--color-primary);
}
.guides-stats .stat-label {
    font-size: var(--fs-090);
    color: var(--color-gray-500);
}
@media (max-width: 768px) {
    .guides-actions { flex-direction: column; }
    .guides-search-form { min-width: 100%; flex-wrap: wrap; }
    .guides-stats { gap: 1.5rem; flex-wrap: wrap; }
}

/* ====================================================================
   Filter pickers (replacement for <details>-based dropdowns)
   ==================================================================== */
.guides-filter-picker {
    position: relative;
    display: inline-block;
}
.guides-filter-toggle {
    background: transparent;
    border: 1px solid var(--color-gray-300, #ccd0d6);
    color: var(--color-gray-700, #444);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-6);
    font-size: var(--fs-090);
    cursor: pointer;
    line-height: 1.3;
}
.guides-filter-picker.open .guides-filter-toggle {
    background: var(--color-primary, #c8102e);
    color: var(--color-white);
    border-color: var(--color-primary, #c8102e);
}
.guides-filter-toggle:hover {
    border-color: var(--color-primary, #c8102e);
    color: var(--color-primary, #c8102e);
}
.guides-filter-picker.open .guides-filter-toggle:hover {
    color: var(--color-white);
}
.guides-filter-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 200;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300, #ccd0d6);
    border-radius: var(--radius-8);
    padding: 1rem 1rem 0.75rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    min-width: 320px;
    max-width: 520px;
}
.guides-filter-panel[hidden] { display: none; }
.guides-filter-close {
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    background: transparent;
    border: none;
    font-size: var(--fs-150);
    line-height: 1;
    color: var(--color-gray-500, #888);
    cursor: pointer;
    padding: 0.15rem 0.5rem;
}
.guides-filter-close:hover { color: var(--color-text, #222); }
.guides-filter-title {
    font-weight: 600;
    font-size: var(--fs-095);
    margin-bottom: 0.75rem;
    color: var(--color-gray-700, #444);
    padding-right: 1.5rem;
}
.guides-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.85rem;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}
.guides-state-picker-grid {
    grid-template-columns: repeat(3, 1fr);
    max-height: 360px;
}
@media (max-width: 600px) {
    .guides-filter-grid { grid-template-columns: 1fr; }
    .guides-state-picker-grid { grid-template-columns: repeat(2, 1fr); }
    .guides-filter-panel { min-width: 260px; }
}
.guides-filter-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-090);
    cursor: pointer;
    padding: 0.18rem 0.1rem;
}
.guides-filter-option input { margin: 0; cursor: pointer; }
.guides-filter-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-gray-200, #e4e7eb);
    padding-top: 0.6rem;
}
.guides-filter-clear,
.guides-filter-show-all {
    background: transparent;
    border: none;
    color: var(--color-primary, #c8102e);
    text-decoration: underline;
    font-size: var(--fs-088);
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}
.guides-filter-clear:hover,
.guides-filter-show-all:hover {
    color: var(--color-text, #222);
}
.guides-filter-hint {
    margin-left: auto;
    color: var(--color-gray-500, #888);
    font-size: 0.78rem;
    font-style: italic;
}

/* Search results section */
.guides-section-search-results .guides-search-heading {
    font-size: 1.15rem;
    margin: 0;
}
.guides-section-search-results .guides-search-stats {
    color: var(--color-gray-500, #888);
    font-size: var(--fs-090);
    margin-left: 0.5rem;
}
.guides-search-empty {
    color: var(--color-gray-600, #555);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* ====================================================================
   /poradnik/dodaj submission form + success page
   ==================================================================== */
.page-guides-add .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .page-guides-add .form-row { grid-template-columns: 1fr; }
}
.page-guides-add .form-group {
    margin-bottom: 1rem;
}
.page-guides-add .form-group label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-092);
    margin-bottom: 0.3rem;
    color: var(--color-gray-700, #444);
}
.page-guides-add .form-group input[type="text"],
.page-guides-add .form-group input[type="email"],
.page-guides-add .form-group select,
.page-guides-add .form-group textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-gray-300, #ccd0d6);
    border-radius: var(--radius-6);
    font-size: var(--fs-095);
    font-family: inherit;
    box-sizing: border-box;
}
.page-guides-add .form-hint {
    color: var(--color-gray-500, #888);
    font-size: 0.82rem;
    display: block;
    margin-top: 0.25rem;
}
.page-guides-add .form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
}
.page-guides-add .form-errors {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    color: #b71c1c;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-6);
    margin-bottom: 1rem;
}
.page-guides-add .form-errors ul {
    margin: 0.4rem 0 0 1.25rem;
    padding: 0;
}

.page-guides-success .guides-success-card {
    background: var(--color-gray-50, #f8f9fa);
    border: 1px solid var(--color-gray-200, #e4e7eb);
    border-radius: var(--radius-8);
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin: 1.5rem 0;
}
.page-guides-success .guides-success-icon {
    font-size: var(--fs-300);
    color: #1b5e20;
    margin-bottom: 0.5rem;
}
.page-guides-success .guides-success-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* =================================================================
   Browse-all section on /poradnik landing — sort dropdown + grid + pagination.
   Scoped under .guides-section-all + .page-guides so it can't leak
   into other pages.
   ================================================================= */
.page-guides #wszystkie-poradniki {
    /* clear the sticky .site-header (~60px + breathing room) so anchor-scrolls
       from the pagination land at the section title, not under the navbar */
    scroll-margin-top: 80px;
}
.page-guides .guides-section-all .guides-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem 0;
}
.page-guides .guides-section-all .guides-section-header h2 {
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    flex: 1 1 auto;
}
.page-guides .guides-section-all .guides-section-count {
    color: var(--color-gray-600);
    font-weight: normal;
    font-size: 0.85em;
    margin-left: 0.4rem;
}
.page-guides .guides-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.page-guides .guides-sort-label {
    color: var(--color-gray-600);
    font-size: var(--fs-090);
}
.page-guides .guides-sort-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    background: var(--color-white);
    color: var(--color-gray-800);
    font-size: var(--fs-090);
    cursor: pointer;
    max-width: 100%;
}
.page-guides .guides-sort-select:hover,
.page-guides .guides-sort-select:focus {
    border-color: var(--color-primary);
    outline: none;
}
.page-guides .guides-section-empty {
    text-align: center;
    color: var(--color-gray-600);
    padding: 2rem 1rem;
    background: var(--color-gray-50, #fafafa);
    border-radius: var(--border-radius);
}
.page-guides .guides-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin: 2rem 0 0.5rem 0;
    flex-wrap: wrap;
}
.page-guides .guides-pagination a {
    padding: 0.5rem 0.8rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--fs-090);
    min-width: 2.4rem;
    text-align: center;
}
.page-guides .guides-pagination a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.page-guides .guides-pagination a.is-current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    pointer-events: none;
}
.page-guides .page-guides-gap {
    color: var(--color-gray-500);
    padding: 0 0.3rem;
}
.page-guides .guides-pagination-info {
    text-align: center;
    color: var(--color-gray-600);
    font-size: var(--fs-090);
    margin: 0.5rem 0 0 0;
}
@media (max-width: 600px) {
    .page-guides .guides-section-all .guides-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-guides .guides-sort-bar {
        width: 100%;
    }
    .page-guides .guides-sort-select {
        flex: 1;
    }
    .page-guides .guides-pagination a {
        padding: 0.4rem 0.6rem;
        font-size: var(--fs-085);
        min-width: 2.2rem;
    }
}



/* =================================================================
   #hub-search GUIDE SEARCH v2 — "Czy chodziło Ci o" line and the
   matching paths / sections list above the results. Used on
   /poradnik?q=… and in the live results box of /poradnik. Scoped to
   .page-guides; reuses the site variables (owner-approved hub CSS).
   ================================================================= */

.page-guides .guides-search-suggest {
    margin: 0 0 0.6rem 0;
    color: var(--color-gray-600);
    font-size: var(--fs-095);
}

.page-guides .guides-search-suggest a {
    color: var(--color-primary);
    font-weight: 600;
}

.page-guides .guides-search-nav {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.page-guides .guides-search-nav-heading {
    margin: 0 0 0.6rem 0;
    font-size: var(--fs-105);
    color: var(--color-gray-700);
}

.page-guides .guides-search-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.page-guides .guides-search-nav-item a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.page-guides .guides-search-nav-item a:hover {
    text-decoration: underline;
}

.page-guides .guides-search-nav-kind {
    color: var(--color-gray-500);
    font-size: var(--fs-085);
}
/* ====================================================================
   /poradnik hub v2 (plan #664, proposal 2026-10-24). Owner allowed CSS
   for the /poradnik hub only: every rule is scoped to .guides-hub or a
   .guides-hub-* class used only by templates/pages/guides/index.php.
   Same tokens as /firmy (.businesses-list-section): white panel,
   --border-radius-lg, --shadow-sm, red 3px heading rule. Mobile first.
   ==================================================================== */
.guides-hub .guides-actions { margin-bottom: 0.5rem; }
.guides-hub .guides-search-form { min-width: 0; }
.guides-hub .guides-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }

.guides-hub-country { margin: 0 0 0.25rem; }
.guides-hub-country > summary {
    list-style: none;
    cursor: pointer;
    display: block;
    min-height: 44px;
    padding: 0.6rem 0;
    color: var(--color-gray-700);
    font-size: var(--fs-100);
    line-height: 1.4;
}
.guides-hub-country > summary::-webkit-details-marker { display: none; }
.guides-hub-country-label { overflow-wrap: anywhere; }
.guides-hub-country-action { white-space: nowrap; }
.guides-hub-country-sep { color: var(--color-gray-500); margin: 0 0.35rem; }
.guides-hub-country-change {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.guides-hub-country > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.guides-hub-country-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0 0.75rem;
}
.guides-hub-country .guides-filter-picker { display: block; }
.guides-hub-country .guides-filter-toggle { min-height: 44px; }
/* The popover opens in the flow here: an absolute 320px panel clips at 375px. */
.guides-hub-country .guides-filter-panel {
    position: static;
    min-width: 0;
    max-width: none;
    margin-top: 0.4rem;
}

.guides-hub-minor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
    margin: 0 0 1.25rem;
}
.guides-hub-minor .guides-hub-add,
.guides-hub-minor .guide-alert-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--color-gray-600);
    font-size: var(--fs-090);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.guides-hub-minor .guides-hub-add:hover,
.guides-hub-minor .guide-alert-trigger:hover {
    background: none;
    color: var(--color-primary);
}

.guides-hub-block {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1rem;
    margin-bottom: 1.25rem;
    min-width: 0;
}
.guides-hub-block > h2 {
    font-size: var(--fs-150);
    color: var(--color-gray-700);
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--color-primary);
}
.guides-hub-path-list,
.guides-hub-section-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.guides-hub-path,
.guides-hub-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    text-decoration: none;
}
.guides-hub-path-list li:last-child .guides-hub-path,
.guides-hub-section-list li:last-child .guides-hub-section { border-bottom: 0; }
.guides-hub-path-name,
.guides-hub-section-name {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}
.guides-hub-path:hover .guides-hub-path-name,
.guides-hub-section:hover .guides-hub-section-name { color: var(--color-primary); }
.guides-hub-path-steps {
    flex-shrink: 0;
    font-size: var(--fs-085);
    color: var(--color-gray-500);
    white-space: nowrap;
}
.guides-hub-section-count {
    flex-shrink: 0;
    min-width: 2.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--border-radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    font-size: var(--fs-085);
    font-weight: 600;
    text-align: center;
}
.guides-hub-popular .guides-grid { margin-top: 1rem; }
.guides-hub-all { margin: 1.25rem 0 0; }
.guides-hub-all .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    width: 100%;
    text-align: center;
}

@media (max-width: 768px) {
    /* Phone: most-read cards are one compact column (title + country/category). */
    .guides-hub-popular .guide-card-summary,
    .guides-hub-popular .guide-card-footer { display: none; }
    .guides-hub-popular .guide-card-link { padding: 0.9rem 1rem; }
    .guides-hub-popular .guide-card-title { margin: 0; font-size: var(--fs-100); }
    .guides-hub-popular .guide-card:hover { transform: none; }
}

@media (min-width: 768px) {
    .guides-hub-block { padding: 1.5rem 1.75rem; }
    .guides-hub-block > h2 { font-size: var(--fs-150); }
    .guides-hub-all .btn { display: inline-flex; width: auto; }
    .guides-hub-country-panel { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .guides-hub-country .guides-filter-picker { display: inline-block; }
}

@media (min-width: 768px) {
    /* Wide screens: one full-width column like /firmy; lists spread into columns. */
    .guides-hub-paths .guides-hub-path-list,
    .guides-hub-sections .guides-hub-section-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
        overflow: hidden;
    }
    /* Every row keeps its divider; the one under the last row is clipped. */
    .guides-hub-paths .guides-hub-path,
    .guides-hub-sections .guides-hub-section,
    .guides-hub-path-list li:last-child .guides-hub-path,
    .guides-hub-section-list li:last-child .guides-hub-section {
        border-bottom: 1px solid var(--color-gray-200);
        margin-bottom: -1px;
    }
}
@media (min-width: 1024px) {
    .guides-hub-sections .guides-hub-section-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .guides-hub-popular .guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Path page /poradnik/sciezka/{slug} (#671): same white panel as the hub.
   The step number is printed in the label ("1."), so the list has no markers. */
.guide-path {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0.5rem 1rem;
    margin-top: 1.5rem;
}
.guide-path .guide-path-steps { list-style: none; margin: 0; padding: 0; }
.guide-path-step { padding: 1rem 0; border-bottom: 1px solid var(--color-gray-200); }
.guide-path-step:last-child { border-bottom: 0; }
.guide-path-label { margin: 0 0 0.3rem; font-weight: 600; color: var(--color-gray-700); }
.guide-path-step-number { color: var(--color-primary); font-weight: 700; }
.guide-path-title { margin: 0 0 0.35rem; font-size: var(--fs-110); line-height: 1.35; }
.guide-path-title a { color: var(--color-gray-700); text-decoration: none; }
.guide-path-title a:hover { color: var(--color-primary); text-decoration: underline; }
.guide-path-summary {
    margin: 0;
    color: var(--color-gray-600);
    font-size: var(--fs-095);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.guide-path-or {
    margin: 0.75rem 0;
    color: var(--color-gray-500);
    font-size: var(--fs-085);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.guide-path-or + .guide-path-option { padding-left: 0.85rem; border-left: 3px solid var(--color-gray-200); }
@media (min-width: 768px) {
    .guide-path { padding: 0.75rem 1.75rem; }
    .guide-path-title { font-size: var(--fs-120); }
}
/* ===== end /poradnik hub v2 ===== */