/* ===========================================================================
 * WINEMAKER — every rule that belongs to the winemaker pages.
 *
 * Two pages are covered:
 *   templates/winemakers.php          the listing
 *   templates/single_winemaker.php    one winemaker (body has .winemaker-page,
 *                                     added by inc/winemaker-permalink.php)
 *
 * Both reuse markup built for other pages — the tasting place cards and the
 * search strip of the events page — so most of what follows is the
 * page-scoped half of a shared component. The listing section carries
 * `np-products tasting-places winemakers`, which is what pulls in the header,
 * grid and vignette rules of tasting_places.css; only the winemaker deltas
 * live here.
 *
 * Enqueued in functions.php as `winemaker-wiize`, after tasting_places.css and
 * wine_partner.css, because that is what these overrides are layered on.
 * ========================================================================= */


/* ===========================================================================
 * LISTING — section + header
 * ========================================================================= */

/* The heading reads as a section title like "Top Product", not as the 60px
   black display title tasting_places.css gives .tp-title. */
.winemakers .tp-title {
    font-size: 44px;
    letter-spacing: 1px;
    color: #8A765C;
}

@media (max-width: 767px) {
    .winemakers .tp-title {
        font-size: 32px;
    }
}


/* ===========================================================================
 * LISTING — search button
 *
 * The `.ecs-*` search markup is shared with the events page, where the button
 * is blue (#007BA5, event.css). `.winemakers-search` on the section is what
 * keeps this colour to the winemakers page — the class exists for exactly this.
 * ========================================================================= */

.winemakers-search .ecs-search-btn {
    background: #590232;
}

.winemakers-search .ecs-search-btn:hover,
.winemakers-search .ecs-search-btn:focus-visible {
    background: #400124;
}


/* ===========================================================================
 * LISTING — "By filter" strip
 *
 * template-parts/winemaker_filters.php. Region and Canton open a panel and
 * filter; the other six are buttons only, for want of a data source. They are
 * NOT greyed out on purpose: a chip that looks dead invites a bug report, a
 * chip that looks normal reads as a design still being filled in.
 *
 * Three states, and they are independent:
 *   .is-open    the chip's panel is showing
 *   .is-active  a term of this filter is chosen (brown, as in the mockup)
 *   neither     the default — nothing is selected when the page opens
 *
 * Not scoped to .winemakers: the strip sits inside .events-cat-section, above
 * that wrapper. The .wm- prefix is what keeps it to this page.
 * ========================================================================= */

.wm-filters {
    margin: 32px 0 0;
}

.wm-filters__title {
    margin: 0 0 16px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 26px;
    color: #211A15;
}

/* The row fills the full width: eight equal columns, as in the mockup.
 *
 * A grid rather than flex with `flex:1` — equal COLUMNS make every chip the
 * same width whatever its label, while flex-grow distributes the leftover
 * space and would leave "Region" narrow and "Philosophy" wide. `1fr` is
 * `minmax(auto, 1fr)`, so a column never shrinks below its own text; the
 * breakpoints below drop to fewer columns before that can happen. */
.wm-filters__list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

.wm-filters__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Horizontal padding gives way before the label does: the columns are
       equal, so the widest label ("PHILOSOPHY") decides how much room is left
       for the padding of all eight. */
    padding: 10px clamp(8px, 1.4vw, 22px);
    border: 1px solid #d8d2c8;
    border-radius: 3px;
    background: transparent;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5f574e;
    cursor: pointer;
    /* One line, always. Without this "GRAPES A–Z" breaks after the en dash —
       a dash is a break opportunity, so the label wrapped while the button
       still had room. nowrap also raises the column's min-content width, so
       the grid widens the columns to fit the labels instead of squeezing
       them. */
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.wm-filters__btn:hover,
.wm-filters__btn:focus-visible {
    border-color: #8A765C;
    color: #8A765C;
}

/* Filled brown, as in the mockup — both while the panel is open and once a
   term is chosen. Two classes, one look: the chip reads as "this is the filter
   you are working in", whether that is because it is open or because it is
   filtering. */
.wm-filters__btn.is-open,
.wm-filters__btn.is-active {
    background: #8A765C;
    border-color: #8A765C;
    color: #fff;
}


/* ===========================================================================
 * LISTING — the drop-down panel of one filter
 *
 * Slides down from under the chip row. The height is animated through an inline
 * max-height the script sets from scrollHeight — `height: auto` cannot be
 * transitioned, and a hard-coded max-height either clips a long list or makes
 * the animation crawl on a short one.
 *
 * `hidden` is what keeps a closed panel out of the layout and out of the
 * accessibility tree; the script removes it before the slide and puts it back
 * after. Hence the !important below: `[hidden]` must not lose to `display:grid`
 * while the panel is closed.
 * ========================================================================= */

.wm-filters__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
}

.wm-filters__panel[hidden] {
    display: none !important;
}

/* Three columns, as in the design. The inner element carries the padding so
   that the panel itself can animate from a true zero height. */
.wm-filters__panel-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 24px;
    padding: 20px 0 4px;
}

.wm-filters__term {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
    text-align: left;
    color: #5f574e;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.wm-filters__term:hover,
.wm-filters__term:focus-visible {
    background: #efeae6;
    color: #211A15;
}

/* The chosen term — filled brown, matching its chip. */
.wm-filters__term.is-active {
    background: #8A765C;
    border-color: #8A765C;
    color: #fff;
}

@media (max-width: 900px) {
    .wm-filters__panel-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .wm-filters__panel-inner {
        grid-template-columns: 1fr;
    }
}


/* ===========================================================================
 * LISTING — "By filter: Region Vaud"
 *
 * Sits under the strip, above the results. Rendered server-side and replaced
 * wholesale by the script, so both paths print the same thing.
 * ========================================================================= */

.wm-filters__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 20px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    color: #5f574e;
}

.wm-filters__summary[hidden] {
    display: none;
}

.wm-filters__summary-item + .wm-filters__summary-item {
    margin-left: 12px;
}

.wm-filters__summary-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 600;
}

.wm-filters__summary-value {
    color: #211A15;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wm-filters__summary-clear {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: underline;
    color: #8A765C;
    cursor: pointer;
}

.wm-filters__summary-clear:hover {
    color: #590232;
}


/* ===========================================================================
 * LISTING — the grid while a filter request is in flight
 *
 * Only a fade: the cards are replaced in one assignment, so there is nothing to
 * gain from a spinner, and keeping the old grid in place avoids the page
 * jumping to the footer and back.
 * ========================================================================= */

[data-wm-grid] {
    transition: opacity .15s ease;
}

[data-wm-grid].is-loading {
    opacity: .45;
    pointer-events: none;
}

/* Fewer columns as the row runs out of room, so the chips keep filling the
   width instead of squeezing the longest label onto two lines. */
@media (max-width: 1200px) {
    .wm-filters__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .wm-filters__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .wm-filters__btn {
        padding: 8px 10px;
        letter-spacing: 1px;
        font-size: 11px;
    }
}


/* ===========================================================================
 * WINEMAKER CARD
 *
 * The markup comes from wiize_render_winemaker_card()
 * (wiize_package/inc/render-cards.php). These rules are scoped to the card's
 * own modifier, not to .winemakers, because they describe the card itself —
 * so it looks the same in the listing, in the Last seen carousel and in the
 * region / canton blocks.
 * ========================================================================= */

/* Top images are photos, so they fill the frame rather than fit inside it —
   the same choice the place cards make. */
.np-other-selection-item--winemaker .np-focus-grape-card-image img {
    object-fit: cover;
    display: block;
}

/* --- Rating badge ------------------------------------------------------
 *
 * Top-left of the photo, over the image. Markup comes from
 * wiize_render_winemaker_card(); the numbers are the mockup's placeholder
 * 4.6 (22) until there is a reviews table (see the `wiize_winemaker_rating`
 * filter there).
 *
 * `.np-focus-grape-card-image` is the positioning context — it already holds
 * the absolutely placed card title, so no `position: relative` is added here:
 * changing it would move the title too. */
.np-other-selection-item--winemaker .np-focus-grape-card-rating {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    /* Translucent, so the photo shows through — the blur is what keeps the
       numbers readable over a busy image without going back to solid white.
       Browsers without backdrop-filter just get the flat 72% white. */
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #2b2b2b;
    white-space: nowrap;
}

