/* ===========================================================================
 * Tasting Places page — extra styles for tasting_places.php
 *
 * The page reuses the existing grid and card CSS:
 *   .events-cat-section / .ecs-*        search + category strip (event.css)
 *   .np-products / .np-products-header  section + header (products-non-wine.css)
 *   .np-focus-grape-card / .np-other-selection-item--place   card
 *   .np-focus-vignette                  decorative tile (helper-banner.php)
 *
 * Only what is specific to this page lives here. Add page-specific rules at
 * the bottom, under "Extra".
 * ========================================================================= */

/* --- Section spacing (mirrors .brands in brand.css) --------------------- */
.tasting-places {
    margin: 60px auto 60px auto !important;
}

/* --- Header: pin icon + title on the left, sorting on the right --------- */
.tasting-places .tp-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.tasting-places .tp-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.tasting-places .tp-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #007BA5;
    line-height: 0;
}

.tasting-places .tp-title-icon svg {
    display: block;
}

/* .brand-title already carries the Cormorant italic look; only the margin
   needs resetting so the icon sits tight above the text. */
.tasting-places .tp-title {
    margin: 0;
    font-style: italic;
    font-weight: 700;
    color: #000;
    font-size: 60px;
    letter-spacing: 2px;
    font-family: 'Cormorant Garamond', serif;
}

/* --- Sorting dropdown --------------------------------------------------- */
.tasting-places .np-products-sort {
    flex: 0 0 auto;
}

/* --- Cards ------------------------------------------------------------- */
/* Place images are photos, so they should fill the frame rather than fit
   inside it (brands use logos and override this to `contain`). */
.tasting-places .np-other-selection-item--place .np-focus-grape-card-image img {
    object-fit: cover;
    display: block;
}

.tasting-places .np-focus-grape-card-actions.place_action {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.tasting-places .np-focus-grape-card-actions.place_action .np-focus-grape-card-btn--details {
    background: #007BA5;
    color: #fff !important;
    border-color: #007BA5;
    width: auto;
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    justify-content: center;
}

/* --- Decorative vignettes --------------------------------------------- */
/* One grid cell, same footprint as a card. Positions are set in PHP via
   $vignette_positions in tasting_places.php. */
.tasting-places .np-focus-vignette {
    display: block;
    height: 100%;
}

.tasting-places .np-focus-vignette-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 767px) {
    .tasting-places {
        margin: 32px auto;
    }

    .tasting-places .tp-header {
        align-items: flex-start;
        gap: 16px;
    }

    .tasting-places .np-products-sort {
        width: 100%;
    }
}

/* ===========================================================================
 * Extra — page-specific additions go below this line
 * ========================================================================= */

/* Sorting dropdown.
 *
 * Both class names are matched on purpose: the template currently outputs
 * .np-products-sort-select, so if it is renamed to .np-places-sort-select the
 * styling keeps working either way. Scoped to .tasting-places so the non-wine
 * products page is not affected.
 *
 * The chevron is drawn by the rule below, not by the browser: `appearance:
 * none` removes the native control arrow (which cannot be styled), and the
 * arrow is an inline SVG data URI in background-image. `background-color` is
 * set separately — the `background` shorthand would wipe out that image. */
.tasting-places .np-places-sort-select,
.tasting-places .np-products-sort-select {
    min-width: 220px;
    padding: 5px 34px 5px 10px; /* right padding reserves room for the arrow */
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    line-height: 22px;
    text-transform: uppercase;
    color: #8A765C;
    font-family: 'Work Sans', serif;
    font-weight: 600;

    /* Custom arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238A765C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

/* IE / old Edge draw their own arrow on top of ours. */
.tasting-places .np-places-sort-select::-ms-expand,
.tasting-places .np-products-sort-select::-ms-expand {
    display: none;
}

.places-wines{
    max-width:1240px;
    margin: 0 auto;
    padding: 0px 0 0px;
    margin-top: 60px;
}


/* ===========================================================================
   ABOUT THE CHEF — block on the tasting place page
   Shortcode: [wiize_place_about_chef]

   Tune the palette and the two type scales through the custom properties on
   .place-chef; nothing below hardcodes a colour.
   ========================================================================= */

.place-chef {
    --pc-blue: #c3dae4;
    --pc-cream: #faf5ef;
    --pc-heading: #8a7a45;
    --pc-name: #c47b32;
    --pc-text: #3a3a3a;
    --pc-muted: #6b6b6b;
    --pc-rule: rgba(0, 0, 0, .18);
    --pc-btn: #0a6f80;
    --pc-btn-text: #ffffff;
    --pc-gap: 24px;
    --pc-pad: 32px;
    padding: 0px;
}

/* Breathing room under the block on the restaurant page only. The place page
   follows it with "Other selection" and the featured block, which bring their
   own spacing; on the restaurant page the owner CTA sits directly underneath,
   so the two panels would touch it. */
.tax-restaurant .place-chef-section {
    margin-bottom: 60px;
}

.place-chef__wrap {
    display: block;
}

/* --- headings ---------------------------------------------------------- */

.place-chef__heading {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 32px;
    color: #8A765C;
    margin-bottom:30px;
}

.place-chef__col-title {
    margin: 0 0 20px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 26px;
    font-weight:700;
    color: #102542;
}
.place-chef__col-title_right {
    margin: 0 0 20px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 26px;
    font-weight:700;
    color: #8A765C;
    letter-spacing:3px;
}

/* --- columns ----------------------------------------------------------- */

.place-chef__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pc-gap);
    align-items: stretch;
}

.place-chef__col {
    display: flex;
    flex-direction: column;
    padding: var(--pc-pad);
    min-height: 590px;
}

.place-chef__col--menu {
    background: #cce5ed;
}

.place-chef__col--recipes {
    background: #fbf8f5;
}

/* --- left column: menu ------------------------------------------------- */

.place-chef__menu-name {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--pc-text);
}

.place-chef__menu-note {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #000;
    font-family: "Work Sans", serif;
}

.place-chef__items {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.place-chef__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 13px;
    color: var(--pc-text);
}

.place-chef__item-name {
    flex: 1 1 auto;
}

.place-chef__item-price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Spec table. Sits at the vertical centre of the column, like the mockup:
   the auto margins push it away from the content above and the CTA below. */
.place-chef__specs {
    margin: auto 0;
    padding: 0;
    list-style: none;
}

.place-chef__spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pc-rule);
}

.place-chef__spec:first-child {
    border-top: 1px solid var(--pc-rule);
}

.place-chef__spec-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #554F4F;
    font-family: "Work Sans", serif;
}

.place-chef__spec-value {
    font-size: 14px;
    text-align: right;
    color: var(--pc-muted);
    font-family: "Work Sans", serif;
}

/* --- CTA --------------------------------------------------------------- */

.place-chef__cta {
    margin-top: auto;
    padding-top: 28px;
}

.place-chef__btn {
    display: inline-block;
    padding: 14px 26px;
    background: #007BA5;
    color: var(--pc-btn-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity .15s ease;
}

.place-chef__btn:hover,
.place-chef__btn:focus {
    opacity: .85;
    color: var(--pc-btn-text);
}

/* --- right column: chef ------------------------------------------------ */

.place-chef__person {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.place-chef__avatar {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, .07);
}

.place-chef__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place-chef__name {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 24px;
    color: #B3702D;
    font-weight:700;
}

.place-chef__bio {
    margin-bottom: 26px;
    font-size: 12px;
    line-height: 1.7;
    color: #000;
    font-family: "Work Sans", serif;
}

.place-chef__bio p {
    margin: 0 0 10px;
}

.place-chef__bio p:last-child {
    margin-bottom: 0;
}

/* The recipe card keeps its own styles — this only bounds its width so it
   does not stretch across the whole column. */
.place-chef__recipe {
    margin-top: auto;
    max-width: 240px;
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 900px) {
    .place-chef {
        --pc-pad: 24px;
        padding: 40px 0 48px;
    }

    .place-chef__cols {
        grid-template-columns: 1fr;
    }

    .place-chef__col {
        min-height: 0;
    }

    .place-chef__specs {
        margin: 24px 0;
    }

    .place-chef__recipe {
        margin-top: 24px;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .place-chef__heading {
        font-size: 24px;
    }

    .place-chef__name {
        font-size: 20px;
    }
}


.tax-place .np-focus-banner-section,
.tax-restaurant .np-focus-banner-section {
    margin: 0;
    padding:0px;
}


.place-chef__recipe .np-focus-grape-card-btn--details { 
        background: #006042;
    color: #fff !important;
    border-color: #006042;
}


.tax-place .event-social,
.tax-restaurant .event-social {
    margin-bottom: 100px;
}

.tax-place .event-hero__name,
.tax-restaurant .event-hero__name {
    margin-bottom: 0px;
        line-height: 56px;
}
/* Canton flag on the restaurant page.
   Per the mockup it straddles the top edge of the frosted bar: half of it over
   the photo, half over the bar. So it is taken out of the flow and centred on
   that edge — which also leaves the text below exactly where it was.

   The -26px is .event-hero__bar's padding-top (event.css:303): .event-hero__main
   is the first flex item of a flex-end wrap, so its top sits exactly that far
   below the bar's top 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 the same way .product-hero__flag and .npw-title__flag are —
   minus = counter-clockwise. */
/* Rating sits on a pill like the tags next to it, one step darker than
   --event-pill-bg (rgba(255,255,255,.78), event.css:263) so it reads as a
   separate group in the row. Padding and radius are .event-hero__tag's, kept
   literal rather than inherited because the two differ in font size. */
.tax-restaurant .event-hero__rating {
    padding: 3px 12px;
    /*background: rgba(236, 232, 227, .85);*/
    background: #c4c1ba;
    border-radius: 3px;
}

/* .event-hero__wrap IS .content_wrap, and style.css gives that
   overflow: hidden — which cut the overhanging half of the flag clean off.
   Scoped to this one wrap on this one page: the hero holds only the text column
   and the badge row, so nothing here needs clipping. */
.tax-restaurant .event-hero__wrap {
    overflow: visible;
}

.tax-restaurant .event-hero__main {
    position: relative;
}

.tax-restaurant .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 */
}

/* Mobile: .event-hero__wrap turns into column-reverse (event.css:625), so
   .event-hero__main is no longer the topmost item and the offset above would
   drop the flag onto the award badges. Back into the flow it goes. */
@media (max-width: 600px) {
    .tax-restaurant .event-hero__flag {
        position: static;
        margin-bottom: 12px;
        transform: rotate(-7deg);
    }
}

.tax-place .event-hero__meta,
.tax-restaurant .event-hero__meta {
    margin:0px;
    padding:0px;
    color: #211A15; 
    text-transform: uppercase;
    font-family:"Work Sans", serif;
    font-size:20px;
    font-weight:600;
    font-style:normal;
}

.place-hero__sentence {
        margin: 0 0 15px;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;
    color: #8A765C;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
}

/* ===========================================================================
   HERO — award badges on the right

   Scoped to .tax-place / .tax-restaurant on purpose: .event-hero__wrap is
   shared with single-event.php, and turning it into a flex row globally would
   move the event hero too. taxonomy-restaurant.php reuses this exact markup,
   which is why the restaurant body class is listed alongside the place one
   instead of the rules being copied into restaurants.css.

   The wrap holds one child today (.event-hero__main), so flex is enough to
   push the circles to the far right and sit them on the pills baseline. If the
   wrap ever gets more children, position .event-hero__circles absolutely
   instead and drop the two flex rules.
   ========================================================================= */

.tax-place .event-hero__wrap,
.tax-restaurant .event-hero__wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.tax-place .event-hero__main,
.tax-restaurant .event-hero__main {
    flex: 1 1 auto;
    min-width: 0;
}

.tax-place .event-hero__circles,
.tax-restaurant .event-hero__circles {
    --hc-size: 60px;
    --hc-fill: rgba(255, 255, 255, .3);
    --hc-border: rgba(255, 255, 255, .5);

    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tax-place .event-hero__circle,
.tax-restaurant .event-hero__circle {
    width: var(--hc-size);
    height: var(--hc-size);
    border-radius: 50%;
    background: var(--hc-fill);
    border: 1px solid var(--hc-border);
    /* Keeps the circle round when the row runs out of width. */
    flex: 0 0 auto;
}

/* A circle holding a real award badge: the PNG is already round and opaque, so
   the placeholder fill and border would show as a ring around it. */
.tax-place .event-hero__circle--badge,
.tax-restaurant .event-hero__circle--badge {
    background: none;
    border: 0;
    overflow: hidden;
}

.tax-place .event-hero__circle--badge img,
.tax-restaurant .event-hero__circle--badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 900px) {
    .tax-place .event-hero__circles,
    .tax-restaurant .event-hero__circles {
        --hc-size: 46px;
        gap: 6px;
    }
}

@media (max-width: 600px) {
    .tax-place .event-hero__wrap,
    .tax-restaurant .event-hero__wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .tax-place .event-hero__circles,
    .tax-restaurant .event-hero__circles {
        --hc-size: 38px;
    }
}


/* ===========================================================================
   JUMP LINKS in .event-details__links

   The three labels are anchors now, so they need the plain span appearance
   back, and each target needs room for the fixed header. scrollIntoView()
   honours scroll-margin-top, which is why the offset lives here and not in the
   script in taxonomy-place.php. taxonomy-restaurant.php uses the same
   markup, so its three anchor ids are listed here too — they take effect the
   moment those sections are built.
   ========================================================================= */

#place-wines,
#place-selected-by,
#place-chef,
#restaurant-wines,
#restaurant-selected-by,
#restaurant-menu {
    scroll-margin-top: 110px;
}

a.event-details__link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.event-details__link:hover,
a.event-details__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    #place-wines,
    #place-selected-by,
    #place-chef,
    #restaurant-wines,
    #restaurant-selected-by,
    #restaurant-menu {
        scroll-margin-top: 72px;
    }
}


.focus_page header {
    background: transparent !important;
}

.focus_page .hero-gallery__img {
transform: none; }

.focus_page .product-hero__media-wrap {
    margin-top:130px !important;
}


.focus_page .np-focus-banner-section {
    margin-top:60px !important;
}

.focus_page .cat-editorial { padding-inline: 0px; }


.focus_page .npw-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.focus_page .npw-title__flag {
    position: static;
    display: inline-block;
    width: 50px;
    height: auto;
    max-width: none;
    transform: none;
    flex: 0 0 auto;
    transform: rotate(-8deg); 
    margin-left:30px;
}


.product-hero--non-wine .hero-gallery__bar.is-active {
        background: #007BA5;
}


.np-focus-selection-heading-place {
      margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 32px;
    color: #8A765C;
}