/* =========================================================
   pages/content.css (T-217) — about.html + privacy.html only.
   Linked from each template's {% block extra_head %}.

   SUPERSEDES the following style.css selectors (the "About page" block,
   verified directly against style.css at T-217's dispatch, lines 2301-2376
   — that section predates the v3 round entirely, commit 4e89051d) — T-221
   deletes that whole block from style.css once this file ships:
     - line 2301  the "About page" section-header comment
     - lines 2302-2307  .steps-grid
     - lines 2308-2317  .step-card
     - line  2318        .step-card:hover
     - line  2319        .step-card h3
     - lines 2320-2334  .step-card__num
     - lines 2335-2345  .step-card::after
     - lines 2346-2351  .contact-grid
     - lines 2352-2361  .contact-tile
     - line  2362        .contact-tile:hover
     - lines 2363-2374  .contact-tile__icon
     - line  2375        .contact-tile__icon svg
     - line  2376        .contact-tile strong
   Re-check line numbers before deleting in case an intervening commit
   shifted them (several other wave-3 tasks touch style.css-adjacent files
   concurrently, though none currently edit style.css itself).

   Design decision (dispatch, T-217): step cards go hairline (no shadow, no
   decorative pseudo-element, no gradient number badge) with a tinted icon
   disc instead of a numbered circle, cycling forest-50 / teal-50 / soil-100
   across the three steps on both pages. Contact tiles keep their existing
   visual language, re-tokened onto canonical v3 vars (not the legacy alias
   names --surface-2/--border/--r, which T-221 is retiring).

   Only canonical tokens are used below (see style.css :root) — no
   @layer/nesting/IDs/!important, per the CSS contract for page files.
   ========================================================= */

/* ----------  Shop-interior photo (about.html page head)  ---------- */
.about-photo {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--r-hero);
    border: 1px solid var(--line);
    background: var(--paper-2);
}
@media (min-width: 900px) {
    .about-photo { max-width: 720px; }
}

/* ----------  Steps grid (about "How ordering works" /
   privacy "Delivery terms") — hairline cards, icon discs  ---------- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.step-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 24px;
    transition: border-color var(--t-med);
}
.step-card:hover { border-color: var(--line-2); }
.step-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.step-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-bottom: 14px;
}
.step-card__icon--1 { background: var(--forest-50); color: var(--forest-800); }
.step-card__icon--2 { background: var(--teal-50); color: var(--teal-700); }
.step-card__icon--3 { background: var(--soil-100); color: var(--soil-800); }

/* ----------  Contact tiles (about.html "Contact us")  ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.contact-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.contact-tile:hover { border-color: var(--forest-100); background: var(--forest-50); }
/* Verifier finding (post-T-217 design-a11y pass): the bare inline <a> inside
   each tile had no box of its own, so the real tap target was only the
   text's own line height (~22.5px) — well under this round's 44x44 hit-area
   floor. Rather than adding padding to the <a> (which would change its text
   metrics), the whole tile becomes the hit target via a transparent ::after
   overlay anchored to .contact-tile's own box (hence position:relative
   above); each tile holds exactly one link so the overlay never shadows a
   second target. */
.contact-tile a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.contact-tile__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--forest-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--line);
}
.contact-tile strong { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }