/* =====================================================================
   ARCHICONTRACTOR · Lavori: visualizzatore progetti e slider della pagina Lavori
   Wireframe "Interni prog" e "Lavori" (1728px).
   ===================================================================== */

/* ---------- Barre di avanzamento (wireframe: 113×3, 12 di spazio, attiva 100%, altre 40%) ---------- */
.ac-bars{ display: flex; gap: clamp(6px, .694vw, 12px); }
.ac-bar{
  position: relative; flex: 0 0 clamp(48px, 6.539vw, 113px); height: 3px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: rgba(255,255,255,.4); cursor: pointer; overflow: hidden;
}
.ac-bar::before{ content: ""; position: absolute; inset: -10px 0; } /* area cliccabile più alta */
.ac-bar::after{ content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.ac-bar.is-active::after{ transform: scaleX(1); }
/* Slider a tempo: la barra attiva si riempie durante l'intervallo */
.ac-bars--timed .ac-bar.is-active::after{ animation: ac-bar-fill var(--ac-interval, 6s) linear both; }
.ac-bars--timed.is-paused .ac-bar.is-active::after{ animation-play-state: paused; }
@keyframes ac-bar-fill{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .ac-bars--timed .ac-bar.is-active::after{ animation: none; transform: scaleX(1); } }

/* ---------- Visualizzatore progetti ----------
   Desktop: tutto lo schermo; a sinistra slider + pannello nero, a destra le miniature
   (264px a 1728, una ogni 181px). */
.fusion-fullwidth.ac-pv-section{ padding: 0 !important; }
.ac-pv{
  --ac-pv-side: 15.278vw;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ac-pv-side); grid-template-rows: minmax(0, 1fr);
  height: 100vh; height: 100svh; background: var(--ac-black); color: var(--ac-white);
}
.ac-pv__main{ position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.ac-pv__project{ display: flex; flex-direction: column; height: 100%; }
.ac-pv__project[hidden]{ display: none; }
/* Cambio progetto: la foto entra da destra (dal lato delle miniature) con lo zoom che
   rientra, poi barre, titolo e testi salgono uno dopo l'altro. */
.ac-pv__project.is-entering .ac-pv__slides{ animation: ac-pv-wipe 1s var(--ac-ease) both; }
.ac-pv__project.is-entering .ac-pv__slide img{ animation: ac-pv-zoom 1.6s cubic-bezier(.16, 1, .3, 1) both; }
.ac-pv__project.is-entering .ac-pv__panel > *{ animation: ac-pv-rise .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
.ac-pv__project.is-entering .ac-pv__panel > :nth-child(2){ animation-delay: .25s; }
.ac-pv__project.is-entering .ac-pv__panel > :nth-child(n+3){ animation-delay: .35s; }
@keyframes ac-pv-wipe{ from{ clip-path: inset(0 0 0 100%); } to{ clip-path: inset(0); } }
@keyframes ac-pv-zoom{ from{ transform: scale(1.12); } }
@keyframes ac-pv-rise{ from{ opacity: 0; transform: translateY(24px); } }

.ac-pv__slides{
  flex: 1 1 auto; min-height: 0; display: flex;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; outline: none;
}
.ac-pv__slides::-webkit-scrollbar{ display: none; }
.ac-pv__slide{ position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; background: var(--ac-black); }
.ac-pv__slide img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-pv__slide.is-portrait img{ object-fit: contain; }
/* Clic su metà destra/sinistra: foto successiva/precedente */
@media (pointer: fine){
  .ac-pv__slides{ cursor: e-resize; }
  .ac-pv__slides.is-left{ cursor: w-resize; }
}

.ac-pv__panel{
  flex: none;
  padding: clamp(24px, 2.257vw, 39px) var(--ac-margin) clamp(36px, 3.877vw, 67px);
}
.ac-pv__title{ margin: clamp(18px, 2.025vw, 35px) 0 clamp(18px, 1.91vw, 33px) !important; color: inherit !important; }
.ac-pv__text{
  display: grid; grid-template-columns: repeat(2, minmax(0, clamp(240px, 24.248vw, 419px)));
  column-gap: clamp(24px, 3.53vw, 61px); row-gap: 1.2em; align-items: start;
}
.ac-pv__text p{ margin: 0 !important; color: inherit !important; }

/* Scroll: la pagina attraversa .ac-pv-scroller mentre .ac-pv resta fermo; l'elenco
   (overflow nascosto) segue lo scroll della pagina, poi arriva il footer. */
.ac-pv-scroller{ --ac-pv-h: 100vh; height: calc(var(--ac-pv-h) + var(--ac-pv-extra, 0px)); background: var(--ac-black); }
@supports (height: 100svh){ .ac-pv-scroller{ --ac-pv-h: 100svh; } }
.ac-pv{ position: sticky; top: 0; }
.ac-pv__list{ position: relative; height: 100%; overflow: hidden; background: var(--ac-black); }
.ac-pv__list::-webkit-scrollbar{ display: none; }
.ac-pv__thumb{ position: relative; display: block; aspect-ratio: 264 / 181; overflow: hidden; }
.ac-pv__thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ac-ease); }
.ac-pv__thumb::after{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); transition: background-color .35s; }
.ac-pv__thumb:hover::after, .ac-pv__thumb:focus-visible::after{ background: rgba(0,0,0,.25); }
.ac-pv__thumb.is-active::after{ background: transparent; }
.ac-pv__thumb:hover img{ transform: scale(1.04); }
.ac-pv__thumb-name{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1099px){
  .ac-pv-scroller{ height: auto; }
  .ac-pv{ display: block; height: auto; position: static; }
  .ac-pv__main{ height: auto; overflow: visible; }
  .ac-pv__project{ height: auto; }
  .ac-pv__slides{ height: max(66vw, 300px); }
  .ac-pv__text{ grid-template-columns: 1fr; }
  .ac-pv__list{ display: flex; gap: 6px; height: auto; overflow-x: auto; overflow-y: hidden; padding: 0 var(--ac-margin) var(--ac-margin); scroll-snap-type: x mandatory; }
  .ac-pv__thumb{ flex: 0 0 42vw; scroll-snap-align: start; }
}

