/**
 * Voya Offerings — grid, filters and cards.
 *
 * Mobile-first: one column, with the grid widening at larger viewports. The
 * column count is governed by the card's own minimum width — see the grid.
 * Each card carries its category accent as --voya-card-accent, set inline
 * because the colour follows an editable term rather than a fixed class.
 */

/* ==========================================================================
   Hiding

   The filter panels and the cards are laid out with display:flex, and any
   display value defeats the [hidden] attribute's UA rule. Without this, the
   inactive filter row stays visible and filtering appears to do nothing —
   view.js sets .hidden and the browser paints the element anyway.

   Declared first so a later display rule cannot reintroduce the problem.
   ========================================================================== */

.voya-offerings [hidden] {
    display: none;
}

/* ==========================================================================
   Filter panel

   The design floats this over the hero above it: a white card with a hairline
   deep-green edge, sitting about 127 of the design's 1200 up into the cover.

   The lift is only half the story — the section this panel sits in is cut to
   match the hero's torn foot, and a clip-path clips descendants, so the panel
   would be clipped away rather than overlap. The stacking that makes it
   possible is in style.css, under the Torn edges section.
   ========================================================================== */

.voya-offerings__panel {
    background-color: var(--wp--preset--color--white);

    /* Measured from the design: 1px, #244844. */
    border: 1px solid var(--wp--preset--color--deep-green);

    /* Design panel is 209 tall against our 145 — roughly 40 above the tabs
       and 48 below the chips. */
    padding: 2.5rem 2rem 3rem;
    margin-bottom: 2rem;

    /* Rides up over the hero. Held in vw below desktop so it never eats more
       of a short cover than it should, and capped at the design's figure. */
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--voya-panel-lift));
}

/* Design: about 90 between the two labels. Held in vw below desktop so two
   tabs do not end up marooned at either end of a phone. */
.voya-offerings__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2rem, 7vw, 5.625rem);
    border-bottom: 1px solid rgba(36, 72, 68, 0.2);
}

.voya-offerings__tab {
    background: none;
    border: 0;
    /* 5 per the design. Pulled down a pixel so it covers the tabs' own hairline
       rule rather than stacking above it. */
    border-bottom: 5px solid transparent;
    margin-bottom: -1px;

    /* The bottom padding is the gap between the label and the rule — and with
       it the active underline, which sits on that same line. Design: ~35. */
    padding: 0.5rem 0.25rem 2rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--deep-green);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--voya-transition), border-color var(--voya-transition);
}

.voya-offerings__tab:hover,
.voya-offerings__tab:focus-visible {
    opacity: 1;
}

.voya-offerings__tab.is-active {
    opacity: 1;
    border-bottom-color: var(--wp--preset--color--green);
}

.voya-offerings__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.voya-chip {
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--deep-green);
    padding: 0.35rem 0.75rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--deep-green);
    cursor: pointer;
    transition:
        background-color var(--voya-transition),
        border-color var(--voya-transition),
        color var(--voya-transition);
}

.voya-chip:hover,
.voya-chip:focus-visible {
    background-color: var(--voya-chip-accent, var(--wp--preset--color--deep-green));
    border-color: var(--voya-chip-accent, var(--wp--preset--color--deep-green));
    color: var(--wp--preset--color--white);
}

.voya-chip.is-active {
    background-color: var(--wp--preset--color--deep-green);
    border-color: var(--wp--preset--color--deep-green);
    color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Grid
   ========================================================================== */

.voya-offerings__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/*
 * Column counts hold each card at or above the 300px the design draws it at:
 * two columns from 783px, where the header already breaks, giving 368px;
 * three from 992px, giving 307px.
 *
 * These used to be set by how much width the price line needed, which is why
 * the three-column figure was briefly 1024. It is not a constraint any more —
 * the foot stacks, so the price has the card's full width — and the numbers
 * are back to being about the card as a whole.
 */
@media (min-width: 783px) {

    .voya-offerings__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {

    .voya-offerings__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Pagination

   The design has no paginator — the last row of cards runs straight into the
   footer — so this is built from the vocabulary it does establish: the filter
   chips for the numbers, the carousel's bare chevrons for previous and next.

   Built by view.js and removed when everything fits one page, so there is no
   empty nav landmark sitting in the accessibility tree.
   ========================================================================== */

.voya-offerings__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.voya-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Square, and never smaller than a comfortable target. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;

    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--deep-green);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wp--preset--color--deep-green);
    transition:
        background-color var(--voya-transition),
        border-color var(--voya-transition),
        color var(--voya-transition);
}