.np-other-selection-item--winemaker .np-focus-grape-card-star {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: #7A1231; /* the wine red of the Search button */
}

.np-other-selection-item--winemaker .np-focus-grape-card-rating strong {
    font-weight: 600;
}

.np-other-selection-item--winemaker .np-focus-grape-card-rating-count {
    color: #5f574e;
}

/* --- Favourite heart ---------------------------------------------------
 *
 * Top-right of the photo, mirroring the rating badge. Markup only for now —
 * see the comment in wiize_render_winemaker_card().
 *
 * No plate behind it: the icon sits straight on the photo, so a drop-shadow is
 * what keeps it visible over a light image — the same job the title's
 * text-shadow does. The pressed state is styled already, so switching the
 * button on later needs no CSS. */
.np-other-selection-item--winemaker .np-focus-grape-card-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
    transition: transform .15s ease;
}

/* `height: auto` — the icon is 12x10, so a square box would squash it. */
.np-other-selection-item--winemaker .np-focus-grape-card-fav svg {
    width: 22px;
    height: auto;
    display: block;
}

.np-other-selection-item--winemaker .np-focus-grape-card-fav:hover,
.np-other-selection-item--winemaker .np-focus-grape-card-fav:focus-visible {
    transform: scale(1.1);
}

/* Saved: the heart fills with the wine red of the star.
   A CSS `fill` outweighs the `fill="#C7BDB0"` attribute on the path, and the
   `opacity="0.8"` attribute is dropped the same way — so the pressed heart is
   solid, without a second icon in the markup. */
.np-other-selection-item--winemaker .np-focus-grape-card-fav[aria-pressed="true"] svg path {
    fill: #7A1231;
    opacity: 1;
}

/* City / vineyard-size pills: left aligned.
   `body` is needed to outweigh `body .np-focus-grape-card-stats li` in
   focus_month.css, which centres them — a long city name then wraps to two
   centred lines and reads as a heading instead of a tag. */
body .np-other-selection-item--winemaker .np-focus-grape-card-stats--pills {
    justify-content: flex-start;
}

body .np-other-selection-item--winemaker .np-focus-grape-card-stats--pills li {
    text-align: left;
}

/* The two buttons sit on one row: "Wines (n)" on the left, "Details" next to
   it. The disabled state is a span, not a link — a winemaker with no wines
   still shows the count. */
.np-other-selection-item--winemaker .np-focus-grape-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.np-other-selection-item--winemaker .np-focus-grape-card-btn--wines.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* DETAILS — the card's own burgundy, one step darker than the #A6032F
   focus_month.css gives every other card. `body` outweighs that base rule;
   the hover is matched so the button does not jump back to #A6032F. */
body .np-other-selection-item--winemaker .np-focus-grape-card-btn--details,
body .np-other-selection-item--winemaker .np-focus-grape-card-btn--details:hover,
body .np-other-selection-item--winemaker .np-focus-grape-card-btn--details:focus-visible {
    background: #590232;
    border-color: #590232;
    color: #fff !important;
}


/* ===========================================================================
 * LISTING — empty state
 * ========================================================================= */

.winemakers .np-products-empty {
    grid-column: 1 / -1;
    margin: 40px 0;
    text-align: center;
    color: #5f574e;
}


/* ===========================================================================
 * LAST SEEN — the winemaker variant of the block
 *
 * Everything structural (the head, the track, the arrows, how many cards fit)
 * comes from the `.np-last-seen` rules in search.css. Only the card inside a
 * slide differs: that file sizes `.np-focus-wine-card`, the product card, and
 * a winemaker card is `.np-focus-grape-card`.
 * ========================================================================= */

.np-last-seen__slide > .np-focus-grape-card {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* ===========================================================================
 * SINGLE — /winemaker/{slug}/
 *
 * templates/single_winemaker.php reuses the place / restaurant markup, so most
 * of what follows is the page-scoped half of a shared component: the part those
 * pages get from THEIR own body classes, which a winemaker page does not have.
 * These mirror the wine partner block in wine_partner.css almost line for line
 * — same hero, same flag, same logo — because both pages were built from
 * taxonomy-place.php.
 *
 * The body class comes from inc/winemaker-permalink.php, so nothing here leaks
 * onto another page.
 * ========================================================================= */

/* --- Undoing the author-archive legacy rules ---------------------------
 *
 * /winemaker/{slug}/ is resolved ONTO THE AUTHOR ARCHIVE (see
 * inc/winemaker-permalink.php), so WordPress puts `archive author author-{id}`
 * on <body> — and the theme carries two rules written long ago for the old
 * author box, in custom.css and again in style.css:
 *
 *   .author p   { float: left; text-transform: uppercase; color: #707070;
 *                 font-family: "Red Hat Display"; font-size: 16px;
 *                 margin-top: 20px; line-height: 20px }
 *   .author img { float: left; margin-right: 20px }
 *
 * They land on EVERY paragraph and image of this page. That is what pushed the
 * hero title sideways — a floated <p> sat before it — turned the winery name
 * into grey uppercase Red Hat, and spread the social icons apart.
 *
 * Undone here and ONLY inside .winemaker-page, so real author archives and
 * every other page keep those rules exactly as they were. `body.winemaker-page p`
 * scores 0,1,2 against their 0,1,1 — the smallest thing that wins.
 *
 * line-height is put back to style.css's own `p` value rather than dropped, so
 * a paragraph here reads like a paragraph anywhere else on the site. */

body.winemaker-page p {
    float: none;
    text-transform: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin-top: 0;
    line-height: 1.6em;
}

body.winemaker-page img {
    float: none;
    margin-right: 0;
}


/* Scroll offset for the two jump-link targets above the gallery — the same
   110px the place and restaurant anchors use. */
#winemaker-wines,
#winemaker-words {
    scroll-margin-top: 110px;
}


/* --- Hero --------------------------------------------------------------- */

/* .event-hero__wrap IS .content_wrap, and style.css gives that
   overflow: hidden — which would cut off the overhanging half of the flag. */
.winemaker-page .event-hero__wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    overflow: visible;
}

.winemaker-page .event-hero__main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* "CANTON – AOC …" above the title.
 *
 * Its own class rather than .event-hero__meta: that one is Cormorant italic
 * 32px in event.css — the title's own face — which makes the line read as a
 * second heading. */
.winemaker-page .winemaker-hero__meta {
    margin: 0 0 4px;
    padding: 0;
    color: #6B5539;
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* The person's name under the winery name. Same Cormorant italic as the title,
   a third of the size — as in the mockup. */
.winemaker-page .winemaker-hero__person {
    margin: 2px 0 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: #6B5539;
    margin-bottom:20px;
}

/* The winery name. event.css paints .event-hero__name in --event-text (near
   black); on this page the whole title group is the brown of the design. */
.winemaker-page .event-hero__name {
    color: #6B5539;
}

/* Rating pill. The hero bar is a frosted panel over a photo, so the badge needs
   its own ground to stay legible — #c6c3b5, one step darker than the bar, the
   same trick tasting_places.css plays on the restaurant page. */
.winemaker-page .event-hero__rating {
    padding: 3px 12px;
    border-radius: 3px;
    background: #c6c3b5;
}

/* Canton flag — straddles the top edge of the frosted bar, half over the photo
   and half over the bar, as on the restaurant and wine partner pages.

   The -26px is .event-hero__bar's padding-top (event.css): .event-hero__main is
   the first flex item of a flex-end wrap, so its top sits that far below the
   bar's edge, and translateY(-50%) then puts the flag's centre on that edge.
   Keep the two in sync if that padding changes. */
.winemaker-page .event-hero__flag {
    position: absolute;
    left: 0;
    top: -26px;
    z-index: 2;
    display: block;
    width: 54px;
    height: auto;
    margin: 0;
    transform: translateY(-50%) rotate(-7deg);
    transform-origin: center center;
    will-change: transform;        /* keeps the edges smooth while rotated */
}

/* Logo, right side of the hero. Contained rather than cropped: these are
   wordmarks of very different proportions and a crop would eat letters. */
.winemaker-page .event-hero__logo {
    flex: 0 0 auto;
    max-width: 200px;
    margin: 0;
}

.winemaker-page .event-hero__logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
}


