/* ===========================================================================
 * WINE PARTNER — every rule that belongs to the wine partner pages.
 *
 * Two pages are covered:
 *   templates/wine_partners.php        the listing  (body has .page-template-…)
 *   templates/single_wine_partner.php  one partner  (body has .wine-partner-page,
 *                                      added by inc/wine-partner-permalink.php)
 *
 * Both reuse markup built for other pages — the tasting place cards, the
 * .event-hero of the place and restaurant pages, the .article-block1 grid of
 * Wiize of the Month — so most of what follows is the page-scoped half of a
 * shared component: the part the original page gets from ITS own wrappers and
 * body classes, which a partner page does not have.
 *
 * Enqueued in functions.php as `wine-partner-wiize`.
 * ========================================================================= */

/* ===========================================================================
 * Jump links above the gallery — scroll offset for the three targets
 *
 * Same 110px the place and restaurant anchors use (see the block of the same
 * name in tasting_places.css); scrollIntoView() honours scroll-margin-top, so
 * the offset lives here and not in the script.
 * ========================================================================= */

#wine-partner-wines,
#wine-partner-selected-by,
#wine-partner-menu {
    scroll-margin-top: 110px;
}


/* ===========================================================================
 * Wine partner card — category pills
 *
 * The pills reuse the tasting place card markup, so they inherit
 * `body .np-focus-grape-card-stats li { text-align: center }` from
 * focus_month.css. A long category name fills the row and its two lines end up
 * centred, which reads as a heading rather than a tag. These rules pin the
 * pills to the left; scoped to the wine partner card, so the tasting place and
 * restaurant cards keep their own alignment.
 *
 * The `body` prefix is needed to outweigh the base rule's specificity.
 * ========================================================================= */

body .np-other-selection-item--wine-partner .np-focus-grape-card-stats--pills {
    justify-content: flex-start;
}

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


/* ===========================================================================
 * Wine partner page — section title
 *
 * The template reuses the tasting place markup, so the heading inherits
 * `.tasting-places .tp-title`: 60px, black, letter-spaced. On this page the
 * title has to read like the other section headings ("Top Product"), whose
 * style lives in .np-focus-selection-heading-place — same Cormorant italic,
 * 32px, in the brown accent.
 *
 * Scoped to .wine-partners, so the Tasting Places page keeps its large title.
 * The extra .np-products in the selector outweighs the base rule regardless of
 * where this block ends up in the file.
 * ========================================================================= */

.np-products.wine-partners .tp-title {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: normal;
    color: #8A765C;
}


/* ===========================================================================
 * SINGLE WINE PARTNER — hero
 *
 * templates/single_wine_partner.php reuses the .event-hero markup of the place
 * and restaurant pages, but the layout rules above are scoped to .tax-place /
 * .tax-restaurant — class names WordPress puts on a taxonomy archive. A partner
 * is a table row rendered on an ordinary page, so it carries .wine-partner-page
 * instead (added in inc/wine-partner-permalink.php) and needs its own copy of
 * the same rules.
 * ========================================================================= */

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

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

/* "CANTON – City" above the title.
 *
 * Its own class rather than .event-hero__meta: that one is styled in event.css
 * as Cormorant italic 32px — the title's own face — which made the line read as
 * a second heading. A separate class owns every value here, so nothing has to
 * out-specify the shared rule and the event pages keep their own look.
 *
 * The face and size follow the place and restaurant pages; the bottom margin is
 * the small gap to the title in the mockup (.event-hero__name has no top
 * margin of its own). */
.wine-partner-hero__meta {
    margin: 0 0 4px;
    padding: 0;
    color: #211A15;
    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;
}

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

   The -26px is .event-hero__bar's padding-top (event.css:320): .event-hero__main
   is the first flex item of a flex-end wrap, so its top sits that far below the
   bar's edge. translateY(-50%) then lifts the flag by half its own height,
   putting its centre on the edge. Keep the two in sync if that padding changes.

   Tilted like .product-hero__flag and .npw-title__flag — minus is
   counter-clockwise. */
.wine-partner-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 */
}

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

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

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

/* Mobile: .event-hero__wrap turns into column-reverse (event.css:643), so
   .event-hero__main is no longer the topmost item and the offset above would
   drop the flag onto the logo. Back into the flow it goes. */
@media (max-width: 600px) {
    .wine-partner-page .event-hero__wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .wine-partner-page .event-hero__flag {
        position: static;
        margin-bottom: 12px;
        transform: rotate(-7deg);
    }
}


/* ===========================================================================
 * SINGLE WINE PARTNER — spacing below the featured block
 *
 * The block sits directly on top of the "Are you a wine partner?" CTA, whose
 * own cream background starts immediately, so the two read as one slab. The
 * padding is on .np-featured-content rather than on the CTA because it belongs
 * to this page only — the same featured block on the product, brand, place and
 * restaurant pages is followed by different sections and keeps its spacing.
 * ========================================================================= */

.wine-partner-page .np-featured-content {
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .wine-partner-page .np-featured-content {
        padding-bottom: 32px;
    }
}


