/* =====================================================================
 *  Article winery row: fits common/winery-carousel into the article
 *  content column.
 *
 *  Scoped entirely to .iw-awr so the shared carousel keeps its existing
 *  behaviour on the region, winery, denomination and trip pages. Every
 *  override here goes through the component's own custom properties or a
 *  .iw-awr-prefixed selector; the component file is not modified.
 *
 *  Two problems this solves:
 *   1. .wcc-container ships `padding: 0 32px` for full-bleed page sections,
 *      which pushed the cards 32px right of the article's body text.
 *   2. .wcc-slot is hard-coded to `flex: 0 0 calc((100% - 32px) / 3)` with a
 *      320px floor, so a row of 1 or 2 wineries left dead space in the column
 *      (measured: 483px empty for one card, 147px for two, in an 859px column).
 *
 *  Spec: docs/specs/2026-07-22-article-winery-rows.md
 * ===================================================================== */

.iw-awr {
    /* Align the rail with the body copy and drop the section's page-level
       vertical rhythm; the block wrapper owns spacing inside an article. */
    --wcc-section-padding: 0;
    --wcc-container-padding: 0;
    --wcc-container-max-width: none;
}

/* The custom property alone is not enough: the component's own
   `@media (max-width: 540px)` rule assigns `padding: 0 20px` literally, which
   replaces the var() and pushed the cards 20px right of the text on mobile.
   This selector (0,2,0) outranks it at every breakpoint. */
.iw-awr .wcc-container { padding: 0; max-width: none; }

/* The rail's -4px side margin exists to let card shadows bleed; keep the
   optical edge flush with the paragraph text above it. */
.iw-awr .wcc-rail { padding-left: 4px; padding-right: 4px; margin-left: -4px; margin-right: -4px; }

/* ── Rows that cannot justify a carousel: fill the column instead ────── */

.iw-awr--n1 .wcc-slot,
.iw-awr--n2 .wcc-slot { min-width: 0; max-width: 100%; }

.iw-awr--n1 .wcc-slot { flex: 1 1 100%; }
.iw-awr--n2 .wcc-slot { flex: 1 1 calc((100% - 16px) / 2); }

/* Nothing overflows, so there is no scroll affordance and no arrows. */
.iw-awr--n1 .wcc-rail,
.iw-awr--n2 .wcc-rail { overflow-x: visible; scroll-snap-type: none; }
.iw-awr--n1 .wcc-nav-btn,
.iw-awr--n2 .wcc-nav-btn { display: none !important; }

/* A lone card stretched to the full column would render a 4:3 image about
   640px tall. Lay it out horizontally instead so it fills the width without
   the artwork taking over. */
.iw-awr--n1 .wcc-card { flex-direction: row; align-items: stretch; }
.iw-awr--n1 .wcc-art  { flex: 0 0 42%; aspect-ratio: 4 / 3; }
.iw-awr--n1 .wcc-body { flex: 1 1 auto; justify-content: center; }

/* ── Mobile: exactly one card visible, slider only when there is more ── */

@media (max-width: 820px) {
    .iw-awr .wcc-slot,
    .iw-awr--n1 .wcc-slot,
    .iw-awr--n2 .wcc-slot {
        flex: 0 0 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Back to the stacked card; the horizontal split is a desktop treatment. */
    .iw-awr--n1 .wcc-card { flex-direction: column; }
    .iw-awr--n1 .wcc-art  { flex: none; aspect-ratio: 4 / 3; }

    /* One winery has nothing to swipe through; two or more do. */
    .iw-awr--n1 .wcc-rail { overflow-x: visible; scroll-snap-type: none; }
    .iw-awr--n2 .wcc-rail,
    .iw-awr--nmany .wcc-rail { overflow-x: auto; scroll-snap-type: x mandatory; }

    /* Swipe is the affordance on touch; the arrows are desktop-only. */
    .iw-awr .wcc-nav-btn { display: none !important; }
}