/* Angiangi — impresa di costruzioni
   Grammatica: DESIGN.md (scheda tecnica a filetti, Instrument Sans 400, pill, un solo colore pieno) */

:root {
  /* Colori */
  --color-ink: oklch(26% 0.07 258);          /* blu cantiere */
  --color-canvas: oklch(98.2% 0.004 250);    /* bianco cemento */
  --color-concrete: oklch(84% 0.008 250);    /* grigio getto: filetti */
  --color-mist: oklch(95% 0.006 250);        /* superfici spente */
  --color-iron: oklch(40% 0.03 258);         /* testo lungo */
  --color-ash: oklch(50% 0.022 258);         /* testo secondario */
  --color-ink-deep: oklch(19% 0.055 260);    /* blu notte */
  --color-signal: oklch(70% 0.18 52);        /* arancione cantiere */
  --color-on-deep: oklch(86% 0.012 250);     /* testo tenue sul blu notte */

  /* Tipografia */
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --text-label-sm: 0.6875rem;   /* 11px */
  --text-body: 1rem;            /* 16px */
  --text-subheading: 1.5rem;    /* 24px */
  --text-heading: 2rem;         /* 32px */
  --text-display: clamp(1.9rem, 8vw, 4rem);

  /* Spazi */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --gutter: 20px;

  /* Forme */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-md: 0 2px 10px 0 oklch(19% 0.055 260 / 0.12);

  --page-max: 1440px;
  --header-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --text-body: 1.0625rem;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" on;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

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

[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.skip-link {
  position: absolute;
  inset-inline-start: var(--spacing-16);
  inset-block-start: -100px;
  z-index: 100;
  padding: var(--spacing-12) var(--spacing-20);
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-canvas);
  text-decoration: none;
}
.skip-link:focus { inset-block-start: var(--spacing-12); }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--spacing-12) 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.btn--solid {
  background: var(--color-ink);
  color: var(--color-canvas);
  border: 1px solid var(--color-ink);
  box-shadow: var(--shadow-md);
}
.btn--solid:hover { background: var(--color-ink-deep); }

.btn--ghost {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-canvas); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--color-canvas);
  border-block-end: 1px solid var(--color-concrete);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  max-width: var(--page-max);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--spacing-8) 18px;
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-canvas);
  font-size: 1.25rem;
  font-stretch: 75%;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
}

.site-header__cta { display: none; }
@media (min-width: 360px) and (max-width: 767px) {
  .site-header__cta {
    display: inline-flex;
    margin-inline-start: auto;
    padding-inline: var(--spacing-16);
    box-shadow: none;
  }
  .site-header__inner { gap: var(--spacing-8); }
}

.site-nav__cta { margin-block-start: var(--spacing-32); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  color: var(--color-ink);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  inline-size: 20px;
  block-size: 1.5px;
  background: currentColor;
  transition: transform .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* Menu mobile: pannello a tutto schermo sotto l'header */
.site-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 40;
  padding: var(--spacing-24) var(--gutter) var(--spacing-48);
  background: var(--color-canvas);
  overflow-y: auto;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-100% - var(--header-h)));
  transition: transform .25s ease, visibility 0s linear .25s;
}
.site-nav.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform .25s ease, visibility 0s;
}

.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 64px;
  border-block-end: 1px solid var(--color-concrete);
  font-size: var(--text-heading);
  line-height: 0.97;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-decoration: none;
}

