/*
 * Cathy Florist — OCCASIONS sections. The field is tissue-deep. Values are --s-* tokens.
 */

/* ---- #top: "What are they for?" + the index string ----------------------------------- */
.cf-occhero {
    display: flex; flex-direction: column;
    height: var(--s-hero-h); min-height: var(--s-hero-min); max-height: var(--s-hero-max);
    padding: var(--s-space-l) var(--s-gutter-wide) 0; background: var(--s-field); overflow: hidden;
}
.cf-occhero__top {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-grid-gap);
}
.cf-occhero__words {
    grid-column: 1 / span 5; align-self: center;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-m); justify-items: start;
}
.cf-occhero__title { max-width: var(--s-measure-occ-title); }
.cf-occhero__preview { grid-column: 6 / -1; position: relative; overflow: hidden; }
.cf-occhero__preview picture { position: absolute; inset: 0; transition: opacity var(--s-dur-swap) var(--s-ease-out); }
.cf-occhero__preview picture.is-leaving { opacity: 0; }
.cf-occhero__now { position: absolute; left: var(--s-space-m); bottom: var(--s-space-m); cursor: default; }
.cf-occhero__index { flex: none; margin-inline: calc(var(--s-gutter-wide) * -1); }
.cf-occhero__track { padding-bottom: var(--s-space-s); }
.cf-occhero__index .cf-rail__item { width: var(--s-occ-tag-w); }
.cf-occtag { padding-bottom: var(--s-space-xs); }
.cf-occtag__name {
    font-weight: var(--s-w-heading); font-size: var(--s-size-body); line-height: var(--s-leading-heading);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-occtag[aria-current="true"]::before { background-color: var(--s-tissue); }

@media (max-width: 63.99rem) {
    /* Type first on phones: the question at display scale, then the preview, then the index. */
    .cf-occhero { height: auto; min-height: 0; max-height: none; padding: var(--s-space-m) 0 var(--s-space-s); }
    .cf-occhero__top { display: flex; flex-direction: column; gap: var(--s-space-m); }
    .cf-occhero__words { margin-inline: var(--s-gutter); gap: var(--s-space-s); }
    .cf-occhero__preview { flex: none; height: var(--s-occ-preview-phone); }
    .cf-occhero__now { left: var(--s-gutter); }
    .cf-occhero__index { margin: var(--s-space-xs) 0 0; }
}

/* ---- #chooser: THE CHOOSER --------------------------------------------------------------- */
.cf-chooser { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-page); }
.cf-chooser__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-chooser__inner > * { min-width: 0; }
.cf-chooser__head { grid-column: 1 / span 4; display: grid; gap: var(--s-space-s); }
.cf-chooser__form { grid-column: 5 / span 5; display: grid; gap: var(--s-space-l); }
.cf-chooser__q { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-space-xs); min-width: 0; }
.cf-chooser__q legend { padding: 0; margin-bottom: var(--s-space-xs); }
.cf-radio { position: relative; display: inline-flex; }
.cf-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-radio .cf-tag { pointer-events: none; }
.cf-radio input:checked + .cf-tag { color: var(--s-tissue); }
.cf-radio input:checked + .cf-tag::before { background-color: var(--s-madder); }
.cf-radio input:focus-visible + .cf-tag { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); transform: rotate(var(--s-swing)); }
@media (hover: hover) { .cf-radio:hover .cf-tag { transform: rotate(var(--s-swing)); } }
.cf-chooser__result { grid-column: 10 / -1; gap: var(--s-space-2xs); min-height: var(--s-chooser-h); }
.cf-chooser__photo { display: block; aspect-ratio: var(--s-ratio-photo); overflow: hidden; }
.cf-chooser__photo[hidden] { display: none; }
.cf-chooser__actions { display: grid; justify-items: start; gap: var(--s-space-3xs); margin-top: var(--s-space-xs); }
.cf-chooser__actions[hidden] { display: none; }