/* --- The three jump links above the gallery ----------------------------
 *
 * Wine selection / The winemaker in 4 words / In the news. event.css paints
 * .event-details__link in the blue of the event and place pages; here they are
 * the wine red of the design. The hover keeps the same colour — these are the
 * page's own navigation, not links out. */

.winemaker-page .event-details__link {
    color: #590232;
}

.winemaker-page .event-details__link:hover,
.winemaker-page .event-details__link:focus-visible {
    color: #590232;
}


/* --- Details: the facts list -------------------------------------------
 *
 * "400 Ha", "80 000 bottles", the specialties. The label is the small brown
 * caps line, the value the text after it — the place page's contact list with
 * the same shape, which is why the spacing matches the rest of that column. */

.winemaker-page .winemaker-details__facts {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #2b2b2b;
}

/* One row per fact with a hairline under it — the rules in the mockup. The
   last row has none: the Address heading's own divider follows it. */
.winemaker-page .winemaker-details__fact {
    padding: 10px 0;
    border-bottom: 1px solid #ddd6cd;
}

.winemaker-page .winemaker-details__fact:last-child {
    border-bottom: 0;
}

/* The bold brown of the design. It marks the "Specialties:" label on the third
   row, and on the first two — which have no label — the value itself, because
   there the whole line is set that way. Both cases use this one class, so the
   look is defined once (see the template's markup). */
.winemaker-page .winemaker-details__fact-label {
    margin-right: 4px;
    font-weight: 600;
    color: #590232;
}

/* A row whose column is empty shows an em-dash. Muted, so it reads as "nothing
   entered yet" rather than as content — whichever of the two spans holds it. */
.winemaker-page .winemaker-details__fact.is-empty .winemaker-details__fact-value,
.winemaker-page .winemaker-details__fact.is-empty .winemaker-details__fact-label {
    color: #a39c93;
}

/* …except the label of the specialties row, which is a real label and stays
   brown even when there is nothing after it. */
.winemaker-page .winemaker-details__fact--specialties.is-empty .winemaker-details__fact-label {
    color: #590232;
}


/* --- The winemaker's story --------------------------------------------
 *
 * The `description` column on a full-bleed wine-red band under the map.
 *
 * The <p> rules need `.winemaker-page` in front of them to outweigh the
 * author-archive reset further up this file (`body.winemaker-page p`, 0,1,2):
 * that one sends font-family, size, colour and text-transform back to
 * inherited values, which is right for every other paragraph on the page and
 * wrong for this one. */

.winemaker-page .winemaker-story {
    background: #590232;
    padding-block: 72px;
}

/* Long uppercase lines are hard to scan at full site width, so the text keeps
   its own measure inside the band. */
.winemaker-page .winemaker-story__inner {
    max-width: 1240px;
}

.winemaker-page .winemaker-story p {
    margin: 0 em;
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #F2EBE3;
}

.winemaker-page .winemaker-story p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .winemaker-page .winemaker-story {
        padding-block: 40px;
    }

    .winemaker-page .winemaker-story p {
        font-size: 17px;
        letter-spacing: .02em;
    }
}


/* --- "In 4 words" ------------------------------------------------------- */

.winemaker-page .winemaker-section__heading {
    margin: 0 0 28px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 40px;
    color: #8A765C;
}

/* Asymmetric on purpose: 64px of air above, separating the words from the
 * "Selected by" block, but only 16px below — in the design the gallery sits
 * almost against the row of words, and the gallery's own top margin adds the
 * other 16. Together, 32px. */
.winemaker-page .winemaker-words {
    margin: 64px auto 16px;
}

/* Four equal columns rather than a centred flex row: in the mockup the words
 * are spread across the page, each sitting in its own quarter, not bunched in
 * the middle. The list is narrower than the 1240px content wrap so the outer
 * two land where the mockup puts them instead of hugging the edges. */
.winemaker-page .winemaker-words__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.winemaker-page .winemaker-words__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8A765C;
    text-align: center;
}

/* A fixed 70px-tall box, filled or not, so the four labels stay on one line
 * whatever mix of uploaded and default icons the row ends up with. The default
 * SVGs are 60-66 wide and up to 87 tall, hence max-height rather than a square:
 * each one keeps its own proportions inside the box. */
.winemaker-page .winemaker-words__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 70px;
}

.winemaker-page .winemaker-words__item img {
    width: auto;
    height: auto;
    max-width: 80px;
    max-height: 70px;
    object-fit: contain;
}

/* A slot still waiting for its word ("WORD 1"). Same size and weight as a real
 * one — the mockup shows the four alike — only a shade lighter, so a half
 * filled profile is visible to an editor without looking broken to a visitor. */
.winemaker-page .winemaker-words__item.is-empty {
    color: #B8AC9B;
}


/* --- Wine selection ----------------------------------------------------- */

.winemaker-page .winemaker-wines {
    margin: 64px auto;
}

/* The heading is an <h2> here, not the 60px .tp-title of a listing page. */
.winemaker-page .winemaker-wines .tp-title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: 1px;
    color: #8A765C;
}

/* Five wines to a row, all five cells a wine — no vignette in this block.
 *
 * product.css gives .product-cards-grid three columns and only widens it to
 * five inside a single product page (.product-template-default), which this is
 * not; the search page does the same thing for itself
 * (.np-search-results .product-cards-grid in search.css). */