body.menu-open { overflow: hidden; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .site-nav {
    position: static;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .site-nav__list { display: flex; gap: var(--spacing-24); }
  .site-nav__list a {
    min-height: 44px;
    border: 0;
    font-size: 0.75rem;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-underline-offset: 4px;
  }
  .site-nav__list a:hover { text-decoration: underline; }

  .site-header__cta { display: inline-flex; justify-self: end; }
  .site-nav__cta { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  border-block-end: 1px solid var(--color-concrete);
}

.hero__fence {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-32);
  padding: var(--spacing-32) var(--gutter) var(--spacing-32);
  background: var(--color-signal);
}

.hero__title {
  font-size: clamp(1.5rem, calc((100cqi - 2 * var(--gutter)) / 10), 4rem);
  text-wrap: balance;
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Targa di cantiere */
.plate {
  max-width: 560px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
}
.plate__head {
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-ink);
  color: var(--color-canvas);
  font-size: var(--text-label-sm);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plate__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 38%) 1fr;
  gap: var(--spacing-12);
  align-items: baseline;
  padding: var(--spacing-12) var(--spacing-16);
  border-block-start: 1px solid var(--color-concrete);
}
.plate__row:first-child { border-block-start: 0; }
.plate__row dt {
  font-size: var(--text-label-sm);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
.plate__row dd {
  font-size: 1.125rem;
  font-stretch: 75%;
  line-height: 1.2;
  color: var(--color-ink);
}

.hero__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hero__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(calc(100svh - var(--header-h)), 880px);
  }
  .hero__fence { padding: var(--spacing-48) var(--gutter); }
  .hero__photo { position: relative; aspect-ratio: auto; }
  .hero__photo img { position: absolute; inset: 0; }
  .plate__row dd { font-size: 1.25rem; }
}

/* ---------- Intro ---------- */

.intro {
  display: grid;
  gap: var(--spacing-24);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--spacing-48) var(--gutter);
  border-block-end: 1px solid var(--color-concrete);
}
.intro__text {
  max-width: 38ch;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: 0;
}
.intro__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }

@media (min-width: 1024px) {
  .intro {
    grid-template-columns: 1fr auto;
    align-items: end;
    padding-block: var(--spacing-64);
  }
  .intro__text { font-size: var(--text-subheading); line-height: 1.3; }
}

/* ---------- Sezioni ---------- */

.section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--spacing-64) var(--gutter);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--spacing-80); }
}

.section__title {
  margin-block-end: var(--spacing-32);
  font-size: clamp(1.75rem, 6vw, var(--text-heading));
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.section p + p { margin-block-start: var(--spacing-16); }

/* ---------- Servizi ---------- */

.services__grid {
  display: grid;
  gap: 1px;
  background: var(--color-concrete);
  border: 1px solid var(--color-concrete);
}
.service { container-type: inline-size; background: var(--color-canvas); }

.service__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-ink-deep); /* se la foto non arriva, il titolo bianco resta leggibile */
}
.service__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.service__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  padding: var(--spacing-64) var(--spacing-20) var(--spacing-20);
  background: linear-gradient(to top, oklch(19% 0.055 260 / 0.88), oklch(19% 0.055 260 / 0.78) 50%, oklch(19% 0.055 260 / 0));
}
.service__name {
  font-size: clamp(1.25rem, calc((100cqi - 40px) / 10), var(--text-heading));
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--color-canvas);
}
.service__text {
  max-width: 44ch;
  padding: var(--spacing-20);
  color: var(--color-iron);
}

@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Griglia a filetti condivisa ---------- */

.ruled {
  display: grid;
  gap: 1px;
  background: var(--color-concrete);
  border: 1px solid var(--color-concrete);
}

/* ---------- Committenti ---------- */

.clients { border-block-start: 1px solid var(--color-concrete); }
.clients__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.clients__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.clients__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-24) var(--spacing-20) var(--spacing-32);
  background: var(--color-canvas);
  color: var(--color-iron);
}
.clients__body > * { max-width: 60ch; }
.clients__body .section__title { color: var(--color-ink); }

@media (min-width: 900px) {
  .clients__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .clients__photo { aspect-ratio: 5 / 4; }
  .clients__body { padding: var(--spacing-48); }
}

/* ---------- Impresa ---------- */

