/* ==========================================================================
   corten-pagina.css - la pagina CorTen: il materiale e i lavori fatti
   Si appoggia ai blocchi del tema (page-title-area, about-area-details,
   section-title, rr-btn) e aggiunge solo quello che il tema non ha: la
   gli schemi, il mosaico, le finiture, il video d'apertura.
   ========================================================================== */

/* -- apertura: il video a tutta pagina, il titolo sopra ------------------ */
.corten-hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: #000;
}

.corten-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
}

/* un velo scuro in alto, dove stanno menu e titolo: sopra le scintille il
   bianco e il giallo si perderebbero */
.corten-hero__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
}

.corten-hero__testo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* il centro e' quello dello spazio sotto il menu, non dell'intero video:
       il menu (80px) sta sopra, sovrapposto */
    padding-top: 80px;
}

.corten-hero__testo .container { width: 100%; }

/* nel resto del sito il titolone ha margini e spazio sopra pensati per stare
   in testa alla pagina; qui sta al centro del video e li togliamo */
.corten-hero__testo .page-title-area-inner { padding-top: 0; }
.corten-hero__testo .page-title-wrapper { margin: 0; }
.corten-hero .corten-sottotitolo { margin: 18px 0 0; text-align: center; }

/* sul computer il video non prende tutta la schermata: si vede che sotto la
   pagina continua */
@media only screen and (min-width: 992px) {
    .corten-hero { height: 90vh; min-height: 560px; }
}


.corten-sottotitolo {
    font-size: 30px;
    line-height: 1.26;
    color: var(--primary);
    margin-top: 10px;
}

/* -- il materiale: testo nella colonna del titolo, come Chi siamo -------- */
.corten-materiale {
    padding-top: 140px;
}

/* subito sotto il video il filo di Chi siamo non serve: lo stacco lo fa gia'
   il bordo del video */
.corten-materiale .section-header {
    border-top: 0;
    padding-top: 0;
}

.corten-testo {
    display: grid;
    gap: 0 60px;
    grid-template-columns: 1fr 1235px;
    margin-top: 50px;
}

.corten-testo p {
    grid-column: 2;
    font-size: 30px;
    line-height: 1.26;
    color: var(--primary);
    margin: 0;
}

.corten-testo p + p { margin-top: 38px; }

/* -- i blocchi che seguono: filo in testa, titolo, eventuale frase ------- */
.corten-lavorazioni,
.corten-lavori,
.corten-finiture {
    padding-top: 140px;
}

.corten-blocco__testa {
    border-top: 1px solid var(--border);
    padding-top: 37px;
}

/* il sottotitolo delle tre tecniche ha la stessa voce di quello del blocco */
.corten-blocco__testa p,
.corten-tecniche__intro {
    max-width: 760px;
    font-size: 24px;
    line-height: 1.35;
    color: var(--secondary);
    margin: 24px 0 0;
}


/* -- i cinque passaggi ---------------------------------------------------
   Una fila con una linea sopra. Quando entra nello schermo (classe .in-vista,
   da corten-pagina.js) la linea si disegna da sinistra e i passaggi si
   accendono uno dopo l'altro. */
.corten-passi {
    --passi: 3;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--passi), 1fr);
    gap: 30px;
    list-style: none;
    padding: 34px 0 0;
    margin: 60px 0 0;
}

.corten-passi::before,
.corten-passi::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}

.corten-passi::after {
    height: 2px;
    top: -.5px;
    background: var(--theme);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s cubic-bezier(.65, 0, .35, 1);
}

.corten-passi.in-vista::after { transform: scaleX(1); }

.corten-passo {
    position: relative;
    opacity: .25;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: calc(var(--i, 0) * .28s + .2s);
}

/* il pallino sulla linea, sopra a ogni passaggio */
.corten-passo::before {
    content: "";
    position: absolute;
    top: -41px;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg, #111);
    border: 2px solid var(--border);
    transition: border-color .4s ease, background-color .4s ease;
    transition-delay: inherit;
}

.corten-passi.in-vista .corten-passo { opacity: 1; transform: none; }
.corten-passi.in-vista .corten-passo::before { border-color: var(--theme); background: var(--theme); }

.corten-passo:nth-child(1) { --i: 0; }
.corten-passo:nth-child(2) { --i: 1; }
.corten-passo:nth-child(3) { --i: 2; }
.corten-passo:nth-child(4) { --i: 3; }
.corten-passo:nth-child(5) { --i: 4; }

.corten-passo__numero,
.corten-tecnica__numero {
    display: block;
    font-size: 14px;
    letter-spacing: .08em;
    color: var(--theme);
    margin-bottom: 14px;
}

.corten-passo h3,
.corten-tecnica h3,
.corten-finitura h3 {
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 12px;
}

.corten-passo p,
.corten-tecnica p,
.corten-tecnica li,
.corten-finitura p {
    font-size: 18px;
    line-height: 1.45;
    color: var(--secondary);
    margin: 0;
}