.winemaker-page .winemaker-wines .product-cards-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1200px) {
    .winemaker-page .winemaker-wines .product-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .winemaker-page .winemaker-wines .product-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .winemaker-page .winemaker-wines .product-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ===========================================================================
 * SINGLE — responsive
 * ========================================================================= */

@media (max-width: 900px) {
    .winemaker-page .event-hero__logo {
        max-width: 150px;
    }
}

@media (max-width: 767px) {
    .winemaker-page .winemaker-hero__meta {
        font-size: 16px;
    }

    .winemaker-page .winemaker-hero__person {
        font-size: 18px;
    }

    .winemaker-page .winemaker-section__heading,
    .winemaker-page .winemaker-wines .tp-title {
        font-size: 28px;
    }

    .winemaker-page .winemaker-words__list {
        gap: 24px;
    }
}


/* --- Map marker --------------------------------------------------------
 *
 * The wine-grower pin from the mockup, injected as inline SVG by the template
 * (65x100, #590232) instead of the .png background event.css gives the event
 * and place maps. The background has to be cleared explicitly — the shared rule
 * sets background-image / -size, and a leftover would print behind the SVG. */

.winemaker-page .event-map__marker {
    width: 65px;
    height: 100px;
    background: none;
    line-height: 0;
}

/* No drop-shadow: the pin is a flat two-colour mark in the design, and a
   shadow made it read as a different, softer icon than the one supplied. */
.winemaker-page .event-map__marker svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* ===========================================================================
 * SINGLE — gallery mosaic
 *
 * The block itself is the shared gallery engine's grid branch
 * (wiize_gallery_render_frontend(), plugin inc/helpers-gallery.php): a
 * <section class="article-gallery wiize-gallery"> holding
 * <a class="wiize-gallery__item glightbox"> cells. single.css lays those out in
 * three even columns; the winemaker page wants the mockup's mosaic instead, and
 * that is purely a matter of column count and two spans, so it is done here
 * rather than by generating different markup.
 *
 * The pattern is a repeating block of ELEVEN images over three rows:
 *
 *   +----+----+--------------+        1  2  square
 *   | 1  | 2  |      3       |        3     wide  (3 columns)
 *   +----+----+----+----+----+        4     tall  (2 rows)
 *   |    | 5  | 6  |    | 8  |        5  6  square
 *   | 4  +----+----+ 7  +----+        7     tall  (2 rows)
 *   |    | 9  | 10 |    | 11 |        8        square
 *   +----+----+----+----+----+        9 10 11  square
 *
 * Only the wide and the tall cells are declared; CSS grid auto-placement puts
 * everything else where the picture shows, and `dense` lets 9, 10 and 11 slide
 * under the squares instead of starting a fourth row. A twelfth image begins
 * the block again.
 *
 * Row height is derived from the column width instead of being fixed, so the
 * square cells stay square at every width: the content wrap is 1240px, minus
 * four gaps, over five columns.
 * ========================================================================= */

/* 16px up to the "in 4 words" row above (which contributes the other 16), and
 * 32 down to the Tasting place section.
 *
 * The bottom value has to be cut here, not only on the section below: adjoining
 * vertical margins collapse to the LARGER of the two, so leaving 64 here would
 * have made the section's own smaller top margin count for nothing. */
.winemaker-page .article-gallery {
    margin-block: 16px 32px;
}

.winemaker-page .wiize-gallery__grid {
    --wm-gallery-gap: 4px;
    --wm-gallery-cols: 5;
    --wm-gallery-row: calc(
        (min(100vw - 32px, 1240px) - (var(--wm-gallery-cols) - 1) * var(--wm-gallery-gap))
        / var(--wm-gallery-cols)
    );

    display: grid;
    grid-template-columns: repeat(var(--wm-gallery-cols), minmax(0, 1fr));
    grid-auto-rows: var(--wm-gallery-row);
    grid-auto-flow: row dense;
    gap: var(--wm-gallery-gap);
}

/* Three things are cleared here before the rules below apply.
 *
 * `aspect-ratio` is the one that matters: single.css gives every
 * .wiize-gallery__item a 4/3 box, which is right for its own three-column grid
 * where the rows are sized by the cells. Here the rows are set by
 * grid-auto-rows, so a 4/3 cell came out shorter than its row and left a white
 * strip under every image in the first columns. With `auto` the cell stretches
 * to the row, which is what makes the mosaic a mosaic.
 *
 * The other two undo the engine's own rhythm: it marks every third cell of five
 * as tall, and this page counts in elevens. */
.winemaker-page .wiize-gallery__item,
.winemaker-page .wiize-gallery__item--tall {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: auto;
    overflow: hidden;
    display: block;
}

/* 3rd of each eleven — the panorama. */
.winemaker-page .wiize-gallery__item:nth-child(11n + 3) {
    grid-column: span 3;
}

/* 4th and 7th — the two full-height cells. */
.winemaker-page .wiize-gallery__item:nth-child(11n + 4),
.winemaker-page .wiize-gallery__item:nth-child(11n + 7) {
    grid-row: span 2;
}

.winemaker-page .wiize-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Narrower screens: three columns, and the mosaic simplifies to one wide cell
 * per block of five. Keeping five columns would make each image a thumbnail. */
@media (max-width: 1100px) {
    .winemaker-page .wiize-gallery__grid {
        --wm-gallery-cols: 3;
    }

    .winemaker-page .wiize-gallery__item:nth-child(11n + 3),
    .winemaker-page .wiize-gallery__item:nth-child(11n + 4),
    .winemaker-page .wiize-gallery__item:nth-child(11n + 7) {
        grid-column: auto;
        grid-row: auto;
    }

    .winemaker-page .wiize-gallery__item:nth-child(5n + 1) {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .winemaker-page .wiize-gallery__grid {
        --wm-gallery-cols: 2;
    }

    .winemaker-page .wiize-gallery__item:nth-child(5n + 1) {
        grid-column: auto;
    }
}

/* Words: four columns is too tight for a phone. */
@media (max-width: 767px) {
    .winemaker-page .winemaker-words__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .winemaker-page .winemaker-words__item {
        font-size: 16px;
        gap: 20px;
    }
}


/* ===========================================================================
 * SINGLE — Tasting place
 *
 * Text left, card right, as in the mockup. The card is the shared place card
 * (np-focus-grape-card), whose own width comes from the grid it sits in, so the
 * right column is given a fixed track rather than a percentage — that keeps the
 * card the same size here as in the listings it was designed for.
 * ========================================================================= */

/* 32 up (collapsing against the gallery's own 32), the usual 72 down.
 *
 * padding-block: 0 as well — a generic rule gives every <section> 40px top and
 * bottom, which was adding a second, invisible 40 to both ends on top of the
 * margins. Spacing for this block is the margins alone. */
.winemaker-page .winemaker-place {
    margin-block: 32px 72px;
    padding-block: 0;
}

.winemaker-page .winemaker-place__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 64px;
    align-items: start;
}

/* The heading sits on the text column, not across both, so the mockup's left
 * alignment holds whether or not there is a card. */
.winemaker-page .winemaker-place__body .winemaker-section__heading {
    margin: 0 0 56px;
}

/* The lead: same caps-and-letterspacing treatment as the other intro lines of
 * the page, a size up from the body copy under it. */
.winemaker-page .winemaker-place__lead {
    margin: 0 0 24px;
    font-family: 'Work Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #211A15;
}

.winemaker-page .winemaker-place__text {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #211A15;
}

.winemaker-page .winemaker-place__text p {
    margin: 0 0 14px;
}

.winemaker-page .winemaker-place__text p:last-child {
    margin-bottom: 0;
}

/* The card column: let the card fill the track it was given. */
.winemaker-page .winemaker-place__card .np-focus-grape-card {
    width: 100%;
    max-width: 300px;
}

@media (max-width: 900px) {
    .winemaker-page .winemaker-place__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .winemaker-page .winemaker-place__body .winemaker-section__heading {
        margin-bottom: 32px;
    }

    .winemaker-page .winemaker-place__card .np-focus-grape-card {
        max-width: 340px;
    }
}

@media (max-width: 767px) {
    .winemaker-page .winemaker-place {
        margin-block: 48px;
    }

    .winemaker-page .winemaker-place__lead {
        font-size: 15px;
        letter-spacing: 1px;
    }
}


/* ===========================================================================
 * SINGLE — In the news
 *
 * Its own column classes on purpose. The news archive lays the same feed out
 * with `.gz-news-layout` (gazette-issue.css), but that grid is `1fr 300px` and
 * its aside is `position: sticky` with an 80px top margin — sized for a page
 * that is nothing but the feed. Reusing it here would drag that sticky
 * behaviour and the wrong column width onto a section in the middle of a
 * winemaker's page, and any later change to the archive would move this
 * section with it. So: `.winemaker-news__cols`, nothing shared, nothing to
 * collide with.
 *
 * The ROWS themselves are the archive's — wiize_gazette_list_item() markup,
 * styled by gazette-list-item.css, which functions.php loads on every page.
 * Only the two columns are defined here.
 *
 * 2fr / 1fr is the two-thirds and one-third of the mockup. The banner's own
 * 470x780 is its intrinsic size; in a 1240px content wrap the third column
 * lands near 400px, so the image scales down and keeps its ratio rather than
 * forcing the column wider than the design.
 * ========================================================================= */

.winemaker-page .winemaker-news {
    margin-block: 72px;
}

.winemaker-page .winemaker-news .winemaker-section__heading {
    margin: 0 0 48px;
}

.winemaker-page .winemaker-news__cols {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}

/* min-width: 0 so a long headline in a row cannot push the feed column past
   its track and squeeze the banner. */
.winemaker-page .winemaker-news__feed {
    min-width: 0;
}

.winemaker-page .winemaker-news__aside {
    min-width: 0;
}

.winemaker-page .wm-news-banner,
.winemaker-page .wm-news-banner__img {
    display: block;
    width: 100%;
    height: auto;
}

/* The banner is decoration here: on a narrow screen the feed is what matters,
   so it drops below rather than shrinking to a sliver beside it. */
@media (max-width: 900px) {
    .winemaker-page .winemaker-news__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .winemaker-page .winemaker-news__aside {
        max-width: 470px;
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .winemaker-page .winemaker-news {
        margin-block: 48px;
    }

    .winemaker-page .winemaker-news .winemaker-section__heading {
        margin-bottom: 28px;
    }
}


/* ===========================================================================
 * SINGLE — Top gallery
 *
 * The mosaic beside the Details column, under the three jump links. A DIFFERENT
 * set of images from the big mosaic lower down the page
 * (`winemaker_top_gallery` vs `winemaker_gallery`), filled in its own box in the
 * admin, and with a lightbox group of its own.
 *
 * Pattern, five images to a block:
 *
 *   +----+----+----+      1  2  square
 *   | 1  | 2  |    |      3     tall (2 rows, 3rd column)
 *   +----+----+ 3  |      4  5  square
 *   | 4  | 5  |    |
 *   +----+----+----+
 *
 * Only the tall cell is declared; grid auto-placement puts the other four where
 * the picture shows, and a sixth image starts the block again.
 *
 * Row height comes from the square cells' own aspect-ratio rather than a fixed
 * value, because this block sits in a column whose width depends on the page —
 * so the cells stay square at any width and the tall one stretches over both
 * rows to match.
 *
 * Its own class names, not the engine's `.wiize-gallery__item`: the block below
 * already drives those with an eleven-cell rhythm, and two patterns on one page
 * would fight over the same selectors.
 * ========================================================================= */

.winemaker-page .wm-top-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 32px;
}

.winemaker-page .wm-top-gallery__item {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
}

/* 3rd of each five — the tall one. No aspect-ratio: it stretches over the two
   rows the squares beside it define. */
.winemaker-page .wm-top-gallery__item:nth-child(5n + 3) {
    grid-row: span 2;
    aspect-ratio: auto;
}

.winemaker-page .wm-top-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ===========================================================================
 * SINGLE — the foot of the page
 *
 * Between the wide banner and the "Quizz your Wiize" pair the design leaves a
 * small gap; unstyled it came out at 138px, from three separate sources
 * stacking up: the banner section's own 40px bottom padding, its 56px bottom
 * margin, and the quiz block's 40px top padding.
 *
 * Both blocks are shared, so this is scoped to the winemaker page rather than
 * changed at the source — the gazette and focus pages that use them are built
 * around the wider spacing.
 * ========================================================================= */

.winemaker-page .np-focus-banner-section {
    /* padding-block, not just the bottom: the 40px above was pushing the banner
     * down away from the Featured content cards. 56px of margin is the gap
     * now, against 32 below. */
    padding-block: 0;
    margin-top: 56px;
    margin-bottom: 32px;
}

/* The banner is a 1200x366 slot — min-height plus align-items:center — so an
 * image shorter than 366px is letterboxed and the empty half of the slot reads
 * as yet more gap. Here the box fits its image instead. A full-height banner is
 * unaffected: the image itself is then 366 tall. */
.winemaker-page .np-focus-banner {
    min-height: 0;
    padding-block: 0;
}

.winemaker-page .np-g3-actions {
    padding-top: 0;
}


/* ===========================================================================
 * SINGLE — Selected by
 *
 * template-parts/selected-by.php is shared with the event and place pages, so
 * every rule here is prefixed .winemaker-page and nothing else moves. The
 * partial's own look is event.css / single.css; this only restates what the
 * winemaker design asks for differently:
 *
 *   label      was the body sans at 18px  -> Cormorant italic, brown
 *   body text  was sentence case, justified -> UPPERCASE, ragged right
 *   name       was the site link blue #007BA5 -> the page's brown
 *   followers  was 18px sentence case -> the small caps of the mockup
 * ========================================================================= */

/* "Selected by" */
.winemaker-page .event-selected__label {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    font-weight: 500;
    color: #8A765C;
}

/* The body copy. Uppercase is the whole character of this block in the design;
 * left-aligned rather than justified, because justification on short lines of
 * caps opens rivers of white between the words. */
.winemaker-page .event-selected__text p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.45;
    text-transform: uppercase;
    text-align: left;
    color: #6B5539;
}