@media (max-width: 63.99rem) {
    .cf-chooser__head { grid-column: 1 / -1; }
    .cf-chooser__form { grid-column: 1 / span 7; }
    .cf-chooser__result { grid-column: 8 / -1; }
}
@media (max-width: 47.99rem) {
    .cf-chooser { padding-inline: var(--s-gutter); }
    .cf-chooser__form, .cf-chooser__result { grid-column: 1 / -1; }
    .cf-chooser__result { min-height: 0; }
}

/* ---- The occasion bands: a varied cadence --------------------------------------------
   full (photo 7/12 + words) · the 100vw photograph with the words on a tag · full, mirrored ·
   a paired row · corporate on the field. Every photo is at least 5/12 of the column. -------- */
.cf-occ { padding: var(--s-space-2xl) var(--s-gutter-wide); background: var(--s-page); }
.cf-occ--field { background: var(--s-field); }
.cf-occ__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: center;
}
.cf-occ__inner > * { min-width: 0; }
.cf-occ__photo { aspect-ratio: var(--s-ratio-wide); }
.cf-occ--full .cf-occ__photo { grid-column: 1 / span 7; grid-row: 1; }
.cf-occ--full .cf-occ__text { grid-column: 9 / -1; grid-row: 1; }
.cf-occ--mirror .cf-occ__photo { grid-column: 6 / -1; }
.cf-occ--mirror .cf-occ__text { grid-column: 1 / span 4; }
.cf-occ__n {
    font-weight: var(--s-w-display); font-size: var(--s-size-step-n); line-height: var(--s-leading-display);
    font-variant-numeric: tabular-nums; color: var(--s-madder);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-occ__line { max-width: var(--s-measure-lede); }
.cf-occ__send { display: grid; gap: var(--s-space-2xs); justify-items: start; }
.cf-occ__send .cf-tag { white-space: normal; text-align: left; }
.cf-occ__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-2xs) var(--s-space-l); margin-top: var(--s-space-2xs); }

/* The one 100vw photograph on the page: the words hang on a tissue tag over its lower edge. */
.cf-occ--wide { padding: 0 0 var(--s-space-2xl); background: var(--s-page-alt); }
.cf-occ__wideframe { height: var(--s-occ-wide-h); }
.cf-occ--wide .cf-occ__inner { padding-inline: var(--s-gutter-wide); }
.cf-occ--wide .cf-occ__text { grid-column: 7 / -1; margin-top: calc(var(--s-overlap) * -3); position: relative; z-index: 1; }

/* Desktop: the tag is as wide as the words need, set in two columns (the occasion | what to send),
   so it covers the photo's foot from column 2 and leaves no empty tissue beside it. */
@media (min-width: 64rem) {
    .cf-occ--wide .cf-occ__text {
        grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--s-space-2xl); row-gap: var(--s-space-xs); align-items: start;
    }
    .cf-occ--wide .cf-occ__text > * { margin: 0; }
    .cf-occ--wide .cf-occ__n { grid-column: 1; grid-row: 1; }
    .cf-occ--wide .cf-h2 { grid-column: 1; grid-row: 2; }
    .cf-occ--wide .cf-occ__line { grid-column: 1; grid-row: 3 / span 2; }
    .cf-occ--wide .cf-piece__type { grid-column: 2; grid-row: 1; align-self: end; }
    .cf-occ--wide .cf-occ__send { grid-column: 2; grid-row: 2 / span 2; }
    .cf-occ--wide .cf-occ__actions { grid-column: 2; grid-row: 4; }
}
/* The paired row: two occasions side by side, offset so they never read as a card grid. */
.cf-occ--pair .cf-occ__inner { align-items: start; }
.cf-occ__half { display: grid; gap: var(--s-space-m); align-content: start; }
.cf-occ__half:first-child { grid-column: 1 / span 6; }
.cf-occ__half:last-child { grid-column: 8 / -1; margin-top: var(--s-space-2xl); }
.cf-occ__half .cf-occ__photo { aspect-ratio: var(--s-ratio-photo); }

