/*
 * Info section — /about (hub + full story), /terms, /privacy, and the shared section
 * navigation reused by /guides (guide.html).
 *
 * These pages render the standalone document shell (like guide.html): map.css supplies the
 * palette and the .about-*/.terms-*/.legal-* content components, guide.css supplies the
 * reading column, and this file adds the section chrome + the /about hub grid, and neutralises
 * the few panel-era rules that assumed the old slide-over container.
 */

/* —— Section navigation (About · Guides · Terms · Privacy) —— */

.info-sectionbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.info-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

.info-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 12px 12px 11px;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
}

.info-nav__link:hover,
.info-nav__link:focus-visible {
    color: var(--primary);
}

.info-nav__link.is-active {
    color: var(--ink);
    border-bottom-color: var(--primary);
}

.info-nav__short {
    display: none;
}

@media (max-width: 520px) {
    .info-nav__long {
        display: none;
    }

    .info-nav__short {
        display: inline;
    }
}

/* —— Layout —— */

.info-main {
    max-width: 880px;
}

/* The content wrappers were built for the slide-over panel (own scroll area + padding).
   In the document flow they are plain sections. */
.info-content .about-panel-body {
    flex: none;
    min-height: 0;
    padding: 0;
    overflow: visible;
}

.info-content .about-hero--editorial {
    margin-top: 0.5rem;
}

/* The /guides index reuses the editorial hero, but its subtitle is a full sentence
   rather than the short tagline the legal pages carry. */
.about-hero--wide .hero-sub {
    max-width: 52ch;
}

.guide-index-hero {
    margin-top: 0.5rem;
}

/* —— /about hub grid —— */

.info-hub {
    margin: 1.75rem 0 2rem;
}

.info-hub__grid {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.info-hub__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid rgba(41, 40, 36, 0.1);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.info-hub__card:hover,
.info-hub__card:focus-visible {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.info-hub__card-title {
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink);
}

.info-hub__card-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}