/* ============================================================
   Back Garden - Base Site Stylesheet
   ============================================================
   CSS custom properties are dynamically overridden by /api/style
   which reads values from the D1 database (Ufficio Stile).
   ============================================================ */

/* ── Custom Properties (defaults) ────────────────────────── */
:root {
  /* Page padding */
  --page-padding-top: 16px;
  --page-padding-right: 16px;
  --page-padding-bottom: 16px;
  --page-padding-left: 16px;

  /* Header / Footer padding (default: inherit page padding) */
  --header-padding-top: 16px;
  --header-padding-right: 16px;
  --header-padding-bottom: 16px;
  --header-padding-left: 16px;
  --footer-padding-top: 16px;
  --footer-padding-right: 16px;
  --footer-padding-bottom: 16px;
  --footer-padding-left: 16px;

  /* Element spacing */
  --el-gap: 16px;
  --el-padding-top: 0px;
  --el-padding-right: 0px;
  --el-padding-bottom: 0px;
  --el-padding-left: 0px;

  /* Background */
  --bg-color: #ffffff;

  /* H1 */
  --h1-font-family: 'Times New Roman', Times, serif;
  --h1-font-size: 40px;
  --h1-font-weight: 700;
  --h1-font-style: normal;
  --h1-line-height: 48px;
  --h1-letter-spacing: 0px;
  --h1-color: #000000;
  --h1-text-align: left;
  --h1-text-decoration: none;
  --h1-text-indent: 0px;
  --h1-text-transform: none;
  --h1-hover-color: inherit;
  --h1-hover-decoration: inherit;

  /* H2 */
  --h2-font-family: 'Times New Roman', Times, serif;
  --h2-font-size: 28px;
  --h2-font-weight: 600;
  --h2-font-style: normal;
  --h2-line-height: 36px;
  --h2-letter-spacing: 0px;
  --h2-color: #000000;
  --h2-text-align: left;
  --h2-text-decoration: none;
  --h2-text-indent: 0px;
  --h2-text-transform: none;
  --h2-hover-color: inherit;
  --h2-hover-decoration: inherit;

  /* Body text */
  --body-font-family: 'Times New Roman', Times, serif;
  --body-font-size: 16px;
  --body-font-weight: 400;
  --body-font-style: normal;
  --body-line-height: 24px;
  --body-letter-spacing: 0px;
  --body-color: #000000;
  --body-text-align: left;
  --body-text-decoration: none;
  --body-text-indent: 0px;
  --body-text-transform: none;
  --body-hover-color: inherit;
  --body-hover-decoration: inherit;

  /* Caption */
  --caption-font-family: 'Times New Roman', Times, serif;
  --caption-font-size: 14px;
  --caption-font-weight: 400;
  --caption-font-style: normal;
  --caption-line-height: 20px;
  --caption-letter-spacing: 0px;
  --caption-color: #666666;
  --caption-text-align: left;
  --caption-text-decoration: none;
  --caption-text-indent: 0px;
  --caption-text-transform: none;
  --caption-hover-color: inherit;
  --caption-hover-decoration: inherit;

  /* Link */
  --link-font-family: 'Times New Roman', Times, serif;
  --link-font-size: 16px;
  --link-font-weight: 400;
  --link-font-style: normal;
  --link-line-height: 24px;
  --link-letter-spacing: 0px;
  --link-color: #000000;
  --link-text-align: left;
  --link-text-decoration: underline;
  --link-text-indent: 0px;
  --link-text-transform: none;
  --link-hover-color: #555555;
  --link-hover-decoration: none;

  /* Button */
  --button-font-family: 'Times New Roman', Times, serif;
  --button-font-size: 16px;
  --button-font-weight: 500;
  --button-font-style: normal;
  --button-line-height: 22px;
  --button-letter-spacing: 0px;
  --button-color: #ffffff;
  --button-bg-color: #000000;
  --button-text-align: center;
  --button-text-decoration: none;
  --button-hover-color: #ffffff;
  --button-hover-bg-color: #333333;
  --button-text-transform: none;
  --button-hover-decoration: none;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Base ────────────────────────────────────────────────── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--body-font-family), system-ui, -apple-system, sans-serif;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
  text-align: var(--body-text-align);
  text-decoration: var(--body-text-decoration);
  text-indent: var(--body-text-indent);
  background-color: var(--bg-color);
}

