/* ---------- Startsida ---------- */

.home {
  background: var(--color-dark);
  color: var(--color-cream);
  font-family: var(--font-serif);
}

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  height: 100lvh;          /* hela skärmen, även bakom statusfältet och adressfältet */
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero__photo,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(.36);       /* mörk "skugga" över både bild och film */
}
/* Filmen tonar in över stillbilden när den börjat spela */
.hero__video { opacity: 0; transition: opacity 1.2s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 8vh, 4.5rem);
  margin-top: -4%;
}
.hero__logo {
  width: min(560px, 72vw);
  height: auto;
}
.hero__cta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;      /* alla knappar lika breda som den bredaste */
  justify-content: center;
  gap: 1rem;
}
@media (max-width: 480px) { .hero__cta { grid-auto-flow: row; } }   /* på smala skärmar ligger knapparna under varandra, lika breda */
.hero__btn {
  padding: .8rem 1.7rem;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--color-cream);
  font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hero__btn--outline { border-color: rgba(239, 227, 211, .55); }
.hero__btn--filled  { background: var(--color-wine); border-color: var(--color-wine); }
.hero__btn:hover,
.hero__btn:focus-visible { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-dark); }
.hero__btn:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 4px; }

/* Scrollscen */
.pour {
  position: relative;
  height: 260vh;           /* scrollsträckan för animationen */
}
.pour__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;          /* hela skärmen, även bakom webbläsarens fält */
  overflow: hidden;
}

.pour__stage { --bottle-h: min(56vh, 70vw); }   /* flaskans höjd */

.pour__tagline {
  /* Textspalten smalnar av så att den aldrig hamnar under flaskan */
  --col: min(34rem, max(15rem, calc(72vw - 0.55 * var(--bottle-h) - 8vw - 2rem)));
  position: absolute;
  left: 8%;
  top: 16%;
  width: var(--col);
  font-weight: 600;
  line-height: 1.2;
}
/* Rubriken: alltid två rader. Teckenstorleken anpassas så att första raden ryms i spalten. */
.pour__headline {
  font-size: min(clamp(1.6rem, 3.4vw, 3rem), calc(var(--col) / 12.2));
}
.pour__headline span { display: block; white-space: nowrap; }

.pour__sub {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  line-height: 1.4;
  opacity: .85;
}

.pour__quote {
  --q: clamp(.95rem, 1.3vw, 1.15rem);   /* citatets teckenstorlek */
  --lh: 1.6;                              /* citatets radhöjd */
  position: relative;
  margin: clamp(1.8rem, 5vh, 3rem) 0 0;
  padding-left: clamp(1.4rem, 2.4vw, 2rem);
  border-left: 2px solid rgba(125, 34, 56, .75);   /* en gemensam linje för citat och namn */
  font-weight: 300;
}
/* Citattecknet sitter mitt på linjen, i höjd med citatets första rad. Rutan i bakgrundsfärgen
   täcker linjen längs första raden, så att linjen "börjar" under tecknet. */
.pour__quote::before {
  content: "\201C";
  position: absolute;
  left: -1px;                                    /* mitten av den 2 px breda linjen */
  top: 0;
  transform: translateX(-50%);
  box-sizing: border-box;
  height: calc(var(--q) * var(--lh));            /* exakt första radens höjd */
  padding: .3em .25em 0;                          /* tecknet ligger högt i sin ruta, så det trycks ner lite */
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-bottle);
  background: var(--color-dark);
}
.pour__quote blockquote { margin: 0; }
.pour__quote p {
  margin: 0;
  font-size: var(--q);
  line-height: var(--lh);
}
.pour__quote blockquote p { opacity: .9; }
.pour__quote figcaption { margin-top: 1.4em; }
.pour__author-name { opacity: .95; }
.pour__author-role { opacity: .78; }

.bottle {
  position: absolute;
  left: 72%;
  top: 40%;
  height: var(--bottle-h);
  width: auto;
  aspect-ratio: 160 / 480;
  color: var(--color-bottle);
  transform-origin: 50% 55%;
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform;
}
.bottle .bottle__glass { fill: var(--color-dark); }