/* The author. Blue is the site's link colour and reads as "clickable" here,
 * which it is not. */
.winemaker-page .event-selected__name {
    color: #8A765C;
}

.winemaker-page .event-selected__title {
    color: #8A765C;
}

/* The block's own air. It ships with 56px of padding above and 64 below, and
 * the sections either side add their margins on top of that — 120px above and
 * 128 below. The design is tighter, and tighter still underneath, where the
 * photo column already ends well below the text beside it and the white space
 * reads as a gap rather than as breathing room. */
.winemaker-page .event-selected {
    padding-top: 24px;
    padding-bottom: 16px;
}

/* The other half of the gap below: the "in 4 words" row's own top margin, and
 * the 40px of padding the generic <section> rule puts above its heading. The
 * bottom padding stays — it is what holds the row off the gallery under it. */
.winemaker-page .winemaker-words {
    margin-top: 24px;
    padding-top: 0;
}

/* "FOLLOWERS IN MY TASTE CIRCLE" — a caption in the design, not a heading. */
.winemaker-page .event-followers__label {
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8A765C;
}


/* ===========================================================================
 * ===========================================================================
 *  THE FOCUS HERO — /winemaker/{slug}/focus/
 *
 *  Markup: template-parts/focus-hero.php, the collage hero the "… of the
 *  moment" pages share (Wine Of The Month, Taste Of The Moment, On The Move
 *  next). The part prints no inline styles at all: everything, the background
 *  image included, is set here through the modifier class the part puts on the
 *  section — .focus-hero--winemaker. Another page adds its own block:
 *
 *      .focus-hero--wine {
 *          background-image: url('../img/wine_month_bg.png');
 *          aspect-ratio: 1440 / 1620;
 *          --focus-hero-accent: #ED1C24;
 *      }
 *
 *  The header of these pages is header-transparent.php, and
 *  header-transparent.css gives #header height:0 — the header floats over the
 *  hero and takes no space of its own. That is why the hero carries
 *  --focus-hero-top as padding: it is the room the header needs, not a margin.
 *
 *  Page template: templates/single_winemaker_focus.php
 * ===========================================================================
 * ========================================================================= */

.focus-hero {
	--focus-hero-top:        200px;           /* room for the floating header */
	--focus-hero-title-gap:  50px;            /* nav rule -> title, as in the design */
	--focus-hero-min-height: 620px;           /* a floor, not the height — see below */
	/* The background's own proportions, w / h. The section is sized from them
	   so the WHOLE collage is on screen: the artwork is one picture with people
	   in its lower half, and `cover` cropped that half away on any viewport
	   wider than the design. Every page redefines this next to its own
	   background-image — the default is the winemaker one below,
	   assets/img/winemaker_focus_bg.png at 1440 × 1486. */
	--focus-hero-ratio:      1440 / 1486;
	--focus-hero-bg:         #5A0B36;         /* shows while the image loads */
	--focus-hero-text:       #FFFFFF;
	--focus-hero-muted:      rgba(255, 255, 255, .72);
	--focus-hero-rule:       rgba(255, 255, 255, .35);
	--focus-hero-card-bg:    rgba(255, 255, 255, .10);
	--focus-hero-card-hover: rgba(255, 255, 255, .18);
	--focus-hero-stripe:     rgba(255, 255, 255, .16);

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--focus-hero-min-height);
	background-color: var(--focus-hero-bg);
	/* 100% auto, not cover: the image spans the full width and keeps its own
	   height, so nothing of it is ever cropped. --focus-hero-bg fills whatever
	   is left under it when the section is taller than the picture. */
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;
	color: var(--focus-hero-text);
}

/* The winemaker focus page's own skin: the collage, and the proportions that
   go with it. The path is relative to THIS file, i.e. assets/css/ -> ../img/.
   Swap the two together if the artwork is replaced. */
.focus-hero--winemaker {
	--focus-hero-ratio: 1440 / 1486;
	background-image: url('../img/winemaker_focus_bg.png');
}

/* From the tablet breakpoint up the section IS the picture: its height comes
   from the ratio above, so the collage ends exactly where the section does and
   the bar sits on its bottom edge, as in the design.

   Below that width the ratio would make the section shorter than its own
   content (the cards stack), so there the height is the content's and the
   image simply sits at the top of it. */
@media only screen and (min-width: 861px) {
	.focus-hero {
		aspect-ratio: var(--focus-hero-ratio);
	}
}

/* The top block holds the title, the date and the cards; the bar is pushed to
   the bottom edge by this one growing into the space between them. */
.focus-hero__top {
	flex: 1 1 auto;
	padding-top: var(--focus-hero-top);
}

/* .content_wrap is the site's own centred column; style.css gives it
   overflow:hidden, which is fine here — nothing overhangs. */
.focus-hero__wrap {
	position: relative;
	z-index: 1;
}


/* --- Title + date ---------------------------------------------------------- */

/* --focus-hero-top is the room the floating header needs; this margin is the
   gap the design leaves between the nav rule and the title under it. Kept
   apart from the padding on purpose — the header's height is a fact, this is a
   design decision, and they are tuned separately. */
