/* ==========================================================================
   CocoSeller — Shared page patterns
   Layer 5 of the cascade, after components.css and before utilities.css.

   These are the section-level patterns every page family composes with:
   specification cards, blend cards, root-zone lists, customisation levers,
   the manufacturer band, related-link sets, the accordion and the closing CTA.

   They were written for the Tomato crop page in Phase 2E and lived in
   assets/css/pages/crop.css until Phase 4, when the product, company, guide
   and contact families started composing with the same blocks. Nothing about
   them was crop-specific; only their file was. Class names are unchanged, so
   no template needed editing when they moved.

   Crop-only rules — the story rail, the growth sequence, the progress line —
   stayed behind in crop.css. Crop-context overrides of anything here also stay
   there, so they continue to win on specificity and load order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Specification cards
   -------------------------------------------------------------------------- */

.c-spec-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-grid);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-spec-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs, 0.25rem);
    padding: var(--space-md);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.c-spec-card__label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.c-spec-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    color: var(--color-heading);
}

.c-spec-card__note {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

.c-crop-needs__body {
    margin-block-start: var(--space-lg);
    max-width: 44rem;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

@media (min-width: 48em) {
    .c-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   2. Blend comparison cards
   -------------------------------------------------------------------------- */

.c-blend-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-grid);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-blend-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-lg) var(--space-md) var(--space-md);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.c-blend-card--lead {
    border-color: var(--color-border-brand, var(--coco-green-500));
    box-shadow: var(--shadow-sm);
}

.c-blend-card__flag {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--space-md);
    transform: translateY(-50%);
    padding: 0.2em 0.7em;
    border-radius: var(--radius-pill, 999px);
    background-color: var(--coco-green-700);
    color: var(--coco-cream-50);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.c-blend-card__ratio {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
}

.c-blend-card__name {
    margin: 0;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.c-blend-card__metrics {
    display: flex;
    gap: var(--space-lg);
    margin-block: var(--space-sm) 0;
}

.c-blend-card__metric dt {
    font-size: var(--text-2xs);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
}

.c-blend-card__metric dd { margin: 0; }

.c-blend-card__figure {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-heading);
}

.c-blend-card__unit { font-size: var(--text-xs); color: var(--color-text-muted); }

.c-blend-card__bar {
    display: block;
    block-size: 3px;
    margin-block: var(--space-xs);
    border-radius: 999px;
    background-color: var(--color-border-subtle);
    background-image: linear-gradient(to right, var(--coco-green-500) var(--fill, 0%), transparent var(--fill, 0%));
}

.c-blend-card__behaviour {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.c-blend-card__behaviour span {
    display: inline-block;
    min-inline-size: 3.5rem;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text);
}

.c-blend-card__use {
    margin-block: var(--space-xs) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

.c-crop-blends__notes { margin-block-start: var(--space-xl); max-width: 46rem; }

.c-crop-blends__note {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.c-crop-blends__note--strong { color: var(--color-text); }

.c-crop-blends__method {
    margin-block-start: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

@media (min-width: 48em) {
    .c-blend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   3. Root zone
   Heading and explanation, then the root-zone visual as a full band across the
   reading column, then the technical detail beneath it. The image carries the
   section: beside the crop rail, a small picture and a long list left the
   section reading as mostly empty.
   -------------------------------------------------------------------------- */

.c-rootzone__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

/* A band, not a thumbnail. Wide enough to hold the column on its own. */
.c-rootzone__figure { --media-ratio: var(--ratio-wide); }
.c-rootzone__placeholder { --placeholder-ratio: var(--ratio-wide); }
.c-rootzone__image { width: 100%; height: 100%; object-fit: cover; }

/*
 * The steps sit under the image as an editorial index. auto-fit rather than a
 * media query, because this list lives inside the reading column, whose width
 * is set by the rail rather than by the viewport.
 */
.c-rootzone__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--space-md) var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.c-rootzone__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "index label" "index note";
    column-gap: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-top: var(--border-hairline);
}

.c-rootzone__index {
    grid-area: index;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--coco-green-500);
}

.c-rootzone__label {
    grid-area: label;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-heading);
}

.c-rootzone__note {
    grid-area: note;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

.c-rootzone__closing {
    margin-block-start: var(--space-lg);
    max-width: 44rem;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   4. Customisation levers
   -------------------------------------------------------------------------- */

.c-crop-custom__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.c-lever-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-lever {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "mark label" "mark note";
    column-gap: var(--space-sm);
    row-gap: 0.15rem;
}

.c-lever__mark {
    grid-area: mark;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    margin-block-start: 0.45em;
    border: 2px solid var(--coco-green-500);
    border-radius: var(--radius-circle, 50%);
}

.c-lever__label {
    grid-area: label;
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--color-heading);
}

.c-lever__note {
    grid-area: note;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

/*
 * A lever may name a page. The underline is drawn as a background gradient
 * rather than with text-decoration, so it can grow from the leading edge on
 * hover and focus without shifting the text.
 */
.c-lever__label--link {
    color: var(--color-link);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--duration-base) var(--ease-out),
                color var(--duration-fast) var(--ease-standard);
}

.c-lever__label--link:hover,
.c-lever__label--link:focus-visible {
    color: var(--color-link-hover);
    background-size: 100% 1px;
}

.c-crop-custom__image { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 48em) {
    .c-lever-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
    .c-crop-custom__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-2xl); }

    /*
     * With no product photograph to sit beside, the levers take the column
     * rather than leaving the right-hand track empty. See
     * template-parts/crop/crop-custom.php.
     */
    .c-crop-custom__layout--full { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   5. Manufacturer
   -------------------------------------------------------------------------- */

.c-crop-maker__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
}

.c-crop-maker__cta { margin-block-start: var(--space-md); }
.c-crop-maker__image { width: 100%; height: 100%; object-fit: cover; }
.c-crop-maker__media .c-placeholder { width: 100%; }

@media (min-width: 62em) {
    .c-crop-maker__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

/* --------------------------------------------------------------------------
   6. Related links
   -------------------------------------------------------------------------- */

.c-crop-related__groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
}

.c-crop-related__group-title {
    margin-block-end: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-heading);
}

