/* ==========================================================================
   Homepage — see docs/pages/index.md
   ========================================================================== */

/* ----------------------------------------------------------------- hero -- */

/* A dark panel rather than a dark section: it has an edge, so it reads as the
   masthead of the page rather than as a change of theme. */
.hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-7) var(--space-8);
    border-radius: var(--radius-lg);
    background-color: var(--ice-panel);
    color: var(--ice-panel-ink);
}

@media (max-width: 47.5em) {
    .hero {
        padding: var(--space-6) var(--space-5);
    }
}

/* The flake from the logo, blown up as ambient graphic. It sits under the
   download panel, which is translucent, so it shows through as texture. */
.hero__mark {
    position: absolute;
    inset-block-end: -118px;
    inset-inline-end: -96px;
    width: 390px;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 47.5em) {
    .hero__mark {
        inset-inline-end: -70px;
        width: 240px;
    }
}

/* Named areas rather than source order, because the two do not agree.
   On one column the download panel goes ahead of the screenshot: the page's job
   is to hand over an installer, and a 250px-wide picture of a dense window is
   not worth pushing that below the fold on a phone. Reordering is safe here —
   the figure holds nothing focusable, so tab order is unaffected. */
.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "body"
        "get"
        "shot";
}

.hero__body {
    grid-area: body;
    max-width: 60ch;
}

.hero__get {
    grid-area: get;
}

.hero__shot {
    grid-area: shot;
}

/* Two columns: whoever came only to update finds the download without
   scrolling. The panel's height is not fixed — choosing rpm, deb or flatpak
   swaps in a terminal block and adds 150 to 260px — so the left column is split
   into two rows and the second one takes `1fr`. The screenshot aligns to the
   start of it, so it stays put under the lede whatever the picker does and the
   slack falls below it. Measured swing: 646px on Windows to 790px on flatpak. */
@media (min-width: 62.5em) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) 24rem;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "body get"
            "shot get";
        gap: var(--space-5) var(--space-8);
    }

    /* The panel spans both rows but keeps its own height, otherwise it grows a
       tail of empty translucent box under the last notice. */
    .hero__get {
        align-self: start;
    }

    .hero__shot {
        align-self: start;
    }
}

.hero .eyebrow {
    color: var(--ice-panel-blue);
}

.hero__title {
    margin-block: var(--space-3) var(--space-2);
    font-size: clamp(2.5rem, 2rem + 2.4vw, 3.5rem);
    line-height: 1.1;
    color: var(--ice-panel-white);
}

.hero__tagline {
    font-family: var(--font-display);
    font-size: var(--text-lead);
    font-weight: 600;
    color: var(--ice-panel-ink);
}

.hero__lead {
    margin-block-start: var(--space-4);
    max-width: 54ch;
    font-size: var(--text-lead);
    color: var(--ice-panel-ink-2);
}

.hero__shot {
    margin: 0;
}

/* Square, not rounded. The screenshot is a picture of an application window
   with square corners of its own; rounding the frame around it left a sliver of
   panel showing through each corner of the shot. The border stays — it is what
   separates a pale window from a dark panel. */
.hero__shot img {
    width: 100%;
    border: 1px solid var(--ice-panel-line);
}

/* ------------------------------------------------------- download panel -- */

/* Same two inks as the hero paragraph, one step of translucency for the
   ground. No new colour enters the panel. */
.hero__get {
    padding: var(--space-5);
    border: 1px solid var(--ice-panel-line);
    border-radius: var(--radius);
    background-color: rgba(255, 255, 255, .07);
}

/* The picker itself is in site.css — the changelog carries the same control on
   a plain surface. What follows is only the dark skin: every rule here swaps a
   light-surface ink for its panel counterpart and nothing else. */

.hero__get .picker__title {
    color: var(--ice-panel-white);
}

.hero__get .picker__line {
    color: var(--ice-panel-ink);
}

.hero__get .picker__tag {
    border-color: var(--ice-panel-line);
    color: var(--ice-panel-ink-2);
}

.hero__get .picker__date {
    color: var(--ice-panel-ink-3);
}

.hero__get .field__label {
    color: var(--ice-panel-ink);
    font-size: var(--text-meta);
}

/* The select used to keep a white ground, on the argument that the arrow is
   drawn by the browser and would vanish on a dark one. That was the right worry
   and the wrong fix: a white slab is the brightest thing in the hero, and the
   arrow follows `color-scheme`, not our tokens — ADR-007 says so about every
   native widget on the site. Declaring `dark` on the control hands the browser
   the theme it is actually sitting in, arrow and option list included.

   The ground is the panel's own, one step lighter, so the field is legible as a
   field without becoming a light box — the colour white at 14% over
   `.hero__get`'s 7% comes to, which panel ink clears at 7.81:1 in light and
   9.38:1 in dark. It is `--ice-panel-field`, an opaque token, and not that
   translucency written out: the option list is drawn by the browser with the
   control's own background and has no panel behind it, so an alpha there
   flattens against the popup's own ground and puts this near-white ink on
   near-white. The edge is `--ice-panel-ink-3` rather than `--ice-field-border`,
   which is a control token for a light ground and lands at 2.23:1 on this fill
   — the panel's own small-text ink gives the box 4.50:1 / 5.40:1 and keeps it
   a functional edge. */
.hero__get .field__input {
    color-scheme: dark;
    border-color: var(--ice-panel-ink-3);
    background-color: var(--ice-panel-field);
    color: var(--ice-panel-ink);
}

/* The action green is a dark forest green in light and would vanish on the
   panel, exactly as brand blue does — so the button takes the panel's own
   green. It replaces a white fill, which was never a decision about colour:
   white was the strongest affordance left once blue was ruled out. A bright
   green is stronger still, and it matches the button on the changelog. */
.hero__get .btn--download {
    background-color: var(--ice-panel-green);
    border-color: var(--ice-panel-green);
    color: var(--ice-panel);
}

.hero__get .btn--download:hover {
    background-color: var(--ice-panel-green-dim);
    border-color: var(--ice-panel-green-dim);
    color: var(--ice-panel);
}

.hero__get .picker__size {
    color: var(--ice-panel-ink-2);
}

.hero__get .picker__notes:has(> :not([hidden])) {
    border-block-start-color: var(--ice-panel-hair);
}

.hero__get .picker__note-intro {
    color: var(--ice-panel-ink-2);
}

/* ------------------------------------------------------------- features -- */

.feature__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-block-end: var(--space-3);
    color: var(--ice-blue);
}

/* The three cards carry two paragraphs each, so they read as short prose
   rather than as captions. */
.feature p {
    font-size: var(--text-dense);
    color: var(--ice-ink-soft);
}

/* ----------------------------------------------------------- comparison -- */

.compare__intro {
    margin-block-end: var(--space-5);
}

.compare th[scope="row"] {
    font-weight: 400;
}

.compare :is(td, thead th):not(:first-child) {
    text-align: center;
}

.compare td .icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-inline: auto;
}