/* Palette Banfi's — bordeaux e oro campionati dal logo del marchio.
   bordeaux #480507, oro #A77738, su carta chiara. */

[data-site="banfis"] {
  /* Gli stessi caratteri del sito del ristorante: Cinzel per i titoli,
     EB Garamond per il testo. Inter resta solo per la navigazione e i
     pulsanti, dove serve leggibilita' a corpo piccolo. */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "EB Garamond", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --navy: #1C1210; --navy-deep: #EDE7DE; --navy-ink: #F6F2EC;
  --navy-elevated: #FFFFFF; --navy-soft: #EDE7DE;
  --gold: #480507; --gold-soft: #7A0D14; --cream: #1C1210;
  --accent-red: #B02E2E; --accent-green: #2E6B4F; --accent-cyan: #1D5B87;
  --on-gold: #FFFFFF; --accent-text: #480507; --muted-fg: #8A594F;
  --brand-gold: #A77738; --gold-ink: #8C642F;
  --bg-0: #FCFAF7;
  --bg-1: #F6F2EC;
  --bg-2: #EDE7DE;
  --panel-0: #FFFFFF;
  --panel-1: #FAF6F0;
  --tile-0-a: #480507; --tile-0-b: #7A0D14;
  --tile-1-a: #7A5210; --tile-1-b: #A77738;
  --tile-2-a: #123F63; --tile-2-b: #1D77AE;
  --tile-3-a: #1F5741; --tile-3-b: #2E8A64;
  --tile-4-a: #5A3A78; --tile-4-b: #8A5CB0;
  --tile-5-a: #7A2434; --tile-5-b: #B04256;
  --tile-6-a: #2B4A6B; --tile-6-b: #40709C;
  --is-dark: 0;
  color-scheme: light;
}
/* ==========================================================================
   Componenti del sito ombrello
   ========================================================================== */
.brand__mark {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--gold-soft), var(--gold));
  color: var(--on-gold); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
}
[data-site="banfis"] .brand__text span {
  font-family: var(--font-body); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg);
}

.hero__narrow { max-width: 46rem; }
[data-site="banfis"] .hero h1 { font-size: var(--fs-hero); margin-block: var(--sp-3) var(--sp-3); }

