/* ------------------------------------------------------------------
   VMS site-specific styles (loaded after style.css)

   Brand accent (swapped from the template's gold on 2026-07-19):
     primary sage   #A3B18A  (was #C19D60; rgba form 163,177,138)
     light sage     #B8C6A6  (was #e4a853)
     mid sage       #A9B592  (was #c5a47e)
     dark sage      #87966F  (was #aa8453)
   Applied in css/style.css, css/plugins/select2.css, and this file.
   To retune to the exact logo sage, find-and-replace these four hexes.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Logo sizing

   style.css sizes the logo by WIDTH (.logo-img { width:165px; padding:20px 0 })
   which suited the template's wide 549x149 wordmark (~45px tall). The real VMS
   mark is near-square (900x746), so 165px wide renders ~137px tall and overflows
   the 90px navbar. Constrain by height and drop the vertical padding instead.
   ------------------------------------------------------------------ */
.navbar .logo-wrapper {
    float: none;
    display: flex;
    align-items: center;
    padding: 0;
}
.navbar .logo {
    display: flex;
    align-items: center;
    padding: 0;
}
.navbar .logo-img {
    width: auto;
    height: 58px;
    max-height: 58px;
    padding: 0;
    margin: 0;
}
/* Slightly tighter once the bar becomes solid on scroll */
.navbar.nav-scroll .logo-img {
    width: auto;
    height: 50px;
    max-height: 50px;
    padding: 0;
}
@media (max-width: 991px) {
    .navbar .logo-wrapper { padding: 0; }
    .navbar .logo-img,
    .navbar.nav-scroll .logo-img {
        width: auto;
        height: 46px;
        max-height: 46px;
        padding: 0;
    }
}

/* Age gate */
.age-gate[hidden] {
    display: none;
}
.age-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(17, 17, 17, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.age-gate-box {
    max-width: 480px;
    width: 100%;
    padding: 60px 40px;
    background: #1b1b1b;
    border: 1px solid rgba(163, 177, 138, 0.4);
}
.age-gate-box h2 {
    font-family: 'Libre Caslon Display', serif;
    color: #fff;
    margin-bottom: 15px;
}
.age-gate-box h4 {
    color: #A3B18A;
    margin: 20px 0 25px;
}
.age-gate-box p {
    color: #999;
    margin-bottom: 0;
}
.age-gate-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.age-gate-buttons .button-1,
.age-gate-buttons .button-3 {
    cursor: pointer;
}
/* .button-3 is a dark outline (border + text #1b1b1b) meant for light sections;
   on the age gate's #1b1b1b panel it was invisible. Light it up here only —
   the class is still used correctly on cream/white sections elsewhere. */
.age-gate-buttons .button-3 {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background-color: transparent;
}
.age-gate-buttons .button-3:hover,
.age-gate-buttons .button-3:focus-visible {
    border-color: #fff;
    background-color: #fff;
    color: #1b1b1b;
}
.age-gate-note {
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Hero video background (homepage)

   Built on the template's .banner-header structure so the caption
   typography matches the inner pages. The YouTube iframe sits behind
   everything and is scaled to COVER the hero (a 16:9 iframe can't use
   object-fit, so it's sized off both vw and vh and centred).

   To change the video: edit the TWO video IDs in the iframe src on
   index.html — once in the path and once in the `playlist` param.
   The playlist param is what makes YouTube loop a single video.
   ------------------------------------------------------------------ */
.hero-video {
    position: relative;
    overflow: hidden;
    background-color: #111;
}
/* Still image sits under the iframe: shows during load and if the
   video is blocked (some mobile browsers refuse iframe autoplay). */
.hero-video .hero-video-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-video .hero-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;        /* 16:9 derived from viewport width  */
    min-width: 177.78vh;    /* 16:9 derived from viewport height */
    min-height: 100vh;
    border: 0;
    pointer-events: none;   /* clicks pass through; no YT UI */
}
.hero-video .hero-video-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
}
/* Lift the caption and scroll arrow above the video + overlay */
.hero-video > .container,
.hero-video .arrow {
    position: relative;
    z-index: 2;
}
.hero-video .arrow {
    position: absolute;
    z-index: 2;
}

/* ------------------------------------------------------------------
   Real-photo aspect normalisation

   The VMS photo library mixes portrait (1080x1440), near-square and
   landscape (1024x683) shots. The template assumed one fixed ratio per
   slot, so without this the cards come out uneven. object-fit: cover
   crops to a consistent frame instead of distorting.
   ------------------------------------------------------------------ */
.about .col-md-3 img,
.news .item .position-re > img {
    width: 100%;
    object-fit: cover;
}
.about .col-md-3 img {
    height: 440px;
}
.news .item .position-re > img {
    height: 420px;
}
/* Alternating feature rows (Kari Vodka / Kari Gin pages). The template
   assumed landscape 1350x1080; the real library is mostly portrait, so
   without a fixed frame the rows grow very tall. */
.features .img img {
    width: 100%;
    height: 540px;
    object-fit: cover;
}
/* The World Vodka Awards certificate is artwork, not a photo — cropping it
   would cut off the citation, so contain it on its own black ground. */
.features .img img[src$="Kari-Vodka-Award.png"] {
    object-fit: contain;
    background: #000;
}
@media (max-width: 991px) {
    .features .img img { height: 400px; }
}

/* Gallery tiles — the real photos mix portrait and landscape, so give every
   tile the same frame and let object-fit crop rather than leaving a ragged grid. */
.gallery-item .gallery-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}
@media (max-width: 991px) {
    .gallery-item .gallery-img img { height: 320px; }
}

/* Split panel next to the cocktail list */
.wine-banner .img img {
    width: 100%;
    max-height: 720px;
    object-fit: cover;
}
/* Product shot in the dark Kari Vodka band */
.about.bg-blck .col-md-5 > img {
    width: 100%;
    max-height: 680px;
    object-fit: cover;
}
@media (max-width: 991px) {
    .about .col-md-3 img { height: 320px; }
    .news .item .position-re > img { height: 340px; }
}

/* Respect users who ask for reduced motion: hide the moving video and
   fall back to the still image underneath. */
@media (prefers-reduced-motion: reduce) {
    .hero-video .hero-video-bg iframe {
        display: none;
    }
}

/* On small screens mobile browsers commonly block iframe autoplay and
   the cover-scaling gets extreme, so use the still image instead. */
/* Mobile: the video plays here too (muted + playsinline satisfies mobile
   autoplay policies). Filling a tall portrait viewport with 16:9 footage means
   heavy centre-cropping, so the hero is a little shorter on phones to keep the
   required zoom — and therefore the crop — under control. The still image stays
   behind the iframe as the fallback if autoplay is refused or the network drops. */
@media (max-width: 767px) {
    .hero-video.full-height {
        min-height: 82vh;
    }
    .hero-video .hero-video-bg iframe {
        min-width: 145.8vh;   /* 16:9 against the reduced hero height */
        min-height: 82vh;
    }
}