/* CoffeeSpecs — Layout: container, griglia a registro, lastra fotografica */

/* Ossatura della pagina: il footer è la quarta di copertina e sta in fondo
   anche quando il testo è poco (un confronto con un solo prodotto). Il body
   riempie almeno la finestra e il main assorbe lo spazio che avanza. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex-shrink: 0;
}

.container-content {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container-content { padding-inline: var(--space-8); }
}

@media (min-width: 1280px) {
  .container-content { padding-inline: var(--space-12); }
}

/* Griglia a registro: le celle condividono le righe da 1px, come un listino
   stampato. Niente card flottanti, niente ombre. Le celle portano il proprio
   sfondo carta; il gap lascia trasparire il colore del bordo. */
.griglia-ledger {
  display: grid;
  gap: 0;
  border-top: var(--rule);
  border-left: var(--rule);
}

.griglia-ledger > * {
  background: var(--color-bg);
  border-right: var(--rule);
  border-bottom: var(--rule);
  min-width: 0;
}

/* Lastra fotografica: le foto prodotto vivono su bianco puro, con i crocini
   di registro agli angoli. È l'unico bianco della pagina, per questo si nota.
   Il bianco però è solo il valore di partenza: una foto che arriva col suo
   fondo nero, incorniciata di bianco, si legge come una scatola invece che come
   una macchina. `lastra-fondo.js` legge il bordo della foto e, se è di un colore
   solo, lo scrive qui: la cornice sparisce e resta l'oggetto. */
.lastra {
  position: relative;
  background: var(--lastra-fondo, var(--color-plate));
  overflow: hidden;
}

.lastra::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  --l: var(--lastra-crocini, var(--color-border-strong));
  background:
    linear-gradient(var(--l), var(--l)) left top / 10px 1px,
    linear-gradient(var(--l), var(--l)) left top / 1px 10px,
    linear-gradient(var(--l), var(--l)) right top / 10px 1px,
    linear-gradient(var(--l), var(--l)) right top / 1px 10px,
    linear-gradient(var(--l), var(--l)) left bottom / 10px 1px,
    linear-gradient(var(--l), var(--l)) left bottom / 1px 10px,
    linear-gradient(var(--l), var(--l)) right bottom / 10px 1px,
    linear-gradient(var(--l), var(--l)) right bottom / 1px 10px;
  background-repeat: no-repeat;
}

.lastra > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Su un fondo scuro i crocini in inchiostro sparirebbero: restano un segno
   leggero, non diventano un bordo. */
.lastra--scura { --lastra-crocini: rgba(244, 246, 248, 0.45); }