/* ==========================================================================
   CocoSeller — Page families
   Loaded on the product, company, guide and contact templates. Not loaded on
   the homepage or on a crop page, neither of which composes with these blocks.

   Everything here styles the block system in inc/blocks.php and the shared page
   hero. The section wrapper, the ground and the container are already handled
   by layout.css and utilities.css — these rules only style what sits inside.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   Copy left, media right, and a copy-only variant that centres on the measure
   rather than leaving a wide empty column. The heading is the LCP text and the
   hero image, where there is one, is the LCP image — neither is ever inside a
   reveal that could delay it.
   -------------------------------------------------------------------------- */

.c-page-hero {
    padding-block-start: var(--space-xl);
    padding-block-end: var(--space-section);
}

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

.c-page-hero__title {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
    text-wrap: balance;
}

.c-page-hero__standfirst {
    margin-block: var(--space-md) 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-brand);
    max-inline-size: var(--measure-narrow);
}

.c-page-hero__lead {
    margin-block: var(--space-md) 0;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    max-inline-size: var(--measure);
}

.c-page-hero__byline {
    margin-block: var(--space-md) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-subtle);
}

.c-page-hero__actions { margin-block-start: var(--space-lg); }

/* Hero statistics. Every value printed here is a published figure. */
.c-page-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-md);
    margin-block: var(--space-xl) 0;
    padding-block-start: var(--space-lg);
    border-block-start: var(--border-hairline);
}

.c-page-hero__stat { display: grid; gap: var(--space-3xs); }

.c-page-hero__stat dt {
    order: 2;
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.c-page-hero__stat dd {
    order: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-heading);
}

.c-page-hero__figure {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.c-page-hero__figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Copy-led hero: no media column, so the copy takes the measure and stops. */
.c-page-hero--none .c-page-hero__copy { max-inline-size: 52rem; }

@media (min-width: 62em) {
    .c-page-hero--image .c-page-hero__inner,
    .c-page-hero--story .c-page-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-2xl);
    }

    .c-page-hero__title { font-size: var(--text-5xl); }
}

/* --------------------------------------------------------------------------
   2. Block footnotes
   The method qualifier, the "figures as published" note, the caveat under a
   table. Small, muted, on the measure.
   -------------------------------------------------------------------------- */

.c-block__note {
    margin-block: var(--space-lg) 0;
    max-inline-size: var(--measure);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   3. Prose block
   -------------------------------------------------------------------------- */

.c-prose-block {
    max-inline-size: var(--measure);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.c-prose-block p { margin: 0; }

.c-inline-links {
    margin-block: var(--space-lg) 0;
    padding: 0;
    list-style: none;
    gap: var(--space-md) var(--space-xl);
}

/* --------------------------------------------------------------------------
   4. Specification table
   The wrapper scrolls, not the page. It is focusable so the scroll is
   reachable from the keyboard, and it carries a shadow-free fade at the
   trailing edge to say there is more to the right.
   -------------------------------------------------------------------------- */

.c-table-scroll {
    position: relative;
    overflow-x: auto;
    max-inline-size: 100%;
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    -webkit-overflow-scrolling: touch;
}

.c-table-scroll:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.c-table {
    inline-size: 100%;
    min-inline-size: 34rem;
    border-collapse: collapse;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.c-table th,
.c-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: start;
    vertical-align: top;
    border-block-end: var(--border-subtle);
}

.c-table thead th {
    position: sticky;
    inset-block-start: 0;
    background: var(--color-bg-subtle);
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-block-end: var(--border-hairline);
}

.c-table tbody th {
    font-weight: var(--weight-semibold);
    color: var(--color-text-strong);
    inline-size: 30%;
}

.c-table tbody tr:last-child th,
.c-table tbody tr:last-child td { border-block-end: 0; }

.c-table tbody tr:nth-child(even) { background: var(--coco-cream-50); }

/* --------------------------------------------------------------------------
   5. Cards grid — column count is a data decision, not a breakpoint decision
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   6. Process
   A numbered chain with a connector running through the markers. The connector
   is drawn on the list rather than on each step, so it is one continuous line
   and Phase 5 can drive its length from scroll without touching the markup.
   -------------------------------------------------------------------------- */

.c-process {
    --process-marker: 2.75rem;

    position: relative;
    display: grid;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: process;
}

/* The connector. Inset by half a marker so it runs through their centres. */
.c-process::before {
    content: '';
    position: absolute;
    inset-block: calc(var(--process-marker) / 2) calc(var(--process-marker) / 2);
    inset-inline-start: calc(var(--process-marker) / 2 - 0.5px);
    inline-size: 1px;
    background: var(--color-border);
}

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

.c-process__marker {
    display: grid;
    place-items: center;
    inline-size: var(--process-marker);
    block-size: var(--process-marker);
    border: var(--border-hairline);
    border-radius: var(--radius-circle);
    background: var(--color-surface);
}

.c-process--unnumbered .c-process__marker::after {
    content: '';
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-circle);
    background: var(--color-brand);
}

.c-process__index {
    font-family: var(--font-eyebrow);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-brand);
}

.c-process__body { padding-block-start: calc(var(--space-2xs) + 2px); }

