/* pages.css -- Page sections, stub/about pages, kicker
   Part of the site stylesheet, split out of the former single
   site.css. Load order is significant and is fixed in
   src/view/layout.php -- theme first (tokens), then base, then
   layout, then components. Rules were moved verbatim, in their
   original order, so the cascade is unchanged. */

.stub-content {
    /* Stub pages (About us, Updates, Policies, ...) don't use
       .page-section, so they need their own top spacing now that
       .page itself has none. */
    padding-top: var(--spacing-10);
}

.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

.about-intro-col:last-child {
    /* The descriptive paragraph reads better bottom-aligned against
       the (usually taller) heading column next to it, instead of
       starting flush with the kicker at the top. */
    align-self: end;
}

@media (max-width: 640px) {
    .about-intro {
        grid-template-columns: 1fr;
        gap: var(--spacing-5);
    }
}

/* /about's map section -- deliberately not a real embedded map (no
   Maps SDK/API key, no external tile requests -- same "no third-party
   dependencies" stance as the rest of the site). A static photo
   (assets/img/about.jpg) as a CSS background fills the box, with
   the address card layered on top. aspect-ratio close to the
   source photo's own 16:9 keeps background-size: cover from
   cropping/zooming in much.*/
.about-map {
    position: relative;
    margin-top: var(--spacing-20);
    min-width: 480px;
    aspect-ratio: 16 / 9;
    border-radius: var(--rounded-xl);
    overflow: hidden;
    background: var(--bg-neutral-section) url("/assets/img/about.jpg") center / cover no-repeat;
}

.about-map-card {
    /* Fixed black/white regardless of page theme, same reasoning as
       .closing-cta .button -- a card meant to read like a printed
       label sitting on top of the map, not a themed UI panel. Centered
       on both axes over the dot-grid box, not anchored to an edge --
       its own 17:8 is deliberately wider/flatter than the outer box's
       16:9, so it reads as a distinct plate rather than a smaller copy
       of the same frame. aspect-ratio needs a definite width to
       compute height from, hence the explicit width (not just
       max-width); the mobile override below switches to a
       left/right-driven width instead. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: calc(100% - var(--spacing-10) * 2);
    /* Flatter than before (was 17/8) -- read as too tall. */
    aspect-ratio: 21 / 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-6);
    border-radius: var(--rounded-lg);
    background: var(--black);
    color: var(--white);
    box-sizing: border-box;
    transition: filter 0.15s ease;
}

.about-map-card:hover {
    filter: brightness(0.85);
}

.about-map-card p {
    margin: 0 0 var(--spacing-2);
}

.about-map-card p:last-child {
    margin-bottom: 0;
}

.about-map-card p.about-map-card-name {
    /* No gap to the address line right below -- name and address read
       as one block, only the link after them gets breathing room. */
    margin-bottom: 0;
    font-weight: var(--weight-bold);
}

.about-map-card a {
    color: var(--white);
}

@media (max-width: 640px) {
    .about-map {
        min-width: 0;
        aspect-ratio: 4 / 5;
    }

    .about-map-card {
        left: var(--spacing-5);
        right: var(--spacing-5);
        transform: translateY(-50%);
        width: auto;
        max-width: none;
    }
}

.page-section {
    /* Base case (any .page-section that isn't the actual hero, e.g. the
       "About Foundry" section): just a flat, fixed top gap -- no
       centering attempt. min-height still lets tall content grow past
       one viewport and push later content down normally. */
    min-height: calc(100dvh - var(--header-height));
    padding-top: 45px;
    /* Anchor ids (#about-foundry, #tool) live on .page-section itself, not
       the inner .page-section-content -- otherwise an anchor jump lands at
       .page-section-content's own position, skipping past this gap entirely
       and landing deeper into the page than the visual layout implies.
       Only needs to clear the sticky header, since .page-section's own
       top already starts right at the header's bottom edge. */
    scroll-margin-top: var(--header-height);
}

.page-content > .page-section:first-child {
    /* The actual hero -- simple flex centering instead of the fixed
       top gap above (overridden here). .page no longer has its own
       top padding, so no cancellation margin is needed here either. */
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-content > .page-section:first-child .page-section-content {
    /* Flex-centers within .page-section's own box -- but that box starts
       at the header's bottom edge, not the true viewport top, so
       there's still some space above (header + centering) than below
       (centering alone). Only the real hero needs this; other
       .page-section sections use a flat top gap with no centering to
       correct for. */
    margin-top: -5%;
}

.page-section h1 {
    /* Full container width read as too wide typographically for a
       big display headline -- narrower measure, wraps to two lines
       instead of stretching thin across the whole page. */
    max-width: 600px;
}

.page-section .lead {
    max-width: 46ch;
}

/* Short pages (nothing tall enough to fill the viewport) settle at a
   golden-ratio point instead of sitting glued to the top. Real divs,
   not ::before/::after -- some browsers don't grow generated-content
   pseudo-elements reliably as flex items. .page-content is a plain
   block, not itself a flex item's *child* flex container, so none of
   this touches how the actual page content sizes. The moment real
   content is tall enough to fill the space itself, the spacers have
   nothing left to grow into and this has no effect -- normal
   top-aligned flow, same as any other page. */

.page-spacer-top {
    flex: 0.618 0 0;
}

.page-spacer-bottom {
    flex: 1 0 0;
}

.page-content {
    flex: 0 0 auto;
}

/* kicker badge, e.g. above a page's h1 */

.kicker {
    display: inline-block;
    background: var(--bg-neutral-surface);
    color: var(--fg-neutral-body);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    padding: var(--badge-padding);
    border-radius: var(--badge-border-radius);
    margin-bottom: var(--spacing-4);
}

/* alternating gray section, e.g. a feature block */

.section {
    /* No horizontal padding/border-radius/margin -- now that .section
       itself has no background (the card inside it carries the gray,
       see .section .card), a padded/rounded box around invisible edges
       just reads as unexplained indentation instead of a boxed
       section. Its own top/bottom margin is gone too: wherever
       .section is used, it's inside .page-section, which already owns
       top spacing (padding-top) -- .section's margin was stacking on
       top of that, adding confusing, redundant space. This class now
       exists only for the .section .card selector below. */
}

/* buttons */