/*
 * HTML sitemap.
 *
 * A list of nearly two hundred links, so the whole job here is making it
 * scannable: sections that read as blocks, and columns that reflow rather than
 * a single column two screens long.
 */

.map-hero {
    background: linear-gradient(160deg, #fdf2f2 0%, #ffffff 65%);
    padding: 32px 0 44px;
}

.map-breadcrumb {
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #6b7280;
}

.map-breadcrumb a { color: #6b7280; text-decoration: none; }
.map-breadcrumb a:hover { color: var(--primary-red); }
.map-breadcrumb span { margin: 0 0.35rem; }
.map-breadcrumb span[aria-current] { margin-left: 0; color: #111827; }

.map-hero h1 {
    font-size: clamp(1.95rem, 3.6vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    margin-bottom: 0.9rem;
}

.map-hero__lead {
    max-width: 42rem;
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.75;
    color: #4b5563;
}

.map-hero__lead a {
    color: var(--primary-red);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------- sections */

.map-body { padding: 48px 0 72px; }

.map-section {
    padding: 1.75rem 0;
    border-top: 1px solid #eceef1;
}

.map-section:first-child { border-top: 0; padding-top: 0; }

.map-section h2 {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    font-weight: 800;
}

.map-section h2 span {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

.map-section ul {
    columns: 3;
    column-gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.map-section li {
    /* Keep a wrapped link whole rather than split across two columns. */
    break-inside: avoid;
    padding: 0.3rem 0;
}

.map-section a {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #374151;
    text-decoration: none;
}

.map-section a:hover {
    color: var(--primary-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------- small screens */

@media (max-width: 991.98px) {
    .map-section ul { columns: 2; column-gap: 1.75rem; }
}

@media (max-width: 575.98px) {
    .map-body { padding-top: 32px; }
    .map-section ul { columns: 1; }
}