/*  ********************************************************************************  **
**  ********************************************************************************  **

    Venue

    Loaded on a single venue by the framework's own enqueueing, which matches a
    stylesheet to a request by its file name: posttype_venue is the alias every
    venue answers to.

**  ********************************************************************************  **
**  ********************************************************************************  */




/*  ********************************************************************************  **

    Venue details

**  ********************************************************************************  */

/*  The write-up and the ratings sit side by side from a large tablet up, and
    stack below it. One column here is the small-screen case; the second is
    added at the breakpoint, at the foot of this file.  */
.eat-venue-details-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--eat-spacing-base) * 2);
    align-items: start;
}

.eat-venue-details > :first-child {
    margin-top: 0;
}
.eat-venue-details > :last-child {
    margin-bottom: 0;
}

.eat-venue-ratings > :first-child,
.eat-venue-contact > :first-child {
    margin-top: 0;
}

/*  Both headings in the column sit tight to what is above them; the parent's
    :first-child rule only reaches the first of them.  */
.eat-venue-ratings h3 {
    margin-top: 0;
}

/*  Venue features read as pills rather than a bulleted list.  */
.eat-venue-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--eat-spacing-base) / 2);
}
.eat-venue-features li {
    margin: 0;
    padding: 4px 12px;
    background: var(--eat-colour-accent-light);
    color: var(--eat-colour-accent-dark);
    border-radius: var(--eat-radius-pill);
    font-size: 0.85em;
    font-weight: 600;
}




/*  ********************************************************************************  **

    Contact details and the map

**  ********************************************************************************  */

.eat-venue-address {
    margin: 0 0 20px;
    font-style: normal;
}

.eat-venue-contact-links {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

/*  The embed has no intrinsic size of its own, so it is given one. 4:3 keeps
    enough of the surrounding streets in view to be worth having at the width
    of a sidebar column.  */
.eat-venue-map {
    overflow: hidden;
    border: 1px solid var(--eat-colour-light-grey);
    border-radius: 8px;
}
.eat-venue-map iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
}

.eat-venue-directions {
    margin: 8px 0 0;
    font-size: calc(var(--eat-font-size-p) * 0.8);
}




/*  ********************************************************************************  **

    Visits

**  ********************************************************************************  */

/*  Before Slick runs, the slides are a plain row that scrolls. If the script
    never arrives the visits are still readable and still reachable, rather
    than a stack of full-width articles down the page.  */
.eat-visits-carousel {
    display: flex;
    gap: calc(var(--eat-spacing-base) * 2);
    overflow-x: auto;
}
.eat-visits-carousel.slick-initialized {
    display: block;
    overflow: visible;
}

.eat-visit {
    flex: 0 0 min(320px, 85%);
    overflow: hidden;
    border: 1px solid var(--eat-colour-light-grey);
    border-radius: 12px;
    background: var(--eat-colour-white);
}

/*  Slick puts each slide in a track and sets its width itself, so the flex
    basis has to stand down once it has run.  */
.slick-initialized .eat-visit {
    flex: none;
    height: 100%;
}

/*  Equal-height slides, so a short visit does not leave the row ragged.  */
.eat-visits-carousel.slick-initialized .slick-track {
    display: flex;
    align-items: stretch;
}
.eat-visits-carousel.slick-initialized .slick-slide {
    height: auto;
    margin: 0 calc(var(--eat-spacing-base));
}
.eat-visits-carousel.slick-initialized .slick-list {
    margin: 0 calc(var(--eat-spacing-base) * -1);
}

.eat-visit-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.eat-visit-body {
    padding: var(--eat-card-padding);
}




/*  ********************************************************************************  **

    A visit's ratings

**  ********************************************************************************  */

