/**
 * TamRank Pillar Page Styling
 * Long-form content hub layout: hero, sticky TOC, body, author card.
 * Plus utility classes for pasted HTML (callouts, TL;DR, quotes, stats).
 * Archive listing styles at the bottom.
 */

/* ── Reading progress bar ── */
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}
.reading-progress-bar {
    height: 100%;
    width: 0;
    background: var(--tr-color-primary);
    transition: width 0.1s ease-out;
}

/* ── Article wrapper ── */
.pillar-article {
    background: var(--tr-color-bg);
}

/* ── Hero ── */
.pillar-hero {
    padding: 96px 0 48px;
    border-bottom: 1px solid var(--tr-color-slate-200);
}
/* Mobile: clear the floating pill header. With the WP admin bar the body
   is already pushed down, so this needs less top padding than the
   no-admin-bar mobile value set in the breakpoints further below. */
@media screen and (max-width: 782px) {
    .admin-bar .pillar-hero {
        padding-top: 102px;
    }
}

.pillar-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--tr-color-slate-500);
    margin-bottom: 24px;
    flex-wrap: nowrap;
}
.pillar-breadcrumbs a {
    color: var(--tr-color-slate-500);
    text-decoration: none;
    transition: color 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.pillar-breadcrumbs a:hover {
    color: var(--tr-color-primary);
}
.pillar-breadcrumbs .current {
    color: var(--tr-color-slate-900);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pillar-breadcrumbs svg {
    color: var(--tr-color-slate-400);
    flex-shrink: 0;
}

.pillar-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--tr-color-primary-soft, #d1fae5);
    color: var(--tr-color-primary-dark, #047857);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    margin-bottom: 16px;
}

.pillar-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--tr-color-slate-900);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    max-width: 900px;
}

.pillar-lead {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--tr-color-slate-700);
    margin: 0 0 24px;
    max-width: 760px;
}

.pillar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    font-size: 0.875rem;
    color: var(--tr-color-slate-500);
}
.pillar-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pillar-meta .meta-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.pillar-meta .meta-cluster {
    color: var(--tr-color-primary);
    font-weight: 500;
}

/* ── Body grid ── */
.pillar-body {
    padding: 64px 0 80px;
}

.pillar-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    gap: 48px;
    align-items: start;
}

/* ── Sticky sidebar (TOC) ──
   Sticky lives on the GRID ITEM (.pillar-sidebar), not the inner wrapper,
   so it can scroll the full height of the grid row (= article content
   height). top offset clears the fixed floating pill header (~82px tall),
   with extra clearance when WP admin bar is shown. */
