/* ==========================================================================
   MACELLERIA PRECI — Villaggio Europa (Lizzano in Belvedere, BO)
   Direction: heritage village butcher. Palette + two-colour wordmark sampled
   1:1 from their hand-painted sign ("MACELLERIA" red + "PRECI" blue on a cream
   facade). Cream canvas, deep sign-blue as ink/structure, butcher-red as the
   ONE interactive accent. Frank Ruhl Libre (heritage serif) + Asap (body).
   Radius 3px everywhere. Mobile-first (390px), CSS-only motion.
   ========================================================================== */

:root {
  --bg: #f5ecd9;            /* warm cream canvas (their facade) */
  --surface: #fbf5e8;       /* cards / raised surfaces */
  --band: #ecdfc4;          /* warm section band / tinted cells */
  --hair: #dccca9;          /* hairlines */
  --ink: #17263f;           /* deep sign-blue: body text + dark block */
  --muted: #6f5f45;         /* warm taupe secondary (5.3:1 on cream) */
  --accent: #9e1f26;        /* butcher red: the one interactive accent (6.7:1) */
  --accent-hover: #841820;
  --accent-on-dark: #e0868c;/* same red, lightened for marks on the blue block */
  --on-accent: #fdf6ef;     /* text on red */
  --on-dark: #f5ecd9;       /* cream text on the blue block */
  --font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --font-body: "Asap", -apple-system, "Segoe UI", sans-serif;
  --radius: 3px;
  --measure: 66ch;
  --edge: 1.35rem;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.005em; }
h2 { font-size: clamp(1.65rem, 5.2vw, 2.4rem); font-weight: 900; margin-bottom: 0.7rem; }
h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.35rem; }
p { max-width: var(--measure); }

/* Safety net for any content <figure> image at phone width (iron rule). */
@media (max-width: 760px) {
  figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
}

/* -- shared bits ----------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent); margin-bottom: 1rem;
}
.lead { color: var(--muted); margin-bottom: 1.5rem; }

.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  padding: 0.72rem 1.4rem;
  transition: transform .12s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--ink); color: var(--on-dark); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

.stars { color: var(--accent); letter-spacing: 0.05em; }

/* -- top bar --------------------------------------------------------------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding: 0.8rem var(--edge);
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.brand {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.18rem; letter-spacing: 0.01em; white-space: nowrap;
}
.brand .mac { color: var(--accent); }
.brand .preci { color: var(--ink); }
.topbar-cta {
  text-decoration: none; font-weight: 600; font-size: 0.92rem;
  color: var(--on-accent); background: var(--accent);
  padding: 0.42rem 1rem; border-radius: var(--radius);
  transition: background-color .18s ease;
}
.topbar-cta:hover { background: var(--accent-hover); }

/* -- hero (typographic, left-aligned / asymmetric) ------------------------- */
.hero {
  padding: clamp(3rem, 9vh, 5.5rem) var(--edge) clamp(2.75rem, 7vh, 4rem);
  max-width: 1180px; margin: 0 auto;
}
.wordmark {
  display: flex; flex-direction: column;
  font-weight: 900; text-transform: uppercase;
  line-height: 0.9; letter-spacing: 0.005em;
  font-size: clamp(3.1rem, 15vw, 7rem);
  margin-bottom: 1.25rem;
}
.wordmark .mac { color: var(--accent); }
.wordmark .preci { color: var(--ink); align-self: flex-start; }
.hero-sub {
  color: var(--muted); font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  max-width: 34ch; margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* -- testimonial + rating band -------------------------------------------- */
.proof {
  background: var(--band);
  border-block: 1px solid var(--hair);
  padding: clamp(2.5rem, 7vw, 3.75rem) var(--edge);
  text-align: center;
}
.proof blockquote {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(1.4rem, 4.6vw, 2rem); line-height: 1.28;
  color: var(--ink); max-width: 22ch; margin: 0 auto 1rem;
}
.proof blockquote::before { content: "\201C"; }
.proof blockquote::after { content: "\201D"; }
.proof-meta { color: var(--muted); font-size: 0.98rem; font-weight: 500; margin: 0 auto; max-width: none; }

/* -- sections shell -------------------------------------------------------- */
.facade, .banco, .showcase, .walter, .dove {
  padding: clamp(3rem, 8vw, 4.75rem) var(--edge);
  max-width: 1100px; margin: 0 auto;
}

/* -- carne e salumi (2-up showcase) --------------------------------------- */
.showcase-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
.showcase figure { margin: 0; }
.showcase img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--hair);
}
.showcase figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.55rem; }