/* Corporate: the long table hangs over the statement piece's corner. */
.cf-occ--corporate .cf-occ__photo { grid-column: 1 / span 6; aspect-ratio: var(--s-ratio-photo); }
.cf-occ--corporate .cf-occ__extra {
    grid-column: 5 / span 3; grid-row: 1; align-self: end;
    aspect-ratio: var(--s-ratio-photo); margin-bottom: calc(var(--s-overlap) * -1);
    box-shadow: var(--s-photo-shadow);
}
.cf-occ--corporate .cf-occ__text { grid-column: 8 / -1; }

@media (max-width: 63.99rem) {
    .cf-occ--full .cf-occ__photo, .cf-occ--mirror .cf-occ__photo { grid-column: 1 / -1; grid-row: 1; }
    .cf-occ--full .cf-occ__text, .cf-occ--mirror .cf-occ__text { grid-column: 1 / -1; grid-row: 2; }
    .cf-occ--mirror .cf-occ__photo { grid-column: 2 / -2; }
    .cf-occ--wide .cf-occ__text { grid-column: 2 / -1; }
    .cf-occ__half:first-child, .cf-occ__half:last-child { grid-column: 1 / -1; margin-top: 0; }
    .cf-occ--corporate .cf-occ__photo { grid-column: 1 / span 9; }
    .cf-occ--corporate .cf-occ__extra { grid-column: 7 / -1; }
    .cf-occ--corporate .cf-occ__text { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 47.99rem) {
    .cf-occ { padding-inline: var(--s-gutter); }
    .cf-occ--wide { padding-inline: 0; }
    .cf-occ--wide .cf-occ__inner { padding-inline: var(--s-gutter); }
    .cf-occ--wide .cf-occ__text { grid-column: 1 / -1; margin-top: calc(var(--s-overlap) * -1); }
    .cf-occ--mirror .cf-occ__photo { grid-column: 1 / -1; }
}

/* ---- #sympathy: quiet. White, no motion, no cross-sell. ----------------------------------- */
.cf-sympathy { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-field); color: var(--s-on-field); }
.cf-sympathy__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: end;
}
.cf-sympathy__inner > * { min-width: 0; }
.cf-sympathy__a { grid-column: 1 / span 5; max-width: var(--s-whitelily-max); aspect-ratio: var(--s-ratio-wide); }
.cf-sympathy__text { grid-column: 6 / span 4; display: grid; gap: var(--s-space-s); justify-items: start; }
.cf-sympathy__card { font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice); font-size: var(--s-size-voice); line-height: var(--s-leading-voice); font-variation-settings: normal; color: var(--s-on-field-muted); }
.cf-sympathy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-2xs) var(--s-space-l); }
.cf-sympathy__b { grid-column: 10 / -1; aspect-ratio: var(--s-ratio-cone); }
.cf-tag--quiet { color: var(--s-white); transition: none; }
.cf-tag--quiet::before { background-color: var(--s-ink); }
.cf-tag--quiet:active::before { background-color: var(--s-ink-muted); }
.cf-sympathy :focus-visible, .cf-sympathy .cf-tag:hover { transform: none; }
@media (max-width: 63.99rem) {
    .cf-sympathy__a { grid-column: 1 / span 7; }
    .cf-sympathy__b { grid-column: 8 / -1; grid-row: 1; }
    .cf-sympathy__text { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
    .cf-sympathy { padding-inline: var(--s-gutter); }
}

/* Photos fill their frames. */
.cf-sympathy figure, .cf-chooser__photo { position: relative; overflow: hidden; }
.cf-sympathy figure picture, .cf-chooser__photo picture { position: absolute; inset: 0; }