.pillar-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}
.pillar-sidebar-sticky {
    /* visual wrapper only; sticky is on the parent grid item */
}
.admin-bar .pillar-sidebar {
    top: 132px;
}
@media screen and (max-width: 782px) {
    .admin-bar .pillar-sidebar {
        top: 146px;
    }
}
.pillar-sidebar-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-color-slate-500);
    margin: 0 0 12px;
}
.pillar-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--tr-color-slate-200);
}
.pillar-toc-item {
    margin: 0;
}
.pillar-toc-link {
    display: block;
    padding: 6px 16px;
    color: var(--tr-color-slate-600);
    font-size: 0.875rem;
    line-height: 1.45;
    text-decoration: none;
    margin-left: -2px;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pillar-toc-link:hover {
    color: var(--tr-color-slate-900);
}
.pillar-toc-link.active {
    color: var(--tr-color-primary);
    border-left-color: var(--tr-color-primary);
    font-weight: 500;
}
.pillar-toc-sub .pillar-toc-link {
    padding-left: 28px;
    font-size: 0.8125rem;
}

/* ── Pillar content (typography of pasted HTML) ── */
.pillar-content {
    max-width: 720px;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--tr-color-slate-700);
}
.pillar-content > * {
    max-width: 100%;
}
.pillar-content h2 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tr-color-slate-900);
    margin: 64px 0 16px;
    padding-top: 32px;
    border-top: 1px solid var(--tr-color-slate-200);
    letter-spacing: -0.015em;
    scroll-margin-top: 24px;
}
.pillar-content h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.pillar-content h3 {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tr-color-slate-900);
    margin: 40px 0 12px;
    scroll-margin-top: 24px;
}
.pillar-content h4 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tr-color-slate-900);
    margin: 32px 0 12px;
}
.pillar-content p {
    margin: 0 0 20px;
}
.pillar-content a {
    color: var(--tr-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.pillar-content a:hover {
    color: var(--tr-color-primary-dark, #047857);
}
.pillar-content ul,
.pillar-content ol {
    margin: 0 0 24px;
    padding-left: 24px;
}
.pillar-content li {
    margin-bottom: 8px;
}
.pillar-content blockquote {
    margin: 32px 0;
    padding: 16px 24px;
    border-left: 3px solid var(--tr-color-primary);
    background: rgba(16, 185, 129, 0.05);
    color: var(--tr-color-slate-800);
    font-style: italic;
    border-radius: 0 6px 6px 0;
}
.pillar-content code {
    background: var(--tr-color-slate-100);
    color: var(--tr-color-slate-900);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.pillar-content pre {
    background: var(--tr-color-slate-900);
    color: var(--tr-color-slate-100);
    padding: 20px 24px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 0.875rem;
    line-height: 1.6;
}
.pillar-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}
.pillar-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 32px 0;
    display: block;
}
.pillar-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.9375rem;
    border: 1px solid var(--tr-color-slate-200);
    border-radius: 8px;
    overflow: hidden;
}
.pillar-content table th {
    background: var(--tr-color-slate-50);
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--tr-color-slate-900);
    border-bottom: 1px solid var(--tr-color-slate-200);
}
.pillar-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--tr-color-slate-200);
    vertical-align: top;
}
.pillar-content table tr:last-child td {
    border-bottom: none;
}
.pillar-content table tr:nth-child(even) td {
    background: var(--tr-color-slate-50);
}
.pillar-content hr {
    border: none;
    height: 1px;
    background: var(--tr-color-slate-200);
    margin: 48px 0;
}
.pillar-content strong {
    color: var(--tr-color-slate-900);
    font-weight: 600;
}

/* ── Utility classes for pasted HTML (callouts, TL;DR, quotes, stats) ── */

.pillar-content .tr-tldr {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 12px;
    padding: 24px 28px;
    margin: 32px 0;
}
.pillar-content .tr-tldr-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-color-primary-dark, #047857);
    margin: 0 0 12px;
}
.pillar-content .tr-tldr ul {
    margin: 0;
    padding-left: 20px;
}
.pillar-content .tr-tldr li {
    color: var(--tr-color-slate-800);
}

.pillar-content .tr-callout {
    padding: 16px 20px;
    margin: 28px 0;
    border-radius: 8px;
    border-left: 3px solid var(--tr-color-slate-400);
    background: var(--tr-color-slate-50);
}
.pillar-content .tr-callout--tip {
    border-left-color: var(--tr-color-primary);
    background: rgba(16, 185, 129, 0.05);
}
.pillar-content .tr-callout--warning {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}
.pillar-content .tr-callout--info {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}
.pillar-content .tr-callout--how-we-know {
    border-left-color: var(--tr-color-slate-700);
    background: var(--tr-color-slate-100);
}
.pillar-content .tr-callout-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    color: var(--tr-color-slate-700);
}
.pillar-content .tr-callout p:last-child {
    margin-bottom: 0;
}

.pillar-content .tr-quote {
    margin: 40px 0;
    padding: 28px 32px;
    border-left: 4px solid var(--tr-color-primary);
    background: rgba(16, 185, 129, 0.04);
    border-radius: 0 8px 8px 0;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--tr-color-slate-900);
}

