/* ============================================================
   Portfolio grid — ColliDesign.it  v3
   ============================================================ */

/* Filtri */
.cd-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .85rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cd-text);
  background: var(--cd-white);
  border: 1.5px solid var(--cd-border);
  text-decoration: none;
  transition: all .15s;
  letter-spacing: .02em;
}
.cd-filter-btn:hover { border-color: var(--cd-blu); color: var(--cd-blu); text-decoration: none; }
.cd-filter-btn.active { background: var(--cd-blu); border-color: var(--cd-blu); color: #fff; }
.cd-filter-btn.active .cd-menu-count { background: rgba(255,255,255,.25); color: #fff; }

/* Griglia: colonne fisse per garantire righe pulite con pageSize=8
   (4 desktop = 2 righe, 3 tablet = ~2.7 righe, 2 mobile = 4 righe).
   Gap generoso = card piu strette (aspect-ratio 4/3 le abbassa) = paginazione visibile. */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 991px) {
  .cd-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* ---- Card con overlay ---- */
.cd-proj-card {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: box-shadow .25s, transform .25s;
  aspect-ratio: 16/11;
  background: transparent;  /* era #0a0a1a (creava bordo nero sub-pixel al hover) */
  cursor: pointer;
}
.cd-proj-card:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
  transform: translateY(-4px) scale(1.01);
  text-decoration: none;
  color: #fff;
}
.cd-proj-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cd-proj-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.cd-proj-card:hover .cd-proj-img img { transform: scale(1.08); }

/* Sfumatura card — leggera */
.cd-proj-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0)   55%,
    rgba(0,0,0,.45) 78%,
    rgba(0,0,0,.72) 100%
  );
}

/* Testo card */
.cd-proj-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .5rem .7rem .6rem;
  z-index: 2;
}
.cd-proj-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: .01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 5px rgba(0,0,0,.55);
  margin-bottom: .15rem;
}
.cd-proj-meta {
  font-size: .65rem;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

/* Badge sottocategoria card — bianco minimal */
.cd-proj-badge {
  position: absolute;
  top: .55rem; left: .55rem;
  font-size: .6rem;
  font-weight: 700;
  padding: .2em .65em;
  border-radius: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  z-index: 3;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}

/* Vetrina home: badge sottocategoria nascosto VISIVAMENTE ma presente nel DOM
   (testo leggibile per SEO). Resta visibile nelle griglie categoria. */
.cd-vetrina .cd-proj-badge {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Badge foto */
.cd-proj-nfoto {
  position: absolute;
  top: .55rem; right: .55rem;
  background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.8);
  font-size: .62rem;
  font-weight: 600;
  padding: .2em .5em;
  border-radius: 8px;
  z-index: 3;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: .25rem;
}

@media (max-width: 576px) {
  .cd-grid { grid-template-columns: repeat(2,1fr); gap: .5rem; }
}
@media (max-width: 360px) {
  .cd-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MODALE — foto a tutta superficie + footer blu navbar-gradient
   Overlay sulla foto: badge top-SX, counter foto + close top-DX,
   titolo+meta+desc in basso. Footer barra blu sotto la foto:
   logo M nudo + Case History + views + thumb.
   ============================================================ */
.cd-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.cd-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.cd-modal {
  background: #000;
  border-radius: 14px;
  width: 100%;
  max-width: 820px;
  max-height: 92vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.65);
  transform: scale(.96) translateY(12px);
  transition: transform .28s cubic-bezier(.34,1.2,.64,1);
}
.cd-modal-backdrop.open .cd-modal { transform: scale(1) translateY(0); }

/* ---- Slider = superficie foto edge-to-edge ---- */
.cd-slider-main {
  position: relative;
  background: #000;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 320px; /* safety se aspect-ratio fallisce */
  max-height: 80vh;
  overflow: hidden;
  flex-shrink: 0;
}
.cd-slider-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* foto riempie tutto, niente bande nere */
  display: block;
  opacity: 1;
  transition: opacity .35s ease-out;
}
.cd-slider-main.is-loading .cd-slider-main-img { opacity: 0; }

/* Screenshot (Web & Data): foto a piena altezza, taglio solo a destra
   (ancoraggio a sinistra) invece del crop centrale. La modale resta identica;
   il lato sinistro dello screenshot (nav/contenuto) resta sempre visibile.
   Il portfolio 3D/grafica mantiene il crop centrale (cover default). */