.wine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wine__body   { fill: var(--color-wine); }
/* Vinstrålen: samma handritade linjer som flaskan och vågorna */
.stream__fill { fill: var(--color-wine); stroke: none; }
.stream__edge {
  fill: none;
  stroke: var(--color-bottle);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stream__edge--thin { stroke-width: 1.6; opacity: .7; stroke-dasharray: 46 16 22 12; }
.stream__ripple { stroke-width: 2.4; }
.wine__line {
  fill: none;
  stroke: var(--color-bottle);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 140 26 60 18;
}
.wine__line--thin { stroke-width: 2; stroke-dasharray: 90 34 160 22; }

/* Öppettider */
.hours {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-inline: 1rem;
  text-align: center;
  transform: translateY(100vh);   /* JS lägger texten precis under vinytan */
  transform-origin: 50% 0;
  will-change: transform;
}
/* Storlekar följer även skärmens höjd så att texten ryms på låga skärmar */
.hours h2 {
  font-size: clamp(1.8rem, min(6vw, 6.8vh), 4.5rem);
  font-weight: 700;
  margin-bottom: min(2.5rem, 3.2vh);
}
.hours dl { display: grid; gap: min(2rem, 2.6vh); }
.hours dt { font-size: clamp(1.1rem, min(2.4vw, 3.5vh), 2rem); font-weight: 600; }
.hours dd { margin: 0; font-size: clamp(.95rem, min(1.8vw, 2.8vh), 1.5rem); opacity: .85; }

/* Bandets underkant (statisk våg som följer med det röda) */
.pour__stage { --wave-h: clamp(80px, 11vw, 160px); }
.band-edge {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--wave-h);
  pointer-events: none;
  will-change: transform;
  transform: translateY(100vh);
}
.band-edge__fill { fill: var(--color-wine); }
.band-edge__line {
  fill: none;
  stroke: var(--color-bottle);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 140 26 60 18;
  vector-effect: non-scaling-stroke;
}
.band-edge__line--thin { stroke-width: 2; stroke-dasharray: 90 34 160 22; }

.hours__cta {
  display: inline-block;
  margin-top: min(2.6rem, 4.4vh);
  padding: .85rem 2.1rem;
  border: 2px solid var(--color-cream);
  background: var(--color-cream);
  color: var(--color-wine);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;            /* knappen går att klicka även om resten av öppettiderna är en dekor */
  transition: background-color .2s ease, color .2s ease;
}
.hours__cta:hover,
.hours__cta:focus-visible { background: transparent; color: var(--color-cream); }
.hours__cta:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 4px; }

/* Teckningar vid öppettiderna */
.hours__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hours__glass,
.hours__guy {
  position: absolute;
  height: auto;
}
.hours__decor { --gap: clamp(5.5rem, 22vw, 30rem); }  /* avstånd från mitten till teckningarna */
.hours__glass {
  right: calc(50% + var(--gap));
  top: 18%;
  width: clamp(120px, min(21vw, 27vh), 300px);
}
.hours__guy {
  left: calc(50% + var(--gap));
  top: 36%;
  width: clamp(125px, min(20vw, 26vh), 290px);
}
/* Teckningarna ligger alltid bredvid texten. Får de inte plats klipps de av i skärmkanten. */

/* Meny */
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(2rem, 5vw, 4rem) 1rem clamp(4rem, 10vw, 7rem);
  text-align: center;
  background: var(--color-dark);
}
.menu h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
}
.menu__card {
  display: block;
  width: clamp(180px, 22vw, 300px);
  transition: transform .25s ease;
}
.menu__card img { width: 100%; height: auto; }
.menu__card:hover,
.menu__card:focus-visible { transform: translateY(-4px) rotate(-1deg); }
/* Smal skärm: samma lyft som vid hover när kortet ligger mitt på skärmen (klassen sätts av menu-card.js) */
@media (max-width: 800px) {
  .menu__card.is-centered { transform: translateY(-4px) rotate(-1deg); }
}