.company { border-block-start: 1px solid var(--color-concrete); }
.company__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.company__head {
  grid-column: 1 / -1;
  padding: var(--spacing-24) var(--spacing-20) var(--spacing-32);
  background: var(--color-canvas);
  color: var(--color-iron);
}
.company__head > * { max-width: 60ch; }
.company__head .section__title { color: var(--color-ink); }
.company__photo {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-canvas);
}
.company__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.sheet { display: contents; }
.sheet__cell {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-16);
  background: var(--color-canvas);
}
.sheet__cell dt {
  font-size: var(--text-label-sm);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
.sheet__cell dd {
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (min-width: 900px) {
  .company__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .company__head {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-48);
  }
  .company__photo { grid-column: 3 / 5; }
  .sheet__cell { padding: var(--spacing-24); }
  .sheet__cell dd { font-size: var(--text-subheading); }
}

/* ---------- Blocchi spenti (versione free) ---------- */

.plus-lock {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.plus-lock__fake {
  filter: blur(6px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

.plus-badge {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5em 1.1em;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  /* Palette Weeby fissa, non i token del sito */
  background: #eb5457;
  color: #1a1a1a;
  box-shadow: 0 0 0 2px #f1e2cf, 0 6px 18px -6px rgba(0, 0, 0, .35);
}
.plus-badge:hover,
.plus-badge:focus-visible { background: #1a1a1a; color: #f1e2cf; }
.plus-badge:focus-visible { outline: 2px solid #eb5457; outline-offset: 3px; }

.plus-lock.plus-lock--inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  vertical-align: middle;
  overflow: visible;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 999px;
}
.plus-lock.plus-lock--inline .plus-lock__fake { filter: blur(4px); }
.plus-lock.plus-lock--inline .plus-badge {
  position: static;
  transform: none;
  min-height: 36px;
  padding: .3em .9em;
  font-size: .75rem;
}

.blog,
.contact { border-block-start: 1px solid var(--color-concrete); }

/* Blog spento */
.plus-lock--blog { border: 1px solid var(--color-concrete); }
.fake-blog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-24);
  padding: var(--spacing-24);
}
.fake-post { display: flex; flex-direction: column; gap: var(--spacing-12); }
@media (max-width: 767px) {
  .fake-post:nth-child(n+2) { display: none; }
}
.fake-post__img {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  background: var(--color-mist);
  border: 1px solid var(--color-concrete);
}
.fake-post__meta { font-size: var(--text-label-sm); color: var(--color-ash); letter-spacing: .1em; }
.fake-post__title { font-size: 1.25rem; line-height: 1.2; }
.fake-post__text { color: var(--color-iron); }

/* Contatti spenti */
.contact__head { max-width: 60ch; margin-block-end: var(--spacing-32); color: var(--color-iron); }
.contact__head .section__title { color: var(--color-ink); }

.plus-lock--contact { border: 1px solid var(--color-concrete); }
.contact__fake {
  display: grid;
  gap: var(--spacing-32);
  padding: var(--spacing-24);
}
.contact__lines {
  display: grid;
  gap: 1px;
  background: var(--color-concrete);
  border: 1px solid var(--color-concrete);
  align-self: start;
}
.contact__line {
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--color-canvas);
}
.contact__line dt {
  font-size: var(--text-label-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
.contact__line dd { font-size: 1.25rem; font-stretch: 75%; }

.fake-form { display: grid; gap: var(--spacing-16); }
.fake-form__row { display: grid; gap: var(--spacing-8); }
.fake-form__label {
  font-size: var(--text-label-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
.fake-form__input,
.fake-form__area {
  display: block;
  inline-size: 100%;
  min-height: 48px;
  border: 1px solid var(--color-concrete);
  border-radius: var(--radius-sm);
  background: var(--color-mist);
  font: inherit;
}
.fake-form__area { min-height: 120px; }
.fake-form__send { justify-self: start; }

@media (min-width: 900px) {
  .contact__fake { grid-template-columns: 1fr 1.6fr; padding: var(--spacing-32); }
  .fake-form { grid-template-columns: 1fr 1fr; }
  .fake-form__row--wide { grid-column: 1 / -1; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-ink-deep);
  color: var(--color-canvas);
}
.site-footer__inner {
  display: grid;
  gap: var(--spacing-24);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--spacing-48) var(--gutter);
}
.brand--footer {
  justify-self: start;
  background: var(--color-canvas);
  color: var(--color-ink);
}
.site-footer__what { color: var(--color-on-deep); max-width: 40ch; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-16); }
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__legal {
  display: grid;
  gap: var(--spacing-4);
  padding-block-start: var(--spacing-24);
  border-block-start: 1px solid var(--color-iron);
  font-size: 0.8125rem;
  color: var(--color-on-deep);
}
.footer-credit a { color: var(--color-canvas); text-underline-offset: 3px; }
.site-footer :focus-visible { outline-color: var(--color-canvas); }

@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--spacing-48);
  }
  .site-footer__legal { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; column-gap: var(--spacing-32); }
  .footer-credit { justify-self: end; }
}

/* ---------- Movimento ridotto ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}