/* The order pages (/order/<slug>/). The layout follows docs/mocks/order-form.png: the two steps on
   the left and the order summary beside them. The summary itself is a component in main.css. */

.order {
    padding-block: 28px clamp(56px, 7vw, 96px);
}

.order-form {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-areas:
        'intro .'
        'main summary';
    gap: 40px clamp(40px, 5vw, 80px);
    margin-top: 20px;
}

.order-intro {
    grid-area: intro;
}

.order-main {
    grid-area: main;
}

.order-form > .summary {
    grid-area: summary;
    align-self: start;
}

/* The summary follows the steps down the page where all of it fits on screen. On desktop it
   measures up to 726px tall, or 807px with the sticker row. Recheck both if it grows. */
@media (min-width: 960px) and (min-height: 780px) {
    .order-form > .summary:not(:has(.summary-stickers)) {
        position: sticky;
        top: 24px;
    }
}

@media (min-width: 960px) and (min-height: 860px) {
    .order-form > .summary {
        position: sticky;
        top: 24px;
    }
}

/* Headline size: the display size belongs to the collection's hero */
.order-intro h1 {
    font-size: var(--text-h2);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.order-intro p {
    margin-top: 10px;
    color: var(--ink-soft);
}

/* The two steps */

.order-step + .order-step {
    margin-top: 56px;
}

.order-step h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-h3);
}

.order-step-note {
    margin-top: 8px;
    max-width: 62ch;
    font-size: var(--text-small);
    color: var(--ink-soft);
}

.fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin-top: 24px;
}

.field-full {
    grid-column: 1 / -1;
}

/* Sized to what it holds: a headcount */
.input-short {
    max-width: 12rem;
}

/* No strings, stated plainly */
.callout {
    display: flex;
    gap: 14px;
    margin-top: 40px;
    padding: 20px 24px;
    border-radius: var(--radius-card);
    background: var(--wash-mint);
}

.callout .icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--green-ink);
}

.callout-title {
    font-size: var(--text-body);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--ink);
}

.callout-title + p {
    margin-top: 4px;
    max-width: 62ch;
    font-size: var(--text-small);
    color: var(--ink-soft);
}

/* The Lunar opt-in */
.talk {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.talk h2 {
    font-size: var(--text-h3);
}

.talk p {
    margin-top: 8px;
    max-width: 62ch;
    color: var(--ink-soft);
}

.talk .check {
    margin-top: 20px;
    font-size: var(--text-body);
    color: var(--ink);
}

.talk .check input {
    margin-top: 3px;
}

.order-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.order-form .form-error-container {
    margin-bottom: 16px;
    font-size: var(--text-small);
    color: var(--error);
}

.order-form .on-charcoal .field-error {
    color: var(--print-cream);
}

.order-form .on-charcoal .input[aria-invalid='true'] {
    border-color: var(--print-cream);
}

.order-submit {
    margin-top: 32px;
}

.order-submit .btn {
    width: 100%;
}

.order-submit p {
    margin-top: 14px;
    font-size: var(--text-legal);
    color: var(--ink-muted);
}

@media (max-width: 959px) {
    .order-form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'intro' 'summary' 'main';
        gap: 32px;
    }
}

/* Tablets: the summary spans the page, so it becomes a wide crop of the print over a two-column
   ticket, the choice beside the receipt */
@media (min-width: 600px) and (max-width: 959px) {
    .order-form .summary-photo img {
        aspect-ratio: 16 / 9;
        object-position: 50% 30%;
    }

    .order-form .summary-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        column-gap: 40px;
    }

    .order-form .summary-body > :not(.summary-pick, .summary-receipt) {
        grid-column: 1 / -1;
    }

    .order-form .summary-body .tag-draft {
        justify-self: start;
    }

    /* Ruled like .summary-pick beside it */
    .order-form .summary-receipt {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--charcoal-line);
    }
}