img, video { max-width: 100%; height: auto; display: block; }

/* ── Background media/YouTube ────────────────────────────── */
/* #siteBg is a direct child of body, position: fixed, z-index: 0.
   .page gets z-index: 1 → page content sits above the video.
   Header/footer (z:10) use .bg-reveal clones with clip: rect()
   to show the same video in their stacking contexts.
   For <video> clones, captureStream() pipes the exact same decoded
   frames → zero drift. For YouTube iframes the clone plays in sync. */
.site-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.site-bg-media {
  width: 100%; height: 100%;
  object-fit: cover;
  border: none;
}
.site-bg iframe.site-bg-media {
  width: 115%; height: 115%;
  margin-left: -7.5%; margin-top: -7.5%;
  pointer-events: none;
  border: none;
}

/* Background reveal inside sticky header/footer */
.bg-reveal {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  clip: rect(auto, auto, auto, auto);
}
.bg-reveal .site-bg-media {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: none;
}
.bg-reveal iframe.site-bg-media {
  width: 115%; height: 115%;
  margin-left: -7.5%; margin-top: -7.5%;
  border: none;
}

/* ── Site Header / Footer ────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--el-gap);
  padding: var(--header-padding-top) var(--header-padding-right) var(--header-padding-bottom) var(--header-padding-left);
  background-color: var(--bg-color);
}
.site-header[hidden], .site-footer[hidden] { display: none; }
.site-footer {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--el-gap);
  padding: var(--footer-padding-top) var(--footer-padding-right) var(--footer-padding-bottom) var(--footer-padding-left);
  background-color: var(--bg-color);
}
/* Fixed mode: page has no top/bottom padding adjacent to sticky header/footer */
.site-header:not([hidden]) + .page { padding-top: 0; }
.page:has(+ .site-footer:not([hidden])) { padding-bottom: 0; }
/* Static mode: flows normally in the document */
.site-header.pos-static { position: static; }
.site-header.pos-static:not([hidden]) + .page { padding-top: revert; }
.site-footer.pos-static { position: static; }
.page:has(+ .site-footer.pos-static:not([hidden])) { padding-bottom: revert; }
/* Auto-hide mode: sticky with slide transition */
.site-header.pos-autohide { transition: transform .3s ease; }
.site-header.pos-autohide.hf-hidden { transform: translateY(-100%); }
.site-footer.pos-autohide { transition: transform .3s ease; }
.site-footer.pos-autohide.hf-hidden { transform: translateY(100%); }

/* ── Page Layout ─────────────────────────────────────────── */
.page {
  position: relative; z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--el-gap);
  padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left);
}

.element {
  padding: var(--el-padding-top) var(--el-padding-right) var(--el-padding-bottom) var(--el-padding-left);
}

/* ── Line block (v0.9.11) ────────────────────────────────────
   Inline SVG line in all 4 orientations. Wrapper dimensions per direction:
     - Orizzontale → width 100% × height = --line-thickness (set inline by JS)
     - Verticale   → width = --line-thickness × height 100vh
     - Diagonali   → width 100% × height 100px
   Box dimensions are overridable via CSS Blocchi → Orientamento (width/height).
   See public/js/site.js renderLine() for the SVG details (stroke position,
   dash patterns, opacity). */