.pillar-content .tr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 32px 0;
}
.pillar-content .tr-stat {
    background: var(--tr-color-slate-50);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.pillar-content .tr-stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tr-color-primary);
    line-height: 1;
    margin: 0 0 8px;
}
.pillar-content .tr-stat-label {
    font-size: 0.875rem;
    color: var(--tr-color-slate-600);
    margin: 0;
}

.pillar-content .tr-feature-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 24px;
    background: var(--tr-color-slate-50);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: 12px;
    margin: 28px 0;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pillar-content .tr-feature-card:hover {
    border-color: var(--tr-color-primary);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}
.pillar-content .tr-feature-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tr-color-slate-900);
    margin: 0 0 4px;
}
.pillar-content .tr-feature-card-desc {
    font-size: 0.9375rem;
    color: var(--tr-color-slate-600);
    margin: 0;
}

.pillar-content .tr-persona {
    background: rgba(59, 130, 246, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 28px 0;
}
.pillar-content .tr-persona-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563eb;
    margin: 0 0 8px;
}

/* ── Author card ── */
.pillar-author {
    padding: 48px 0 80px;
    background: var(--tr-color-slate-50);
    border-top: 1px solid var(--tr-color-slate-200);
}
.pillar-author-card {
    display: flex;
    gap: 20px;
    align-items: center;
    max-width: 720px;
    background: var(--tr-color-bg);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: 12px;
    padding: 24px;
}
.pillar-author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pillar-author-name {
    font-weight: 700;
    color: var(--tr-color-slate-900);
    margin-bottom: 4px;
}
.pillar-author-bio {
    font-size: 0.9375rem;
    color: var(--tr-color-slate-600);
    line-height: 1.5;
}

/* ── Right aside: cluster navigator + glance + CTA ──
   Same sticky-offset logic as the left TOC: clears the fixed floating
   pill header with admin-bar awareness. max-height ensures the column
   gets its own scrollbar if the cluster list is longer than the viewport. */
.pillar-aside {
    position: sticky;
    top: 100px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    font-size: 13px;
}
.admin-bar .pillar-aside {
    top: 132px;
    max-height: calc(100vh - 152px);
}
@media screen and (max-width: 782px) {
    .admin-bar .pillar-aside {
        top: 146px;
        max-height: calc(100vh - 166px);
    }
}
.pillar-aside-card {
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-surface);
    border-radius: 12px;
    padding: 18px 20px;
}
.pillar-aside-hd {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tr-color-slate-500);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pillar-aside-hd .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tr-color-primary);
}

/* At-a-glance list */
.pillar-glance-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pillar-glance-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--tr-color-surface);
    font-size: 13px;
    color: var(--tr-color-slate-600);
}
.pillar-glance-list li:last-child { border-bottom: none; }
.pillar-glance-list strong {
    color: var(--tr-color-slate-900);
    font-weight: 600;
}

/* Cluster navigator list */
.pillar-cluster-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pillar-cluster-list li {
    border-bottom: 1px solid var(--tr-color-surface);
}
.pillar-cluster-list li:last-child { border-bottom: none; }
.pillar-cluster-list a {
    display: grid;
    grid-template-columns: 26px 1fr 12px;
    gap: 10px;
    align-items: center;
    padding: 10px 2px;
    text-decoration: none;
    color: var(--tr-color-slate-800);
    font-size: 13px;
    line-height: 1.35;
    transition: color 150ms ease;
}
.pillar-cluster-list a:hover {
    color: var(--tr-color-primary-hover);
}
.pillar-cluster-list .num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--tr-color-primary);
}
.pillar-cluster-list .arrow {
    color: var(--tr-color-slate-400);
    transition: all 150ms ease;
    transform: translateX(0);
}
.pillar-cluster-list a:hover .arrow {
    color: var(--tr-color-primary);
    transform: translateX(2px);
}