html.page-web-data .cd-slider-main-img,
html.page-web-data .cd-slider-thumb {
  object-position: left center;
}

/* Spinner di caricamento al centro dello slider */
.cd-slider-main::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 50%;
  animation: cd-spin .9s linear infinite;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
  pointer-events: none;
}
.cd-slider-main.is-loading::before { opacity: 1; }
@keyframes cd-spin { to { transform: rotate(360deg); } }

/* Sfumatura: solo bottom per leggere titolo/meta */
.cd-modal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.88) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Badge top-SX: type + subcat ---- */
.cd-modal-img-badges {
  position: absolute;
  top: .8rem;
  left: .8rem;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  z-index: 6;
  max-width: calc(100% - 6rem); /* lascia spazio a counter+close DX */
}
.cd-modal-img-badges:empty { display: none; }
.cd-modal-img-badge {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3em .8em;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,103,199,.85);
  color: #fff;
  white-space: nowrap;
}
.cd-modal-img-badge.subcat { background: rgba(0,57,117,.88); }
.cd-modal-img-badge.year   { background: rgba(0,0,0,.5); color: rgba(255,255,255,.85); }

/* ---- Counter foto top-DX (a sinistra del close) ---- */
.cd-slider-counter {
  position: absolute;
  top: .85rem;
  right: 3.5rem; /* lascia spazio al close (36px + gap) */
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .05em;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  padding: .3em .75em;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  z-index: 6;
}
.cd-slider-counter::before {
  content: "\F4D5"; /* bi-images */
  font-family: "bootstrap-icons";
  margin-right: .4em;
  font-size: .95em;
  opacity: .85;
}
.cd-slider-counter:empty { display: none; }

/* ---- Close top-DX ---- */
.cd-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(0,0,0,.55);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .15s;
  z-index: 12;
}
.cd-modal-close:hover { background: rgba(200,0,0,.78); }

/* ---- Frecce nav ---- */
.cd-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
  z-index: 10;
  backdrop-filter: blur(6px);
}
.cd-slider-btn:hover {
  background: var(--cd-blu);
  transform: translateY(-50%) scale(1.08);
}
.cd-slider-btn.prev { left: .75rem; }
.cd-slider-btn.next { right: .75rem; }

/* ---- Testo bottom: titolo + meta + desc (overlay sulla foto) ---- */
.cd-modal-img-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.15rem .95rem;
  z-index: 5;
  color: #fff;
}
.cd-modal-img-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 .35rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.78), 0 2px 16px rgba(0,0,0,.55);
}
.cd-modal-img-meta {
  font-size: .72rem;
  color: rgba(255,255,255,.88);
  letter-spacing: .03em;
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.cd-modal-img-meta:empty { display: none; }
.cd-modal-img-desc {
  font-size: .8rem;
  color: rgba(255,255,255,.92);
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0,0,0,.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-modal-img-desc:empty { display: none; }

/* ============================================================
   Footer barra blu (gradient navbar-style)
   ============================================================ */
.cd-modal-footer-bar {
  display: flex;
  align-items: stretch; /* thumb a tutta altezza */
  background: linear-gradient(90deg, var(--cd-blu-scuro) 0%, var(--cd-blu) 100%);
  flex-shrink: 0;
  height: 64px; /* altezza fissa per dare riferimento a `height:100%` delle thumb */
}
.cd-modal-footer-left {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .9rem;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

/* Logo M nudo, più grande */
.cd-modal-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.cd-modal-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* "Case History" pillola con bordo bianco su gradient blu */
.cd-modal-permalink {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.18);
  padding: .35em 1em;
  border-radius: 999px;
  transition: all .15s;
  white-space: nowrap;
}
.cd-modal-permalink:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,.2);
  text-decoration: none;
}

/* CTA primaria: "Richiedi info per progetto simile" */
.cd-modal-quote {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cd-blu-scuro);
  text-decoration: none;
  border: 1px solid #fff;
  background: #fff;
  padding: .35em 1em;
  border-radius: 999px;
  transition: all .15s;
  white-space: nowrap;
}
.cd-modal-quote:hover {
  color: var(--cd-blu-scuro);
  background: rgba(255,255,255,.88);
  text-decoration: none;
}
.cd-modal-quote i { font-size: .95em; }