.line-block {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
.line-block--horizontal {
  width: 100%;
  height: var(--line-thickness, 1px);
}
.line-block--vertical {
  width: var(--line-thickness, 1px);
  height: 100vh;
}
.line-block--diagonal-up,
.line-block--diagonal-down {
  width: 100%;
  height: 100px;
}

/* ── Typography ──────────────────────────────────────────── */
h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  font-style: var(--h1-font-style);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--h1-color);
  text-align: var(--h1-text-align);
  text-decoration: var(--h1-text-decoration);
  text-indent: var(--h1-text-indent);
  text-transform: var(--h1-text-transform);
}

h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  font-style: var(--h2-font-style);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--h2-color);
  text-align: var(--h2-text-align);
  text-decoration: var(--h2-text-decoration);
  text-indent: var(--h2-text-indent);
  text-transform: var(--h2-text-transform);
}

p, li, blockquote, .text-style-body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  font-style: var(--body-font-style);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
  text-align: var(--body-text-align);
  text-decoration: var(--body-text-decoration);
  text-indent: var(--body-text-indent);
  text-transform: var(--body-text-transform);
}

.caption, figcaption {
  font-family: var(--caption-font-family);
  font-size: var(--caption-font-size);
  font-weight: var(--caption-font-weight);
  font-style: var(--caption-font-style);
  line-height: var(--caption-line-height);
  letter-spacing: var(--caption-letter-spacing);
  color: var(--caption-color);
  text-align: var(--caption-text-align);
  text-decoration: var(--caption-text-decoration);
  text-indent: var(--caption-text-indent);
  text-transform: var(--caption-text-transform);
}

/* v0.12.12: esplicito anche :link/:visited per coerenza cross-browser.
   Su iOS Safari il default user-agent può applicare text-decoration: underline
   ai link visitati ignorando la regola base `a`. Replicando per :visited e
   con fallback `none` ci si assicura che la decorazione corrisponda sempre a
   quanto impostato nell'Ufficio Stile. */
a, a:link, a:visited {
  font-family: var(--link-font-family);
  color: var(--link-color);
  text-decoration: var(--link-text-decoration, none);
  text-transform: var(--link-text-transform);
  transition: color 150ms ease, text-decoration 150ms ease;
}

/* Row block */
.row-block {
  display: flex;
  align-items: center;
}
.row-cell {
  min-width: 0;
}

/* Image link wrapper: inherit caption style, not link style */
.image-block a, .video-block a {
  font-family: inherit; color: inherit;
  text-decoration: none;
}
.image-block a:hover, .video-block a:hover {
  color: inherit; text-decoration: none;
}

/* Index block: list of pages pulled from a source page in the tree.
   Minimal default styling — site author personalizes via custom.css. */
.index-block .index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--el-gap, 1rem);
}
.index-block .index-item a {
  display: flex;
  align-items: flex-start;
  /* gap is handled by per-element margin so the marker→content space
     can be controlled independently of the cover→body space. */
  gap: 0;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}