/* -- le tre tecniche: tre colonne, schema animato, titolo e una frase ---- */
.corten-tecniche__intro { margin-top: 110px; }

.corten-tecniche {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.corten-tecnica h3 { margin-top: 26px; }

/* Gli schemi. Colori del materiale, non del tema: la lamiera e' ruggine. */
.corten-tecnica__schema {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8%;
    background: #181818;
    border: 1px solid var(--border);
}

.schema { width: 100%; height: auto; overflow: visible; }
.schema__lamiera { fill: #8a4a24; }
.schema__muro { fill: #3a3a3a; }
.schema__etichetta { fill: #8c8c8c; font-size: 13px; text-anchor: middle; font-family: inherit; }

/* A: il raggio percorre il disegno e dietro di se' lascia il vuoto */
.schema__taglio {
    fill: none;
    stroke: #181818;
    stroke-width: 18;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.schema__raggio {
    fill: #fff3b0;
    offset-path: path("M105 95 H195 L150 210");
    offset-distance: 0%;
    opacity: 0;
    filter: drop-shadow(0 0 6px #ffd84a);
}

.in-vista .schema__taglio { animation: corten-taglia 3.2s .3s cubic-bezier(.45, 0, .55, 1) infinite; }
.in-vista .schema__raggio { animation: corten-raggio 3.2s .3s cubic-bezier(.45, 0, .55, 1) infinite; }

@keyframes corten-taglia {
    0%   { stroke-dashoffset: 1; }
    70%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

@keyframes corten-raggio {
    0%   { offset-distance: 0%;   opacity: 1; }
    70%  { offset-distance: 100%; opacity: 1; }
    75%  { opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* B: i LED stanno sul bordo piegato, la cavita' si riempie di luce e la luce
   esce solo dal traforo */
.schema__led { fill: #ffd84a; }
.schema__cavita { fill: #ffd84a; opacity: .06; }
.schema__fasci path { fill: #ffd84a; opacity: .15; }

.in-vista .schema__led { animation: corten-led 2.4s ease-in-out infinite; }
.in-vista .schema__cavita { animation: corten-cavita 2.4s ease-in-out infinite; }
.in-vista .schema__fasci path { animation: corten-luce 2.4s ease-in-out infinite; }

@keyframes corten-cavita {
    0%, 100% { opacity: .05; }
    50%      { opacity: .22; }
}

@keyframes corten-led {
    0%, 100% { filter: drop-shadow(0 0 2px #ffd84a); }
    50%      { filter: drop-shadow(0 0 12px #ffd84a); }
}

@keyframes corten-luce {
    0%, 100% { opacity: .15; }
    50%      { opacity: .55; }
}

/* C: il pannello dietro cambia colore, il traforo lo mostra */
.schema__fondo { fill: #f2f2f2; }
.in-vista .schema__fondo { animation: corten-colori 8s steps(1, end) infinite; }

@keyframes corten-colori {
    0%   { fill: #f2f2f2; }
    20%  { fill: #1a1a1a; }
    40%  { fill: #D4AA40; }
    60%  { fill: #B87333; }
    80%  { fill: #C9A227; }
}

@media (prefers-reduced-motion: reduce) {
    .corten-passi::after,
    .corten-passo { transition: none; }
    .in-vista .schema__taglio,
    .in-vista .schema__raggio,
    .in-vista .schema__led,
    .in-vista .schema__fasci path,
    .in-vista .schema__cavita,
    .in-vista .schema__fondo { animation: none; }
    .schema__taglio { stroke-dashoffset: 0; }
    .schema__fasci path { opacity: .4; }
}

/* La galleria. Sul computer tre colonne: le verticali ne prendono una, le
   orizzontali due, e l'ordine nel file fa le righe (tre verticali, oppure
   verticale + orizzontale e viceversa a righe alterne). L'altezza della riga
   la danno le verticali a 3:4; l'orizzontale si adatta con un ritaglio al
   centro. Sul telefono una foto per riga, intera, senza ritagli. */
.corten-mosaico {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.corten-mosaico a {
    display: block;
    overflow: hidden;
    cursor: zoom-in;
}

.corten-mosaico .verticale { aspect-ratio: 3 / 4; }
/* L'orizzontale non deve dettare l'altezza della riga: la sua foto, intera,
   sarebbe piu' alta delle verticali e lascerebbe un vuoto sotto di loro. La si
   toglie dal flusso e riempie lo spazio che le verticali hanno deciso. */
.corten-mosaico .orizzontale { grid-column: span 2; position: relative; }
.corten-mosaico .orizzontale img { position: absolute; inset: 0; }

.corten-mosaico img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.corten-mosaico a:hover img { transform: scale(1.03); }

.corten-finiture__griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 60px;
    margin-top: 50px;
}

.corten-finitura {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.corten-finitura h3 { margin-top: 0; }

/* sotto ogni finitura la sua foto: stessa misura per le due, cosi' il
   confronto fra grigio e ruggine si legge a colpo d'occhio */
.corten-finitura__foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-top: 28px;
}

/* .btn-wrapper non ha regole sue nel tema: come nel blog */
/* L'ultima sezione chiude <main>, che nel tema ha overflow: hidden: senza un
   margine sotto, i tasti stavano sul bordo e la pillola usciva tagliata. */
.corten-finiture { padding-bottom: 12px; }
.corten-tasti {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 60px;
}

/* -- fasce di schermo, sugli stessi scalini del tema --------------------- */
@media only screen and (max-width: 1919px) {
    .corten-sottotitolo,
    .corten-testo p { font-size: 24px; }
    .corten-testo { grid-template-columns: 1fr 1000px; }
    .corten-testo p + p { margin-top: 28px; }
    .corten-materiale,
        .corten-lavorazioni,
    .corten-lavori,
    .corten-finiture { padding-top: 100px; }
    .corten-blocco__testa p,
    .corten-tecniche__intro { font-size: 20px; }
    .corten-passo h3,
    .corten-tecnica h3,
    .corten-finitura h3 { font-size: 24px; }
    .corten-passo p,
    .corten-tecnica p,
    .corten-tecnica li,
    .corten-finitura p { font-size: 17px; }
}

@media only screen and (max-width: 1399px) {
    .corten-sottotitolo,
    .corten-testo p { font-size: 20px; }
    .corten-testo { grid-template-columns: 1fr 850px; }
}

@media only screen and (max-width: 1199px) {
    .corten-testo { grid-template-columns: 1fr 750px; }
    .corten-materiale,
        .corten-lavorazioni,
    .corten-lavori,
    .corten-finiture { padding-top: 70px; }
    .corten-mosaico,
    .corten-finiture__griglia { margin-top: 35px; }
    .corten-passi { grid-template-columns: repeat(3, 1fr); row-gap: 60px; }
    .corten-passi::before, .corten-passi::after { display: none; }
    .corten-passo { border-top: 1px solid var(--border); padding-top: 24px; }
    .corten-passo::before { top: -7px; }
    .corten-tecniche__intro { margin-top: 80px; }
}

@media only screen and (max-width: 991px) {
    .corten-testo { grid-template-columns: 1fr; margin-top: 30px; }
    .corten-testo p { grid-column: 1; }
    .corten-blocco__testa { padding-top: 7px; }
    .corten-passi { grid-template-columns: 1fr 1fr; }
    .corten-mosaico { gap: 16px; }
}

@media only screen and (max-width: 767px) {
    .corten-materiale,
        .corten-lavorazioni,
    .corten-lavori,
    .corten-finiture { padding-top: 50px; }
    /* prima e dopo restano affiancate anche sul telefono: e' il confronto
       il punto della sezione, una sotto l'altra non si vede piu' */

    .corten-finiture__griglia { grid-template-columns: 1fr; gap: 40px; }
    .corten-passi { grid-template-columns: 1fr; row-gap: 40px; }
    .corten-tecniche { grid-template-columns: 1fr; gap: 50px; }
    /* una foto per riga, intera: niente celle, niente ritagli */
    .corten-mosaico { grid-template-columns: 1fr; }
    .corten-mosaico .verticale { aspect-ratio: auto; }
    .corten-mosaico .orizzontale { grid-column: auto; position: static; }
    .corten-mosaico .orizzontale img { position: static; }
    .corten-mosaico img { height: auto; }
    .corten-tasti { margin-top: 40px; }
}

/* -- non solo targhe: quattro voci con un'icona che si disegna ----------- */
.corten-altro { padding-top: 140px; }

.corten-servizi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 60px 0 0;
}

.corten-servizio {
    border-top: 1px solid var(--border);
    padding-top: 28px;
}

.corten-servizio svg {
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    fill: none;
    stroke: var(--theme);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.corten-servizio svg * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s ease;
}

.corten-servizi.in-vista svg * { stroke-dashoffset: 0; }
.corten-servizi.in-vista .corten-servizio:nth-child(2) svg * { transition-delay: .25s; }
.corten-servizi.in-vista .corten-servizio:nth-child(3) svg * { transition-delay: .5s; }
.corten-servizi.in-vista .corten-servizio:nth-child(4) svg * { transition-delay: .75s; }

.corten-servizio h3 { font-size: 30px; line-height: 1.15; margin: 0 0 12px; }
.corten-servizio p { font-size: 18px; line-height: 1.45; color: var(--secondary); margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .corten-servizio svg * { stroke-dashoffset: 0; transition: none; }
}

@media only screen and (max-width: 1919px) {
    .corten-altro { padding-top: 100px; }
    .corten-servizio h3 { font-size: 24px; }
    .corten-servizio p { font-size: 17px; }
}

@media only screen and (max-width: 1199px) {
    .corten-altro { padding-top: 70px; }
    .corten-servizi { grid-template-columns: 1fr 1fr; row-gap: 50px; margin-top: 35px; }
}

@media only screen and (max-width: 767px) {
    .corten-altro { padding-top: 50px; }
    .corten-servizi { grid-template-columns: 1fr; row-gap: 36px; }
}