.voya-page:hover,
.voya-page:focus-visible {
    background-color: var(--wp--preset--color--green);
    border-color: var(--wp--preset--color--green);
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

/* Matches an active filter chip, so "where I am" reads the same in both rows. */
.voya-page.is-current {
    background-color: var(--wp--preset--color--deep-green);
    border-color: var(--wp--preset--color--deep-green);
    color: var(--wp--preset--color--white);
}

/* Previous and next borrow the carousel's bare chevron rather than a box. */
.voya-page--prev,
.voya-page--next {
    background-color: transparent;
    border-color: transparent;
    font-size: var(--wp--preset--font-size--x-large);
}

.voya-page--prev:hover,
.voya-page--next:hover,
.voya-page--prev:focus-visible,
.voya-page--next:focus-visible {
    background-color: transparent;
    border-color: transparent;
    color: var(--wp--preset--color--green);
}

/*
 * On the first and last page the arrow it replaces is absent; visibility
 * rather than display so it still holds its width and the numbers stay put
 * instead of sliding sideways as you page through.
 */
.voya-page--placeholder {
    visibility: hidden;
}

/* The ellipsis is a gap marker, not a control. */
.voya-page--gap {
    min-width: 1.5rem;
    background-color: transparent;
    border-color: transparent;
}

.voya-offerings__empty,
.voya-offerings__notice {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--wp--preset--color--deep-green);
}

/* ==========================================================================
   Card
   ========================================================================== */

.voya-offering-card {
    /* How far the card rises on hover, and so how deep the bar beneath it is.
       The design's hover state sits at y 628 against the default's 638, both
       300 x 445 — the card moves, it does not grow. */
    --voya-card-lift: 10px;

    background-color: var(--wp--preset--color--white);

    /* Nothing in a card is black. The site sets black as its body colour,
       so the card resets it once here and everything inside inherits —
       rather than each label and value naming a colour of its own. */
    color: var(--wp--preset--color--deep-green);

    border-top: 5px solid var(--voya-card-accent, var(--wp--preset--color--deep-green));

    /* The hover bar, already in the layout but wearing the card's own white,
       so colouring it in changes nothing about the card's height and the row
       below never shifts. */
    border-bottom: 6px solid var(--wp--preset--color--white);

    display: flex;
    transition:
        transform var(--voya-transition),
        border-bottom-color var(--voya-transition),
        box-shadow var(--voya-transition);
}

/* :focus-within as well as :hover, so tabbing to Order Sample gives the same
   feedback a mouse gets. */
.voya-offering-card:hover,
.voya-offering-card:focus-within {
    transform: translateY(calc(-1 * var(--voya-card-lift)));
    border-bottom-color: var(--wp--preset--color--deep-green);
    box-shadow: 3px 3px 10px #0000001a;
}

/* The rise is decorative; the bar alone still marks the card. */
@media (prefers-reduced-motion: reduce) {

    .voya-offering-card {
        transition: none;
    }

    .voya-offering-card:hover,
    .voya-offering-card:focus-within {
        transform: none;
    }
}

.voya-offering-card__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
}

.voya-offering-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.voya-offering-card__badge {
    display: inline-block;
    margin: 0 0 0.5rem;
    padding: 0.15rem 0.5rem;
    background-color: var(--voya-card-accent, var(--wp--preset--color--deep-green));
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4;
}

.voya-offering-card__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1.1;
    text-transform: uppercase;
}

.voya-offering-card__origin {
    margin: 0.25rem 0 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--wp--preset--color--deep-green);
}

.voya-offering-card__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
}

