/* Nona Cella — Altamura
   Lingua: interno d'alveare. Cera che riempie, favo come architettura.
   Non lusso-miele, non griglia esagonale da wallpaper, non editorial. */

:root {
  --hive: #1a140c;
  --hive-2: #241c12;
  --hive-3: #31261a;
  --comb: #f4e4c1;
  --comb-2: #e6d3a8;
  --nectar: #e8a317;
  --nectar-deep: #c4840d;
  --propolis: #6b2e1a;
  --leaf: #2f5d3a;
  --leaf-2: #3d7349;
  --wax: #d4a574;
  --paper: #fbf3e3;
  --ink: #1a140c;
  --mute: #b9a888;
  --line: rgba(244, 228, 193, 0.16);
  --line-ink: rgba(26, 20, 12, 0.14);

  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --body: "Commissioner", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;

  --pad: clamp(1.05rem, 3.8vw, 3rem);
  --max: 84rem;
  --nastro: 2.25rem;
  --favo-h: 4.6rem;
  --tap: 44px;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);

  --z-skip: 1200;
  --z-nastro: 900;
  --z-favo: 860;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--hive);
  color: var(--comb);
  color-scheme: dark;
  scroll-behavior: auto;
  overflow-x: clip;
  max-width: 100%;
}

html.js {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.58;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(232, 163, 23, 0.12), transparent 46%),
    var(--hive);
  color: var(--comb);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--nectar);
  outline-offset: 3px;
}

.salta {
  position: absolute;
  left: 0.75rem;
  top: -5rem;
  z-index: var(--z-skip);
  padding: 0.55rem 0.9rem;
  background: var(--nectar);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.salta:focus {
  top: 0.75rem;
}

/* ── nastro ─────────────────────────────────────────── */

.nastro {
  position: sticky;
  top: 0;
  z-index: var(--z-nastro);
  margin: 0;
  min-height: var(--nastro);
  background: var(--nectar);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.nastro a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--nastro);
  padding: 0.35rem var(--pad);
  text-decoration: none;
}
.nastro__eti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0 0.45rem;
  background: var(--ink);
  color: var(--nectar);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── favo di navigazione (9 celle, non hamburger) ───── */

.favo {
  position: sticky;
  top: var(--nastro);
  z-index: var(--z-favo);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--favo-h);
  padding: 0.35rem var(--pad);
  background: color-mix(in srgb, var(--hive) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.favo__marchio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  min-height: var(--tap);
}
.favo__marchio img {
  width: 1.7rem;
  height: 1.7rem;
}
.favo__nome {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.favo__celle {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.18rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.favo__celle a {
  --s: 2.85rem;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--s);
  height: calc(var(--s) * 1.1547);
  padding: 0 0.15rem;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--comb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--hive-3);
  border: 0;
  min-height: var(--tap);
  min-width: var(--tap);
}
.favo__celle li:nth-child(even) a {
  transform: translateY(22%);
}
.favo__celle a[aria-current="true"],
.favo__celle a.is-on {
  background: var(--nectar);
  color: var(--ink);
  font-weight: 600;
}
.favo__celle a:hover {
  background: var(--leaf);
}

.favo__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--nectar);
}

/* ── bottoni cera (goccia, non pillola) ─────────────── */

.cera {
  --goccia: 18%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.78rem 1.45rem 1.45rem;
  background: var(--nectar);
  color: var(--ink);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 76%,
    87% 76%,
    81% 100%,
    75% 76%,
    0 76%
  );
}
.cera:hover {
  background: var(--comb);
}
.cera--ghost {
  background: transparent;
  color: var(--nectar);
  box-shadow: inset 0 0 0 1.5px var(--nectar);
  clip-path: none;
  padding: 0.72rem 1.2rem;
  border-radius: 0;
}
.cera--ghost:hover {
  background: var(--nectar);
  color: var(--ink);
}
.cera--ink {
  background: var(--ink);
  color: var(--nectar);
}

/* ── layout comune ──────────────────────────────────── */