.index-block .index-item a:hover {
  color: inherit;
  text-decoration: none;
}
.index-block .index-cover {
  flex: 0 0 auto;
  margin: 0 1rem 0 0;       /* right margin = cover→body spacing (was flex gap) */
  width: 120px;
}
.index-block .index-cover img {
  display: block;
  width: 100%;
  height: auto;
}
.index-block .index-body {
  flex: 1 1 auto;
  min-width: 0;
  /* Stack title / subtitle / date with explicit gap. text-box-trim
     (Taglia ascendenti/discendenti nel pannello Style) collassa
     l'altezza dei box al solo glifo, quindi senza un gap esplicito
     gli elementi consecutivi si sovrapporrebbero. */
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.index-block .index-title,
.index-block .index-field {
  margin: 0;
}
/* Marker (puntato/numerato) — sits to the left of cover/body and inherits the
   index title's text style by default (set by JS via class "text-style-{key}").
   `flex: 0 0 auto` keeps it from stretching; `min-width: 1.5em` stops the
   layout from shifting around as siblings get longer numbers (1 → 10 → 100).
   `--index-marker-gap` is set inline by renderIndex (default 0 so the
   no-marker layout is unaffected). */
.index-block .index-marker {
  flex: 0 0 auto;
  min-width: 1.5em;
  white-space: nowrap;
  margin-right: var(--index-marker-gap, 0px);
}

/* ── Index block: dropdown mode ──────────────────────────────
   The block is wrapped as <div class="index-block index-block--dropdown"
   data-position="inline|floating" data-state="open|closed">. The header
   is always rendered; the panel is hidden via the [hidden] attribute (set
   by the runtime) and shown when state="open".
*/
.index-block--dropdown { position: relative; }
.index-dropdown-header {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  cursor: pointer;
}
.index-dropdown-title {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: inherit;
}
button.index-dropdown-title { line-height: inherit; }
.index-dropdown-arrow {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  transition: transform .2s ease;
}
.index-block--dropdown[data-state="open"] .index-dropdown-arrow {
  transform: rotate(180deg);
}
.index-dropdown-panel {
  /* Common: a small fade/slide on open. The native [hidden] attr toggles
     display, so the transition only kicks in when the panel goes from
     hidden → shown; when it gets re-hidden it just disappears. */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.index-block--dropdown[data-state="open"] .index-dropdown-panel {
  opacity: 1;
  transform: translateY(0);
}
/* Floating mode: panel pops over the content below. */
.index-block--dropdown[data-position="floating"] .index-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 100%;
  max-width: 90vw;
  background: var(--bg-color, transparent);
  /* If the site has no opaque background, the panel inherits transparent;
     authors can override .index-dropdown-panel from custom.css. */
  padding-top: .5em;
}
/* Inline mode: panel pushes content below. Add a small top spacing so the
   first item doesn't touch the header line. */
.index-block--dropdown[data-position="inline"] .index-dropdown-panel {
  margin-top: .5em;
}

button, .btn {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  font-style: var(--button-font-style);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  color: var(--button-color);
  background-color: var(--button-bg-color);
  text-align: var(--button-text-align);
  text-decoration: var(--button-text-decoration);
  text-transform: var(--button-text-transform);
  border: none;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
button:hover, .btn:hover {
  background-color: var(--button-hover-bg-color);
}

/* ── Inline Text Styles (rich editor spans) ─────────────── */
.text-style-h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  font-style: var(--h1-font-style);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--h1-color);
  text-decoration: var(--h1-text-decoration);
}
.text-style-h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  font-style: var(--h2-font-style);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--h2-color);
  text-decoration: var(--h2-text-decoration);
}
.text-style-caption {
  font-family: var(--caption-font-family);
  font-size: var(--caption-font-size);
  font-weight: var(--caption-font-weight);
  font-style: var(--caption-font-style);
  line-height: var(--caption-line-height);
  letter-spacing: var(--caption-letter-spacing);
  color: var(--caption-color);
  text-decoration: var(--caption-text-decoration);
}

/* Link style class for <a> created by the rich editor */
a.text-style-link,
a.text-style-link:link,
a.text-style-link:visited {
  font-family: var(--link-font-family);
  color: var(--link-color);
  text-decoration: var(--link-text-decoration, none);
}

/* ── Gallery Carousel ───────────────────────────────────── */
.gallery-carousel {
  position: relative;
  margin: 0;
}

.gallery-viewport {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.gallery-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Fade transition for auto-play (v0.5.7). Double-buffer: the "main" <img>
   stays in flow (viewport keeps its natural height); a second
   .gallery-img--overlay is absolutely positioned on top and fades in/out.
   site.js handles the choreography (load → fade → swap underlying src). */
.gallery-carousel--fade .gallery-viewport {
  position: relative;
}
.gallery-carousel--fade .gallery-img--overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity var(--gallery-anim-dur, 0.35s) ease;
}
.gallery-carousel--fade .gallery-img--overlay.is-visible { opacity: 1; }
/* While the JS swaps the underlying <img> we momentarily disable the
   transition on the overlay so it snaps back to opacity:0 invisibly
   instead of fading out a stale image. */
