/* Pagine a blocchi del sito di un'agenzia (home, chi siamo, servizi, vendi con noi, contatti).
   I colori arrivano dal tema dell'agenzia come variabili su .ms (v2/agencies/agency_page.html).
   Le classi ms-theme-*, ms-align-center e ms-enter-* le scrive l'editor del CRM: i loro nomi non si cambiano. */

@layer pages {
  /* ---------- Sezioni: una per blocco ---------- */
  .ms-section { padding-block: clamp(32px, 4.4vw, 64px); }
  .ms-theme-brand { background: rgba(var(--brand-rgb), .1); }
  .ms-theme-soft { background: rgba(var(--brand-rgb), .05); }
  .ms-theme-contrast,
  .ms-theme-photo { background: var(--shade); color: var(--on-ink); }
  .ms-theme-contrast .ms-lead,
  .ms-theme-photo .ms-lead { color: var(--on-ink-soft); }
  .ms-align-center { text-align: center; }

  /* Fondo con la foto (hero «cover», pulsante con immagine): velo sotto il testo */
  .ms-hero.is-cover,
  .ms-section.has-bg {
    display: grid;
    align-items: center;
    min-height: clamp(280px, 34vw, 480px);
    background: linear-gradient(var(--scrim), var(--scrim)), var(--ms-bg, none) center / cover no-repeat var(--shade);
    color: var(--on-ink);

    & .ms-lead { color: var(--on-ink-soft); }
  }

  /* ---------- Hero ---------- */
  .ms-hero h1, .ms-hero h2 { font-size: var(--step-head); max-width: 22ch; }
  .ms-hero .is-display { font-size: var(--step-hero); }
  .ms-hero .is-normal { font-size: var(--step-lead); }
  .ms-lead { margin-top: 16px; max-width: 62ch; font-size: var(--step-lead); line-height: 1.35; color: var(--ink-soft); }
  .ms-align-center .ms-hero-copy > * { margin-inline: auto; }
  .ms-hero.is-split .ms-hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
  }
  .ms-hero-visual img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-lg);
  }

  /* ---------- Testo ---------- */
  .ms-prose {
    max-width: 72ch;

    &.is-wide { max-width: none; }
    & > * + * { margin-top: 16px; }
    & h2 { font-size: var(--step-lead); }
    & h3 { font-size: var(--step-body); font-weight: 600; }
    & .ms-lead { margin-top: 0; }
    & ul, & ol { padding-left: 1.25em; }
    & a { color: var(--accent); text-underline-offset: 3px; }
    & img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
  }
  .ms-align-center .ms-prose { margin-inline: auto; }
  /* Presentazione nella home: riquadro orizzontale prima del footer. Il testo dell'editor e' un flusso unico (paragrafi, liste,
     foto), quindi lo dividono le colonne; le foto hanno la stessa forma per tenerle allineate. Su telefono resta una colonna. */
  .ms-prose.ms-box {
    max-width: none;
    padding: clamp(20px, 3vw, 40px);
    columns: 3 260px;
    column-gap: clamp(24px, 3vw, 48px);
    border-radius: var(--r-lg);
    background: rgba(var(--brand-rgb), .05);

    & > :first-child { margin-top: 0; }
    & img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--r-md);
      break-inside: avoid;
    }
    & ul, & ol { break-inside: avoid; }
    & p:has(+ ul, + ol) { break-after: avoid; }
  }
  .ms-title { margin-bottom: 24px; font-size: var(--step-lead); }
  .ms-more { margin-top: 24px; }
  /* La vetrina dell'editor ha di solito 3 o 6 immobili: tre colonne non lasciano card da sole */
  @media (min-width: 861px) {
    .ms .listings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ---------- Foto ---------- */
  .ms-figure {
    margin: 0;

    & img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
    & figcaption { margin-top: 8px; font-size: var(--step-small); color: var(--ink-soft); }
    &[style] { width: min(100%, max(var(--ms-w), 160px)); margin-inline: auto; }
  }
  .ms-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--gap);

    & img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
  }

  /* ---------- Pulsante, recapiti, mappa, ricerca ---------- */
  .ms-cta { display: flex; }
  .ms-align-center .ms-cta { justify-content: center; }
  .ms-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--gap);
    margin: 0;
  }
  .ms-card {
    padding: 20px;
    border-radius: var(--r-md);
    background: var(--ground);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow-wrap: anywhere;

    & dt { font-size: var(--step-small); color: var(--ink-soft); }
    & dd { margin: 4px 0 0; font-weight: 500; }
    & a { color: inherit; text-underline-offset: 3px; }
  }
  .ms-contacts { display: grid; gap: var(--gap); }
  .ms-map {
    height: clamp(280px, 36vw, 440px);
    border-radius: var(--r-lg);
    overflow: hidden;
    z-index: 0;
  }
  .ms-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;

    & .field.search { flex: 1 1 280px; min-width: 0; }
    & .select { flex: 0 1 200px; }
  }
  .ms-spacer {
    &.is-sm { height: 12px; }
    &.is-md { height: 28px; }
    &.is-lg { height: 48px; }
  }

  /* ---------- Entrata allo scroll, dove il browser la sa fare: senza, i blocchi sono subito visibili ---------- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [class*="ms-enter-"] > .wrap {
        animation: ms-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
    }
  }
  @keyframes ms-rise {
    from { opacity: 0; translate: 0 20px; }
  }

  /* ---------- Telefono ---------- */
  @media (max-width: 760px) {
    .ms-hero.is-split .ms-hero-in { grid-template-columns: minmax(0, 1fr); }
    .ms-search > * { flex: 1 1 100%; }
  }
}