/* pages.css: about-us.html and blog.html. The two pages that are neither the
   homepage, nor a service page, nor a location page.

   Loads after hero.css, so the .hero variants below have a .hero to vary.
   Deliberately thin, for the same reason locations.css is: everything here
   composes layout.css, components.css, form.css and hero.css. Before adding a
   rule, check it is not a shared style wearing an about-page costume. */


/* --------------------------------------------------------------------------
   Hero variants
   -------------------------------------------------------------------------- */

/* Same padding as hero.css's `.hero--service, .hero--location`: a visitor who
   clicked "about" or "blog" already knows what the page is, so the hero
   confirms rather than introduces.

   --hero-min is deliberately NOT overridden: both these heroes are taller than
   either candidate once their content is in, so it would never bind. No
   --hero-photo either, so about-us takes hero.css's default; its preload href
   must be kept in step with that default. See agent/hero.md. */
.hero--page {
    --hero-pad: var(--space-8) var(--space-7);
}

/* The blog hero carries no photograph on purpose: every gallery photo is a
   door this team installed, and on a page about written advice none is proof
   of anything (PRODUCT.md principle 2). `none` is a valid background layer and
   paints nothing, so hero.css's ::before stays empty and its ::after ramps
   over this ink. Keep the `.hero` class: js/core.js keys the call FAB's
   stand-down on it. See agent/hero.md. */
.hero--blog {
    --hero-photo: none;
    background: var(--surface-ink);
}


/* --------------------------------------------------------------------------
   Blog post entries. The card itself is components.css.
   -------------------------------------------------------------------------- */

/* A <p>, not a heading: metadata about the entry below it, and it must not
   enter the document outline between the h1 and the post's own h2. */
.post__meta {
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);   /* 7.58:1 on the card; 13px, so it owes 4.5:1 */
}

/* h2 for the outline, but --fs-2 is a band heading and reads as one shouting
   inside a card. --fs-3 is what .card's own h3s use. */
.post__title {
    font-size: var(--fs-3);
}


/* --------------------------------------------------------------------------
   The about page's contact block
   -------------------------------------------------------------------------- */

/* Same shape as .hero__paths and deliberately NOT that class: .hero__paths is
   an element of the .hero block, and reusing it here would hook a BEM element
   to a block that is not on the page (CLAUDE.md, Naming).

   Stacks below 640px for the same reason .hero__paths does: the panicked user
   is one-handed, and call must be a full-width target on top. */
.contact-paths {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-6);
}

@media (max-width: 640px) {
    .contact-paths {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Not a link and not a control: the shop has no storefront to route to, so
   this states the city and stops. */
.contact-address {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    color: var(--ink-muted);   /* 7.13:1 on --surface */
}

.contact-address svg {
    flex: none;
    color: var(--blue-text);
}


/* --------------------------------------------------------------------------
   Footer rules, duplicated from components.css; see CLAUDE.md, Known drift.
   -------------------------------------------------------------------------- */

.footer-address {
    margin-top: var(--space-4);
}

/* Not cosmetic: without it base.css's `strong { color: var(--ink) }` paints
   #0F172A on the #0F172A footer, 1.00:1, hiding the NAP. See agent/colour.md. */
.footer-address strong {
    color: var(--ink-on-dark);
}

/* Lifts the footer's link rows off a 24px hit area. Even with it they reach
   only ~40px, short of PRODUCT.md's 44px floor: a site-wide gap index.html
   shares, flagged rather than silently widened here. */
@media (max-width: 720px) {
    .footer-grid ul a,
    .footer-areas a {
        display: inline-flex;
        padding-block: var(--space-2);
    }
}