/* Skeleton: .skel e' il blocco grigio che luccica; le sagome di pagina stanno in components/page_skeletons.html.
   .page-skeleton copre la pagina sotto la testata mentre arriva la successiva (v2.js). */
@layer components {
  .skel {
    border-radius: var(--r-sm);
    background: linear-gradient(100deg, var(--tint) 30%, var(--tint-2) 50%, var(--tint) 70%) 0 0 / 300% 100%;
    animation: skel-shine 1.4s linear infinite;
  }
  @keyframes skel-shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }

  .page-skeleton {
    position: fixed;
    inset: 0;
    z-index: var(--z-skeleton);
    overflow: hidden;
    background: var(--ground);

    & .top { position: relative; transition: none; }
    & .top * { transition: none; }
  }
  .skel-page { display: grid; gap: 16px; padding-block: 12px 40px; }
  .skel-page.is-home { padding-top: 0; }
  /* stessa altezza della barra filtri e della riga del percorso delle pagine vere: niente salti all'arrivo */
  .skel-barwrap { padding-block: 12px; box-shadow: 0 1px 0 var(--line); }
  .skel-page.is-detail { padding-top: 0; }
  .skel-crumbs { display: flex; align-items: center; height: 58px; margin-bottom: -16px; }
  .skel-crumbs .skel-line { height: 12px; }
  .skel-line { height: 14px; }
  .skel-line.w-40 { width: 40%; }
  .skel-line.w-60 { width: 60%; }
  .skel-line.w-80 { width: 80%; }
  .skel-title { width: min(420px, 70%); height: 32px; margin-top: 8px; }
  .skel-bar { height: var(--field-h); border-radius: var(--r-pill); }
  .skel-hero { height: 68dvh; border-radius: 0; }
  .skel-media { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
  .skel-card { display: grid; gap: 10px; align-content: start; }
  .skel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 16px; }
  .skel-cards.per-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skel-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: var(--gap); padding-top: 8px; }
  .skel-split.no-map { grid-template-columns: minmax(0, 1fr); }
  .skel-split.no-map .skel-map { display: none; }
  .skel-split.no-map .skel-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .skel-head { display: grid; gap: 12px; align-content: start; min-height: 220px; padding-top: 8px; }
  .skel-head .skel-title { height: 72px; margin: 0; }
  .skel-map { height: calc(100dvh - 180px); border-radius: var(--r-lg); }
  /* stesse colonne della scheda: 8 su 12 per le foto (2:1) e 4 su 12 per la mappa */
  .skel-gallery {
    --col: calc((100% - 11 * var(--gap)) / 12);
    --photos: calc(8 * var(--col) + 7 * var(--gap) - 10px);

    display: grid;
    grid-template-columns: calc(var(--photos) * 2 / 3) calc(var(--photos) / 3) calc(4 * var(--col) + 4 * var(--gap) - 10px);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: clamp(360px, 58vh, 600px);

    & > * { border-radius: var(--r-md); }
    & .main { grid-row: span 2; border-radius: var(--r-lg); }
    & .side { grid-column: 3; grid-row: 1 / span 2; margin-left: calc(var(--gap) - 10px); border-radius: var(--r-lg); }
  }
  @media (max-width: 1080px) {
    .skel-split { grid-template-columns: minmax(0, 1fr); }
    .skel-map { display: none; }
    .skel-cards.per-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skel-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: 300px; }
    .skel-gallery > :not(.main) { display: none; }
  }
  @media (max-width: 640px) {
    .skel-cards, .skel-cards.per-3 { grid-template-columns: minmax(0, 1fr); }
  }
  @media (prefers-reduced-motion: reduce) {
    .skel { animation: none; }
  }
}