.gallery-carousel--fade .gallery-img--overlay.is-instant {
  transition: none;
}

/* Slide transitions (v0.9.0). Same double-buffer as fade but animated with
   transform instead of opacity. Both imgB (incoming) and img (outgoing) move —
   transform doesn't affect layout so the viewport height stays stable.
   Transition timing is driven entirely by JS inline styles. */
.gallery-carousel--slide-left  .gallery-img--overlay,
.gallery-carousel--slide-right .gallery-img--overlay,
.gallery-carousel--slide-up    .gallery-img--overlay,
.gallery-carousel--slide-down  .gallery-img--overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* 3D cube transition (v0.12.6, fixed v0.12.9). A `.gallery-cube` container
   lives inside the viewport with two image faces (front + next). At rest the
   cube sits at rotateY(0), so only the front face is visible — visually
   identical to a flat photo. On advance, JS rotates the cube 90° to bring the
   next face forward, then snaps back to 0° and swaps the front image.
   translateZ for each face equals half the viewport's W (for Y-axis) or H
   (for X-axis), recomputed by site.js via ResizeObserver.
   IMPORTANT: `.gallery-viewport` is `overflow: hidden` by default; the cube
   needs `overflow: visible` so the rotating faces poke past the viewport
   rect during the animation (otherwise the rotation looks like a hard mask
   crop). Same for the .gallery-carousel and .gallery-block wrappers — any
   ancestor that clips will eat the 3D effect. */
.gallery-carousel--cube,
.gallery-carousel--cube .gallery-viewport {
  overflow: visible;
}
.gallery-carousel--cube .gallery-viewport {
  /* v0.12.12: bumped from 1200px to 2400px to soften the fish-eye projection.
     The front face sits at translateZ(W/2); with perspective P the visual
     scale factor is P/(P-W/2). At P=1200, W=600 → 1.33× (face sporge fino
     a 100px oltre il viewport e copre il counter sotto). At P=2400, W=600
     → 1.143× — sporgenza ridotta a ~43px, counter resta sotto al face. */
  perspective: 2400px;
}
/* v0.12.12: counter e caption devono stare sopra il cubo. Il front face è a
   translateZ(W/2) (in avanti, verso la camera) quindi nella composizione 3D
   "copre" qualunque sibling 2D che venga dopo nel flow (counter, caption).
   Z-index esplicito li mantiene visibili anche con cubo grande su desktop. */
.gallery-carousel--cube .gallery-counter,
.gallery-carousel--cube .gallery-caption {
  position: relative;
  z-index: 1;
}
.gallery-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* JS drives the transition timing (animMs) inline. */
}
.gallery-cube .gallery-cube-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  object-fit: var(--gallery-item-fit, cover);
  /* No backface-visibility:hidden — leaving it on caused flicker during
     rotation when each face's normal crossed 90° from camera. */
}

/* Invisible click zones: left 50% / right 50% */
.gallery-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  cursor: pointer;
  z-index: 1;
}
.gallery-zone-left { left: 0; }
.gallery-zone-right { right: 0; }

/* Optional hover hint */
.gallery-zone-left:hover { cursor: w-resize; }
.gallery-zone-right:hover { cursor: e-resize; }

/* Vertical zones for slide-up / slide-down */
.gallery-zone-top,
.gallery-zone-bottom {
  width: 100%;
  height: 50%;
}
.gallery-zone-top    { top: 0;    bottom: auto; }
.gallery-zone-bottom { bottom: 0; top: auto;    }
.gallery-zone-top:hover    { cursor: n-resize; }
.gallery-zone-bottom:hover { cursor: s-resize; }

.gallery-caption {
  margin-top: 0.4em;
  min-height: 1.2em;
}