.focus-hero__title {
	margin: var(--focus-hero-title-gap) 0 0;
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(38px, 4.4vw, 62px);
	line-height: 1.1;
	color: var(--focus-hero-text);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

/* "SEPTEMBER 2026" with a thin rule running out to both sides, as in the
   design. The rules are flex children so they take whatever width is left. */
.focus-hero__subtitle {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 18px 0 0;
}

.focus-hero__subtitle::before,
.focus-hero__subtitle::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--focus-hero-rule);
}

.focus-hero__subtitle-text {
	flex: none;
	font-family: 'Work Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--focus-hero-muted);
	white-space: nowrap;
}


/* --- The row of cards ------------------------------------------------------ */

.focus-hero__cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin-top: 26px;
}

.focus-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2px;
	min-height: 96px;
	padding: 14px 16px 16px;
	/* No outline of any kind, on any card: a card is a translucent panel and
	   nothing else. The active one is not framed either — .is-active stays in
	   the markup so a page can mark itself later, but it draws nothing. */
	border: 0;
	border-radius: 2px;
	background: var(--focus-hero-card-bg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--focus-hero-text);
	text-decoration: none;
	transition: background-color .18s ease;
}

a.focus-hero__card:hover,
a.focus-hero__card:focus-visible {
	background: var(--focus-hero-card-hover);
	color: var(--focus-hero-text);
}

/* The drawings are white PNGs in assets/icons/ (baloon_focus, grape_focus,
   area_focus, story_focus). A fixed box with object-fit:contain keeps the row
   of cards aligned whatever proportions a file happens to have. */
.focus-hero__card-icon {
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: 8px;
}

.focus-hero__card-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

.focus-hero__card-label {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.15;
	color: var(--focus-hero-muted);
}

/* One word per line, as in the design ("GRAPE HARVEST" sits over two lines).
   width:min-content makes the box as wide as the longest word, so every space
   in the value becomes a line break — no <br> in the markup and nothing to
   count, whether the value is one word or four. */
.focus-hero__card-value {
	width: min-content;
	font-family: 'Work Sans', sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--focus-hero-text);
}

/* The striped fifth tile — decoration, straight from the mockup. */
.focus-hero__card--placeholder {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		-45deg,
		var(--focus-hero-stripe) 0,
		var(--focus-hero-stripe) 7px,
		transparent 7px,
		transparent 16px
	);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}


/* --- The band across the bottom -------------------------------------------- *
 *
 * The winemaker focus page fills it with the same frosted bar the single
 * winemaker page carries (.event-hero__bar in event.css), so this rule only
 * has to place it. A hero without a bar keeps its full height.
 * -------------------------------------------------------------------------- */

.focus-hero__bar {
	position: relative;
	z-index: 1;
	margin-top: auto;
	width: 100%;
}

/* event.css paints .event-hero__bar for the hero of the single page, where it
   is the only child; inside this hero it must not add a second background. */
.focus-hero__bar .event-hero__bar {
	background: #c7bdb0;
}


/* ===========================================================================
 * The winemaker focus page's own bar
 * (templates/single_winemaker_focus.php, <body class="winemaker-focus-page">)
 *
 * Left: the meta line, the winery name and its sentence, then the two buttons.
 * Right: Taste & Trust — static markup apart from the followers row, which is
 * template-parts/followers.php, the same include the single page uses.
 *
 * Deliberately NOT in winemaker.css: those rules are scoped to
 * .winemaker-page, which is the single page, and this bar belongs to the hero
 * above it.
 * ========================================================================= */

.winemaker-focus-page .focus-hero__bar .event-hero__wrap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	overflow: visible;
}

.winemaker-focus-page .focus-hero__bar .event-hero__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* "VAUD – AOC LAVAUX" */
.winemaker-focus-page .winemaker-focus__meta {
	margin: 0 0 4px;
	font-family: 'Work Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6B5539;
}

.winemaker-focus-page .winemaker-focus__name {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 56px;
	line-height: 1.05;
	color: #6B5539;
}

.winemaker-focus-page .winemaker-focus__sentence {
	margin: 4px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	color: #6B5539;
}

/* The two buttons under the name. */
.winemaker-focus-page .winemaker-focus__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
}

.winemaker-focus-page .winemaker-focus__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 14px 26px;
	border: 1px solid #590232;
	border-radius: 2px;
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.winemaker-focus-page .winemaker-focus__btn--primary {
	background: #590232;
	color: #fff;
}

.winemaker-focus-page .winemaker-focus__btn--primary:hover,
.winemaker-focus-page .winemaker-focus__btn--primary:focus-visible {
	background: #7A0C46;
	color: #fff;
}

.winemaker-focus-page .winemaker-focus__btn--ghost {
	background: transparent;
	border-color: rgba(89, 2, 50, .45);
	color: #590232;
}

.winemaker-focus-page .winemaker-focus__btn--ghost:hover,
.winemaker-focus-page .winemaker-focus__btn--ghost:focus-visible {
	border-color: #590232;
	color: #590232;
	background: rgba(89, 2, 50, .06);
}

/* Right column — Taste & Trust. */
.winemaker-focus-page .winemaker-focus__trust {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	max-width: 320px;
}

.winemaker-focus-page .winemaker-focus__trust-title {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.1;
	color: #6B5539;
}

/* The rating sits on its own ground, one step darker than the bar — the same
   trick the single winemaker page plays on .event-hero__rating, so the number
   stays legible against the frosted panel. */
.winemaker-focus-page .winemaker-focus__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 3px 12px;
	border-radius: 3px;
	background: #bbaf9f;
	font-family: 'Work Sans', sans-serif;
	font-size: 15px;
	color: #211a15;
}

.winemaker-focus-page .winemaker-focus__star {
	width: 16px;
	height: 16px;
	fill: #d23b32;
	flex: none;
}

.winemaker-focus-page .winemaker-focus__rating-count {
	color: #6b625b;
}

/* followers.php prints .event-followers; here it is right-aligned and the
   label is the small caption of the design. */