/* CTA card (dark variant) */
.pillar-aside-card--cta {
    background: linear-gradient(135deg, var(--tr-color-slate-800), var(--tr-color-slate-900));
    border: none;
    color: var(--tr-color-white);
    position: relative;
    overflow: hidden;
}
.pillar-aside-card--cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tr-color-primary), transparent);
}
.pillar-aside-card--cta .pillar-aside-hd {
    color: var(--tr-color-primary);
}
.pillar-aside-card--cta h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--tr-color-white);
    letter-spacing: -0.01em;
}
.pillar-aside-card--cta p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px;
}
.pillar-aside-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--tr-color-primary);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 200ms ease;
}
.pillar-aside-btn:hover {
    background: var(--tr-color-primary-hover);
    transform: translateY(-1px);
}

/* ── Tablet: drop right aside (keep TOC) ── */
@media (max-width: 1100px) {
    .pillar-grid {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .pillar-aside {
        display: none;
    }
}

/* ── Mobile ── */
@media (max-width: 1024px) {
    .pillar-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pillar-sidebar {
        position: static;
        top: auto;
        order: -1;
    }
    .pillar-sidebar-sticky {
        background: var(--tr-color-slate-50);
        padding: 16px 20px;
        border-radius: 8px;
    }
    .pillar-content {
        max-width: 100%;
    }
}

/* ── Defensive overflow protection ──
   Grid items default to min-width: auto, which equals the intrinsic
   min-content width of their children. A single wide child (long URL,
   raw SVG, code block, oversized image) then pushes the whole article
   column beyond viewport and triggers horizontal scroll on mobile.
   These rules constrain everything inside .pillar-content to its
   parent column. */
.pillar-content {
    min-width: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.pillar-content > * {
    max-width: 100%;
}
.pillar-content img,
.pillar-content svg,
.pillar-content video,
.pillar-content iframe,
.pillar-content embed,
.pillar-content object {
    max-width: 100%;
    height: auto;
}
.pillar-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.pillar-content code {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pillar-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .pillar-hero {
        padding: 112px 0 28px;
    }
    .pillar-body {
        padding: 32px 0 48px;
    }
    .pillar-title {
        font-size: 1.875rem;
        line-height: 1.15;
    }
    .pillar-lead {
        font-size: 1rem;
    }
    .pillar-meta {
        gap: 10px 14px;
        font-size: 0.8125rem;
    }
    .pillar-content {
        font-size: 1rem;
    }
    .pillar-content h2 {
        font-size: 1.5rem;
        margin-top: 48px;
        padding-top: 24px;
    }
    .pillar-content h3 {
        font-size: 1.1875rem;
    }
    .pillar-content p {
        line-height: 1.6;
    }
    .pillar-author-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
    }
    .pillar-author-avatar {
        margin: 0 auto;
    }
    .pillar-author {
        padding: 32px 0 56px;
    }
}

/* ── Small phones (~390px and below) ── */
@media (max-width: 480px) {
    .pillar-hero {
        padding: 112px 0 24px;
    }
    .pillar-title {
        font-size: 1.625rem;
        letter-spacing: -0.02em;
    }
    .pillar-lead {
        font-size: 0.9375rem;
    }
    .pillar-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .pillar-breadcrumbs {
        font-size: 12px;
        gap: 6px;
    }
    .pillar-content h2 {
        font-size: 1.375rem;
    }
    .pillar-content h3 {
        font-size: 1.0625rem;
    }
}

/* ── Archive listing ── */
.pillar-archive-hero {
    padding: 96px 0 32px;
    border-bottom: 1px solid var(--tr-color-slate-200);
}
.pillar-archive-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--tr-color-slate-900);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.pillar-archive-lead {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--tr-color-slate-600);
    max-width: 640px;
    margin: 0;
}
.pillar-archive-list {
    padding: 56px 0 96px;
}
.pillar-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.pillar-card {
    display: flex;
    flex-direction: column;
    background: var(--tr-color-bg);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pillar-card:hover {
    border-color: var(--tr-color-primary);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.08);
    transform: translateY(-2px);
}
.pillar-card-cluster {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tr-color-primary);
    margin-bottom: 10px;
}
.pillar-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tr-color-slate-900);
    margin: 0 0 12px;
}
.pillar-card-excerpt {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--tr-color-slate-600);
    margin: 0 0 16px;
    flex: 1;
}
.pillar-card-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8125rem;
    color: var(--tr-color-slate-500);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--tr-color-slate-100);
}
.pillar-archive-empty {
    text-align: center;
    color: var(--tr-color-slate-500);
    padding: 64px 0;
}

