/* The hero banner (§8).
 *
 * Full bleed with a hairline lower edge, and unfiltered -- no scrim, no
 * duotone, no straw overlay. The height is clamped rather than driven by the
 * image's own aspect ratio, so a 4:3 photograph crops to a band instead of
 * pushing everything below it off the first screen.
 *
 * The ink background is what shows while the JPEG is still arriving; without
 * it the cream wordmark lands on the cream page and vanishes for a beat.
 */
.hero-banner {
    position: relative;
    background: var(--ink);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-6);
}

.hero-banner img {
    display: block;
    width: 100%;
    height: clamp(320px, 52vh, 560px);
    object-fit: cover;
}

/* Anchored to the bottom edge, which is the one part of a landscape crop that
   is reliably ground rather than sky. `.container` inside keeps the words in
   the same column as the rest of the page while the photograph runs past it. */
.hero-banner-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-6);
}

/* Cream rather than `--fg`: this text sits on a photograph, not on the page,
   so it stays light whatever the surrounding theme does. */
.hero-banner .display,
.hero-banner-tagline {
    color: var(--cream);
}

.hero-banner .display {
    margin: 0;
}

.hero-banner-tagline {
    font-family: var(--font-ui);
    font-size: 18px;
    margin: var(--space-2) 0 0;
}

/* What the site does -- one section each (§6's patterns).
 *
 * Each section shows the pattern rather than describing it, which is why they
 * are sections and not cells in a grid: a schedule grid needs the whole column
 * to be a schedule grid at all.
 *
 * These used to be divided by a 3px dotted rule, §3's separator for things of
 * the same kind. It came out when the specimens below took a dotted bound: two
 * dotted treatments 48px apart, one an open rule at 40% ink and one a closed
 * frame at full strength, and the eye reads the frame first and the rule as
 * noise. On this page dotted now means one thing -- that is a picture. The
 * 96px between a plate and the next heading does the separating.
 */
.home-feature {
    margin: 0 0 var(--space-7);
}

.home-feature + .home-feature {
    padding-top: var(--space-7);
}

/* An h2 carries its own top margin for the case where a paragraph runs into
   it. Here the section's padding is already that space, and both together put
   96px between one section's plate and the next section's heading. */
.home-feature h2 {
    margin-top: 0;
}

/* The specimen plate ----------------------------------------------------- *
 *
 * A 2px dotted ink bound is §3's one exception to "dotted separates, never
 * surrounds", and this is what the exception is for: the frame says the thing
 * inside is a picture of the product rather than the product. Stakeholders
 * walked through the first draft of these sections and asked whether they
 * were looking at their own account, which is a fair reading -- an unframed
 * pledge card sitting on the page is a pledge card sitting on the page.
 *
 * §3 allows the dotted bound "as long as nothing inside it is further
 * divided", and the schedule grid plainly is. It is admitted here because the
 * grid carries its own 1px solid frame: the dotted border is a mount around a
 * self-bounded object, never the rule doing the dividing, which is the case
 * the exception is guarding against. A specimen that ever loses its own frame
 * has to be looked at again.
 *
 * Not `.panel .panel-dotted`, which carries this same border in base.css: a
 * panel also brings a cream ground, and cream behind the cream pledge panel
 * would put the same surface on both sides of that panel's rule. The plate
 * keeps the page's straw, which also keeps the caption's `--fg-2` at 5:1
 * instead of the 4.5 it drops to on any tint warm enough to read as a mount.
 *
 * Centred rather than flush left for the same reason as the frame: page
 * content starts at the measure's left edge, an exhibit sits in the middle of
 * its mount. `figure` also arrives with a browser default margin wide enough
 * to read as an indent, which it is not.
 */
.feature-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--space-5) 0 0;
    padding: var(--space-6);
    border: 2px dotted var(--rule);
    border-radius: var(--radius-frame);
}

.feature-figure figcaption {
    margin-top: var(--space-3);
    text-align: center;
}

/* Schedule grid -- web (§6) ---------------------------------------------- *
 *
 * Days across, times down, one bounded frame. Solid rules divide the columns
 * and dotted rules separate the rows: §3's split, and here it also says which
 * direction is structure and which is just the next hour.
 *
 * §6 draws this at full width and gives the phone a different pattern
 * entirely -- day tabs, because "a grid is unreadable at 390pt". This page has
 * no room for a second pattern to make one point, so the grid scrolls sideways
 * inside its frame instead, which is what §7's platform table does. The
 * scroller is focusable because a region that scrolls and cannot be reached
 * from the keyboard is a region some readers cannot see the end of.
 */
