/*
 * Cathy Florist — ORDER sections. The field is kraft. Values are --s-* tokens. The order
 * form itself is the shared closing (site.css .cf-card, order variant).
 */

/* ---- #top: the four steps, plain panels (rev 6) ------------------------------------------
   Desktop: four panels in a row, a stem photo across the top, the words, and the step's
   numeral cut off by the panel's foot. Phone: four short rows — numeral cut by the left edge,
   the words, the stem photo at the end — so the form is about one screen below the H1. */
.cf-orderhero {
    display: flex; flex-direction: column; gap: var(--s-space-xl);
    padding: var(--s-space-xl) var(--s-gutter-wide) var(--s-space-2xl); background: var(--s-field); color: var(--s-on-field);
    overflow: hidden;
}
.cf-orderhero__top {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr));
    column-gap: var(--s-grid-gap); align-items: end; width: 100%; max-width: var(--s-max); margin-inline: auto;
}
.cf-orderhero__title { grid-column: 1 / span 8; }
.cf-orderhero__side { grid-column: 9 / -1; display: grid; gap: var(--s-space-m); justify-items: start; padding-bottom: var(--s-space-2xs); }
.cf-osteps {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-grid-gap);
    width: 100%; max-width: var(--s-max); margin-inline: auto;
}
.cf-ostep {
    position: relative; overflow: hidden; height: var(--s-ostep-h);
    display: grid; grid-template-rows: var(--s-ostep-photo-h) auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto;
    background: var(--s-tissue); color: var(--s-ink);
}
.cf-ostep__photo { grid-row: 1; grid-column: 1 / -1; display: block; overflow: hidden; }
.cf-ostep__photo picture { display: block; height: 100%; }
.cf-ostep__words { grid-row: 2 / -1; grid-column: 1; display: grid; gap: var(--s-space-3xs); align-content: start; padding: var(--s-space-s) 0 var(--s-space-s) var(--s-space-s); }
.cf-ostep__title {
    font-weight: var(--s-w-heading); font-size: var(--s-size-h3); line-height: var(--s-leading-heading);
    letter-spacing: var(--s-track-heading); font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-ostep__line { font-size: var(--s-size-small); line-height: var(--s-leading-body); color: var(--s-ink-muted); max-width: var(--s-measure-step); }
.cf-ostep__n {
    grid-row: 2 / -1; grid-column: 2; align-self: end; margin-bottom: var(--s-step-big-cut); padding-right: var(--s-space-2xs);
    font-weight: var(--s-w-numeral); font-size: var(--s-size-step-big); line-height: var(--s-leading-numeral);
    letter-spacing: var(--s-track-numeral); font-variant-numeric: tabular-nums; color: var(--s-madder);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-numeral);
}
@media (max-width: 63.99rem) {
    .cf-orderhero__title, .cf-orderhero__side { grid-column: 1 / -1; }
    .cf-orderhero__side { margin-top: var(--s-space-s); }
    .cf-osteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
    .cf-orderhero { padding: var(--s-space-m) var(--s-gutter) var(--s-space-l); gap: var(--s-space-l); }
    .cf-orderhero__side { gap: var(--s-space-s); }
    .cf-osteps { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-2xs); }
    .cf-ostep {
        height: var(--s-ostep-h-phone);
        grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr) var(--s-ostep-photo-w-phone);
        align-items: center;
    }
    .cf-ostep__n { grid-row: 1; grid-column: 1; align-self: center; margin: 0 0 0 var(--s-step-big-cut-phone); padding-right: var(--s-space-xs); }
    .cf-ostep__words { grid-row: 1; grid-column: 2; padding: 0 var(--s-space-xs) 0 0; align-content: center; }
    .cf-ostep__photo { grid-row: 1; grid-column: 3; height: 100%; }
}

/* ---- #contact: real contact ----------------------------------------------------------------- */
.cf-reach { padding: var(--s-space-2xl) var(--s-gutter-wide); background: var(--s-field); color: var(--s-on-field); }
.cf-reach__inner {
    max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap); align-items: end;
}
.cf-reach__inner > .cf-stack { grid-column: 1 / span 5; }
.cf-reach__lede { color: var(--s-on-field); }
.cf-reach__note { color: var(--s-on-field-muted); }
.cf-reach__tags { grid-column: 7 / -1; display: flex; flex-wrap: wrap; gap: var(--s-space-xs) var(--s-space-l); }
@media (max-width: 63.99rem) {
    .cf-reach__inner > .cf-stack, .cf-reach__tags { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) { .cf-reach { padding-inline: var(--s-gutter); } }