/* Välkomna: bilder som fotografier utlagda på bordet, man sveper i sidled */
.gallery {
  padding-block: 0 clamp(4rem, 10vw, 7rem);
  background: var(--color-dark);
  text-align: center;
}
.gallery h2 {
  /* mindre och lugnare än "Meny": en kursiv hälsning mellan två tunna linjer */
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: min(100% - 2.5rem, 28rem);
  margin: 0 auto clamp(.8rem, 2vw, 1.4rem);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--color-cream);
  opacity: .9;
}
.gallery h2::before, .gallery h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .35;
}
.gallery__viewport { position: relative; }
.gallery__track {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: 1.6rem max(1.25rem, calc((100vw - 76rem) / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scroll-padding-inline: max(1.25rem, calc((100vw - 76rem) / 2));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* kanterna tonar ut, så man ser att det finns mer att svepa till */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--color-cream); outline-offset: -4px; }

.print {
  flex: none;
  margin: 0;
  padding: .55rem;                       /* vit kant som på ett papperskopierat foto, som menykortet */
  background: var(--color-cream);
  box-shadow: 0 .9rem 1.8rem rgba(0, 0, 0, .45), 0 .15rem .4rem rgba(0, 0, 0, .4);
  scroll-snap-align: center;
  transform: rotate(var(--tilt, -1deg));
  transition: transform .3s ease;
}
.print:nth-child(even) { --tilt: 1.1deg; }
.print:nth-child(3n) { --tilt: -.5deg; }
.print img {
  display: block;
  height: clamp(300px, 62vw, 460px);     /* samma höjd på alla, bredden följer bildens format */
  width: auto;
  max-width: none;
  filter: brightness(.9);
}
.print:hover { transform: rotate(0deg) translateY(-6px); }

.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border: 1.5px solid var(--color-cream);
  border-radius: 50%;
  background: rgba(29, 28, 30, .78);
  color: var(--color-cream);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.gallery__arrow[hidden] { display: none; }
.gallery__arrow--prev { left: max(.75rem, calc((100vw - 76rem) / 2 - 1.5rem)); }
.gallery__arrow--next { right: max(.75rem, calc((100vw - 76rem) / 2 - 1.5rem)); }
.gallery__arrow svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gallery__arrow:hover, .gallery__arrow:focus-visible { background: var(--color-cream); color: var(--color-dark); }
.gallery__arrow:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 3px; }
/* pilarna behövs bara där man har mus; på telefon sveper man */
@media (hover: none) { .gallery__arrow { display: none; } }

.btn {
  display: inline-block;
  padding: .7rem 1.7rem;
  border: 2px solid var(--color-cream);
  color: var(--color-cream);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--color-cream); color: var(--color-dark); }
.menu a:focus-visible { outline: 3px solid var(--color-cream); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .menu__card, .btn, .print, .gallery__arrow { transition: none; }
  .menu__card:hover, .menu__card:focus-visible, .menu__card.is-centered { transform: none; }
}


/* Mobil */
/* Smal skärm: flaskan hoppar ner under texten och spalten får hela bredden */
@media (max-width: 800px) {
  .pour__tagline { --col: min(88vw, 36rem); top: max(5%, calc(env(safe-area-inset-top, 0px) + 14px)); left: 6%; }
  .pour__quote { --q: .92rem; --lh: 1.55; }
  .bottle { left: 62%; top: 70%; z-index: 1; }
  /* vinet ligger över flaskan så att det täcker den när det stiger */
  .wine, .band-edge { z-index: 2; }
  .hours { z-index: 3; }
}

/* ---------- iPhone/iPad: låt sidan synas bakom Safaris fält ----------
   Safari på iPhone ritar sidan även bakom statusfältet (klockan) och adressfältet, men själva
   "skärmen" som sidan räknar med slutar före dem. Därför sträcker vi ut toppfilmen och
   vinscenen en bit utanför den ytan, så att de syns bakom fälten i stället för grå bakgrund.
   Klassen .over sätts av ett litet skript i <head> (bara på iPhone/iPad, eller med ?over i adressen). */
.over { --over-top: 70px; --over-bot: 110px; }

/* toppen: filmen går upp bakom klockan och ner bakom adressfältet */
.over .hero {
  height: calc(100lvh + var(--over-bot));
  padding-bottom: var(--over-bot);          /* loggan och knapparna ligger kvar mitt på den synliga ytan */
  overflow: visible;
  clip-path: inset(calc(-1 * var(--over-top)) 0 0 0);
}
.over .hero__photo,
.over .hero__video {
  top: calc(-1 * var(--over-top));
  height: calc(100% + var(--over-top));
}

/* vinscenen: vinet fortsätter ner bakom adressfältet medan det stiger */
.over .pour__stage {
  overflow-x: clip;                          /* inget får sticka ut i sidled (då blir sidan för bred) */
  overflow-y: visible;
  clip-path: inset(calc(-1 * var(--over-top)) 0 calc(-1 * var(--over-bot)) 0);
}
.over .wine { overflow: visible; }
.over body { overflow-x: clip; }            /* extra skydd mot att sidan blir bredare än skärmen */