/* ============================================================
   Guides library overview (page-guides.php)
   Implements the "Pillars" design: hero, cluster filter,
   featured guide, guide grid, cluster map, method strip, closer.
   Brand-aligned: Plus Jakarta Sans only, theme tokens, no
   monospace, no italic accents.
   ============================================================ */

/* ── Hero ── */
.guides-hero {
    /* Top padding clears the fixed floating pill header (~82px tall,
       ~114px once the WP admin bar pushes it down). */
    padding: 104px 0 48px;
    border-bottom: 1px solid var(--tr-color-surface);
}
.admin-bar .guides-hero {
    padding-top: 136px;
}
@media screen and (max-width: 782px) {
    .admin-bar .guides-hero {
        /* Mobile admin bar (46px) already pushes the body down, and the
           floating pill sits closer to the hero top than on desktop, so
           this needs LESS padding than the no-admin-bar mobile value. */
        padding-top: 102px;
    }
}
.guides-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tr-color-slate-500);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.guides-breadcrumbs a {
    color: var(--tr-color-slate-500);
    text-decoration: none;
}
.guides-breadcrumbs a:hover {
    color: var(--tr-color-slate-800);
}
.guides-breadcrumbs .current {
    color: var(--tr-color-slate-800);
    font-weight: 600;
}
.guides-breadcrumbs svg {
    color: var(--tr-color-slate-400);
}
.guides-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--tr-color-slate-900);
    margin: 0 0 20px;
    max-width: 760px;
    text-wrap: balance;
}

/* Emerald accent for headings — matches the design's coloured
   phrase pattern. Used on the H1 and every section H2. */
.guides-accent {
    color: var(--tr-color-primary);
    font-style: italic;
}
.guides-hero-deck {
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--tr-color-slate-600);
    max-width: 660px;
}
.guides-hero-deck p {
    margin: 0 0 12px;
}
.guides-hero-deck p:last-child {
    margin-bottom: 0;
}
.guides-hero-deck strong {
    color: var(--tr-color-slate-900);
    font-weight: 600;
}

/* ── Cluster filter bar ──
   Not sticky on purpose: the site header is a fixed floating pill,
   so a sticky bar would slide behind it. Static is fine here. */
.guides-topicbar {
    background: var(--tr-color-base);
    border-bottom: 1px solid var(--tr-color-surface);
}
.guides-topicbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    flex-wrap: wrap;
}
.guides-topicbar-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tr-color-slate-500);
}
.guides-chips {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.guides-chips button {
    border: 1px solid var(--tr-color-slate-300);
    background: var(--tr-color-white);
    padding: 7px 14px;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tr-color-slate-600);
    cursor: pointer;
    transition: all 200ms ease;
}
.guides-chips button:hover {
    border-color: var(--tr-color-primary);
    color: var(--tr-color-primary-hover);
}
.guides-chips button[aria-pressed="true"] {
    background: var(--tr-color-slate-900);
    color: var(--tr-color-white);
    border-color: var(--tr-color-slate-900);
}
.guides-topicbar-count {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--tr-color-slate-500);
}
.guides-topicbar-count strong {
    color: var(--tr-color-slate-900);
    font-weight: 700;
}

