/* =====================================================
   HTML sitemap /sitemap (homepage-matching design, live since 2026-10-04)
   Used only by app/Views/pages/sitemap-html.php.

   Loaded AFTER home.css: reuses the homepage's tokens and building
   blocks (.hv1 colours, .hv1-hero, .hv1-head ...). This file only adds
   the .sm-* parts: the "main pages" panel over the hero edge and the
   category cards, laid out as masonry columns (lists differ in length).
   --c is each card's category colour, set inline.
   ===================================================== */

/* ---------- Hero ---------- */
.sm .hv1-hero { padding: 64px 0 150px; }

.sm-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    color: #94A3B8;
    font-size: 0.875rem;
}

.sm-crumbs li + li::before {
    content: "/";
    margin-right: 0.4rem;
    opacity: 0.5;
}

.sm-crumbs a { color: #CBD5E1; }
.sm-crumbs a:hover { color: #fff; }
.sm-crumbs [aria-current] { color: #fff; font-weight: 500; }

/* ---------- Main pages panel ---------- */
.sm-pages-wrap {
    position: relative;
    z-index: 2;
    margin-top: -88px;
}

.sm-pages {
    padding: 1.25rem 1.4rem 1.4rem;
    border: 1px solid var(--hv1-border);
    border-radius: 22px;
    background: var(--hv1-surface);
    box-shadow: var(--hv1-shadow-lg);
}

.sm-pages h2 {
    margin: 0 0 0.9rem;
    color: var(--hv1-muted);
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sm-pages ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-pages a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--hv1-border);
    border-radius: 999px;
    color: var(--hv1-text);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sm-pages a i { color: var(--hv1-blue); }

.sm-pages a:hover {
    border-color: color-mix(in srgb, var(--hv1-blue) 45%, var(--hv1-border));
    background: color-mix(in srgb, var(--hv1-blue) 8%, transparent);
    color: var(--hv1-text);
    transform: translateY(-1px);
}

/* ---------- Category cards (masonry columns) ---------- */
.sm-cards {
    columns: 3;
    column-gap: 1.1rem;
}

.sm-card {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.1rem;
    padding: 1.5rem;
    border: 1px solid var(--hv1-border);
    border-radius: 20px;
    background: var(--hv1-surface);
    break-inside: avoid;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sm-card:hover {
    border-color: color-mix(in srgb, var(--c) 40%, var(--hv1-border));
    box-shadow: var(--hv1-shadow);
}

.sm-card-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.sm-card-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
    font-size: 1.1rem;
}

.sm-card h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.sm-card h2 a { color: var(--hv1-text); }
.sm-card h2 a:hover { color: var(--c); }

.sm-card-count {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--hv1-surface-2);
    color: var(--hv1-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.sm-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hv1-border);
}

.sm-list a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hv1-border);
    color: var(--hv1-text);
    font-size: 0.9rem;
    line-height: 1.4;
}

.sm-list a:hover { color: var(--c); }

.sm-list i {
    flex-shrink: 0;
    width: 1rem;
    color: var(--c);
    font-size: 0.85rem;
    text-align: center;
}

.sm-bottom { padding-bottom: var(--hv1-space); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .sm-cards { columns: 2; }
}

@media (max-width: 767px) {
    .sm .hv1-hero { padding: 48px 0 130px; }
    .sm-pages-wrap { margin-top: -84px; }
    .sm-cards { columns: 1; }
}