.winemaker-focus-page .winemaker-focus__trust .event-followers {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.winemaker-focus-page .winemaker-focus__trust .event-followers__label {
	margin: 0 0 8px;
	font-family: 'Work Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6b625b;
}

.winemaker-focus-page .winemaker-focus__trust .event-followers__faces {
	display: flex;
	justify-content: flex-end;
}

.winemaker-focus-page .winemaker-focus__trust .event-followers__face {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid #c7bdb0;
	object-fit: cover;
}

.winemaker-focus-page .winemaker-focus__trust .event-followers__face + .event-followers__face {
	margin-left: -12px;
}


/* --- Responsive ------------------------------------------------------------ */

@media only screen and (max-width: 1200px) {
	.focus-hero {
		--focus-hero-top: 180px;
	}

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

	/* The striped tile is decoration; at three columns it would push a real
	   card onto a row of its own. */
	.focus-hero__card--placeholder {
		display: none;
	}
}

@media only screen and (max-width: 860px) {
	.focus-hero {
		/* No aspect-ratio below this width (see the rule near the top): the
		   height is the content's, and this is only the floor under it. */
		--focus-hero-min-height: 560px;
		--focus-hero-top: 150px;
		--focus-hero-title-gap: 30px;
	}

	.focus-hero__cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.focus-hero__subtitle {
		gap: 14px;
	}

	.focus-hero__subtitle-text {
		font-size: 13px;
		letter-spacing: .24em;
	}

	/* Two cards across at this width — 24px would leave no room for a value
	   like "GRAPE HARVEST" beside its neighbour. */
	.focus-hero__card-label,
	.focus-hero__card-value {
		font-size: 19px;
	}
}

@media only screen and (max-width: 560px) {
	.focus-hero {
		--focus-hero-min-height: 520px;
		--focus-hero-top: 130px;
		--focus-hero-title-gap: 20px;
	}

	.focus-hero__cards {
		grid-template-columns: 1fr;
	}

	.focus-hero__card {
		min-height: 0;
	}
}

@media only screen and (max-width: 1024px) {
	.winemaker-focus-page .focus-hero__bar .event-hero__wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.winemaker-focus-page .winemaker-focus__trust {
		align-items: flex-start;
		text-align: left;
		max-width: none;
	}

	.winemaker-focus-page .winemaker-focus__trust .event-followers,
	.winemaker-focus-page .winemaker-focus__trust .event-followers__faces {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.winemaker-focus-page .winemaker-focus__name {
		font-size: 40px;
	}

	/* The buttons keep the desktop size on a tablet, where the bar is a
	   stacked column and there is much less room — smaller padding and text,
	   and no 150px floor under the width. */
	.winemaker-focus-page .winemaker-focus__btn,
	.winemaker-focus-page .winemaker-canton__btn {
		min-width: 0;
		padding: 11px 20px;
		font-size: 12px;
		letter-spacing: .1em;
	}
}

@media only screen and (max-width: 560px) {
	.winemaker-focus-page .winemaker-focus__name {
		font-size: 32px;
	}

	/* NOT flex:1 1 100% — a full-width button reads as a banner, and the two
	   of them filled the phone screen. They stay side by side and wrap only
	   when the labels really do not fit. */
	.winemaker-focus-page .winemaker-focus__btn,
	.winemaker-focus-page .winemaker-canton__btn {
		min-width: 0;
		padding: 10px 16px;
		font-size: 11px;
		letter-spacing: .08em;
	}
}


/* ---------------------------------------------------------------------------
 * The three jump links above the wine row — Winemaker / Cantons / Grapes.
 *
 * Right-aligned and stacked, as in the design. They scroll the page: each is an
 * anchor to a section below, and scroll-margin-top on those sections keeps the
 * heading clear of the fixed header, the same 110px the place and restaurant
 * anchors use.
 * ------------------------------------------------------------------------- */

.winemaker-focus-page .winemaker-focus__jump {
	padding: 40px 0 0;
}

.winemaker-focus-page .winemaker-focus__jump-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.winemaker-focus-page .winemaker-focus__jump-link {
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	color: #590232;
}

.winemaker-focus-page .winemaker-focus__jump-link:hover,
.winemaker-focus-page .winemaker-focus__jump-link:focus-visible {
	color: #590232;
	text-decoration: underline;
}

/* The targets. Only the wines section exists today; the other two ids are
   written down here so the offset is already right when those blocks land. */
.winemaker-focus-page #winemaker-wines,
.winemaker-focus-page #winemaker-cantons,
.winemaker-focus-page #winemaker-grapes {
	scroll-margin-top: 110px;
}


/* ---------------------------------------------------------------------------
 * "Winemaker in the Gazette" — the two articles that mention this winemaker.
 *
 * Markup: templates/single_winemaker_focus.php. The card is the one the
 * editorial category archive prints (category.php, .cat-editorial__card); the
 * class names are this page's own because the markup is copied rather than
 * shared, so nothing here can move under the archive's feet.
 * ------------------------------------------------------------------------- */

.winemaker-focus-page .winemaker-gazette {
	/* The bottom padding is the gap before Featured content underneath: that
	   block brings no top margin of its own, so its heading sat right under the
	   READ MORE buttons. */
	padding: 70px 0 90px;
}

.winemaker-focus-page .winemaker-gazette__heading {
	margin: 0 0 34px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.2;
	color: #8A765C;
}

/* Two columns, as in the design; one on a narrow screen. */
.winemaker-focus-page .winemaker-gazette__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 46px;
}

