/* ============================================
   PAZZO.be Clone — Design System Stylesheet
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* --- CSS Reset & Base --- */
*, ::after, ::before { box-sizing: border-box; }
body, figure, h1, h2, p { margin: 0; }
h1, h2, p { overflow-wrap: break-word; }
ul[role=list] { list-style: none; }
html:focus-within { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  line-height: 1.7;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 0.125vw + 1em, 1.1rem);
  color: #212529;
}
a:not([class]) { text-decoration-skip-ink: auto; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

/* --- Custom Properties --- */
:root {
  --color-black: #212529;
  --color-white: #ffffff;
  --font-plain: 'Inter', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --flow-space: 1.5rem;
  --max-width: 70rem;
  --spacing0: 0.5rem;
  --spacing1: 0.688rem;
  --spacing2: 1rem;
  --spacing3: 1.4rem;
  --spacing4: 1.96rem;
  --spacing5: 2.744rem;
  --spacing6: 3.842rem;
  --spacing7: 5.378rem;
}

/* --- Layout --- */
.wrapper {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.section {
  padding: var(--spacing5) 0;
}
@media (min-width: 768px) {
  .section { padding: var(--spacing6) 0; }
}
.flow > * + * { margin-top: var(--flow-space); }
.list-unstyled { padding-left: 0; list-style: none; }

/* --- Language Switcher --- */
.langwrapper {
  position: relative;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
.langswitch {
  position: absolute;
  top: -6px;
  right: 32px;
  display: flex;
  list-style-type: none;
  padding-left: 0;
}
.langswitch li, .langswitch li a { color: var(--color-black); }
.langswitch li a {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0 10px;
}
.langswitch li a.first::after {
  content: "|";
  position: relative;
  height: 10px;
  top: -1px;
  right: -10px;
}
#home .langswitch li a { color: #fff; }

/* --- Header --- */
.site-head {
  padding: 0.6rem 0;
  border-bottom: 5px solid var(--color-black);
  color: var(--color-black);
  line-height: 1.1;
}
.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  padding-top: 1rem;
}
.site-head__brand {
  display: block;
  position: relative;
  z-index: 100;
}
.site-head__brand img {
  opacity: 0.8;
}

/* --- Navigation --- */
.navigation ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  padding: 0;
}
.navigation li { margin: 0.1rem; }
.navigation a {
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-black);
  font-size: 15px;
  font-weight: 600;
  transition: all 0.4s;
}
.navigation a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: ".";
  color: transparent;
  background: var(--color-black);
  height: 2px;
  transition: all 0.4s;
}
.navigation a:hover { color: #555; }
.navigation a:hover::after, .active a::after { width: 100%; }
.navigation a.btn { font-size: 14px; }

/* --- Hero / Homepage --- */
#home {
  background-image: var(--home-bg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
#home .site-head {
  border-bottom-color: rgba(255,255,255,0.2);
}
#home .site-head__brand img { filter: brightness(0) invert(1); opacity: 0.9; }
#home .navigation a { color: #fff; font-weight: 600; }
#home .navigation a::after { background-color: #fff; }
#home .langswitch li a { color: #fff; }
#home h1 { color: #fff; z-index: 0; }

#home #main-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 66dvh;
}

/* Hero heading */
#home h1 span {
  display: block;
  font-size: clamp(2.2rem, 1.83rem + 3.04vw, 4rem);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 3rem;
  color: #fff;
  animation: fadeInUp 0.9s calc(0.1s * var(--delay)) ease-out both;
}
#home h1 i, .h1 i, h1 i, h2 i {
  font-family: var(--font-serif);
  font-size: 112%;
  font-weight: 300;
}

/* Hero buttons */
#home #main-content ul {
  margin-top: 0;
  position: relative;
  z-index: 0;
  list-style-type: none;
  padding-left: 0;
}
@media (min-width: 400px) {
  #home #main-content ul { display: flex; }
}
#home #main-content ul li {
  margin-right: var(--spacing2);
  margin-bottom: var(--spacing2);
  animation: slideInLeft 1s calc(0.1s * var(--delay)) ease-out both;
}
#home #main-content ul li a { width: 200px; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-plain);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.84rem + -0.18vw, 0.875rem);
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: transparent;
  transition: all 400ms ease-in-out;
}
.btn-outline {
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn:hover {
  color: #fff;
  background-color: var(--color-black);
  border-color: var(--color-black);
}
#home .btn-outline {
  color: #fff;
  border: 1px solid #fff;
}
#home .btn-outline:hover {
  color: #fff;
  background-color: var(--color-black);
  border-color: var(--color-black);
}