/* i tre pilastri */
.pillars { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pillar {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: var(--sp-4); border-radius: var(--radius-lg);
  background: var(--panel-0);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  box-shadow: 0 18px 40px -30px rgb(0 0 0 / 0.35);
  transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out);
}
.pillar:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -30px rgb(0 0 0 / 0.45); }
.pillar__icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent);
  margin-bottom: var(--sp-2);
}
.pillar__icon svg { width: 23px; height: 23px; stroke: var(--accent-text); }
.pillar h3 { font-size: var(--fs-h3); }
.pillar p { color: var(--muted-fg); text-wrap: pretty; }
.pillar__meta { font-size: var(--fs-sm); color: var(--muted-fg); }
.pillar__cta {
  margin-top: auto; padding-top: var(--sp-2);
  font-weight: 600; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px;
}
.pillar__cta::after { content: "→"; transition: translate 240ms var(--ease-out); }
.pillar__cta:hover::after { translate: 3px 0; }
.pillar__badge {
  margin-top: auto; align-self: flex-start;
  padding: 0.35rem 0.8rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  background: color-mix(in oklab, var(--cream) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
  color: var(--muted-fg);
}

/* le due app */
.app-cards { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.app-card {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  background: var(--panel-0);
  transition: border-color 300ms;
}
.app-card img { width: 64px; height: 64px; border-radius: 15px; flex: none; }
.app-card h3 { font-size: var(--fs-h3); margin-bottom: 0.2rem; }
.app-card__tag { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); margin-bottom: 0.5rem; }
.app-card p { color: var(--muted-fg); text-wrap: pretty; }
.app-card__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  margin-top: var(--sp-3);
}
.app-card__links a:not(.btn) {
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted-fg);
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.app-card__links a:not(.btn):hover { color: var(--accent-text); }
.app-card--er:hover { border-color: #FF3D8F; }
.app-card--mc:hover { border-color: #F6AE18; }
@media (max-width: 460px) { .app-card { flex-direction: column; } }

/* ==========================================================================
   I quattro marchi
   I file originali avevano fondo bianco sporco e ombra impressa. Sono stati
   resi trasparenti a monte: niente `mix-blend-mode`, che comunque andava in
   conflitto con l'animazione di comparsa (opacity < 1 isola l'elemento e la
   miscelazione smette di funzionare).
   ========================================================================== */
.brand__logo, .hero__crest, .pillar__logo {
  height: auto;
}
/* il marchio in testata e' la sola scritta: la riga "Global Resources"
   a questa dimensione non si leggerebbe. */
.brand .brand__logo { width: 118px; height: auto; }   /* batte .brand img di base.css */
.hero__crest {
  /* niente filter qui: creerebbe un contesto isolato e annullerebbe la
     miscelazione, lasciando visibile il rettangolo di fondo del file. */
  width: min(100%, 560px); margin-bottom: var(--sp-4);
}
.pillar__logo {
  width: min(100%, 190px); margin-bottom: var(--sp-2);
  align-self: flex-start;
}
/* su fondo scuro `multiply` cancellerebbe il logo: li' si usa lo schermo */
/* la carta di Banfi's e' sempre chiara, quindi `darken` va bene ovunque:
   nessuna variante scura da gestire per questi marchi. */
[data-site="banfis"] .brand { gap: 0; }
[data-site="banfis"] .pillar { padding-top: var(--sp-3); }

/* ==========================================================================
   Il ristorante
   ========================================================================== */
.resto { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .resto { grid-template-columns: 1.05fr 0.95fr; } }

.resto__photos { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
.resto__photos figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
/* il primo piatto prende tutta la riga: e' quello che si guarda per primo */

.resto__photos img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1;
  transition: scale 600ms var(--ease-out);
}
/* l'apertura e' scura: un filo di respiro sotto la stacca dalla griglia */
.resto__hero { grid-column: 1 / -1; }
.resto__hero img { aspect-ratio: 1100 / 778; }
.resto__photos figure:hover img { scale: 1.04; }

.resto__info { display: grid; gap: var(--sp-4); }
.resto__block h3 {
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0;
  font-size: 1.05rem; color: var(--accent-text); margin-bottom: var(--sp-2);
}

.dishes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dishes li {
  padding: 0.5rem 1rem; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm);
  background: color-mix(in oklab, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 26%, transparent);
  color: var(--accent-text);
}

.hours { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--sp-3); margin: 0; }
.hours dt { font-weight: 500; color: var(--muted-fg); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.resto__note { font-size: var(--fs-sm); color: var(--muted-fg); margin-top: var(--sp-2); }

.resto__addr { color: var(--muted-fg); margin-bottom: var(--sp-2); }
.resto__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.resto__links a {
  font-weight: 500; color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* ==========================================================================
   Tipografia del sito ombrello
   ========================================================================== */
[data-site="banfis"] h1, [data-site="banfis"] h2 {
  letter-spacing: 0.01em;         /* Cinzel respira meglio leggermente spaziato */
  line-height: 1.14;
  font-weight: 500;
}
[data-site="banfis"] .hero h1 { font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.2rem); }
/* EB Garamond ha occhio piccolo: il corpo va alzato per restare leggibile */
[data-site="banfis"] body { font-size: 1.075rem; line-height: 1.62; }
[data-site="banfis"] .lead { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
/* la navigazione e i pulsanti restano in Inter */
[data-site="banfis"] .nav a,
[data-site="banfis"] .btn,
[data-site="banfis"] .picker,
[data-site="banfis"] .kicker,
[data-site="banfis"] .pillar__badge,
[data-site="banfis"] .dishes li,
[data-site="banfis"] .site-footer { font-family: var(--font-ui); }
[data-site="banfis"] .kicker { letter-spacing: 0.18em; }
[data-site="banfis"] .pillar h3,
[data-site="banfis"] .app-card h3 { font-family: var(--font-display); font-weight: 500; }