/*
 * page.css · layout helpers e regole specifiche del design-system doc
 * Estratto dall'HTML per perf + cache.
 */

body { padding-top: 64px; }

  /* Page-specific layout helpers */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  @media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  .stack { display: flex; flex-direction: column; gap: var(--s-4); }
  .row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

  .demo {
    border: 1px solid var(--rule-2);
    border-radius: var(--r-12);
    padding: var(--s-8) var(--s-6);
    background: var(--bg-elev);
    display: grid; place-items: center;
    min-height: 180px; position: relative;
    min-width: 0;          /* prevent grid children from blowing out columns */
    overflow: hidden;      /* contain horizontal rails */
  }
  .demo > * { min-width: 0; max-width: 100%; }
  .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
  .demo-grid { display: grid; gap: var(--s-3); }
  .demo-label {
    position: absolute; top: var(--s-3); left: var(--s-4);
    font-family: var(--font-mono); font-size: var(--fs-11);
    letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ink-3);
  }
  .demo-wide { min-height: 220px; }
  .demo-tall { min-height: 420px; align-items: stretch; place-items: stretch; }
  .demo > .full { width: 100%; }

  .subsection { margin-top: var(--s-16); }
  .subsection > .head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--s-6); padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule);
  }
  .subsection > .head .num { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); letter-spacing: var(--ls-wider); text-transform: uppercase; }
  .subsection > .head h3 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: var(--ls-tight); margin: 0; color: var(--ink);
  }
  .subsection > .head h3 em { font-style: italic; color: var(--accent-warm); }

  /* COVER */
  .cover-stack { display: grid; gap: var(--s-12); }
  .logo-display { width: 100%; max-width: 1100px; }
  .logo-display svg { width: 100%; height: auto; display: block; }

  .meta-list { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-3) var(--s-6); align-items: baseline; }
  .meta-list dt { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ink-3); margin: 0; }
  .meta-list dd { margin: 0; color: var(--ink); font-size: var(--fs-14); }
  @media (max-width: 700px) { .meta-list { grid-template-columns: 1fr; } .meta-list dd { margin-bottom: var(--s-2); } }

  /* Full-bleed mosaic divider */
  .mosaic-divider {
    height: 64px; width: 100%;
    display: grid; grid-template-columns: repeat(40, 1fr); gap: 0;
  }
  .mosaic-divider .c { background: var(--c); }

  /* Footer */
  .ds-footer {
    background: var(--ink); color: var(--bg);
    padding: var(--s-16) 0 var(--s-8);
    margin-top: var(--s-24);
  }
  .ds-footer h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: var(--ls-tightest); line-height: 1; margin: 0 0 var(--s-8); color: var(--bg); }
  .ds-footer h2 em { font-style: italic; color: var(--c-amber); }
  .ds-footer .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-8); padding-top: var(--s-8); border-top: 1px solid rgba(255,255,255,.1); }
  @media (max-width: 800px) { .ds-footer .cols { grid-template-columns: 1fr; } }
  .ds-footer .col h4 { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-wider); text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 var(--s-4); font-weight: 500; }
  .ds-footer .col a { display: block; color: var(--bg); font-size: var(--fs-14); padding: 6px 0; opacity: .85; transition: opacity var(--dur-2) var(--ease-out); }
  .ds-footer .col a:hover { opacity: 1; color: var(--c-amber); }
  .ds-footer .bottom { display: flex; justify-content: space-between; padding-top: var(--s-8); margin-top: var(--s-8); border-top: 1px solid rgba(255,255,255,.1); font-family: var(--font-mono); font-size: var(--fs-12); color: rgba(255,255,255,.5); }

  /* Pattern - CTA block */
  .pattern-cta {
    background:
      linear-gradient(135deg,
        var(--c-cobalt) 0%,
        var(--c-blue) 18%,
        var(--c-sky) 32%,
        var(--c-cyan) 44%,
        var(--c-teal) 56%,
        var(--c-amber) 70%,
        var(--c-orange) 82%,
        var(--c-rose) 92%,
        var(--c-violet) 100%);
    color: #fff;
    border-radius: var(--r-24); padding: var(--s-16) var(--s-12);
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-12); align-items: end;
  }
  /* Faceted overlay — mosaic-like shards on top of the gradient */
  .pattern-cta::before {
    content: "";
    position: absolute; inset: 0;
    background: url("ds/cta-facets.svg") center/cover no-repeat;
    mix-blend-mode: overlay;
    opacity: .9;
    pointer-events: none;
    z-index: -1;
  }
  /* Soft vignette to lift content over the busy gradient */
  .pattern-cta::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 20% 100%, rgba(20,20,22,.35), rgba(20,20,22,0) 60%);
    pointer-events: none;
    z-index: -1;
  }
  .pattern-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: var(--ls-tightest); line-height: 1; margin: 0; color: #fff; text-shadow: 0 2px 24px rgba(20,20,22,.2); }
  .pattern-cta h2 em { font-style: italic; color: var(--c-amber); }
  .pattern-cta .meta { color: rgba(255,255,255,.9); font-size: var(--fs-body); }
  @media (max-width: 800px) { .pattern-cta { grid-template-columns: 1fr; } }

  /* shape lab */
  .shape-lab {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  }
  .shape-cell {
    aspect-ratio: 1; border-radius: var(--r-12);
    background: var(--c, var(--c-blue));
    display: grid; place-items: center; position: relative; overflow: hidden;
    transition: transform var(--dur-3) var(--ease-out);
  }
  .shape-cell:hover { transform: translateY(-4px) rotate(-2deg); }
  .shape-cell .label { font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--ls-wider); color: rgba(255,255,255,.85); }

.pattern-contact .form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
        @media (max-width: 700px) { .pattern-contact .form { grid-template-columns: 1fr; } }