/* ---------- Slider della pagina Lavori (wireframe: 900 a 1728, testi bianchi in basso) ---------- */
.fusion-fullwidth.ac-hs-section{ padding: 0 !important; }
.ac-hs{ position: relative; height: 52.083vw; min-height: 560px; overflow: hidden; background: var(--ac-black); color: var(--ac-white); }
.ac-hs__slides{ position: absolute; inset: 0; }
.ac-hs__slide{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ac-ease); }
.ac-hs__slide.is-active{ opacity: 1; }
.ac-hs__content{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ac-s-4);
  padding: 0 var(--ac-margin) clamp(24px, 2.199vw, 38px);
}
.ac-hs__left{ display: flex; flex-direction: column; gap: clamp(24px, 3.009vw, 52px); padding-bottom: clamp(8px, .926vw, 16px); width: clamp(260px, 24.306vw, 420px); }
.ac-hs__lead, .ac-hs__title{ margin: 0 !important; color: var(--ac-white) !important; }
.ac-hs__title{ white-space: nowrap; }
@media (max-width: 1099px){
  .ac-hs__content{ flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; }
  .ac-hs__title{ white-space: normal; }
}

/* ---------- Slider della pagina Lavori come scheda alta 100vh: le foto si fermano in alto,
   frase e titolo scorrono; poi la scheda resta ferma e la successiva le sale sopra ---------- */