.eat-visit-ratings {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px calc(var(--eat-spacing-base));
    margin: 0 0 20px;
    font-size: calc(var(--eat-font-size-p) * 0.85);
}
.eat-visit-rating {
    display: contents;
}
.eat-visit-ratings dt {
    color: var(--eat-colour-text-light);
}
.eat-visit-ratings dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/*  Five stars drawn once, with the filled part masked to the score. --eat-rating
    is set on the element from the rating itself, so a half mark shows as half a
    star rather than being rounded to something that was never given.  */
.eat-visit-rating-stars {
    --eat-rating-max: 5;

    display: inline-block;
    width: calc(1em * var(--eat-rating-max));
    height: 1em;
    background: linear-gradient(
        to right,
        var(--eat-colour-rating) calc(100% * var(--eat-rating, 0) / var(--eat-rating-max)),
        var(--eat-colour-light-grey) calc(100% * var(--eat-rating, 0) / var(--eat-rating-max))
    );

    /*  The star shapes themselves, punched out of that gradient.  */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15.27 16.18 19l-1.64-7.03L20 7.24l-7.19-.61L10 0 7.19 6.63 0 7.24l5.46 4.73L3.82 19z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15.27 16.18 19l-1.64-7.03L20 7.24l-7.19-.61L10 0 7.19 6.63 0 7.24l5.46 4.73L3.82 19z'/%3E%3C/svg%3E");
    -webkit-mask-size: 1em 1em;
    mask-size: 1em 1em;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

.eat-visit-rating-value {
    font-weight: 600;
}




/*  ********************************************************************************  **

    A visit's words and photographs

**  ********************************************************************************  */

.eat-visit-content {
    font-size: calc(var(--eat-font-size-p) * 0.9);
}
.eat-visit-content > :first-child {
    margin-top: 0;
}
.eat-visit-content > :last-child {
    margin-bottom: 0;
}

/*  Both galleries -- a venue's own and a visit's -- share this. The venue one
    sits under the write-up with room to breathe; a visit's is tucked inside a
    carousel slide, so its thumbnails are smaller.  */
.eat-gallery {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/*  The theme's global li spacing would otherwise put an uneven top margin on
    every item but the first, stepping the grid down.  */
.eat-gallery-item {
    margin: 0;
    padding: 0;
}

.eat-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
}
.eat-gallery a {
    display: block;
}
.eat-gallery a:hover img,
.eat-gallery a:focus img {
    opacity: 0.8;
}

/*  The focus ring is what a keyboard user follows from picture to picture, so
    it sits outside the image rather than being clipped by the rounded corner.  */
.eat-gallery a:focus-visible {
    outline: 2px solid var(--eat-colour-primary);
    outline-offset: 2px;
}

.eat-venue-gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.eat-visit-gallery {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}




/*  ********************************************************************************  **
**  ********************************************************************************  **

    Responsive Media Queries

    Following the breakpoints in default.css.

**  ********************************************************************************  **
**  ********************************************************************************  */




/*  ********************************************************************************  **

    Large tablet - 992px

**  ********************************************************************************  */

@media screen and (min-width: 992px) {

    /*  Two columns from here up: large tablet and desktop.

        minmax (0, ...) rather than a bare fraction, because a grid column will
        not shrink below its content on its own -- a long word or a wide image
        in the write-up would otherwise push the ratings out of the row.

        The write-up takes twice the width. The ratings are a short list of
        numbers and would leave an even column mostly empty.  */
    .eat-venue-details-container {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    /*  Two columns is not enough for three panels, so the write-up takes the
        left of both rows and the ratings and the contact details stack down
        the right of it. Without this the third panel would drop under the
        write-up and leave the right column half empty.  */
    .eat-venue-details {
        grid-row: span 2;
    }

}




/*  ********************************************************************************  **

    Desktop - 1200px

**  ********************************************************************************  */

@media screen and (min-width: 1200px) {

    /*  Room for all three side by side.  */
    .eat-venue-details-container {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .eat-venue-details {
        grid-row: auto;
    }

}