.winemaker-focus-page .winemaker-gazette__card {
	/* The button sits on the bottom edge whatever the excerpt's length, so a
	   short article next to a long one still lines up. */
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* "August 2025" / "Almanac #01" */
.winemaker-focus-page .winemaker-gazette__date {
	margin: 0 0 6px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	color: #211A15;
}

/* Work Sans, light — the sans of the design, not the Cormorant the rest of the
   page is set in. 300 is loaded with the family in functions.php. */
.winemaker-focus-page .winemaker-gazette__title {
	margin: 0 0 10px;
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.winemaker-focus-page .winemaker-gazette__title a {
	color: #211A15;
	text-decoration: none;
}

.winemaker-focus-page .winemaker-gazette__title a:hover,
.winemaker-focus-page .winemaker-gazette__title a:focus-visible {
	color: #590232;
}

/* The photo, and its credit line under it. */
.winemaker-focus-page .winemaker-gazette__thumb {
	margin: 18px 0 0;
}

/* Portrait, as in the design: the picture is taller than it is wide and its
   height follows the column instead of being a fixed number of pixels, so both
   cards keep the same shape at any width. */
.winemaker-focus-page .winemaker-gazette__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
}

.winemaker-focus-page .winemaker-gazette__credit {
	margin-top: 6px;
	font-family: 'Work Sans', sans-serif;
	font-size: 10px;
	letter-spacing: .04em;
	color: #8A8073;
}

/* The lead-in. Uppercase and letterspaced, as in the design — the <p> comes
   from the_excerpt(), hence the descendant selector. */
.winemaker-focus-page .winemaker-gazette__excerpt {
	margin: 22px 0 0;
}

.winemaker-focus-page .winemaker-gazette__excerpt p {
	margin: 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #5f574e;
}

/* READ MORE. margin-top:auto is what pins it to the bottom of the card. */
.winemaker-focus-page .winemaker-gazette__more {
	align-self: flex-start;
	margin-top: auto;
	padding: 14px 26px;
	background: var(--winemaker-gazette-accent, #8A765C);
	border-radius: 6px;
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: filter .18s ease;
}

.winemaker-focus-page .winemaker-gazette__excerpt + .winemaker-gazette__more {
	margin-top: 26px;
}

.winemaker-focus-page .winemaker-gazette__more:hover,
.winemaker-focus-page .winemaker-gazette__more:focus-visible {
	color: #fff;
	filter: brightness(.9);
}

/* The button takes the colour of the article's category, as in the design. The
   card carries .winemaker-gazette__card--{category slug}, so a new section of
   the Gazette only needs one more line here. */
/* The design's fixed pair: olive on the left, blue on the right. The colour
   follows the card's POSITION, not the article's category, so the two buttons
   look the same whichever articles the search happens to find. */
.winemaker-focus-page .winemaker-gazette__card:nth-child(odd)  { --winemaker-gazette-accent: #8A6B2F; }
.winemaker-focus-page .winemaker-gazette__card:nth-child(even) { --winemaker-gazette-accent: #2C6E9B; }

@media only screen and (max-width: 900px) {
	.winemaker-focus-page .winemaker-gazette__row {
		grid-template-columns: 1fr;
		gap: 46px;
	}

	.winemaker-focus-page .winemaker-gazette__title {
		font-size: 30px;
	}
}


/* ---------------------------------------------------------------------------
 * Canton of the month — the picture band with the flag, the name and EXPLORE.
 *
 * Markup: templates/single_winemaker_focus.php, id #winemaker-cantons, which
 * is what the "Cantons" jump link above the wine row points at.
 *
 * The background is the canton's own "Background image" from the `cantons`
 * table, set inline because it is data, not design; everything else is here.
 * ------------------------------------------------------------------------- */

.winemaker-focus-page .winemaker-canton,
.winemaker-focus-page .winemaker-grape {
	position: relative;
	display: flex;
	align-items: flex-start;
	/* The band keeps the proportions of the design rather than a fixed height,
	   so the photo is never squeezed on a wide screen. */
	aspect-ratio: 1440 / 700;
	min-height: 420px;
	/* The map band follows straight underneath — no white strip between the
	   two; the gap before Featured content sits under the map instead. */
	margin-bottom: 0;
	background-color: #2B2B28;      /* while the photo loads */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.winemaker-focus-page .winemaker-canton__wrap,
.winemaker-focus-page .winemaker-grape__wrap {
	/* .content_wrap is the site's centred column; overflow:visible so the flag
	   is not clipped. */
	overflow: visible;
	padding-top: 56px;
}

/* Everything sits in one left-hand column, as in the design. */
.winemaker-focus-page .winemaker-canton__panel,
.winemaker-focus-page .winemaker-grape__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 520px;
}

.winemaker-focus-page .winemaker-canton__flag {
	display: block;
	width: 54px;
	height: auto;
	margin: 0 0 18px;
}

.winemaker-focus-page .winemaker-canton__eyebrow,
.winemaker-focus-page .winemaker-grape__eyebrow {
	margin: 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	/* The photo behind is unpredictable — a soft shadow keeps both lines
	   readable over a bright sky as well as over a dark cellar. */
	text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.winemaker-focus-page .winemaker-canton__name,
.winemaker-focus-page .winemaker-grape__name {
	margin: 4px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 46px;
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.winemaker-focus-page .winemaker-canton__btn,
.winemaker-focus-page .winemaker-grape__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	margin-top: 24px;
	padding: 14px 30px;
	background: #8C0335;
	border-radius: 5px;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: background-color .18s ease;
}

.winemaker-focus-page .winemaker-canton__btn:hover,
.winemaker-focus-page .winemaker-canton__btn:focus-visible,
.winemaker-focus-page .winemaker-grape__btn:hover,
.winemaker-focus-page .winemaker-grape__btn:focus-visible {
	background: #7A0839;
	color: #fff;
}

@media only screen and (max-width: 900px) {
	.winemaker-focus-page .winemaker-canton,
.winemaker-focus-page .winemaker-grape {
		aspect-ratio: auto;
		min-height: 0;
		padding: 0 0 48px;
		margin-bottom: 0;
	}

	.winemaker-focus-page .winemaker-canton__wrap,
.winemaker-focus-page .winemaker-grape__wrap {
		padding-top: 40px;
	}

	.winemaker-focus-page .winemaker-canton__name,
.winemaker-focus-page .winemaker-grape__name {
		font-size: 34px;
	}
}


/* The canton band butts straight against the map underneath it, so it carries
   no gap. The grape band sits on its own between Featured content and the
   banner, so it keeps white space on both sides. */
.winemaker-focus-page .winemaker-grape {
	margin: 90px 0;
}

@media only screen and (max-width: 900px) {
	.winemaker-focus-page .winemaker-grape {
		margin: 60px 0;
	}
}


/* ---------------------------------------------------------------------------
 * "Or Search On Our Map" — the interactive map of Switzerland.
 *
 * Markup: template-parts/canton-map.php   Behaviour: assets/js/canton-map.js
 *
 * The whole band is the wine red of the design with the map knocked out of it:
 * a canton is a slightly lighter shape, and the selected one is white. Hover
 * is pure CSS — the script only handles the area buttons and the navigation.
 * ------------------------------------------------------------------------- */

.canton-map {
	--canton-map-bg:        #9E0B4C;   /* the band */
	--canton-map-shape:     rgba(255, 255, 255, .16);
	--canton-map-line:      rgba(255, 255, 255, .45);
	--canton-map-active:    #FFFFFF;
	--canton-map-text:      #FFFFFF;

	padding: 64px 0 72px;
	/* The band sits flush against the canton photo above it and carries the
	   whole gap before whatever follows (Featured content on the focus page). */
	margin: 0 0 90px;
	background: var(--canton-map-bg);
	color: var(--canton-map-text);
}

/* `.canton-map` prefix: style.css sizes every h2 by element selector, and
   below 768px it does so with !important — without the extra class (and the
   !important in the media block underneath) the heading fell back to the
   theme's own mobile size. */
.canton-map .canton-map__title {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.2;
	color: var(--canton-map-text);
}

/* Both of these are <p>, and the page-wide reset `body.winemaker-page p`
   scores 0,1,2 — it was flattening the font and killing the uppercase. The
   extra `.canton-map` takes these to 0,2,0, which wins without tying the
   part to the winemaker page. */
.canton-map .canton-map__subtitle {
	margin: 6px 0 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--canton-map-text);
}

/* The map on the left, the buttons on the right. */
.canton-map__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	align-items: start;
	gap: 48px;
	margin-top: 34px;
}

.canton-map__figure {
	position: relative;   /* the hover label is placed against this box */
	min-width: 0;
}

/* The canton's name under the cursor. Placed by assets/js/canton-map.js;
   pointer-events:none so it never steals the hover from the shape itself. */
.canton-map__tip {
	position: absolute;
	z-index: 2;
	transform: translate(-50%, -140%);
	padding: 5px 10px;
	border-radius: 3px;
	background: #FFFFFF;
	font-family: 'Work Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--canton-map-bg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	pointer-events: none;
}

.canton-map__tip[hidden] {
	display: none;
}

.canton-map__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;   /* a shape's hover outline is not clipped */
}

/* Every canton of the drawing. !important: the exported file paints its own
   fill on each shape, and an inline attribute would otherwise win. */
.canton-map__canton {
	fill: var(--canton-map-shape) !important;
	/* The export carries fill-opacity="0.25" on every shape, so a white fill
	   alone came out as a pale pink. The transparency belongs to the colour
	   above, not to a separate attribute. */
	fill-opacity: 1 !important;
	stroke: var(--canton-map-line) !important;
	stroke-width: 1;
	cursor: pointer;
	/* No transition on `fill`. A running CSS transition sits ABOVE author
	   !important in the cascade, and the one this rule used to start got stuck
	   on the shapes, pinning them to the dim colour so neither :hover nor
	   .is-active could repaint them. The switch is instant instead. */
	transition: none;
}

.canton-map__canton:hover,
.canton-map__canton:focus-visible,
.canton-map__canton.is-active {
	fill: var(--canton-map-active) !important;
}

.canton-map__canton:focus-visible {
	outline: none;
}

/* Shown only while assets/img/switzerland_map.svg is missing. */
.canton-map__missing {
	margin: 0;
	padding: 60px 20px;
	border: 1px dashed var(--canton-map-line);
	border-radius: 3px;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	letter-spacing: .06em;
	text-align: center;
	color: var(--canton-map-line);
}

/* --- The area buttons ------------------------------------------------- */

.canton-map .canton-map__areas-title {
	margin: 0 0 16px;
	font-family: 'Work Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--canton-map-text);
}

.canton-map__areas-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.canton-map__area {
	display: block;
	width: 100%;
	padding: 12px 18px;
	border: 1px solid var(--canton-map-line);
	border-radius: 2px;
	background: transparent;
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--canton-map-text);
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.canton-map__area:hover,
.canton-map__area:focus-visible {
	background: rgba(255, 255, 255, .14);
}

/* The chosen area — filled, like the cantons it lights up. */
.canton-map__area.is-active {
	background: var(--canton-map-active);
	border-color: var(--canton-map-active);
	color: var(--canton-map-bg);
}

@media only screen and (max-width: 900px) {
	.canton-map {
		padding: 48px 0 56px;
		margin-bottom: 60px;
	}

	.canton-map__body {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.canton-map__areas-list {
		/* Two columns of buttons under the map rather than one long stack. */
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.canton-map .canton-map__title {
		font-size: 28px !important;   /* beats style.css's `h2 { 1.55rem !important }` */
	}
}

@media only screen and (max-width: 560px) {
	.canton-map__areas-list {
		grid-template-columns: 1fr;
	}

	.canton-map__area {
		padding: 11px 14px;
		font-size: 13px;
	}
}


/* "In the news" — less space above it (~160px: its 72px top margin + the
 * generic `section { padding-top }` from style.css + the block above). */
.winemaker-page .winemaker-news {
    padding-top: 0;
    margin-top: 56px;
}

/* "Tasting place in the Domaine": the same space above and below it
 * (was 32px above / 72px below). Its bottom margin and the top margin of
 * "In the news" collapse into one 56px gap. */
.winemaker-page .winemaker-place {
    margin-top: 56px;
    margin-bottom: 56px;
}

/* Focus page, banner after "Grape of the month": the same 56px above and
 * below (was 90px — the band's bottom margin — above and 32px below). */
.winemaker-focus-page .winemaker-grape {
    margin-bottom: 0;
}
.winemaker-focus-page .event-page + .np-focus-banner-section {
    margin-top: 56px;
    margin-bottom: 56px;
}

/* Focus page: "Featured content" with the same space above and below —
 * 60px margin of the canton map band above it vs the 90px top margin of the
 * "Grape of the month" band below it. Both 64px now. */
/* 52, not 64, above: the heading's line box adds ~12px of empty space
 * above the letters, so 52 + 12 reads the same as the 64 under the cards. */
.winemaker-focus-page .canton-map {
    margin-bottom: 52px !important;
}
.winemaker-focus-page .winemaker-grape {
    margin-top: 64px !important;
}

/* Focus page: "Wine of this Winemaker" heading row — no top margin
 * (products-non-wine.css gives .np-products-header `margin: 30px 0 24px`). */
.winemaker-focus-page .winemaker-wines .np-products-header {
    margin-top: 0;
}