/* --- Headings (subpages) --- */
h1, h2 {
  font-size: clamp(2.25rem, 1.83rem + 3.04vw, 3rem);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 3rem;
}
h2 {
  font-size: clamp(1.95rem, 1.61rem + 1.7vw, 2.83rem);
}
h1 em, h1 i, h2 em, h2 i {
  font-family: var(--font-serif);
  font-size: 112%;
  font-weight: 300;
}

/* --- Variant Layouts (image + text sections) --- */
.variant__1, .variant__2, .variant__3, .variant__4, .variant__even {
  align-items: center;
}

.variant__1 figure, .variant__2 figure, .variant__3 figure, .variant__4 figure,
.variant__1 aside, .variant__even aside {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  margin-bottom: 3rem;
}
.variant__1 article, .variant__2 article, .variant__3 article, .variant__4 article,
.variant__even article {
  margin-top: 0;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

/* variant__1: text left, image right */
@media (min-width: 768px) {
  .variant__1 figure { grid-column: 8 / 13; margin-bottom: 0; }
  .variant__1 article { grid-column: 1 / 7; }
}
@media (min-width: 992px) {
  .variant__1 figure { grid-column: 8 / 12; }
}

/* variant__2: image left, text right */
.variant__2 figure { margin-bottom: 3rem; }
@media (min-width: 768px) {
  .variant__2 figure { grid-column: 1 / 7; margin-bottom: 0; }
  .variant__2 article { grid-column: 8 / -1; }
}

/* variant__3: text left, image right (different column span) */
@media (min-width: 768px) {
  .variant__3 figure { grid-column: 8 / -1; margin-bottom: 0; }
  .variant__3 article { grid-column: 2 / 7; }
}

/* variant__4: image left (narrower), text right */
@media (min-width: 768px) {
  .variant__4 figure { grid-column: 1 / 5; margin-bottom: 0; }
  .variant__4 article { grid-column: 7 / 12; }
}

/* variant__even: text left, aside right */
.variant__even aside { margin-bottom: 3rem; margin-top: 0; }
@media (min-width: 768px) {
  .variant__even { align-items: start; }
  .variant__even aside { grid-column: 7 / 12; margin-bottom: 0; }
  .variant__even article { grid-column: 1 / 6; }
}
@media (min-width: 992px) {
  .variant__even aside { grid-column: 7 / 12; }
}

/* Images in variant sections */
.variant__1 figure img, .variant__2 figure img, .variant__3 figure img,
.variant__4 figure img, .variant__even aside img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Photo Grid --- */
.gallery { }
.photogrid {
  display: grid;
  grid-gap: 1rem;
}
@media (min-width: 48em) {
  .photogrid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  }
}
.photogrid__cell a {
  display: block;
  overflow: hidden;
  height: 160px;
}
.photogrid__cell a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.photogrid__cell a:hover {
  border-radius: 8px;
}
.photogrid__cell a:hover img {
  transform: scale(1.05);
}

/* --- Menu / Pricelist --- */
.menu h2 {
  grid-column: 1 / -1;
}
@media (min-width: 992px) {
  .menu h2 { grid-column: 2 / 12; }
}
.menu h2:not(:first-of-type) {
  padding-top: var(--spacing6);
}
.menu ul {
  margin-top: 0;
  grid-column: 1 / -1;
}
@media (min-width: 992px) {
  .menu ul { grid-column: 2 / 12; }
}
.pricelist li {
  padding: var(--spacing1) 0;
  border-top: 1px solid rgba(33, 37, 41, 0.5);
  display: flex;
  justify-content: space-between;
}
.pricelist li:last-of-type {
  border-bottom: 1px solid rgba(33, 37, 41, 0.5);
}
.pricelist li span:first-of-type {
  margin-right: var(--spacing4);
}

/* --- Footer --- */
footer {
  font-family: var(--font-serif);
  color: var(--color-black) !important;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  padding-bottom: var(--spacing7);
  margin-bottom: var(--spacing2);
}
footer a { text-decoration: none; color: inherit; }
footer a:hover { opacity: 0.6; }
footer address {
  font-style: normal;
  white-space: nowrap;
}
.social ul { margin-top: 0; }
.social ul li:nth-of-type(3n) {
  white-space: nowrap;
  margin-top: 2.5rem;
}

