/* The Irrigation & Agriculture field page's own layer.
 *
 * Loaded by storefront/irrigation.html after landing.css, on top of the shared
 * Field Manual system (docs/business/04-Design.md). Every rule is scoped to the
 * page's `.jjf` wrapper, so the main landing — which loads landing.css alone —
 * renders exactly as it did before this file existed.
 *
 * Two parts live here, per .impeccable/surfaces/irrigation.md:
 *   .jjf-plate   — the designed empty photograph: a hairline frame on the field
 *                  ground with a centered status pill, standing in for media the
 *                  panel has not picked yet (never a stock gray box).
 *   .jjf-ledger  — the capability ledger: the steps' hairline-row grammar applied
 *                  to the category cards, media at the inline end, no link
 *                  affordance.
 *
 * Spacing, borders and offsets use CSS logical properties throughout; direction
 * mirroring needs no [dir] block of its own.
 */

/* --- the plate ---------------------------------------------------------------- */

.jjf .jjf-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--jj-bg);
    border: 1px solid var(--jj-line);
    border-radius: var(--jj-radius-control);
    transition: transform 0.6s var(--jj-ease);
}

/* Standalone photography takes the card radius; only the hero and the expertise
 * figure hold a plate of that rank, and only from the breakpoint where the rest
 * of the page rounds its media too. */
.jjf .jj-hero__media .jjf-plate,
.jjf .jj-expertise__media .jjf-plate {
    border-radius: var(--jj-radius-card);
}

/* The hero's media frame follows the section's own responsive behavior: full
 * height beside the copy on desktop, the section ratio where an image would sit. */
.jjf .jj-hero__media .jjf-plate {
    width: 100%;
    aspect-ratio: 4 / 5;
}

.jjf .jj-expertise__media .jjf-plate {
    aspect-ratio: 3 / 2;
}

.jjf .jj-library .jjf-plate {
    aspect-ratio: 16 / 9;
}

.jjf .jjf-ledger .jjf-plate {
    aspect-ratio: 4 / 5;
    height: 100%;
}

/* A plate settles like a photograph only where the entry is a real link; a
 * non-link article never moves under the cursor. */
.jjf a.jj-entry:hover .jjf-plate,
.jjf a.jj-entry:focus-visible .jjf-plate {
    transform: scale(1.015);
}

/* --- the capability ledger ---------------------------------------------------- */

.jjf .jjf-ledger {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jjf .jjf-ledger__row {
    display: flex;
    flex-direction: column;
    gap: var(--jj-s24);
    padding-block: var(--jj-s24);
    border-top: 1px solid var(--jj-line);
}

.jjf .jjf-ledger__row:last-child {
    border-bottom: 1px solid var(--jj-line);
}

.jjf .jjf-ledger__body {
    max-width: 56ch;
}

.jjf .jjf-ledger__title {
    margin-top: var(--jj-s8);
    color: var(--jj-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.jjf .jjf-ledger__copy {
    margin-top: var(--jj-s8);
    color: var(--jj-muted);
}

.jjf .jjf-ledger__media {
    width: 100%;
    overflow: hidden;
    border-radius: var(--jj-radius-control);
}

.jjf .jjf-ledger__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.6s var(--jj-ease);
}

/* --- the reveal --------------------------------------------------------------- */

/* The field page declares its own reveal targets in the markup (the ledger rows);
 * the states mirror landing.css's field-card grammar exactly, and landing.js
 * observes both. `jj-js` lands on the document element, so it leads the chain.
 * Without JS, or under reduced motion, everything stays visible. */
.jj-js .jjf .jj-reveal {
    opacity: 0;
    transform: translateY(12px);
}

.jj-js .jjf .jj-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.6s var(--jj-ease),
        transform 0.6s var(--jj-ease);
    transition-delay: var(--jj-delay, 0ms);
}

/* --- breakpoints -------------------------------------------------------------- */

@media (min-width: 640px) {
    .jjf .jj-hero__media .jjf-plate {
        max-width: 520px;
    }
}

@media (min-width: 960px) {
    .jjf .jjf-ledger__row {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: var(--jj-s64);
    }

    .jjf .jjf-ledger__body {
        flex: 1 1 auto;
        padding-block: var(--jj-s8);
    }

    .jjf .jjf-ledger__media {
        flex: 0 0 240px;
        width: 240px;
    }

    .jjf .jjf-ledger__media img,
    .jjf .jjf-ledger__media .jjf-plate {
        height: 100%;
    }
}