/* -- facade (framed image) ------------------------------------------------- */
.facade figure { margin: 1.5rem 0 0; }
.facade img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%;
  border-radius: var(--radius); border: 1px solid var(--hair);
}
.facade figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 0.7rem; }

/* -- al banco (category grid) --------------------------------------------- */
.banco-grid {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; grid-template-columns: 1fr; gap: 0.7rem;
}
.cell {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
}
.cell.tint { background: var(--band); }
.cell p { color: var(--muted); font-size: 0.97rem; margin: 0; }
.cell.accent { border-left: 4px solid var(--accent); }
.cell.accent h3 { color: var(--accent); }
.menu-note { color: var(--muted); font-size: 0.92rem; }

/* -- di nostra produzione (blue color block) ------------------------------ */
.produzione {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(3.25rem, 9vw, 5rem) var(--edge);
  border-block: 1px solid var(--ink);
}
.produzione-inner { max-width: 1100px; margin: 0 auto; }
.produzione h2 { color: var(--on-dark); position: relative; padding-top: 1.1rem; }
.produzione h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3rem; height: 3px; background: var(--accent-on-dark);
}
.produzione p { color: color-mix(in srgb, var(--on-dark) 88%, transparent); max-width: 52ch; }

/* -- da walter (image + text split) --------------------------------------- */
.walter { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
.walter figure { margin: 0; }
.walter img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%;
  border-radius: var(--radius); border: 1px solid var(--hair);
}
.walter blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1.25rem; line-height: 1.32; color: var(--ink);
  margin: 1.25rem 0 0.35rem; padding-left: 1rem;
  border-left: 3px solid var(--accent); max-width: var(--measure);
}
.walter blockquote::before { content: "\201C"; }
.walter blockquote::after { content: "\201D"; }
.quote-src { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* -- orari & dove (info grid) --------------------------------------------- */
.info-grid { display: grid; gap: 2.25rem; margin-top: 1.5rem; }
.hours { border-collapse: collapse; width: 100%; max-width: 30rem; }
.hours td { padding: 0.5rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.hours tr:last-child td { border-bottom: none; }
.hours td:first-child { color: var(--ink); font-weight: 600; padding-right: 1.5rem; white-space: nowrap; }
.hours td:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.contact-lines { margin-bottom: 1.5rem; line-height: 1.8; }
.contact-lines a { font-weight: 600; }

/* -- footer ---------------------------------------------------------------- */
.footer {
  padding: 2.75rem var(--edge) 3.25rem; text-align: center;
  color: var(--muted); font-size: 0.9rem;
  border-top: 1px solid var(--hair);
}
.footer p { max-width: none; }
.demo-note { margin-top: 0.5rem; opacity: 0.75; }

/* -- motion (CSS-only, gated) --------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero .wordmark { animation-delay: 0.06s; }
  .hero .hero-sub { animation-delay: 0.14s; }
  .hero .hero-actions { animation-delay: 0.22s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* -- desktop --------------------------------------------------------------- */
@media (min-width: 760px) {
  .info-grid { grid-template-columns: 1fr 1fr; }

  .banco-grid { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
  .cell.span2 { grid-column: span 2; }

  /* showcase: two portraits side by side, capped (iron rule) */
  .showcase-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .showcase img { aspect-ratio: 3 / 4; max-height: 600px; }

  /* framed facade: restore the real portrait storefront, capped (iron rule) */
  .facade figure { max-width: 460px; margin-inline: auto; }
  .facade img { aspect-ratio: 3 / 4; max-height: 640px; object-position: center 15%; }

  /* the one image+text split */
  .walter { grid-template-columns: 0.85fr 1fr; gap: 3rem; }
  .walter img { aspect-ratio: 3 / 4; max-height: 600px; }

  .hero-sub { max-width: 40ch; }
}

@media (min-width: 1040px) {
  .wordmark { font-size: 7.5rem; }
}