/* ── Search block (v0.6.1) ───────────────────────────────────
   Default styling is intentionally minimal — sites are expected to
   override most of this from custom.css or the block's CSS Blocchi
   (the Search block ships only with a sensible bare layout). */
.search-block {
  display: flex; flex-direction: column;
  gap: .75rem;
  margin: 0;
}
.search-bar {
  display: flex;
}
.search-input {
  flex: 1;
  padding: .6rem .8rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  outline: none;
}
.search-input::placeholder { opacity: .5; }
/* Facets row */
.search-facets {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.search-facet {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .55rem;
  font: inherit; color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  font-size: .8em;
  opacity: .7;
  transition: opacity .12s ease;
}
.search-facet:hover { opacity: 1; }
.search-facet.is-selected { opacity: 1; background: currentColor; }
.search-facet.is-selected .search-facet-name,
.search-facet.is-selected .search-facet-count { color: var(--bg-color, #fff); }
.search-facet-count {
  font-size: .8em; opacity: .65;
  font-variant-numeric: tabular-nums;
}
/* Results list */
.search-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--el-gap, 1rem);
}
.search-list.is-loading { opacity: .7; }
.search-item a {
  display: flex; align-items: flex-start; gap: 0;
  text-decoration: none; color: inherit; font-family: inherit;
}
.search-item a:hover { color: inherit; text-decoration: none; }
.search-cover {
  flex: 0 0 auto; width: 120px;
  margin: 0 1rem 0 0;
}
.search-cover img {
  display: block; width: 100%; height: auto;
}
.search-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  gap: .4em;
}
.search-title { margin: 0; }
.search-result-tags {
  display: flex; flex-wrap: wrap; gap: .35em;
  margin: 0;
}
.search-tag-pill {
  display: inline-block;
  padding: .05em .5em;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .7;
}
.search-empty,
.search-error {
  list-style: none;
  padding: .5rem 0;
  opacity: .6;
  font-style: italic;
}

/* Carousel counter (e.g. "1/12") — opt-in via CSS Blocchi → Layout galleria.
   Inherits the caption text style (text-style-caption); positioning above
   or below the viewport is decided by JS (mounted as previous/next sibling
   of .gallery-viewport). The wrapper class controls horizontal alignment. */
.gallery-counter {
  display: block;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.gallery-counter--align-left   { text-align: left; }
.gallery-counter--align-center { text-align: center; }
.gallery-counter--align-right  { text-align: right; }
/* When mounted before the viewport, give it bottom margin so it doesn't
   touch the image. After the viewport, top margin. */
.gallery-counter:not(:last-child)  { margin-bottom: 0.4em; }
.gallery-counter:not(:first-child) { margin-top: 0.4em; }

/* ── Gallery non-carousel layouts (v0.5.5) ───────────────────
   Driven by inline CSS vars set by site.js (--gallery-cols, --gallery-gap,
   --gallery-item-aspect). Switching the mode in CSS Blocchi swaps the
   modifier class on the wrapper; the rendering JS is otherwise the same
   (every image rendered, no preload-on-demand, no click zones). */
.gallery-block--grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
  gap: var(--gallery-gap, var(--el-gap, 12px));
  margin: 0;
}
.gallery-block--grid .gallery-item {
  display: flex; flex-direction: column;
  min-width: 0;
}
.gallery-block--grid .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}
/* When the admin sets a fixed item aspect-ratio, crop to fit. */
.gallery-block--grid .gallery-item:has(img):not([style*="--gallery-item-aspect"]) > img,
.gallery-block--grid .gallery-item img {
  /* Vars cascade from the wrapper: if --gallery-item-aspect is set we
     enforce it; otherwise the image keeps its natural ratio. */
  aspect-ratio: var(--gallery-item-aspect, auto);
  object-fit: var(--gallery-item-fit, cover);
}