div.contact {
  border-top: 1px solid rgba(33, 37, 41, 0.5);
  padding-top: var(--spacing4);
  grid-column: 1 / 2;
}
@media (min-width: 768px) {
  div.contact { grid-column: 6 / 9; }
}
@media (min-width: 992px) {
  div.contact { grid-column: 7 / 10; }
}

div.social {
  border-top: 1px solid rgba(33, 37, 41, 0.5);
  padding-top: var(--spacing4);
  grid-column: 1 / 2;
}
@media (min-width: 576px) {
  div.social { grid-column: 3 / 4; }
}
@media (min-width: 768px) {
  div.social { grid-column: 9 / -1; }
}
@media (min-width: 992px) {
  div.social { grid-column: 10 / -1; }
}

/* --- Burger Menu (Mobile) --- */
.burger-menu__trigger {
  display: none;
}
.burger-menu__bar,
.burger-menu__bar::after,
.burger-menu__bar::before {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--color-black);
  border: 1px solid var(--color-black);
  position: absolute;
  border-radius: 3px;
  left: 50%;
  margin-left: -12px;
  transition: transform 350ms ease-in-out;
}
.burger-menu__bar {
  top: 50%;
  transform: translateY(-50%);
}
.burger-menu__bar::after,
.burger-menu__bar::before {
  content: "";
}
.burger-menu__bar::before { top: -8px; }
.burger-menu__bar::after { bottom: -8px; }

.burger-menu[enabled=true] .burger-menu__trigger {
  display: block;
  width: 2rem;
  height: 2rem;
  position: relative;
  z-index: 100;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger-menu[enabled=true] .burger-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  padding: 11rem 1.5rem 2rem;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  background: var(--color-white);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.burger-menu[enabled=true] .navigation ul > * + * {
  margin-top: 2rem;
}
.burger-menu[enabled=true] .navigation li {
  font-size: 1.5rem;
}
.burger-menu[enabled=true][status=open] .burger-menu__panel {
  visibility: visible;
  opacity: 1;
  transition: opacity 400ms ease;
  z-index: 10;
}
.burger-menu[enabled=true][status=closed] .burger-menu__panel > * {
  opacity: 0;
  transform: translateY(5rem);
}
.burger-menu[enabled=true][status=open] .burger-menu__panel > * {
  transform: translateY(0);
  opacity: 1;
  transition: transform 400ms cubic-bezier(0.17, 0.67, 0, 0.87) 600ms,
              opacity 400ms ease 800ms;
}
.burger-menu[enabled=true][status=open] .burger-menu__bar::before {
  top: 0;
  transform: rotate(45deg);
}
.burger-menu[enabled=true][status=open] .burger-menu__bar::after {
  top: 0;
  transform: rotate(-45deg);
}
.burger-menu[enabled=true][status=open] .burger-menu__bar {
  background: none;
  border-color: transparent;
  transform: rotate(180deg);
}

/* Burger menu on homepage (white bars) */
#home .burger-menu__bar,
#home .burger-menu__bar::after,
#home .burger-menu__bar::before {
  background: var(--color-white);
  border-color: var(--color-white);
}
#home .burger-menu[enabled=true] .burger-menu__panel {
  background: var(--color-black);
}
#home .burger-menu[enabled=true][status=open] .burger-menu__bar {
  background: none;
  border-color: transparent;
}
#home .burger-menu[enabled=true][status=open] .navigation a {
  color: #fff;
}

/* --- Skip Link --- */
.skip-link {
  display: inline-block;
  padding: 0.7rem 1rem 0.5rem;
  background: #f0f0f0;
  color: var(--color-black);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.skip-link:not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* --- Animations --- */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translate3d(0, 20%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideInLeft {
  0% { opacity: 0; transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Scroll-reveal animations */
.josh-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.josh-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Contact page aside styling --- */
aside h2 {
  font-size: clamp(1.95rem, 1.61rem + 1.7vw, 2.83rem);
}
aside p {
  line-height: 1.7;
}

/* --- Wine list / Logos --- */
.logolist {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1rem;
}
.logolist li {
  height: 183px;
  margin-bottom: 1rem;
}
.logolist li img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Responsive adjustments --- */
@media (max-width: 840px) {
  .navigation { display: none; }
}
@media (min-width: 841px) {
  .burger-menu__trigger,
  .burger-menu__panel { display: none !important; }
}

/* --- Print --- */
@media print {
  .burger-menu__trigger { display: none !important; }
  .navigation { display: block !important; }
  #home { background-image: none !important; }
  #home h1 span, #home .btn-outline { color: #000 !important; border-color: #000 !important; }
}