/* ── Empty state ── */
.guides-empty-wrap {
    padding: 80px 0;
}
.guides-empty {
    text-align: center;
    color: var(--tr-color-slate-500);
    font-size: 1rem;
}

/* ── Featured guide ── */
.guides-featured-wrap {
    padding: 56px 0 24px;
}
.guides-featured {
    background: linear-gradient(135deg, #ffffff 0%, #f6fdf9 60%, #f0fbf4 100%);
    border: 1px solid rgba(16, 185, 129, 0.32);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--tr-shadow-md);
    display: grid;
    grid-template-columns: 1.35fr 1fr;
}
.guides-featured-text {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guides-featured-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-color-primary-hover);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.guides-featured-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tr-color-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.guides-featured-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--tr-color-slate-900);
    margin: 0;
    text-wrap: balance;
}
.guides-featured-deck {
    font-size: 1.0625rem;
    color: var(--tr-color-slate-700);
    line-height: 1.55;
    margin: 0;
    max-width: 560px;
}
.guides-featured-supports {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--tr-color-surface);
}
.guides-sublabel {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-color-slate-500);
    margin-bottom: 12px;
}
.guides-featured-supports ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
}
.guides-featured-supports li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.9375rem;
    color: var(--tr-color-slate-800);
    font-weight: 500;
    text-decoration: none;
    transition: color 200ms ease;
}
.guides-featured-supports li a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tr-color-primary);
    flex-shrink: 0;
}
.guides-featured-supports li a:hover {
    color: var(--tr-color-primary-hover);
}
.guides-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--tr-color-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    transition: all 200ms ease;
}
.guides-featured-cta:hover {
    background: var(--tr-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}
.guides-featured-visual {
    background: var(--tr-color-white);
    border-left: 1px solid var(--tr-color-surface);
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.guides-featured-visual svg {
    width: 100%;
    max-width: 320px;
    height: auto;
}
.guides-featured-caption {
    margin-top: 16px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tr-color-slate-500);
    text-align: center;
}

/* ── Guide grid ── */
.guides-list {
    padding: 56px 0 88px;
}
.guides-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.guides-list-head h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--tr-color-slate-900);
    margin: 0;
}
.guides-list-hint {
    font-size: 0.8125rem;
    color: var(--tr-color-slate-500);
}
.guides-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr 1fr;
}
.guides-card {
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--tr-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.guides-card:hover {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: var(--tr-shadow-lg);
    transform: translateY(-2px);
}
.guides-card.is-hidden {
    display: none;
}
.guides-card-topic {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-color-primary-hover);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.guides-card-topic::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tr-color-primary);
}
.guides-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.25;
    margin: 0 0 10px;
    text-wrap: balance;
}
.guides-card-title a {
    color: var(--tr-color-slate-900);
    text-decoration: none;
}
.guides-card-title a:hover {
    color: var(--tr-color-primary-hover);
}
.guides-card-deck {
    font-size: 0.9375rem;
    color: var(--tr-color-slate-600);
    line-height: 1.55;
    margin: 0 0 18px;
}
.guides-card-cluster {
    padding: 14px 0 16px;
    border-top: 1px solid var(--tr-color-surface);
    border-bottom: 1px solid var(--tr-color-surface);
    margin-bottom: 14px;
}
.guides-card-cluster-lbl {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-color-slate-500);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.guides-card-cluster ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.guides-card-cluster li {
    font-size: 0.8125rem;
    color: var(--tr-color-slate-700);
    line-height: 1.4;
    padding-left: 12px;
    position: relative;
}
.guides-card-cluster li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 1px;
    background: var(--tr-color-primary);
}
.guides-card-more {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--tr-color-slate-500);
    padding: 6px 0 0 12px;
}
.guides-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.75rem;
    color: var(--tr-color-slate-600);
}
.guides-card-meta .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.guides-card-meta .item svg {
    width: 13px;
    height: 13px;
    color: var(--tr-color-slate-400);
    flex-shrink: 0;
}
.guides-card-meta .item strong {
    color: var(--tr-color-slate-900);
    font-weight: 600;
}
.guides-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tr-color-primary-hover);
    text-decoration: none;
    transition: gap 200ms ease;
}
.guides-card:hover .guides-card-cta {
    gap: 10px;
}