/*
 * Specification rows: label left, value right. The design rules off the list
 * as a whole — one dashed line between Crop and the tasting notes — rather
 * than separating each row.
 *
 * Drawn as a gradient, not border-bottom: the design's dash is 6 on, 6 off
 * (Line 193, 1px #C8D1D0), and CSS dashed gives no control over that, drawing
 * roughly 2px dashes at this width.
 *
 * The list only renders when it has rows, so a card with no specs at all
 * cannot end up with a stray rule.
 */
.voya-offering-card__specs {
    margin: 1rem 0 0;
    padding-bottom: 0.5rem;
    background-image: repeating-linear-gradient(
        to right,
        #c8d1d0 0 6px,
        transparent 6px 12px
    );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
}

.voya-offering-card__spec {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
}

.voya-offering-card__spec-label {
    font-size: var(--wp--preset--font-size--small);
}

.voya-offering-card__spec-value {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-align: right;
}

.voya-offering-card__more {
    margin-top: 0.75rem;
    font-size: var(--wp--preset--font-size--small);
}

.voya-offering-card__more p {
    margin: 0 0 0.5rem;
}

.voya-offering-card__notes {
    margin-top: 0.75rem;
}

.voya-offering-card__notes-label {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}

/*
 * Burgundy on every card, not the category accent: the design keeps the
 * tasting notes constant so they read as one thing across the grid, whatever
 * colour the card's category badge and top rule are wearing.
 */
.voya-offering-card__notes-list {
    margin: 0.15rem 0 0;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    color: var(--wp--preset--color--burgundy);
}

/*
 * Footer pinned to the bottom so cards of differing height line up.
 *
 * The price and the sample buttons are stacked, not set side by side. Sharing
 * a row made the price's width depend on the buttons' — and the buttons grow
 * when a sample is in the basket, since the chosen one gains a tick — so a
 * long price folded onto a second line exactly when someone had just pressed
 * a button beside it. Stacked, the price has the card's whole width and the
 * layout stops depending on the state of anything next to it.
 */
.voya-offering-card__foot {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.voya-offering-card__price {
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* The qualifier rides on the price line, aligned to its baseline rather than
   its box, so the two sit on the same line however their sizes differ. */
.voya-offering-card__price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Design: Barlow Condensed Bold, 20px, #244844. */
.voya-offering-card__price-value {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    color: var(--wp--preset--color--deep-green);
}

/* Design: Barlow Condensed Regular, 15px, #244844. */
.voya-offering-card__price-unit,
.voya-offering-card__price-note {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--wp--preset--color--deep-green);
}

/* Smaller and quieter than the sack size: it qualifies the figure it sits
   beside rather than describing what is being bought, and it must not
   compete with the price for the eye. */
.voya-offering-card__price-note {
    font-size: 0.8125rem;
    opacity: 0.7;
}

.voya-offering-card__order {
    flex: 0 0 auto;
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--burgundy);
    padding: 0.35rem 0.75rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--burgundy);
    transition: background-color var(--voya-transition), color var(--voya-transition);
}

/*
 * The in-basket state is set in style.css, which loads after this file, so at
 * equal specificity it would win and a button already in the basket would keep
 * its deep green on hover. Naming .is-in-basket here out-specifies it, so every
 * order button shows the burgundy hover — the cue that pressing a button
 * already in the basket will take it back out.
 */
.voya-offering-card__order:hover,
.voya-offering-card__order:focus-visible,
.voya-offering-card__order.is-in-basket:hover,
.voya-offering-card__order.is-in-basket:focus-visible {
    background-color: var(--wp--preset--color--burgundy);
    color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Editor placeholder
   ========================================================================== */

.voya-offerings-placeholder {
    border: 1px dashed var(--wp--preset--color--deep-green, #244844);
    padding: 1.5rem;
    text-align: center;
}

.voya-offerings-placeholder__title {
    margin: 0 0 0.25rem;
    font-weight: 700;
    text-transform: uppercase;
}

.voya-offerings-placeholder__body {
    margin: 0;
    font-size: 0.875rem;
}