.sezione {
  padding: clamp(3.2rem, 8vw, 7rem) var(--pad);
  position: relative;
}
.sezione--carta {
  background: var(--paper);
  color: var(--ink);
}
.sezione--foglia {
  background: var(--leaf);
  color: var(--paper);
}
.sezione--propoli {
  background: var(--propolis);
  color: var(--comb);
}

.kicker {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nectar);
}
.sezione--carta .kicker {
  color: var(--propolis);
}
.sezione--foglia .kicker {
  color: var(--comb);
}

.titolo {
  container-type: inline-size;
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.88;
  text-transform: uppercase;
}
.titolo .riga {
  display: block;
  overflow: hidden;
}
.titolo .riga > span {
  display: block;
  font-size: clamp(2rem, 8.4cqi, 5.4rem);
}
html.js:not(.calma) .titolo .riga > span {
  transform: translateY(102%);
}

.prosa {
  max-width: 40rem;
  margin: 0;
}
.prosa + .prosa {
  margin-top: 1rem;
}

.cifre {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
}
.cifre dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.cifre dd {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--nectar);
}

/* ── apertura ───────────────────────────────────────── */

.apri {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  min-height: 100dvh;
  padding: clamp(5.5rem, 12vw, 8rem) var(--pad) 3rem;
  overflow: clip;
}
.apri__testo .titolo .riga > span {
  font-size: clamp(2.4rem, 9cqi, 6.2rem);
}
.apri__lead {
  max-width: 34rem;
  margin: 1.2rem 0 1.6rem;
  font-size: 1.12rem;
  color: var(--comb-2);
}
.apri__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-start;
}
.apri__meta {
  margin: 1.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.apri__favo {
  position: relative;
  min-height: 22rem;
}
.apri__svg {
  width: 100%;
  height: auto;
}
.cella-fill {
  fill: var(--nectar);
  transform-origin: center;
}
.ape {
  fill: var(--nectar);
}

.cera-lago {
  position: absolute;
  inset: auto 8% -8% 8%;
  height: 42%;
  background: linear-gradient(180deg, rgba(232, 163, 23, 0.05), rgba(232, 163, 23, 0.55));
  clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* ── laboratorio ────────────────────────────────────── */

.lab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: start;
}
.lab__foto {
  overflow: hidden;
  border-radius: 0 2.8rem 0 2.8rem;
  aspect-ratio: 4 / 5;
}
.lab__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lab__elenco {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.lab__elenco li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line-ink);
  font-size: 0.98rem;
}
.lab__elenco b {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── campi / listino ────────────────────────────────── */

.listino {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.scheda {
  padding: 1.25rem 1.2rem 1.5rem;
  background: var(--hive-2);
  border: 1px solid var(--line);
}
.scheda h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scheda .prezzo {
  font-family: var(--mono);
  color: var(--nectar);
  margin: 0 0 0.8rem;
}
.scheda p {
  margin: 0;
  color: var(--comb-2);
  font-size: 0.98rem;
}

.campi__foto {
  margin-top: 2.2rem;
  overflow: hidden;
  border-radius: 2.4rem 0 2.4rem 0;
  aspect-ratio: 16 / 7;
}
.campi__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── raccolte Flip ──────────────────────────────────── */

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.4rem 0 1.6rem;
}
.filtro {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--line-ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filtro.is-on,
.filtro[aria-pressed="true"] {
  background: var(--nectar);
  color: var(--ink);
  border-color: var(--nectar);
}

.raccolte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.raccolta {
  padding: 1.1rem;
  background: var(--comb);
  color: var(--ink);
  clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
}
.raccolta[hidden] {
  display: none;
}
.raccolta time {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--propolis);
}
.raccolta h3 {
  margin: 0.35rem 0 0.45rem;
  font-family: var(--display);
  font-size: 1.7rem;
  text-transform: uppercase;
}
.raccolta p {
  margin: 0;
  font-size: 0.95rem;
}

/* ── metodo ─────────────────────────────────────────── */

.passi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  counter-reset: passo;
}
.passo {
  padding: 1.1rem 0.2rem 0;
  border-top: 2px solid var(--nectar);
}
.passo h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.55rem;
  text-transform: uppercase;
}
.passo h3::before {
  counter-increment: passo;
  content: "0" counter(passo) " · ";
  color: var(--nectar);
  font-family: var(--mono);
  font-size: 0.7em;
}
.passo p {
  margin: 0;
  color: var(--comb-2);
}

