/* XRT — shared styles for the Sip & Savour event pages.
   index.html keeps its own inline <style> block; this file is used by
   sip-savour.html and the two event pages so the CSS lives in one place. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: normal;
  margin: 0;
  background-color: #0b0b0b;
  color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

p {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  color: #e8e8e8;
  line-height: 1.7;
}

a { color: #fff; }

/* ---------- header / footer ---------- */

header {
  background-color: #111;
  color: #fff;
  padding: 0.85rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .site-title {
  /* 44px minimum tap target */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

header .site-title img { width: 110px; height: auto; display: block; }

header nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  /* 44px minimum tap target — this was 15px tall on a phone */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

header nav a:hover { text-decoration: underline; }

/* Keep the sticky header on ONE line on phones — stacking it eats the viewport
   on every scroll. Just shrink the logo instead. */
@media (max-width: 768px) {
  header { padding: 0.7rem 5%; }
  header .site-title img { width: 82px; }
  header nav a { font-size: 0.72rem; }
}

footer {
  background-color: #111;
  padding: 3rem 5% 2.5rem;
  margin-top: 4rem;
}

footer .footer-inner { max-width: 1200px; margin: 0 auto; }
footer p { margin: 0.4rem 0; font-size: 0.9rem; }
footer a {
  color: #fff;
  /* 44px minimum tap target */
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* ---------- layout ---------- */

.container {
  padding: 3rem 5%;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

.eyebrow {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 0.6rem;
}

.backlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bdbdbd;
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.backlink:hover { color: #fff; }

a.button {
  display: inline-block;
  background-color: #fff;
  color: #000;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  padding: 13px 28px;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 1.2rem;
}

a.button:hover { background-color: #ddd; }

a.button.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #555;
}

a.button.ghost:hover { border-color: #fff; background: transparent; }

/* ---------- event cards (sip-savour.html) ---------- */

.event-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

.event-card {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #141414;
  border: 1px solid #262626;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.event-card:hover { transform: translateY(-4px); border-color: #5a5a5a; }

/* The poster is a 9:16 still. Crop it to a wide band for the card so the card
   stays a sensible height — the full frame lives on the event page itself. */
.event-card .card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}

.event-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-card .card-body { padding: 1.4rem 1.5rem 1.7rem; }

.event-card h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.event-card .card-meta {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 0.8rem;
}

.event-card .card-cta {
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

@media (max-width: 768px) {
  .event-cards { grid-template-columns: 1fr; gap: 1.5rem; }
  .event-card .card-media { aspect-ratio: 16 / 11; }
}

/* ---------- featured wine, inside each event card ---------- */

/* This sits INSIDE the card's wrapping <a>, so the winery link cannot live here
   too: a nested <a> is invalid and would split the card's single tap target,
   which matters most on mobile. The linked logo is on the event page itself. */
.event-card .card-wine {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid #262626;
}

/* Both logos are black-on-transparent. Without this white chip they vanish into
   the #141414 card, the same trap as the hub's .logo-card. */
.event-card .wine-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 66px;
  padding: 0.55rem;
  background: #fff;
  border-radius: 6px;
}

.event-card .wine-chip img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Capped by shape, not by one shared height: the Tohani lockup is 1.7:1 and the
   Bruce Jack roundel is square, so a single cap makes the roundel read far
   bigger. Same reasoning as .wine-logos img.wide / .square. */
.event-card .wine-chip img.wide   { max-height: 42px; }
.event-card .wine-chip img.square { max-height: 48px; }

.event-card .wine-label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d7d7d;
  margin-bottom: 0.2rem;
}

.event-card .wine-name {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #d6d6d6;
}

/* ---------- portrait promo video ---------- */

/* The promos are 1080x1920. At width:100% on a desktop that is ~3000px tall,
   so the wrapper is capped by height and the video is centred on black. */
.promo {
  position: relative;
  background: #000;
  display: flex;
  justify-content: center;
  padding: 0;
}

/* What autoplays is a short silent loop. This pill swaps in the full film with
   sound, so the big download only happens for someone who asked for it. */
.promo-play {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.promo-play:hover { background: rgba(0, 0, 0, 0.8); border-color: #fff; }

/* Once the full film is playing, native controls appear and the pill is gone. */
.promo.is-full .promo-play { display: none; }

.promo video {
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  aspect-ratio: 9 / 16;
  display: block;
  background: #000;
  object-fit: contain;
}

/* Full-bleed on a phone — it was shot for this shape. Breakpoint is 600px, not
   768px: at 768 (iPad portrait) a full-width 9:16 video is 1365px tall, well past
   the bottom of the screen. The max-height cap always applies. */
@media (max-width: 600px) {
  .promo video { max-width: 100%; max-height: 88vh; }
}

.promo-note {
  font-family: "Poppins", sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7d7d7d;
  text-align: center;
  padding: 0.9rem 5% 0;
  margin: 0;
}

/* ---------- event intro ---------- */

.event-intro { max-width: 760px; }
.event-intro h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}
.event-intro .meta {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 1.6rem;
}

@media (max-width: 768px) {
  .event-intro h1 { font-size: 1.85rem; }
  .section-title { font-size: 1.6rem; }
  .container { padding: 2.2rem 5%; }
}

/* ---------- photo strip ---------- */

.strip {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;
  padding: 10px 0 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-track { background: #1c1c1c; border-radius: 3px; }
.strip::-webkit-scrollbar-thumb { background: #5a5a5a; border-radius: 3px; }

/* Fixed height, width follows each photo's own aspect ratio. Diana's set mixes
   wide 2-up composites with 4:3 and 9:16 frames — a fixed square tile letterboxes
   the wide ones into a thin band with black bars above and below. */
.strip-item {
  flex: 0 0 auto;
  height: 340px;
  scroll-snap-align: start;
  background: #000;
  border: 1px solid #262626;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

.strip-item:hover { border-color: #6e6e6e; }

/* contain, NOT cover: the XRT logo and QR code are burned into the bottom-right
   corner of these frames. Cropping to fill would cut the branding off. */
.strip-item img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* On a phone the strip becomes a vertical stack. A fixed-height horizontal strip
   only works when the thumbnails share an aspect ratio; these do not, so wide
   frames either get letterboxed into a band or run wider than the screen and have
   to be scrolled sideways. Stacked full-width, every photo is shown whole. */
@media (max-width: 768px) {
  .strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .strip-item { height: auto; width: 100%; }
  .strip-item img { width: 100%; height: auto; }
}

/* ---------- lightbox ---------- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 4vh 4vw;
  align-items: center;
  justify-content: center;
}

.lightbox.show { display: flex; opacity: 1; }

.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.lightbox .close {
  position: fixed;
  top: 14px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox .close:hover { background: rgba(255, 255, 255, 0.28); }



/* ---------- featured wines ---------- */
/* White cards: both supplied logos are black-on-transparent and would vanish
   on the #0b0b0b page. Same treatment the homepage partner grid uses. */

.wine-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 620px;
}

.wine-logos a {
  flex: 1 1 220px;
  min-width: 170px;
  max-width: 300px;
  text-decoration: none;
  /* Column + flex:1 on the card below: the roundel is square and the Tohani
     lockup is wide, so without this the two white cards end at different
     heights and the captions sit on different baselines. */
  display: flex;
  flex-direction: column;
}

.wine-logos .logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 152px;
  padding: 1.6rem;
  background: #fff;
  border-radius: 8px;
}

/* contain, never cover — cropping a supplied logo cuts the mark */
.wine-logos img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Capped by shape, not by a single height: the Tohani lockup is 1.7:1 and the
   Bruce Jack roundel is square, so matching their heights would make the
   roundel read twice the size. These two caps balance them optically. */
.wine-logos img.wide   { max-height: 92px; }
.wine-logos img.square { max-height: 112px; }

.wine-logos .wine-name {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* ---------- a barrel's journey (a-barrels-journey.html) ---------- */

/* Diana's mock-up: two staggered columns, each paragraph beside or between the
   photos. Grid areas give the stagger; on a phone it collapses to one column in
   reading order, each paragraph followed by its photos. */
.journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "i1 t1"
    "i1 i2"
    "t2 i2"
    "i3 t3"
    "i3 i4";
  column-gap: 3rem;
  row-gap: 2rem;
  align-items: start;
}

.journey figure { margin: 0; }
.journey img { width: 100%; height: auto; display: block; border-radius: 10px; }
.journey p { margin: 0; }
.j-i1 { grid-area: i1; } .j-t1 { grid-area: t1; }
.j-i2 { grid-area: i2; } .j-t2 { grid-area: t2; }
.j-i3 { grid-area: i3; } .j-t3 { grid-area: t3; }
.j-i4 { grid-area: i4; }

@media (max-width: 768px) {
  .journey {
    grid-template-columns: 1fr;
    grid-template-areas: "t1" "i1" "t2" "i2" "t3" "i3" "i4";
    row-gap: 1.4rem;
  }
}

/* Masonry gallery, like Diana's collage: each photo keeps its own shape, nothing
   is cropped. CSS columns fill top to bottom, so date order reads down each
   column. Reuses .strip-item so xrt.js wires up the lightbox. */
.photo-grid {
  column-count: 2;
  column-gap: 12px;
  padding: 10px 0 18px;
}

.photo-grid .strip-item {
  height: auto;
  margin: 0 0 12px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.photo-grid .strip-item img { width: 100%; height: auto; }

@media (max-width: 768px) {
  .photo-grid { column-count: 2; column-gap: 8px; }
  .photo-grid .strip-item { margin-bottom: 8px; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cta-row a.button { margin-top: 1.2rem; }