/* Masonry: CSS columns variant. Items flow naturally with their own height. */
.gallery-block--masonry {
  column-count: var(--gallery-cols, 3);
  column-gap: var(--gallery-gap, var(--el-gap, 12px));
  margin: 0;
}
.gallery-block--masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: var(--gallery-gap, var(--el-gap, 12px));
  display: block;
}
.gallery-block--masonry .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* (v0.5.7) "list" mode removed — equivalent to grid with N=1 columns. */

/* ── Index block: grid mode ──────────────────────────────────
   Driven by inline CSS vars set by site.js (--index-cols, --index-gap,
   --index-item-aspect). Set from CSS Blocchi → Layout index. */
.index-block--grid .index-list {
  display: grid;
  grid-template-columns: repeat(var(--index-cols, 3), 1fr);
  gap: var(--index-gap, var(--el-gap, 12px));
}
.index-block--grid .index-item a {
  flex-direction: column;
  gap: .5rem;
}
.index-block--grid .index-cover {
  width: 100%;
  margin: 0;
  aspect-ratio: var(--index-item-aspect, auto);
  overflow: hidden;
}
.index-block--grid .index-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Search block: grid mode ─────────────────────────────────
   Driven by inline CSS vars set by site.js (--search-cols, --search-gap,
   --search-item-aspect). Set from CSS Blocchi → Layout ricerca. */
.search-block--grid .search-list {
  display: grid;
  grid-template-columns: repeat(var(--search-cols, 3), 1fr);
  gap: var(--search-gap, var(--el-gap, 12px));
}
.search-block--grid .search-item a {
  flex-direction: column;
  gap: .5rem;
}
.search-block--grid .search-cover {
  width: 100%;
  margin: 0;
  aspect-ratio: var(--search-item-aspect, auto);
  overflow: hidden;
}
.search-block--grid .search-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Documenti legali (v0.11.5 + v0.11.6) ──────────────────────
   I 3 documenti legali (privacy/cookie/terms) sono renderizzati come
   block text con HTML interno avvolto in <div class="legal-document">.
   v0.11.5: TUTTO il contenuto usa stile Body (text-style-body) per
   uniformità totale. Le distinzioni visive si ottengono tramite classi
   semantiche aggiuntive (legal-title-main / legal-title-section /
   legal-bullet / legal-hr / legal-disclaimer) che modulano SOLO il
   margine — niente font-size/weight diversi.

   Gerarchia visiva:
   - Titolo principale: MAIUSCOLO + spazio sotto
   - Titoli sezione: spazio sopra (separa dal paragrafo precedente)
   - Paragrafi interni e liste: compatti, flow continuo dentro la sezione

   v0.11.6: rimossi i default di "layout di lettura" (max-width 720px,
   margin auto centrato, padding interno, line-height fisso 1.7). Il
   documento ora eredita dalle impostazioni di pagina (Padding pagina di
   Ufficio Stile) e dallo stile Body. L'admin formatta a piacere senza
   doversi scontrare con override CSS hardcoded.
*/
/* Span text-style-body dentro .legal-document → block-level compatto.
   v0.11.7: disabilito text-box-trim (= Ufficio Stile → Padding pagina →
   "Taglia ascendenti"/"Taglia discendenti"). Senza questo override, ogni
   paragrafo di 1 riga ha il box visivo collassato al solo glifo, quindi
   line-height alto in Ufficio Stile non si vede tra paragrafi consecutivi.
   Coerente con "no formattazioni forzate" nei documenti legali. */
