/* ============================================================
   Corte Zenari — versione responsive
   Design ripreso dal PDF, layout fluido con breakpoint mobile.
   ============================================================ */

@font-face { font-family: 'GeorgiaCZ';  src: url('../assets/fonts/georgia.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GeorgiaCZ';  src: url('../assets/fonts/georgia-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'BahnschriftCZ'; src: url('../assets/fonts/bahnschrift.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'LimelightCZ'; src: url('../assets/fonts/limelight.ttf') format('truetype'); font-display: swap; }

:root {
  --brown-dark: #331e10;
  --gold: #e0ba6c;
  --gold-btn: #dfb96c;
  --cream: #f5ebdd;
  --grad: linear-gradient(238deg, #483122, #805e49);
  --body-size: clamp(16px, 1.05vw, 20px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  font-family: 'GeorgiaCZ', Georgia, serif;
  color: var(--brown-dark);
  font-size: var(--body-size);
  line-height: 1.7;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1320px; margin: 0 auto; background: #fff; }

h1, h2 { font-family: 'LimelightCZ', cursive; font-weight: 400; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'GeorgiaCZ'; font-weight: 700;
  font-size: clamp(17px, 1.3vw, 25px);
  padding: .7em 2.2em; border-radius: 999px; transition: all .2s;
}
.btn-gold { background: var(--gold-btn); color: var(--brown-dark); }
.btn-gold:hover { filter: brightness(1.07); }
.btn-outline { border: 2px solid #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--brown-dark); }

/* ============ HERO ============ */
.hero { position: relative; margin: 16px 16px 0; overflow: hidden; }
.hero video { width: 100%; height: auto; aspect-ratio: 2.3 / 1; object-fit: cover; }
.hero-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(12px, 2vw, 28px) clamp(16px, 3vw, 60px);
}
.hero-nav {
  font-family: 'BahnschriftCZ'; color: #fff;
  font-size: clamp(16px, 1.7vw, 33px); letter-spacing: .05em;
}
.hero-social { display: flex; gap: clamp(8px, 1vw, 17px); }
.hero-social img { width: clamp(20px, 1.65vw, 32px); filter: brightness(0) invert(1); }
.hero-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 35%, 450px);
}

/* ============ HEADLINE ============ */
.headline { padding: clamp(36px, 5vw, 90px) 24px clamp(30px, 4.5vw, 84px); text-align: center; }
.headline h1 {
  font-size: clamp(21px, 2.1vw, 40px);
  line-height: 1.2; max-width: 32em; margin: 0 auto;
}

/* ============ BANDE MARRONI ============ */
.band { background: var(--grad); color: #fff; }

/* ============ CHEF BAND ============ */
/* proporzioni riprese dal PDF: banda 1320x748, corda a filo del bordo destro,
   piatti che sporgono oltre il bordo sinistro e sotto la banda */
.chef-band {
  position: relative; text-align: center;
  padding: clamp(40px, 3.9vw, 51px) 24px 0;
  aspect-ratio: 1320 / 748;
}
.chef-band h2 { position: relative; font-size: clamp(24px, 2.1vw, 40px); line-height: 1.2; }
.chef-band .sub {
  position: relative;
  font-size: clamp(16px, 1.3vw, 25px); line-height: 1.4;
  max-width: 42em; margin: .7em auto 1.4em;
}
.chef-band .btn-gold { position: relative; }
.rope-layer { position: absolute; inset: 0; overflow: hidden; }
.sc-corde {
  position: absolute; right: 0; top: 30.7%; bottom: 0;
  width: min(70%, 923px); object-fit: cover; object-position: top;
  mix-blend-mode: hard-light;
}
.showcase { position: absolute; inset: 0; pointer-events: none; }
.sc-capesante { position: absolute; left: -5.2%; top: 45.9%; width: 35.6%; }
.sc-zuppa     { position: absolute; left: 11.9%; top: 77.2%; width: 35.1%; }

/* ============ INTRO ============ */
.intro {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 90px); align-items: start;
  padding: clamp(56px, 9vw, 170px) clamp(24px, 6vw, 115px) clamp(48px, 6vw, 110px);
}
.intro-photo { position: relative; max-width: 463px; margin-top: clamp(0px, 3vw, 60px); }
.intro-photo .firma {
  position: absolute; right: -6%; bottom: -26%;
  width: 45%; pointer-events: none;
}
.intro-text p { text-align: justify; margin-bottom: 1em; }
.dropcap {
  font-weight: 700; font-size: 2.5em; line-height: .95;
  float: left; padding-right: .12em;
}
.intro-text .pesce { width: clamp(70px, 22%, 103px); margin: 1.6em auto 0; }

/* ============ PERCHÈ È DIVERSO ============ */
.diverso {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 70px); align-items: center;
  padding: clamp(44px, 6vw, 110px) clamp(24px, 6vw, 115px) clamp(44px, 5vw, 90px);
}
.diverso h2 { color: var(--gold); font-size: clamp(21px, 1.6vw, 30px); margin-bottom: 1.4em; }
.diverso ul { list-style: none; }
.diverso li { margin-bottom: 1.5em; }
.diverso strong { font-size: clamp(17px, 1.25vw, 24px); display: block; margin-bottom: .25em; }
.diverso li p { padding-left: 1em; }
.diverso-plates { position: relative; min-height: clamp(300px, 30vw, 430px); }
.dp-fritto  { position: absolute; right: 0; top: 0;  width: clamp(230px, 75%, 431px); }
.dp-verdure { position: absolute; left: 0; bottom: 0; width: clamp(220px, 71%, 410px); }

/* ============ I MODI PER VIVERLA ============ */
.modi { padding: clamp(44px, 5vw, 90px) clamp(24px, 6vw, 115px); text-align: center; }
.modi h2 { font-size: clamp(21px, 1.6vw, 30px); margin-bottom: clamp(28px, 4vw, 70px); }
.modi-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 90px); max-width: 1000px; margin: 0 auto;
}
.modi-grid img { height: clamp(90px, 7vw, 130px); width: auto; margin: 0 auto clamp(14px, 1.6vw, 28px); }
.modi-grid h3 { font-size: clamp(17px, 1.05vw, 20px); margin-bottom: 1.2em; }
.modi-grid p { text-align: justify; margin-bottom: 1em; }

