/* The front page's own layout (hub/src/pages.js): the hero with the logo,
   the About panel with the main photo, the big panels to the shop, J7
   Creations and the rest, the request form, and the questions page (FAQ). What it shares with the shop is in
   site.css. Colours, fonts and sizes all come from tokens.css; there are no
   settings here. */

.hub-main {
    padding-top: calc(var(--nav-offset) + var(--spacing-sm));
    padding-bottom: var(--spacing-xl);
}
.hub-main > section + section { margin-top: var(--spacing-l); }

/* --- The hero: the logo, the name, the headline and the two buttons ------- */

.hub-hero-words { text-align: center; }
.hub-logo {
    display: block;
    width: clamp(120px, 20vw, 190px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 auto var(--spacing-sm);
}
/* The name in the display font, with the red drop the holding page had. */
.hub-wordmark {
    margin: 0;
    color: var(--color-text-white);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 4px 4px 0 var(--brand-red);
}
.hub-headline {
    margin: var(--spacing-m) auto 0;
    max-width: 30ch;
    color: var(--color-text-white);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.3;
}
.hub-hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-s);
    margin-top: var(--spacing-m);
}
/* --- About ------------------------------------------------------------------ */

/* The main photo's square (a tile, below), at the top of the About: a photo
   is cropped to it, whatever shape it was taken in. */
.hub-tile--square {
    width: 100%;
    max-width: 440px;
    margin: 0 auto var(--spacing-m);
    aspect-ratio: 1;
    border-radius: var(--radius);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow-card);
}

.hub-about { max-width: 820px; margin-left: auto; margin-right: auto; }
.hub-about .section-title,
.hub-request .section-title { margin-bottom: var(--spacing-m); }
.hub-about-words { font-size: var(--text-lg); line-height: 1.7; }
.hub-about-words > p + p { margin-top: var(--spacing-sm); }

/* --- The panels: the list written in Sites (hub/src/panels.js) --------------- */

.hub-explore .section-title { margin-bottom: var(--spacing-m); }
/* From one panel to eight: three to a row (two on a tablet, one on a phone),
   all the same width, and a last row with fewer is centred. */
.hub-panels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-m);
}
.hub-panels > .hub-panel { flex: 0 0 calc((100% - 2 * var(--spacing-m)) / 3); min-width: 0; }
@media (max-width: 800px) {
    .hub-panels > .hub-panel { flex-basis: calc((100% - var(--spacing-m)) / 2); }
}
@media (max-width: 600px) {
    .hub-panels > .hub-panel { flex-basis: 100%; }
}
.hub-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    color: inherit;
    text-decoration: none;
}
/* A panel that goes somewhere lifts and takes the red edge under the pointer,
   like the shop's cards. One that says "coming soon" stays still. */
.hub-panel--link {
    transition: transform var(--card-speed) ease, border-color var(--card-speed) ease,
                box-shadow var(--card-speed) ease;
}
.hub-panel--link:hover,
.hub-panel--link:focus-visible {
    transform: translateY(calc(-1 * var(--card-lift)));
    border-color: var(--card-hover-border);
    box-shadow: var(--card-hover-shadow);
}
/* A picture on a dark striped tile: each panel's (--wide) and the main
   photo's (--square, above). A logo is shown whole (--contain); a photo fills
   the tile (--cover). With no picture, the Atomik mark, faint, holds it. */
.hub-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background:
        repeating-linear-gradient(135deg, var(--stripe-colour) 0 2px, transparent 2px 16px),
        var(--art-tile);
}
.hub-tile--wide { aspect-ratio: 16 / 10; margin-bottom: var(--spacing-2xs); }
.hub-tile-art,
.hub-tile-mark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hub-tile-art--contain { object-fit: contain; padding: var(--spacing-sm); }
.hub-tile-art--cover { object-fit: cover; }
.hub-tile-art[hidden] { display: none; }
.hub-tile-mark { padding: 12%; object-fit: contain; opacity: 0.3; }
.hub-tile-art:not([hidden]) ~ .hub-tile-mark { display: none; }
.hub-panel-title {
    margin: 0;
    color: var(--color-text-white);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    letter-spacing: 1px;
}
.hub-panel-words { margin: 0; color: var(--color-text-gray); }
.hub-panel-go {
    margin-top: auto;
    padding-top: var(--spacing-2xs);
    color: var(--color-accent);
    font-weight: 700;
}
.hub-soon {
    align-self: flex-start;
    margin-top: auto;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--menu-bg);
    color: var(--menu-text);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* --- The request form ---------------------------------------------------------- */

.hub-request { max-width: 760px; margin-left: auto; margin-right: auto; }
.hub-request .request-form { margin-top: var(--spacing-m); }

/* --- The questions page (FAQ) ------------------------------------------------ */

/* Each question opens to its answer. The page's words are a policy page's
   (site.css); a question reads like a heading, with a + that turns to a -. */
.faq-item { border-bottom: 1px solid var(--panel-border); }
.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--color-accent); font-weight: 800; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item > p:last-child { margin-bottom: var(--spacing-sm); }