.legal-document .text-style-body {
  display: block;
  margin: 0;
  text-box: normal;
  text-box-trim: none;
  text-box-edge: auto;
}
/* Titolo principale (era <h1>): maiuscolo + spazio sotto */
.legal-document .text-style-body.legal-title-main {
  margin: 0 0 1.5em;
}
/* Titoli di sezione (era <h2>): spazio sopra per separare dal paragrafo precedente */
.legal-document .text-style-body.legal-title-section {
  margin: 1.5em 0 0;
}
/* Disclaimer finale (era <small>): mantiene spazio sopra per stacco */
.legal-document .text-style-body.legal-disclaimer {
  margin: 1.5em 0 0;
}
/* Liste puntate / numerate: compatte, hanging indent per il bullet/numero a sx */
.legal-document .text-style-body.legal-bullet {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin: 0;
}
/* Separatore <hr>: linea sottile divisoria */
.legal-document .text-style-body.legal-hr {
  display: block;
  margin: 1.5em 0;
  height: 1px;
  background: rgba(0, 0, 0, .15);
}
.legal-document a.text-style-link {
  display: inline;
  margin: 0;
}
/* Primo elemento: rimuovi margine top per non creare doppio spazio iniziale */
.legal-document > .text-style-body:first-child {
  margin-top: 0;
}

/* ── Container block (v0.9.27) ─────────────────────────────────
   Block che può contenere altri block. Default minimal — l'utente
   sovrascrive padding/bg/border/ecc. dal CSS Blocchi del singolo container. */
.block-container {
  display: flex;
  flex-direction: column;
  gap: var(--el-gap, 16px);
}

/* ── Cookie banner (v0.9.23) ───────────────────────────────────
   In v0.9.23 il banner è una pagina speciale `_cookie` editabile da
   Contents (testi/struttura) + CSS Blocchi (stili dei singoli block).
   Il CSS per block viene applicato automaticamente via [data-block-id].
   Qui mantiene solo i fondamentali del container popup + i fallback
   minimali per i nuovi block type cookie_category / cookie_button. */
/* v0.9.32/v0.9.34: container del banner ridotto al minimo. Solo
   position + bg bianco. Niente font/size hardcoded così lo stile Body
   dell'Ufficio Stile si applica naturalmente (vedi STYLE_SELECTORS.body
   in functions/api/style.js, che ora include [data-cookie-role="banner_root"]).
   Niente padding/radius/shadow di default. L'utente customizza da CSS Blocchi. */
[data-cookie-role="banner_root"] {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 10000;
  background: #fff;
  gap: 0;
}
/* Backdrop scurito per posizione 'center'. */
.bg-cookie-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .5);
}
/* Block cookie_category (default look — totalmente sovrascrivibile da CSS Blocchi). */
.bg-cookie-cat {
  display: flex; gap: .55rem; align-items: flex-start;
  cursor: pointer; font-size: .92em;
}
.bg-cookie-cat input { margin-top: .15rem; flex: 0 0 auto; }
.bg-cookie-cat small { color: rgba(0, 0, 0, .6); display: block; margin-top: .15rem; }
/* v0.9.32/v0.9.34: bottoni cookie senza overrides di font/color, così lo
   stile Button dell'Ufficio Stile (STYLE_SELECTORS.button) si applica
   automaticamente (font-family, size, weight, color, bg-color, ecc.).
   Restano solo border 1px e cursor — le proprietà "comportamentali" del
   bottone non legate al testo. L'utente customizza per-block da CSS Blocchi. */
.bg-cookie-btn {
  border: 1px solid currentColor;
  cursor: pointer;
}

/* Link "Gestisci cookie" (v0.9.22, conservato). Inserito a mano dall'utente
   come <a data-bg-cookie-prefs>. Style ereditato dal sito (nessuna var). */
a[data-bg-cookie-prefs] { cursor: pointer; text-decoration: underline; }

/* Dark color scheme fallback. */
@media (prefers-color-scheme: dark) {
  [data-cookie-role="banner_root"] { background: #1a1a1a; color: #f0f0f0; }
  .bg-cookie-btn--accept { background: #f0f0f0; color: #111; border-color: #f0f0f0; }
  .bg-cookie-cat small { color: rgba(255, 255, 255, .6); }
}

/* v0.9.29: niente regola responsive hardcoded. Su mobile l'utente
   imposta width/max-width come crede dal CSS Blocchi del block. */