.schedule-scroll {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius-frame);
    background: var(--surface);
    /* Bounded so the mount keeps a margin on both sides -- a specimen run out
       to the full 1052px column is a specimen pretending to be the page, which
       is the reading the plate exists to stop. Below 44rem it is `100%` and
       the scroller does its job. */
    width: min(100%, 44rem);
}

.schedule-preview {
    min-width: 30rem;
}

.sched-row {
    display: grid;
    grid-template-columns: 5.5rem repeat(3, 1fr);
    border-bottom: 1px dotted var(--rule-dotted);
}

.sched-row:last-child {
    border-bottom: 0;
}

.sched-head {
    background: var(--panel);
    border-bottom: 1px dotted var(--rule-dotted);
}

.sched-day {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-ui);
    padding: var(--space-3);
    border-left: 1px dotted var(--rule-dotted);
}

.sched-time {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-meta);
    line-height: var(--leading-ui);
    color: var(--fg-2);
    background: var(--panel);
    padding: var(--space-3);
}

.sched-cell {
    padding: var(--space-2);
    border-left: 1px solid var(--rule-divide);
    min-height: 4.5rem;
}

/* Tint inside, full-strength colour on the edge -- the pairing §1 uses
   everywhere a category has to read as a category without becoming a control. */
.sched-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-2) 10px;
    border: 1px solid;
    border-radius: var(--radius-field);
}

.sched-title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    line-height: var(--leading-ui);
}

.sched-meta {
    font-size: var(--size-meta);
    line-height: var(--leading-ui);
    margin-top: 2px;
}

/* The three categories (§1). Ride is sage, which §6's grid now draws too --
   its specimen used to paint ride clay, carried over from the draft that had
   clay as the action colour, and it was corrected in the design project rather
   than worked around here. §5's session-row dots still carry the old palette;
   base.css settles those the same way at its own token block. */
.sched-block.is-ride,
.sched-swatch.is-ride {
    border-color: var(--ride);
    background: var(--sage-tint);
}

.sched-block.is-ride .sched-meta {
    color: var(--sage-deep);
}

.sched-block.is-learn,
.sched-swatch.is-learn {
    border-color: var(--learn);
    background: var(--teal-tint);
}

.sched-block.is-learn .sched-meta {
    color: var(--teal-deep);
}

.sched-block.is-gather,
.sched-swatch.is-gather {
    border-color: var(--gather);
    background: var(--brick-tint);
}

.sched-block.is-gather .sched-meta {
    color: var(--fg-2);
}

.sched-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--fg-2);
}

.sched-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* The block, shrunk -- so the key is the same object the grid is full of,
   rather than a dot that has to be mapped onto one. */
.sched-swatch {
    width: 14px;
    height: 14px;
    border: 1px solid;
    border-radius: var(--radius-frame);
    flex: none;
}

/* The pledge page's progress block (E12.1), at the width it runs there: a
   figure, a goal, a bar and a count stack in a narrow column, and stretching
   that across 1180px would make the bar a horizon line.
 *
 * `width`, not `max-width`. Centring the plate's contents made every specimen
 * a shrink-to-fit flex item, and this one's longest line is "9 donations", so
 * a cap of 20rem it never reached left a 112px card with a bar in it the size
 * of a dash. The two below take the same treatment for the same reason -- the
 * empty state only escapes it today because a sentence of Colin's happens to
 * be longer than its cap, which is not a thing to depend on. */
.pledge-preview {
    width: min(100%, 20rem);
    margin: 0;
}

.pledge-preview .progress-figure {
    margin: 0;
}

.pledge-preview .note {
    margin: 0;
}

/* The locked-window empty state (§5). Its own measure, for the same reason. */
.window-preview {
    width: min(100%, 34rem);
}

.window-preview p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    /* 32px of mount either side is a tenth of a 390px screen twice over, and
       what it takes comes off the specimen, which is the thing worth seeing. */
    .feature-figure {
        padding: var(--space-4);
    }

    /* Shorter band on a phone, and the tagline steps down with it -- 52vh of a
       tall screen is most of the first scroll. */
    .hero-banner img {
        height: clamp(220px, 38vh, 320px);
    }

    .hero-banner-tagline {
        font-size: 16px;
    }

    /* The grid scrolls rather than shrinking: at 350px of column the three days
       would be under 100px each, and §6's whole objection to a grid on a phone
       is that it stops being readable. Scrolling costs the last day at a
       glance; shrinking costs the words.

       Narrower here than the numbers alone want, so that a slice of the third
       day stays on screen. A frame whose right edge lands exactly on a column
       boundary reads as a grid with two days in it, not as a grid that
       continues -- the sliver is the only thing saying to push it. */
    .schedule-preview {
        min-width: 27rem;
    }

    .sched-row {
        grid-template-columns: 4rem repeat(3, 1fr);
    }

    .sched-cell {
        min-height: 4rem;
    }
}