/* Views badge (solo admin) */
.cd-modal-views {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .04em;
  white-space: nowrap;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.22);
  padding: .25em .7em;
  border-radius: 999px;
}
.cd-modal-views::before {
  content: "\F341"; /* bi-eye-fill */
  font-family: "bootstrap-icons";
  margin-right: .35em;
  font-size: .9em;
}
.cd-modal-views:empty { display: none; }

/* Like — placeholder (Sessione 8) */
.cd-modal-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 30px;
  padding: 0 .65rem;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.3);
  font-size: .72rem;
  font-weight: 700;
  transition: all .15s;
}
.cd-modal-like:hover {
  background: rgba(220,38,38,.9);
  color: #fff;
  border-color: rgba(255,255,255,.45);
}

/* Thumb a tutta altezza nella parte destra del footer.
   Sliding window di 4 thumb max + frecce ai lati quando ci sono piu' di 4 foto. */
.cd-slider-thumbs {
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 5px;
  background: rgba(0,0,0,.22);
  border-left: 1px solid rgba(255,255,255,.18);
  max-width: 60%;
  overflow: hidden;
  flex-shrink: 0;
}
.cd-slider-thumbs:empty { display: none; }
.cd-slider-thumb {
  height: 100%; /* riempie tutta l'altezza della footer bar */
  width: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: opacity .15s, border-color .15s;
}
.cd-slider-thumb.active,
.cd-slider-thumb:hover {
  opacity: 1;
  border-color: #fff;
}
/* Frecce paginazione thumb: icone pure, no bottone visivo.
   Disabled = grigio, attivo = bianco, hover/active = blu chiaro brand. */
.cd-slider-thumb-arrow {
  flex-shrink: 0;
  width: 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .15s, transform .15s;
}
.cd-slider-thumb-arrow:hover:not(:disabled),
.cd-slider-thumb-arrow:active:not(:disabled) {
  color: #67b3ff;
  transform: scale(1.15);
}
.cd-slider-thumb-arrow:disabled {
  color: rgba(255,255,255,.32);
  cursor: default;
}

/* ============================================================
   Pannelli "Richiedi info" (form + success) embedded nella modale
   Visibili al posto di .cd-modal-footer-bar quando il modal ha
   .is-quote-mode oppure .is-quote-success
   ============================================================ */
.cd-quote-pane { display: none; }
.cd-modal.is-quote-mode    .cd-modal-footer-bar { display: none; }
.cd-modal.is-quote-mode    .cd-quote-form-pane  { display: block; }
.cd-modal.is-quote-success .cd-modal-footer-bar { display: none; }
.cd-modal.is-quote-success .cd-quote-success-pane { display: block; }

/* Foto un po' più compatta in modalità form per dare spazio al form */
.cd-modal.is-quote-mode .cd-slider-main,
.cd-modal.is-quote-success .cd-slider-main {
  aspect-ratio: 16 / 7;
  max-height: 36vh;
}