/* ============ NOTA DELLO CHEF ============ */
.nota { padding: clamp(20px, 3vw, 50px) 16px clamp(44px, 5vw, 80px); }
.nota-head { width: clamp(200px, 16vw, 301px); margin: 0 auto -1.2em; position: relative; z-index: 1; }
.nota-box {
  background: var(--cream);
  padding: clamp(36px, 4vw, 60px) clamp(24px, 13vw, 250px) clamp(28px, 3vw, 44px);
}
.nota-box h3 { font-size: 1em; margin-bottom: .6em; }

/* ============ CTA FINALE ============ */
.cta { position: relative; padding-top: clamp(30px, 4vw, 60px); }
.cta-piatto {
  position: absolute; left: clamp(16px, 9vw, 140px); top: 0;
  width: clamp(240px, 34%, 487px); z-index: 1;
}
.cta-band { background: linear-gradient(240deg, #483122, #7f5e48); margin-top: clamp(50px, 6vw, 90px); }
.cta-inner {
  margin-left: auto; width: min(56%, 720px);
  padding: clamp(28px, 2.6vw, 44px) clamp(20px, 3vw, 60px);
  text-align: center; color: #fff;
}
.cta-inner h2 { font-size: clamp(19px, 1.6vw, 30px); line-height: 1.2; margin-bottom: 1em; }

/* ============ FOOTER ============ */
footer { padding: 16px; background: #fff; }
.footer-box { background: var(--cream); padding: clamp(28px, 3vw, 44px) 16px clamp(28px, 3.5vw, 56px); }
.footer-logo { width: clamp(150px, 11vw, 214px); margin: 0 auto; }
.footer-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  max-width: 900px; margin: clamp(10px, 1.5vw, 24px) auto 0;
}
.fcol {
  display: flex; flex-direction: column; align-items: center; gap: .5em;
  font-family: 'BahnschriftCZ'; font-size: clamp(17px, 1.3vw, 25px);
  line-height: 1.2; color: #000; text-align: center;
  padding: clamp(10px, 1.5vw, 24px) 12px;
}
.fcol + .fcol { border-left: 1px solid #805f48; }
.fcol img { width: clamp(34px, 2.5vw, 47px); }
.bottom-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: 'BahnschriftCZ'; color: #000;
  padding: clamp(18px, 2vw, 36px) clamp(8px, 3vw, 48px) clamp(10px, 1.5vw, 24px);
}
.torna-su { font-size: clamp(15px, 1.3vw, 25px); }
.copyright, .seguici { font-size: clamp(13px, 1.05vw, 20px); }
.seguici { display: inline-flex; align-items: center; gap: .6em; }
.seguici img { width: clamp(22px, 1.6vw, 31px); }

/* ============ MOBILE ============ */
@media (max-width: 860px) {
  .hero video { aspect-ratio: 16 / 10; }
  .intro, .diverso, .modi-grid { grid-template-columns: 1fr; }
  .intro-photo { margin: 0 auto; }
  .intro-photo .firma { right: 0; bottom: -22%; }
  .intro { row-gap: 84px; }
  .diverso-plates { min-height: 0; height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .dp-fritto, .dp-verdure { position: static; width: min(85%, 360px); }
  .chef-band { aspect-ratio: auto; }
  .showcase { position: relative; inset: auto; height: 340px; margin-top: 12px; }
  .sc-corde { top: 34%; width: 100%; }
  .sc-capesante { left: -4%; top: auto; bottom: 32%; width: 54%; }
  .sc-zuppa { left: 26%; top: auto; bottom: -10%; width: 52%; }
  .nota-box { padding-left: 24px; padding-right: 24px; }
  .cta { padding-top: 0; }
  .cta-piatto { position: static; width: min(80%, 380px); margin: 0 auto -40px; }
  .cta-band { margin-top: 0; padding-top: 48px; }
  .cta-inner { width: 100%; padding: 12px 24px 40px; }
  .footer-cols { grid-template-columns: 1fr; max-width: 320px; }
  .fcol + .fcol { border-left: none; border-top: 1px solid #805f48; }
  .bottom-bar { flex-direction: column; gap: 10px; }
}