/* ===========================================================================
 * SINGLE WINE PARTNER — the two editorial blocks under the banner
 * Shortcode: [wiize_wine_partner_blocks]
 *
 * The markup reuses .article-block1 so the two-column grid and the card column
 * come for free, but that class alone carries no frame: on the Wiize of the
 * Month page the cream ground and the page container come from the wrappers
 * around it. Here the section supplies both.
 *
 * Colours follow the mockup rather than .article-block1__subtitle /
 * __content, which are black on their own page: the heading and the two
 * subtitles are the brown Cormorant italic used by every other heading on the
 * partner page, the body text the same warm grey as the card captions.
 * ========================================================================= */

/* The outer section only spaces the block from its neighbours — the cream
   ground belongs to the container, so it stops at 1240px instead of bleeding
   to the window edges. */
.wine-partner-page .wine-partner-blocks-section {
    background: none;
    padding: 0;
    margin: 60px 0;
}

/* Same width as .article-block1 itself, so the title lines up with the blocks,
   and the padding keeps the content off the cream edge. */
.wine-partner-page .wine-partner-blocks {
    max-width: 1240px;
    margin: 0 auto;
    background: #fbf8f5;
    padding: 60px 40px;
    box-sizing: border-box;
}

.wine-partner-page .wine-partner-blocks__title {
    margin: 0 0 40px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: normal;
    color: #8A765C;
}

/* The rule between the two blocks, as in the mockup. It sits on the second
   block so a page with only one never draws a stray line. */
.wine-partner-page .wine-partner-block + .wine-partner-block {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.wine-partner-page .article-block1__subtitle {
    margin: 0 0 24px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    color: #8A765C;
}

/* Caps, as in the mockup — the two short paragraphs read as captions beside the
   cards rather than as running text. Done with text-transform rather than by
   typing the copy in caps, so the admin fields stay readable; the extra
   letter-spacing is what keeps uppercase legible at 14px. */
.wine-partner-page .article-block1__content,
.wine-partner-page .article-block1__content p {
    color: #5f574e;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    line-height: 1.75;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 900px) {
    .wine-partner-page .wine-partner-blocks-section {
        margin: 40px 0;
    }

    .wine-partner-page .wine-partner-blocks {
        padding: 32px 20px;
    }

    /* .article-block1 is a two-column grid; on a narrow screen the cards go
       under the text rather than squeezing both. */
    .wine-partner-page .article-block1 {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ===========================================================================
 * Cards — symmetric side padding
 *
 * product-food-pairings.css gives every .np-other-selection-item card
 * `flex-wrap: wrap` with `align-content: flex-end`. The card is a COLUMN flex
 * container, so those two do not wrap anything here — they size the single
 * column to its content (228.56px inside a 240px card) and push it to the
 * right edge. The result is 21px of space on the left of the pills and the
 * buttons and 10px on the right, which is the lopsided look.
 *
 * Turning wrapping off lets the column stretch to the full card width again,
 * so both sides get exactly the 10px padding of .np-focus-grape-card-body.
 * Scoped to this page — the food pairings grid keeps its own behaviour.
 * ========================================================================= */

.wine-partner-page .np-focus-grape-card.np-other-selection-item {
    flex-wrap: nowrap;
    align-content: stretch;
}


/* ===========================================================================
 * Cards — the panel under the photo
 *
 * focus_month.css paints .np-focus-grape-card-body #fbf8f5, the same cream as
 * the blocks container behind it, so the cards dissolve into their background.
 * The mockup uses a step darker. Scoped to this page: every other page keeps
 * the shared colour.
 * ========================================================================= */

.wine-partner-page .np-focus-grape-card-body {
    background: #f8f3ee;
}


/* ===========================================================================
 * Cards — the Details button
 *
 * focus_month.css paints it #A6032F, and the place / event variants repaint it
 * blue. The mockup for this page uses the deep burgundy sampled from it,
 * #590232. Written with .np-focus-grape-card-actions in the selector so it
 * also outweighs those variant rules, which carry the same specificity and
 * would otherwise win on source order.
 * ========================================================================= */

.wine-partner-page .np-focus-grape-card-actions .np-focus-grape-card-btn--details {
    background: #590232;
    border-color: #590232;
}

.wine-partner-page .np-focus-grape-card-actions .np-focus-grape-card-btn--details:hover,
.wine-partner-page .np-focus-grape-card-actions .np-focus-grape-card-btn--details:focus {
    background: #430125;
    border-color: #430125;
}


/* ===========================================================================
 * "Selected by" — spacing under the block
 *
 * The photo keeps its natural height: cropping it cut the author's face, so the
 * empty space is taken out of the padding instead. .event-selected carries
 * 56px top / 64px bottom of its own (event.css) and .place-selected-by adds
 * another 34px above, which on this page stacks with the banner's own top
 * margin right below.
 *
 * Scoped to this page — the event and place versions of the block keep their
 * original breathing room.
 * ========================================================================= */

.wine-partner-page .place-selected-by .event-selected {
    padding-bottom: 0;
}