.c-crop-related__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48em) {
    .c-crop-related__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
}

/* --------------------------------------------------------------------------
   7. Accordion
   Panels are open by default and only collapse once the script has run, so a
   JavaScript failure leaves every answer readable.
   -------------------------------------------------------------------------- */

.c-accordion { border-top: var(--border-hairline); }

.c-accordion__item { border-bottom: var(--border-hairline); }

.c-accordion__heading { margin: 0; }

.c-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    inline-size: 100%;
    padding: var(--space-md) 0;
    border: 0;
    background: none;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    text-align: start;
    color: var(--color-heading);
    cursor: pointer;
}

.c-accordion__trigger:hover { color: var(--coco-green-700); }

.c-accordion__icon {
    position: relative;
    flex: none;
    inline-size: 0.85rem;
    block-size: 0.85rem;
}

.c-accordion__icon::before,
.c-accordion__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    background-color: currentColor;
    transform: translateY(-50%);
    transition: transform var(--duration-base) var(--ease-standard);
}

.c-accordion__icon::after { transform: translateY(-50%) rotate(90deg); }

.c-accordion__trigger[aria-expanded="true"] .c-accordion__icon::after {
    transform: translateY(-50%) rotate(0deg);
}

.c-accordion__panel { padding-block-end: var(--space-md); }

.c-accordion__answer {
    max-width: 42rem;
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   8. Closing
   -------------------------------------------------------------------------- */

.c-crop-closing__inner { text-align: center; }

.c-crop-closing__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

.c-crop-closing__lead {
    margin-block: var(--space-md) 0;
    margin-inline: auto;
    max-width: 40rem;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    opacity: 0.85;
}

.c-crop-closing__actions { margin-block-start: var(--space-lg); justify-content: center; }

/* --------------------------------------------------------------------------
   The closing band's photographic state
   PHASE 5C. The late-page image beat. The section keeps its dark theme tokens
   and gains a photographic ground beneath a deep green wash.

   CONTRAST, which is the whole reason the stops are where they are. The wash is
   densest at the centre, where the heading, the paragraph and the two buttons
   sit, and lightest at the very edges of the band, where nothing but the
   photograph is. Measured against the worst case the photograph can present —
   a pure white pixel:

                                         cream       green-100
     centre, 0.94 alpha over #081A10 ..... 15.0:1      12.6:1
     mid,    0.88 alpha .................. 12.4:1      10.4:1
     edge,   0.80 alpha over #0E2818 .....  8.0:1       6.7:1

   Cream is the heading, green-100 the lead paragraph. Every figure is computed
   against a pure WHITE pixel, so they are floors, not typical values: no frame
   that could ever be supplied can take the text below them. That is what lets
   this slot accept a photograph without the photograph being vetted for tone
   first, and it is why the lead does not keep its 0.85 dimming here.
   -------------------------------------------------------------------------- */

.c-crop-closing { position: relative; isolation: isolate; }

/*
 * z-index 0, NOT -1. The section carries .u-theme-dark, which paints an opaque
 * green background on the section itself, and a negative z-index would put the
 * photograph behind that background rather than behind the text — painting it
 * perfectly and showing it to nobody. Positioned descendants paint above their
 * ancestor's own background, so the backdrop sits at 0 and the content is
 * lifted to 1 over it.
 */
.c-crop-closing__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.c-crop-closing > .l-container { position: relative; z-index: 1; }

.c-crop-closing__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /*
     * Crops for the horizon rather than the floor. In the reused state this is
     * the same frame the environment band shows, and taking it higher here is
     * what stops the two reading as the same picture twice.
     */
    object-position: var(--crop-closing-position, center 38%);
}

.c-crop-closing__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            120% 88% at 50% 50%,
            rgba(8, 26, 16, 0.94) 0%,
            rgba(8, 26, 16, 0.88) 46%,
            rgba(14, 40, 24, 0.80) 100%
        );
}

/*
 * Over a photograph the muted lead loses more than it should, so it takes the
 * full token instead of being dimmed to 0.85 of it.
 */
.c-crop-closing--media .c-crop-closing__lead {
    opacity: 1;
    color: var(--coco-green-100);
}