/* --- Form pane --- */
.cd-quote-form-pane {
  background: #fff;
  padding: .85rem 1rem 1rem;
  max-height: 60vh;
  overflow-y: auto;
}
.cd-quote-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .8rem;
}
.cd-quote-field { display: flex; flex-direction: column; gap: .15rem; }
.cd-quote-field-full { grid-column: 1 / -1; }
.cd-quote-field label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--cd-muted);
  text-transform: uppercase;
}
.cd-quote-field label .req { color: #dc2626; }
.cd-quote-field input,
.cd-quote-field select,
.cd-quote-field textarea {
  font-size: .85rem;
  padding: .4em .65em;
  border: 1.5px solid var(--cd-border);
  border-radius: 6px;
  background: #fff;
  outline: none;
  font-family: inherit;
  color: var(--cd-text);
}
.cd-quote-field input:focus,
.cd-quote-field select:focus,
.cd-quote-field textarea:focus {
  border-color: var(--cd-blu);
  box-shadow: 0 0 0 3px rgba(0,103,199,.12);
}
.cd-quote-field textarea {
  resize: vertical;
  min-height: 58px;
  line-height: 1.4;
}

.cd-quote-honeypot { position: absolute; left: -5000px; top: -5000px; }

.cd-quote-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
}
.cd-quote-back {
  background: none;
  border: 1px solid var(--cd-border);
  color: var(--cd-muted);
  font-size: .78rem;
  font-weight: 600;
  padding: .42em 1.1em;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.cd-quote-back:hover { border-color: var(--cd-text); color: var(--cd-text); }
.cd-quote-submit {
  background: linear-gradient(90deg, var(--cd-blu-scuro) 0%, var(--cd-blu) 100%);
  color: #fff;
  border: 1px solid var(--cd-blu-scuro);
  font-size: .85rem;
  font-weight: 700;
  padding: .5em 1.4em;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .15s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.cd-quote-submit:hover { filter: brightness(1.1); }
.cd-quote-submit:disabled { opacity: .65; cursor: wait; }
.cd-quote-submit i { font-size: .95em; }
.cd-quote-error {
  display: none;
  margin-top: .55rem;
  padding: .5em .75em;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: .78rem;
  border-radius: 6px;
}
.cd-quote-error.show { display: block; }

/* --- Success pane --- */
.cd-quote-success-pane {
  background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
  padding: 1.5rem 1rem 1.4rem;
  text-align: center;
}
.cd-quote-success-icon {
  font-size: 3rem;
  color: #16a34a;
  line-height: 1;
  margin-bottom: .5rem;
}
.cd-quote-success-pane h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--cd-text);
  margin: 0 0 .35rem;
}
.cd-quote-success-pane p {
  font-size: .88rem;
  color: var(--cd-muted);
  margin: 0 0 .85rem;
  line-height: 1.5;
}
.cd-quote-success-countdown {
  font-size: .7rem;
  color: var(--cd-muted);
  letter-spacing: .04em;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 700px) {
  .cd-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .cd-modal-backdrop { padding: 0; }
  .cd-slider-main {
    aspect-ratio: 4 / 5;
    /* lascia spazio al footer su 2 righe (bottoni + miniature) cosi' non viene tagliato */
    max-height: calc(100vh - 132px);
  }
  .cd-modal-img-badges {
    top: .55rem;
    left: .55rem;
    max-width: calc(100% - 5.5rem);
  }
  .cd-slider-counter {
    top: .6rem;
    right: 3rem;
    font-size: .62rem;
    padding: .22em .6em;
  }
  .cd-modal-close {
    top: .5rem;
    right: .5rem;
    width: 32px;
    height: 32px;
  }
  .cd-modal-img-text {
    padding: .7rem .85rem .8rem;
  }
  .cd-modal-img-title { font-size: 1rem; margin-bottom: .25rem; }
  .cd-modal-img-meta { font-size: .68rem; gap: .6rem; margin-bottom: .3rem; }
  .cd-modal-img-desc { -webkit-line-clamp: 1; }
  /* Footer ad altezza automatica: i bottoni azione su una riga piena (sempre
     visibili e cliccabili), le miniature scendono su una seconda riga. */
  .cd-modal-footer-bar {
    height: auto;
    flex-wrap: wrap;
  }
  .cd-modal-footer-left {
    width: 100%;
    flex-wrap: nowrap;
    padding: .5rem .7rem;
    gap: .5rem;
  }
  .cd-modal-logo img { width: 32px; height: 32px; }
  .cd-modal-permalink {
    font-size: .72rem;
    padding: .3em .85em;
  }
  .cd-slider-thumbs {
    width: 100%;
    max-width: 100%;
    height: 54px;
    padding: 4px;
    gap: 3px;
    justify-content: center;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .cd-slider-btn { width: 36px; height: 36px; }

  /* Quote pane mobile: stack verticale, foto più piccola per dare spazio */
  .cd-modal.is-quote-mode .cd-slider-main,
  .cd-modal.is-quote-success .cd-slider-main {
    aspect-ratio: 16 / 8;
    max-height: 28vh;
  }
  .cd-quote-form-pane { padding: .7rem .8rem .85rem; max-height: 72vh; }
  .cd-quote-form-grid { grid-template-columns: 1fr; gap: .45rem; }
  .cd-quote-field-full { grid-column: auto; }
  .cd-quote-success-pane { padding: 1.1rem .9rem 1.1rem; }
  .cd-quote-success-icon { font-size: 2.4rem; }
}


/* ============================================================
   SFONDO GLOBALE WIREFRAME ISOMETRICO (ses20)
   Stile "render/sketch 3D": tre set di linee paralelle a
   30°/150°/90° che simulano la prospettiva di cubi tecnici
   impilati. Applicato a tutte le pagine via body.
   Per sostituire con immagine vera: cambiare background-image
   in url('...').
   ============================================================ */
body {
  background-color: #f0ece4 !important;
  background-image:
    repeating-linear-gradient(30deg,
      rgba(60,40,20,.06) 0,
      rgba(60,40,20,.06) 1px,
      transparent 1px,
      transparent 28px),
    repeating-linear-gradient(150deg,
      rgba(60,40,20,.06) 0,
      rgba(60,40,20,.06) 1px,
      transparent 1px,
      transparent 28px),
    repeating-linear-gradient(90deg,
      rgba(60,40,20,.04) 0,
      rgba(60,40,20,.04) 1px,
      transparent 1px,
      transparent 28px) !important;
  background-attachment: fixed !important;
}

/* Main trasparente per lasciar vedere il pattern fino al footer */
body.page-design3d main.content,
body.page-architettura main.content,
body.page-grafica main.content {
  background: transparent !important;
  min-height: calc(100vh - 220px);
}

/* Pagine portfolio fullscreen: rimuovo margin-bottom dell'ultima sezione
   e padding sopra del container per stare flush con menu/footer */
body.page-design3d .container-custom,
body.page-architettura .container-custom,
body.page-grafica .container-custom,
body.page-web .container-custom,
body.page-dashboard .container-custom {
  padding-top: 0;        /* il gap navbar->intestazione lo da' gia' main.content (1rem); qui niente extra */
  padding-bottom: .5rem;
}
body.page-design3d .container-custom .cd-grid.mb-3,
body.page-architettura .container-custom .cd-grid.mb-3,
body.page-grafica .container-custom .cd-grid.mb-3,
body.page-web .container-custom .cd-grid.mb-3,
body.page-dashboard .container-custom .cd-grid.mb-3 {
  margin-bottom: 0 !important;
}

/* ============================================================
   PORTFOLIO ses21: tab-bar categoria + card categorie /portfolio
   ============================================================ */

/* Nav categoria DENTRO il banner: sostituisce il vecchio titolo "Categoria + N
   progetti". Tab bianchi su gradient scuro; l'attivo e' pieno e fa da titolo.
   Niente riga in piu' -> resta il full-screen verticale. */
/* ============================================================
   INTESTAZIONE CATEGORIA (_portfolio_nav.asp): riusa il banner
   illustrato .cd-illu-banner dentro la card categoria. Modifier
   .cd-cathero -> niente bordo/ombra propri (li dà la card) e
   altezza che cresce per ospitare i bottoni categoria.
   ============================================================ */
.cd-cathero.cd-illu-banner {
  border-radius: 0;
  box-shadow: none;
  height: auto;
  min-height: 140px;
}
.cd-cathero .cd-illu-text { padding-top: .9rem; padding-bottom: .9rem; }

/* Menu categorie a bottoni (sostituisce i vecchi tab; va a capo su mobile) */
.cd-cat-tabs { gap: .4rem; flex-wrap: wrap; }
.cd-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.cd-cat-btn i { font-size: .85rem; }
.cd-cat-btn:hover { background: rgba(255,255,255,.26); color: #fff; text-decoration: none; }
.cd-cat-btn.active {
  background: #fff;
  color: var(--cd-blu-scuro);
  border-color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.cd-cat-btn .n { font-size: .68rem; font-weight: 700; opacity: .7; }
.cd-cat-btn.active .n { color: var(--cd-blu); opacity: 1; }

/* Card categorie nella landing /portfolio (riusa .cd-area-card della home) */
.cd-pf-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.cd-pf-cards .cd-area-img { height: 130px; }
/* Nella landing la descrizione e' solo "N progetti" (1 riga): niente riserva 2 righe */
.cd-pf-cards .cd-area-body { padding: .5rem .7rem; }
.cd-pf-cards .cd-area-body span { -webkit-line-clamp: 1; min-height: 0; }
@media (max-width: 768px) { .cd-pf-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cd-pf-cards { grid-template-columns: 1fr; } }

/* Corpi card-gruppo: padding uniforme .6rem (header->card = card->fondo, come la home) */
.cd-pf-areas > .cd-card-body { padding: .6rem; }
.cd-casestudy > .cd-card-body { padding: .6rem; }
.cd-casestudy .cd-card .cd-card-body { padding: .65rem .75rem; }
.cd-casestudy .cd-card .cd-card-body p { line-height: 1.4; }