.metodo__volo {
  margin-top: 2.4rem;
  padding: 1rem;
  background: var(--hive);
  border: 1px solid var(--line);
}
.metodo__volo svg {
  width: 100%;
  height: auto;
}

/* ── qualità ────────────────────────────────────────── */

.qualita-griglia {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  margin-top: 1.6rem;
}
.qualita-griglia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 3rem 0;
}
.controlli {
  margin: 0;
  padding: 0;
  list-style: none;
}
.controlli li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.controlli strong {
  display: block;
  font-family: var(--display);
  font-size: 1.45rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.polline {
  position: relative;
  min-height: 8rem;
  overflow: hidden;
}
.polline i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nectar);
  pointer-events: none;
}

/* ── calendario ─────────────────────────────────────── */

.orari {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.4rem;
  font-size: 0.98rem;
}
.orari th,
.orari td {
  text-align: left;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--line-ink);
}
.orari th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── FAQ ────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.4rem;
}
.faq details {
  background: var(--hive-2);
  border: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
  padding: 0.9rem 1.1rem;
  font-family: var(--display);
  font-size: 1.35rem;
  text-transform: uppercase;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq details p {
  margin: 0;
  padding: 0 1.1rem 1.1rem;
  color: var(--comb-2);
}

/* ── arrivo ─────────────────────────────────────────── */

.arrivo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.2rem, 3vw, 2.8rem);
}
.arrivo address {
  font-style: normal;
  margin: 0.8rem 0;
}
.arrivo a {
  color: var(--nectar);
}

.modulo {
  display: grid;
  gap: 0.75rem;
}
.modulo label {
  display: grid;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.modulo input,
.modulo textarea,
.modulo select {
  min-height: var(--tap);
  padding: 0.55rem 0.7rem;
  background: var(--hive);
  border: 1px solid var(--line);
  color: var(--comb);
}
.modulo textarea {
  min-height: 7rem;
  resize: vertical;
}
.modulo__ok {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--nectar);
}

.mappa {
  margin-top: 1.2rem;
  min-height: 22rem;
  border: 1px solid var(--line);
}

/* ── piede ──────────────────────────────────────────── */

.piede {
  padding: 2rem var(--pad) 2.4rem;
  background: var(--ink);
  border-top: 1px solid var(--line);
}
.piede__idx {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin: 0 0 1.2rem;
}
.piede__idx a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.piede__idx a:hover {
  color: var(--nectar);
}
.piede__row {
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--mute);
}
.piede__row a {
  color: var(--nectar);
}

/* ── responsive ─────────────────────────────────────── */

@media (max-width: 980px) {
  .apri,
  .lab,
  .listino,
  .raccolte,
  .passi,
  .qualita-griglia,
  .arrivo,
  .cifre {
    grid-template-columns: 1fr;
  }
  .favo {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .favo__celle {
    grid-column: 1 / -1;
    justify-content: space-between;
    overflow-x: auto;
    padding-bottom: 0.4rem;
  }
  .favo__celle li:nth-child(even) a {
    transform: none;
  }
  .favo__celle a {
    --s: 2.55rem;
    font-size: 0.52rem;
  }
  .campi__foto {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 699px) {
  .favo__tel {
    display: none;
  }
  .apri {
    min-height: auto;
    padding-top: 5.2rem;
  }
  .cera-lago {
    display: none;
  }
  .raccolte {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .titolo .riga > span,
  html.calma .titolo .riga > span {
    transform: none !important;
  }
  .cera-lago,
  .ape {
    animation: none !important;
  }
  * {
    scroll-behavior: auto !important;
  }
}