/* ═══════════════════════════════════════════════
   RISTORANTE LA GROTTA — cooking.css
   Pagina "Cooking a bordo" (show cooking in rada).
   Estende catering.css: qui solo le differenze.
   ═══════════════════════════════════════════════ */

/* ── HERO: foto insalata di aragosta + velatura calda (fallback tinta calda) ── */
.hero.hero-cooking {
  background:
    linear-gradient(160deg, rgba(196,113,74,0.14) 0%, rgba(138,51,32,0.24) 55%, rgba(15,38,64,0.55) 100%),
    url('/img/insalata-aragosta-a-bordo-la-grotta.webp') center 45% / cover no-repeat,
    #8A3320;
}

/* Piccolo badge sotto le azioni dell'hero */
.hero-badge-bordo {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.hero-badge-bordo i { color: var(--pietra); }

/* ── SEZIONE CHEF (riusa .intro / .intro-grid) ── */
/* Colonna sinistra: testo + riquadro Enzo impilato. Colonna destra: foto. */
.chef-box {
  background: var(--mare);
  border-radius: 6px;
  padding: 44px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-top: 24px;   /* separa il riquadro dai paragrafi sopra */
}
/* Foto a destra: riempie l'altezza della colonna testo+Enzo */
.intro-foto { align-self: stretch; }
.intro-foto img {
  width: 100%; height: 100%; min-height: 360px;
  object-fit: cover; object-position: center 45%;
  border-radius: 6px; display: block;
}
@media (max-width: 1024px) {
  .intro-foto img { height: auto; max-height: 480px; }  /* mobile: foto sotto, altezza naturale */
}
.chef-box::after {
  content: '\f578'; /* fa-fish-fins */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; right: -14px; bottom: -18px;
  font-size: 120px; color: rgba(255,255,255,0.06);
  transform: rotate(-12deg);
}
/* La citazione: forza il colore chiaro (altrimenti eredita .intro p grigio da catering.css) */
.chef-box p {
  position: relative; z-index: 1;
  color: rgba(255,255,255,0.9);
  font-style: italic;
  font-size: 17px; line-height: 1.6;
  margin-bottom: 26px;
}
.chef-nome {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px; font-weight: 600; color: #fff;
  line-height: 1; margin-bottom: 6px;
}
.chef-ruolo {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--azzurro-cielo); margin-bottom: 26px;
}
.chef-gen {
  display: flex; gap: 14px; position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 24px;
}
.chef-gen-item { flex: 1; }
.chef-gen-item .valore {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; color: var(--azzurro-cielo); line-height: 1; margin-bottom: 4px;
}
.chef-gen-item .etichetta {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ── SEZIONE AREA GEOGRAFICA ── */
.area-bordo {
  padding: 90px 0;
  background: linear-gradient(135deg, var(--onda) 0%, var(--mare) 100%);
  color: #fff; text-align: center;
}
.area-bordo .sezione-tag { justify-content: center; color: var(--azzurro-cielo); }
.area-bordo .sezione-tag::before { background: var(--azzurro-cielo); }
.area-bordo h2 { color: #fff; }
.area-bordo h2 em { color: var(--azzurro-cielo); }
.area-bordo p {
  color: rgba(255,255,255,0.82);
  max-width: 640px; margin: 0 auto 16px;
}
.area-bordo .area-cta { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .chef-box { padding: 36px 28px; }
  .area-bordo { padding: 64px 0; }
}