/*
 * Cathy Florist — WEDDINGS sections. The field is ivory. Values are --s-* tokens.
 */

/* ---- #top: the whole arch, full bleed. Desktop: the H1 stands free in the clear sky at the
   upper right (ink on the pale sky); the ivory tag shrinks to the deck + CTA and hangs low on
   the left over the valley, clear of the arch's arms. The one panel becomes a 12-column grid
   over the photo and its tag fill (::before) and twine (::after) become grid items, so the H1
   stays inside the same tag on phones (where the photo comes first and the tag below it). */
.cf-sub--weddings .cf-photo { object-position: var(--s-arch-pos); }
@media (min-width: 64rem) {
    .cf-sub--weddings .cf-sub__photo { position: absolute; inset: 0; }
    .cf-sub--weddings .cf-sub__row { position: absolute; inset: 0; margin: 0; padding: 0; display: block; }
    .cf-sub--weddings .cf-sub__panel {
        position: absolute; inset: 0; padding: var(--s-space-l) var(--s-gutter-wide) var(--s-space-xl);
        grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); row-gap: 0;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto; align-items: end;
    }
    .cf-sub--weddings .cf-sub__panel > * { grid-column: 1 / span var(--s-wed-deck-cols); margin-inline: var(--s-panel-pad); }
    .cf-sub--weddings .cf-sub__panel > .cf-label { grid-row: 3; margin-top: calc(var(--s-tag-hole-inset-lg) + var(--s-tag-hole-lg) + var(--s-space-s)); }
    .cf-sub--weddings .cf-sub__panel > .cf-sub__lede { grid-row: 4; margin-top: var(--s-space-s); }
    .cf-sub--weddings .cf-sub__panel > .cf-tag { grid-row: 5; margin-block: var(--s-space-m) var(--s-panel-pad); }
    .cf-sub--weddings .cf-sub__panel > .cf-h1 {
        grid-column: var(--s-wed-title-cols); grid-row: 1; align-self: start; margin: 0;
        font-size: var(--s-size-wed-title); line-height: var(--s-leading-display-xl); color: var(--s-ink);
    }
    .cf-sub--weddings .cf-sub__panel::before {
        position: relative; inset: auto; grid-column: 1 / span var(--s-wed-deck-cols); grid-row: 3 / 6; align-self: stretch; justify-self: stretch;
    }
    .cf-sub--weddings .cf-sub__panel::after {   /* the twine rises from the deck tag's hole to the top */
        grid-column: 1 / span var(--s-wed-deck-cols); grid-row: 1 / 4; justify-self: center; align-self: stretch;
        position: relative; left: auto; bottom: auto; margin: 0 0 calc(var(--s-tag-hole-inset-lg) * -1);
        height: auto;
    }
}

/* ---- #make: what we make ------------------------------------------------------------------ */
.cf-make { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-page); }
.cf-make__inner {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap);
    max-width: var(--s-max); margin-inline: auto; align-items: start;
}
.cf-make__inner > * { min-width: 0; }
.cf-make figure { position: relative; overflow: hidden; }
.cf-make figure picture { position: absolute; inset: 0; }
.cf-make__bridal { grid-column: 1 / span 4; aspect-ratio: var(--s-ratio-tall); }
.cf-make__list { grid-column: 6 / span 4; display: grid; gap: var(--s-space-l); }
.cf-make__items { display: grid; }
.cf-make__item {
    display: grid; grid-template-columns: var(--s-make-n) minmax(0, 1fr); column-gap: var(--s-space-s); row-gap: var(--s-space-3xs);
    padding-block: var(--s-space-s); box-shadow: inset 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule);
}
.cf-make__n {
    grid-row: 1 / span 2; font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-heading);
    letter-spacing: var(--s-track-tag); color: var(--s-madder); font-variant-numeric: tabular-nums;
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-make__line { color: var(--s-text-muted); font-size: var(--s-size-lede); }
.cf-make__buttonhole { grid-column: 10 / -1; align-self: end; aspect-ratio: var(--s-ratio-wide); }
@media (max-width: 63.99rem) {
    .cf-make__bridal { grid-column: 1 / span 5; }
    .cf-make__list { grid-column: 6 / -1; }
    .cf-make__buttonhole { grid-column: 6 / -1; }
}
@media (max-width: 47.99rem) {
    .cf-make { padding-inline: var(--s-gutter); }
    .cf-make__bridal { grid-column: 1 / span 7; }
    .cf-make__buttonhole { grid-column: 8 / -1; grid-row: 1; }
    .cf-make__list { grid-column: 1 / -1; }
}