.c-process__label {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-heading);
}

.c-process__note {
    margin-block: var(--space-2xs) 0;
    max-inline-size: var(--measure);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.c-process__watch {
    margin-block: var(--space-sm) 0;
    padding-inline-start: var(--space-md);
    border-inline-start: 2px solid var(--color-accent-soft);
    max-inline-size: var(--measure);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.c-process__watch-label {
    display: block;
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}

@media (min-width: 64em) {
    .c-process { gap: var(--space-2xl); }
    .c-process__step { grid-template-columns: var(--process-marker) minmax(0, 1fr); gap: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   7. Callout
   Three tones. The left rule carries the tone; nothing else changes, so a page
   with all three on it still reads as one page.
   -------------------------------------------------------------------------- */

.c-callout {
    max-inline-size: 52rem;
    padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
    border: var(--border-hairline);
    border-inline-start: 3px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.c-callout--note    { border-inline-start-color: var(--color-brand); }
.c-callout--method  { border-inline-start-color: var(--color-accent); }
.c-callout--caution { border-inline-start-color: var(--coco-warning); }

.c-callout__label {
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.c-callout--note .c-callout__label    { color: var(--color-brand); }
.c-callout--method .c-callout__label  { color: var(--color-accent); }
.c-callout--caution .c-callout__label { color: var(--coco-warning); }

.c-callout__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-heading);
}

.c-callout__text {
    margin: 0 0 var(--space-sm);
    line-height: var(--leading-relaxed);
}

.c-callout__text:last-of-type { margin-block-end: 0; }

.c-callout .c-inline-links { margin-block-start: var(--space-md); }

/* --------------------------------------------------------------------------
   8. Comparison
   -------------------------------------------------------------------------- */

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

.c-compare__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.c-compare__card--lead {
    border-color: var(--color-border-brand);
    background: var(--coco-green-50);
}

.c-compare__flag {
    align-self: start;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}

.c-compare__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-heading);
}

.c-compare__summary {
    margin: 0;
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.c-compare__points {
    margin: auto 0 0;
    padding: var(--space-sm) 0 0;
    border-block-start: var(--border-subtle);
    list-style: none;
    display: grid;
    gap: var(--space-2xs);
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

.c-compare__points li {
    position: relative;
    padding-inline-start: var(--space-md);
    line-height: var(--leading-normal);
}

.c-compare__points li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    inline-size: 0.375rem;
    block-size: 1px;
    background: var(--color-accent);
}

@media (min-width: 48em) {
    .c-compare { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

/* --------------------------------------------------------------------------
   9. Story block
   Copy beside the slot, or copy above a full-width slot. The split ratio
   favours the drawing slightly, because a schematic needs width to stay
   legible and the copy beside it is deliberately short.
   -------------------------------------------------------------------------- */

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

.c-story--full { gap: var(--space-lg); }

.c-story__copy { min-inline-size: 0; }
.c-story__visual { min-inline-size: 0; }

@media (min-width: 64em) {
    .c-story--split {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-2xl);
    }

    /* The slot leads and the copy follows it in the reading order set by the
       source, so reversing is a visual change only. */
    .c-story--split.c-story--reverse .c-story__copy   { order: 2; }
    .c-story--split.c-story--reverse .c-story__visual { order: 1; }
}

/* --------------------------------------------------------------------------
   10. Table of contents
   -------------------------------------------------------------------------- */

.c-toc {
    padding: var(--space-lg);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.c-toc__title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.c-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    display: grid;
    gap: var(--space-2xs);
}

.c-toc__item { counter-increment: toc; }

.c-toc__link {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-2xs);
    padding-block: var(--space-3xs);
    color: var(--color-text);
    text-decoration: none;
    line-height: var(--leading-normal);
}

.c-toc__link::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
    padding-block-start: 0.25em;
}

.c-toc__link:hover,
.c-toc__link:focus-visible { color: var(--color-link-hover); }

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

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */

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

.c-contact-card {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding: var(--space-lg);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.c-contact-card__label {
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-brand);
}

.c-contact-card__value {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text-strong);
}

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

.c-contact-card a { color: var(--color-link); }

@media (min-width: 48em) {
    .c-contact-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* --------------------------------------------------------------------------
   12. Dark and coir grounds
   Surfaces that are white on the default ground have to become transparent on
   an inverted one, or they punch a hole in it.
   -------------------------------------------------------------------------- */

.u-theme-dark .c-callout,
.u-theme-dark .c-compare__card,
.u-theme-dark .c-contact-card,
.u-theme-dark .c-process__marker,
.u-theme-dark .c-table-scroll {
    background: transparent;
    border-color: var(--color-border-inverse);
}

.u-theme-dark .c-table thead th { background: rgba(255, 255, 255, 0.04); }
.u-theme-dark .c-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.u-theme-dark .c-table th,
.u-theme-dark .c-table td { border-block-end-color: var(--color-border-inverse); }

.u-theme-dark .c-toc {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border-inverse);
}

.u-theme-coir .c-callout,
.u-theme-coir .c-compare__card,
.u-theme-coir .c-contact-card,
.u-theme-coir .c-table-scroll { background: var(--coco-cream-50); }