.fusion-fullwidth.ac-hs-sticky{ --ac-hs-h: 100vh; --ac-hs-travel: var(--ac-hs-h); position: sticky !important; top: calc(-1 * var(--ac-hs-travel)); }
@supports (height: 100svh){ .fusion-fullwidth.ac-hs-sticky{ --ac-hs-h: 100svh; } }
.ac-hs-sticky .ac-hs{ display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--ac-hs-h) + var(--ac-hs-travel)); height: auto; min-height: 0; overflow: visible; }
.ac-hs-sticky .ac-hs__slides{ grid-area: 1 / 1; align-self: start; position: sticky; top: 0; height: var(--ac-hs-h); overflow: hidden; }
.ac-hs-sticky .ac-hs__content{ grid-area: 1 / 1; align-self: start; position: relative; z-index: 1; height: var(--ac-hs-h); }
@media (prefers-reduced-motion: reduce){
  .fusion-fullwidth.ac-hs-sticky{ position: relative !important; top: auto; --ac-hs-travel: 0px; }
}

/* Pulsanti sotto la frase dello slider (Architettura, Interior design) */
.ac-hs__ctas{ display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1100px){ .ac-hs__ctas{ flex-wrap: nowrap; width: max-content; } }

/* ---------- Blocchi Architettura / Interior design ----------
   Tutto il blocco è un link: sotto il titolo una scritta bianca sottolineata con la freccia
   (lo stesso [ac_button as="span"], senza l'aspetto del pulsante: rompeva l'armonia della foto). */
.ac-link-block .fusion-text a{ color: inherit !important; text-decoration: none; }
.ac-link-block:hover .fusion-text a{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.ac-link-block .ac-btns{ justify-content: center; margin-top: clamp(18px, 2.083vw, 36px); }
.ac-link-block .ac-btn{
  height: auto; padding: 0; gap: 12px; background: transparent !important; color: var(--ac-white) !important;
  font-size: var(--ac-fs-24);
}
.ac-link-block .ac-btn > span{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ac-link-block:hover .ac-btn > span{ text-decoration-thickness: 2px; }
.ac-link-block:hover .ac-btn .ac-icon-arrow{ transform: translateX(4px); }

/* ---------- Scheda immobile ---------- */
.fusion-fullwidth.ac-prop-section{ padding-top: calc(var(--ac-header-h) + clamp(24px, 2.778vw, 48px)) !important; padding-bottom: clamp(48px, 5.556vw, 96px) !important; }
.ac-prop__kicker{ margin: 0 0 18px !important; opacity: .6; }
.ac-prop__head{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ac-gap); align-items: end; margin-bottom: clamp(24px, 2.778vw, 48px); }
.ac-prop__head h1{ grid-column: 1 / span 9; margin: 0 !important; }
.ac-prop__price{ grid-column: 10 / span 3; justify-self: end; margin: 0 !important; white-space: nowrap; }
.ac-prop__slider{ position: relative; margin-inline: calc(-1 * var(--ac-margin)); }
.ac-prop__slider .ac-pv__slides{ height: min(70vh, 52.083vw); min-height: 320px; }
.ac-prop__slider .ac-bars{ position: absolute; left: var(--ac-margin); bottom: 24px; }
.ac-prop__body{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ac-gap); margin-top: clamp(36px, 4.167vw, 72px); }
.ac-prop__data{ grid-column: 1 / span 4; margin: 0; border-bottom: 1px solid var(--ac-black); }
.ac-prop__data > div{ display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--ac-black); }
.ac-prop__data dt{ opacity: .6; font-weight: 400; }
.ac-prop__data dd{ margin: 0; text-align: right; }
.ac-prop__text{ grid-column: 7 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.ac-prop__text p{ margin: 0 !important; }
@media (max-width: 1099px){
  .ac-prop__head, .ac-prop__body{ grid-template-columns: 1fr; row-gap: 18px; }
  .ac-prop__head h1, .ac-prop__price, .ac-prop__data, .ac-prop__text{ grid-column: 1; justify-self: start; }
  .ac-prop__body{ row-gap: 36px; }
}