/* ---- #settings: the setting you choose ---------------------------------------------------- */
.cf-settings { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-tissue-deep); overflow: hidden; }
.cf-settings__inner {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap);
    max-width: var(--s-max); margin-inline: auto; align-items: start;
}
.cf-settings__inner > * { min-width: 0; }
@media (min-width: 64rem) {
    /* the tall photo spans both rows: row 1 hugs the words, row 2 takes the slack (no gap) */
    .cf-settings__inner { grid-template-rows: auto minmax(0, 1fr); align-content: start; }
}
.cf-settings__text { grid-column: 1 / span 6; grid-row: 1; }
/* rev 6: the three settings are a column of plain panels beside the tall photo, sharing its height
   (row 2 stretches to the photo's foot), with no twine: they are not tags. */
.cf-settings__tags {
    grid-column: 1 / span 7; grid-row: 2; align-self: stretch;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: var(--s-space-s);
}
.cf-settings__tag {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center;
    gap: var(--s-space-2xs) var(--s-space-l); min-height: var(--s-settings-tag-h);
}
.cf-settings__tag .cf-piece__name { font-size: var(--s-size-h3); }
.cf-settings__photo { grid-column: 9 / -1; grid-row: 1 / span 2; position: relative; aspect-ratio: var(--s-ratio-tall); }
.cf-settings__photo picture { position: absolute; inset: 0; }
@media (max-width: 63.99rem) {
    .cf-settings__text, .cf-settings__tags { grid-column: 1 / -1; }
    .cf-settings__photo { grid-column: 3 / -3; grid-row: auto; }
}
@media (max-width: 47.99rem) {
    .cf-settings { padding-inline: var(--s-gutter); }
    .cf-settings__tag { min-height: 0; grid-template-columns: minmax(0, 1fr); }
    .cf-settings__photo { grid-column: 2 / -2; }
}

/* ---- #list: THE WEDDING LIST (ticks are written onto the closing tag) ------------------- */
.cf-wlist { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-page); }
.cf-wlist__inner {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap);
    max-width: var(--s-max); margin-inline: auto; align-items: start;
}
.cf-wlist__inner > * { min-width: 0; }
.cf-wlist__head { grid-column: 1 / -1; }
.cf-wlist__title { max-width: none; }
.cf-wlist__set { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.cf-wlist__items { display: grid; grid-template-columns: repeat(var(--s-wlist-cols), minmax(0, 1fr)); gap: var(--s-space-xs); }
.cf-check { gap: var(--s-space-xs); white-space: normal; text-align: left; cursor: pointer; }
.cf-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-check__box {
    flex: none; width: var(--s-check); height: var(--s-check);
    box-shadow: inset 0 0 0 var(--s-line-w) var(--s-kraft-ink); background: var(--s-tissue);
}
.cf-check:has(input:checked) { color: var(--s-tissue); }
.cf-check:has(input:checked)::before { background-color: var(--s-madder); }
.cf-check:has(input:checked) .cf-check__box {
    background: var(--s-pollen); box-shadow: inset 0 0 0 var(--s-line-w) var(--s-tissue);
    clip-path: var(--s-tick);
}
.cf-check:has(input:focus-visible) { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
@media (max-width: 63.99rem) {
    .cf-wlist__head, .cf-wlist__set { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
    .cf-wlist { padding-inline: var(--s-gutter); }
    .cf-wlist__items { grid-template-columns: minmax(0, 1fr); }
}