/* Vues des pages-rubriques du hub — archivage, contenus normalisés, dessin technique, symboles, figurines :
   une composition. La vue d'ensemble et ses vues servies, que le hash montre (sgbl_views.js) ; des
   sections titrées ; les catégories, qui ouvrent une vue, et les contenus, qui mènent à leur page, en
   cartes du canon (gbl_card.css) au dessin d'avant — catégorie vitrée lavée de la teinte de sa rubrique et
   barrée d'un bandeau, contenu en tuile nacrée ; à dessin technique, catégories et contenus en tuiles
   larges ; le descriptif au survol (exvae #20). */

@layer components {
    .hub-card--projects,
    .hub-category--projects {
        --hub-color: var(--local-color-identity-projects);
        --hub-color-soft: var(--local-color-identity-projects-soft);
    }
    .hub-card--design,
    .hub-category--design {
        --hub-color: var(--local-color-identity-design);
        --hub-color-soft: var(--local-color-identity-design-soft);
    }
    .hub-card--studies,
    .hub-category--studies {
        --hub-color: var(--local-color-identity-studies);
        --hub-color-soft: var(--local-color-identity-studies-soft);
    }
    .hub-card--technical,
    .hub-category--technical {
        --hub-color: var(--local-color-identity-technical);
        --hub-color-soft: var(--local-color-identity-technical-soft);
    }
    .hub-card--various,
    .hub-category--various {
        --hub-color: var(--local-color-identity-various);
        --hub-color-soft: var(--local-color-identity-various-soft);
    }

    [data-hub-hidden] {
        display: none !important;
    }
    .hub {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 48px 24px 72px;
    }
    .hub-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .hub-section:not(.panel) > h2 {
        margin: 0;
    }
    .hub-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
    .hub-grid--tile {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    .hub-links {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .panel .hub-links {
        gap: 18px;
    }
    .hub-links--tile {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .hub-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .hub-group-head {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .hub-group-head h1,
    .hub-group-head p {
        margin: 0;
    }
    .hub-back {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        gap: 8px;
        margin-bottom: 16px;
    }
    .hub-category {
        align-items: center;
        justify-content: center;
    }
    .hub-category--tile {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .hub-category-text {
        width: 100%;
        padding: 6px 0;
    }
    .hub-category-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
    }
    .hub-category-icon svg {
        width: 24px;
        height: 24px;
    }
    .hub-card {
        align-items: center;
        justify-content: space-between;
        width: 140px;
        min-height: 120px;
    }
    .hub-card--tile {
        justify-content: flex-start;
        width: auto;
        min-height: 0;
    }
    .hub-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }
    .hub-card-icon img,
    .hub-card-icon svg {
        width: 60%;
        height: 60%;
        object-fit: contain;
    }
    .hub-detail {
        display: flex;
        align-items: center;
        min-height: 120px;
        padding: 16px;
    }
    :where(.hub-detail) p {
        margin-block: 1em;
    }
    @media (width < 800px) {
        .hub {
            padding: 32px 18px 60px;
        }
        .hub-grid--tile {
            grid-template-columns: 1fr;
        }
        .hub-card {
            width: 120px;
        }
        .hub-card--tile {
            width: auto;
        }
    }

    .hub-category-text {
        border-top: 1px solid var(--local-color-decor-hub-category-text-line);
        border-bottom: 1px solid var(--local-color-decor-hub-category-text-line);
        background-color: var(--raw-color-white-70);
    }
    .hub-category-icon {
        border: 1px solid var(--local-color-identity-technical);
        border-radius: var(--local-radius-hub-category-icon);
        background-color: var(--local-color-identity-technical-soft);
    }
    .hub-card-icon {
        border: 1px solid var(--hub-color, var(--local-color-decor-hub-category-text-line));
        border-radius: var(--local-radius-hub-category-icon);
        background-color: var(--local-color-decor-hub-card-icon-surface);
    }
    .hub-card--tile .hub-card-icon {
        border-radius: var(--local-radius-hub-card-icon);
        background-color: var(--local-color-identity-technical-soft);
    }
    .hub-back:hover {
        opacity: 0.7;
    }
    .hub-detail {
        border: 1px dashed var(--raw-color-white-translucent);
        border-radius: var(--local-radius-hub-category-icon);
        background-color: var(--local-color-decor-hub-detail-surface);
    }

    .hub-section:not(.panel) > h2 {
        font-size: var(--canon-size-body);
        font-weight: 400;
        color: var(--raw-color-black-50);
    }
    .hub-group-head h1 {
        font-size: var(--canon-size-title);
        font-weight: 700;
        color: var(--raw-color-black-90);
    }
    .hub-group-head p,
    .hub-category-detail {
        font-size: var(--canon-size-body);
        font-weight: 400;
        color: var(--raw-color-black-60);
    }
    .hub-back {
        font-size: var(--canon-size-control);
        text-decoration-line: none;
        color: var(--local-color-identity-action);
    }
    .hub-category-text {
        color: var(--raw-color-black-70);
    }
    .hub-category--tile .hub-category-detail {
        font-size: var(--canon-size-note);
    }
    .hub-category-title {
        font-size: var(--canon-size-subtitle);
        font-weight: 600;
        color: var(--raw-color-black-90);
    }
    .hub-category-icon {
        color: var(--local-color-identity-technical);
    }
    .hub-card-icon {
        color: var(--hub-color, inherit);
    }

    .hub-back {
        transition: opacity 0.2s ease;
    }
}