/* ── Cluster map ── */
.guides-map-section {
    background: var(--tr-color-white);
    border-top: 1px solid var(--tr-color-surface);
    border-bottom: 1px solid var(--tr-color-surface);
    padding: 88px 0;
}
.guides-map-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}
.guides-map-head h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--tr-color-slate-900);
    margin: 0 0 12px;
    text-wrap: balance;
}
.guides-map-head p {
    font-size: 1rem;
    color: var(--tr-color-slate-600);
    line-height: 1.55;
    margin: 0;
}
.guides-map-frame {
    background: var(--tr-color-base);
    border: 1px solid var(--tr-color-surface);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--tr-shadow-md);
    max-width: 980px;
    margin: 0 auto;
}
.guides-map-frame svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Method strip ── */
.guides-method {
    padding: 88px 0 24px;
}
.guides-method-head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}
.guides-method-head h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--tr-color-slate-900);
    margin: 0 0 12px;
    text-wrap: balance;
}
.guides-method-head p {
    font-size: 1rem;
    color: var(--tr-color-slate-600);
    line-height: 1.55;
    margin: 0;
}
.guides-method-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1000px;
    margin: 0 auto;
}
.guides-method-num {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-color-primary-hover);
    margin-bottom: 12px;
}
.guides-method-item h3 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tr-color-slate-900);
    margin: 0 0 8px;
}
.guides-method-item p {
    font-size: 0.9375rem;
    color: var(--tr-color-slate-700);
    line-height: 1.55;
    margin: 0;
}

/* ── Closer ── */
.guides-closer {
    background: linear-gradient(135deg, var(--tr-color-slate-800), var(--tr-color-slate-900));
    color: #fff;
    padding: 88px 0;
    margin-top: 88px;
    position: relative;
    overflow: hidden;
}
.guides-closer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.6), transparent);
}
.guides-closer-inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}
.guides-closer h2 {
    color: #fff;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    text-wrap: balance;
}
.guides-closer p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 28px;
}
.guides-closer-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.guides-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--tr-color-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 200ms ease;
}
.guides-btn-primary:hover {
    background: var(--tr-color-primary-hover);
    transform: translateY(-1px);
}
.guides-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 200ms ease;
}
.guides-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}
.guides-closer-fine {
    margin-top: 16px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .guides-featured {
        grid-template-columns: 1fr;
    }
    .guides-featured-visual {
        border-left: none;
        border-top: 1px solid var(--tr-color-surface);
    }
}
@media (max-width: 860px) {
    .guides-grid {
        grid-template-columns: 1fr 1fr;
    }
    .guides-method-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 440px;
    }
}
@media (max-width: 768px) {
    .guides-hero {
        /* keep enough top room to clear the floating pill on mobile */
        padding: 112px 0 36px;
    }
    .guides-featured-text {
        padding: 28px 24px;
    }
    .guides-featured-supports ul {
        grid-template-columns: 1fr;
    }
    .guides-map-section,
    .guides-method {
        padding: 56px 0;
    }
    .guides-closer {
        padding: 64px 0;
        margin-top: 56px;
    }
    .guides-topicbar-count {
        margin-left: 0;
        width: 100%;
    }
}
@media (max-width: 560px) {
    .guides-grid {
        grid-template-columns: 1fr;
    }
    .guides-featured-text {
        padding: 24px 20px;
    }
    .guides-closer-cta {
        flex-direction: column;
    }
    .guides-btn-primary,
    .guides-btn-ghost {
        justify-content: center;
    }
}