/* ----------------------------------------------------
   Stili aggiuntivi per layout dinamico Rilievi
   ---------------------------------------------------- */

/* HERO PARALLAX */
.hero-parallax {
    position: relative;
    min-height: 68vh;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    /* Sostituisci l'immagine di fondo: */
    background-image: url('img/ph/hero-rilievi.jpg');
    /* segnaposto */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* desktop */
    isolation: isolate;
}

.hero-parallax::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .35));
    z-index: 0;
}

.hero-overlay {
    position: relative;
    z-index: 1;
    padding: 2rem;
    max-width: 1000px;
}

.hero-overlay h1 {
    font-size: clamp(32px, 5vw, 56px);
    margin: 0 0 .25em;
}

.hero-overlay p {
    font-size: clamp(16px, 2.1vw, 22px);
    opacity: .95;
}

.btn-ghost {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 18px;
    border: 1px solid #fff;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    transition: transform .15s ease, background .15s ease;
}

.btn-ghost:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .12);
}

/* SEZIONE INTRO */
.section-narrow {
    max-width: 1100px;
    margin-inline: auto;
}

.lead h2 {
    margin-bottom: .5rem;
}

.lead p {
    font-size: 18px;
}

/* ZIG-ZAG */
.zigzag {
    max-width: 1300px;
    margin: 40px auto;
    padding: 0 16px;
}

.zig-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
    align-items: center;
    margin: 46px 0;
}

.zig-row.invert {
    grid-template-columns: 1fr 1.1fr;
}

.zig-row.invert .zig-media {
    order: 2;
}

.zig-row.invert .zig-text {
    order: 1;
}

.zig-text h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.zig-text .clean-list {
    margin: 0;
    padding-left: 18px;
}

.zig-text .clean-list li {
    margin: 8px 0;
}

/* PLACEHOLDER IMMAGINI */
.ph {
    background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 12px, #e6e6e6 12px, #e6e6e6 24px);
    border: 2px dashed #bfbfbf;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 12px;
}

.ph span {
    padding: 8px 10px;
    background: rgba(255, 255, 255, .75);
    border-radius: 6px;
}

/* Aspect ratio helper */
.ph-16x9 {
    aspect-ratio: 16/9;
}

.ph-3x2 {
    aspect-ratio: 3/2;
}

.ph-4x3 {
    aspect-ratio: 4/3;
}

/* PARALLAX STRIP */
.strip-parallax {
    position: relative;
    min-height: 42vh;
    background-image: url('img/ph/strip-parallax.jpg');
    /* segnaposto */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    margin: 40px 0;
}

.strip-parallax::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(2, 45, 105, .55), rgba(0, 0, 0, .35));
}

.strip-inner {
    position: relative;
    z-index: 1;
    padding: 24px;
}

.strip-inner h3 {
    margin: 0 0 6px;
    font-size: clamp(22px, 3.2vw, 32px);
}

.strip-inner p {
    margin: 0;
    font-size: clamp(14px, 2vw, 18px);
    opacity: .95;
}

/* CARDS GRID */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0 8px;
}

.card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    border: 1px solid #f0f0f0;
    transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.card h4 {
    margin: 0 0 8px;
}

/* TIMELINE PROCESS */
.process {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 16px;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    height: 2px;
    background: linear-gradient(90deg, #e8e8e8, #dcdcdc);
}

.step {
    background: #fff;
    border-radius: 16px;
    padding: 14px 14px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    border: 1px solid #eee;
    text-align: center;
    position: relative;
}

.step .material-symbols-outlined {
    font-size: 28px;
    background: #f4f6fb;
    padding: 8px;
    border-radius: 12px;
    display: inline-block;
    margin-top: -6px;
}

.step h5 {
    margin: 8px 0 4px;
    font-size: 16px;
}

.step p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* CTA */
.cta {
    max-width: 900px;
    margin: 70px auto 90px;
    text-align: center;
    padding: 0 16px;
}

.cta h3 {
    margin: 0 0 6px;
    font-size: 28px;
}

.cta p {
    margin: 0 0 16px;
}

.cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    text-decoration: none;
    border-radius: 12px;
    padding: 10px 16px;
}

.btn-primary {
    background: #042C68;
    color: #fff;
    border: 1px solid #042C68;
}

.btn-secondary {
    background: #ffffff;
    color: #042C68;
    border: 1px solid #dfe6f4;
}

.btn-primary:hover {
    filter: brightness(1.05);
}

.btn-secondary:hover {
    background: #f7fafd;
}

/* REVEAL ANIMATIONS (IntersectionObserver) */
.fade-up,
.fade-left,
.fade-right {
    opacity: 0;
    transform: translateY(12px);
    will-change: transform, opacity;
    transition: opacity .6s ease, transform .6s ease;
}

.fade-left {
    transform: translateX(-18px);
}

.fade-right {
    transform: translateX(18px);
}

.is-visible.fade-up {
    opacity: 1;
    transform: translateY(0);
}

.is-visible.fade-left {
    opacity: 1;
    transform: translateX(0);
}

.is-visible.fade-right {
    opacity: 1;
    transform: translateX(0);
}

/* RESPONSIVE */
@media (max-width: 980px) {

    .zig-row,
    .zig-row.invert {
        grid-template-columns: 1fr;
    }

    .zig-row.invert .zig-media,
    .zig-row.invert .zig-text {
        order: initial;
    }

    .timeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-parallax {
        background-attachment: scroll;
    }

    /* mobile: no fixed */
}






/* --- visibilità immediata dei segnaposto --- */
.ph {
    width: 100%;
    /* <— prima poteva non allargarsi */
    min-height: 220px;
    /* <— garantisce che "si veda" anche su schermi larghi */
}

/* --- sezioni con stacco visivo anche senza foto --- */
.zigzag {
    background: #fafafa;
    /* leggerissimo grigio per distinguere dal bianco */
    padding: 28px 16px;
    /* più respiro */
}

.section-narrow {
    padding: 24px 16px;
}

/* --- sicurezza: il contenuto griglia si stira correttamente --- */
.zig-row,
.zig-row.invert {
    align-items: stretch;
    /* <— forza allungamento dei figli */
}

.zig-media {
    display: block;
}

/* --- hero/strip: fallback elegante anche senza immagini reali --- */
.hero-parallax {
    background-image: linear-gradient(180deg, #9aa0a6, #7c7f83);
    /* fallback finché non metti la foto */
}

.strip-parallax {
    background-image: linear-gradient(180deg, #1b2f57, #0f2246);
    /* idem */
}

/* --- più aria tra i blocchi per evitare “vuoti sospetti” --- */
.zig-text {
    padding: 12px 8px;
}

.cards-grid {
    margin-top: 28px;
}

.process {
    margin: 70px auto;
}


/* ===== Hero ===== */
.hero {
    position: relative;
    height: 82vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .55));
}

.hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 16px;
}

.hero-title {
    font-size: clamp(28px, 4.5vw, 56px);
    margin: 0 0 10px;
}

.hero-sub {
    max-width: 900px;
    margin: 0 auto 18px;
    opacity: .95;
}

.hero-cta .at-button {
    margin: 6px 8px;
}

/* ===== Pillars ===== */
.pillars {
    padding: 64px 16px;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}

.pillar {
    background: #0f1d39;
    color: #eaeefc;
    border-radius: 14px;
    padding: 22px 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.pillar-ic {
    font-size: 36px;
    margin-bottom: 6px;
    display: inline-block;
    color: #78a1ff;
}

@media (max-width: 980px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Parallax Slab (banner/cta) ===== */
.parallax-slab {
    position: relative;
    overflow: hidden;
    min-height: 44vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    filter: brightness(.85);
}

.parallax-slab .banner-content,
.parallax-slab .cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 40px 16px;
}

.parallax-slab h2 {
    font-size: clamp(24px, 3.8vw, 40px);
    margin-bottom: 12px;
}

/* ===== Alternate sections ===== */
.alt-sections {
    max-width: 1240px;
    margin: 56px auto;
    padding: 0 16px;
}

.alt-row {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 34px;
    align-items: center;
    margin: 48px 0;
}

.alt-row-rev {
    grid-template-columns: .9fr 1.1fr;
}

.alt-media img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
    background: #cfd6e6;
}

.alt-text h3 {
    font-size: clamp(22px, 3vw, 32px);
    margin: 0 0 10px;
}

.alt-text p {
    line-height: 1.6;
    margin: 0 0 8px;
}

.alt-text .at-link {
    display: inline-block;
    margin-top: 8px;
}

@media (max-width: 980px) {

    .alt-row,
    .alt-row-rev {
        grid-template-columns: 1fr;
    }

    .alt-media img {
        height: 320px;
    }
}

/* ===== Featured projects ===== */
.featured {
    padding: 70px 16px;
}

.featured-head {
    max-width: 900px;
    margin: 0 auto 18px;
    text-align: center;
}

.featured-slider {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1240px;
    margin: 18px auto 8px;
}

.feat-card {
    background: #0f1d39;
    color: #e9eefb;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.feat-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: #cfd6e6;
}

.feat-card h3 {
    padding: 12px 14px 4px;
    margin: 0;
    font-size: 20px;
}

.feat-card p {
    padding: 0 14px 10px;
    margin: 0;
    opacity: .92;
}

.feat-card .at-link {
    padding: 0 14px 16px;
    display: inline-block;
}

.featured-cta {
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 980px) {
    .featured-slider {
        grid-template-columns: 1fr;
    }
}

/* ===== Small helpers ===== */
.at-primary {
    background: #315bff;
    color: #fff;
}

.at-primary:hover {
    filter: brightness(1.05);
}

.at-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .65);
}

.at-link {
    color: #7ea6ff;
    text-decoration: none;
}

.at-link:hover {
    text-decoration: underline;
}

/* Reveal entry (compatibile col tuo scroll-reveal.js) */
.fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: all .7s ease;
}

.fade-left {
    opacity: 0;
    transform: translateX(-18px);
    transition: all .7s ease;
}

.fade-right {
    opacity: 0;
    transform: translateX(18px);
    transition: all .7s ease;
}

.revealed.fade-up,
.revealed.fade-left,
.revealed.fade-right {
    opacity: 1;
    transform: none;
}


/* ====== FIX CONTRASTO GLOBALE (da valutare se rimuovere, scompone i colori in WIP-servizio-8.html) ====== */

/* Testo di default: scuro */
html,
body,
.at-content {
    color: #0f172a;
    /* slate-900 */
}

/* Titoli scuri di default */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0f172a;
}

/* Link leggibili di default */
a {
    color: #0ea5e9;
}

/* sky-500 */
a:hover {
    color: #0284c7;
}

/* sky-600 */

/* Pulsanti */
.btn-primary {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
}

.btn-primary:hover {
    background: #0284c7;
    border-color: #0284c7;
}

.btn-outline {
    color: #0ea5e9;
    border: 1px solid #0ea5e9;
    background: transparent;
}

.btn-outline:hover {
    background: rgba(14, 165, 233, .08);
}

/* Navbar sempre leggibile */
.at-bar {
    background: #000;
    color: #fff;
}

.at-bar a {
    color: #fff;
}

/* ====== SEZIONI CHIARE / SCURE ====== */

/* Sezioni "alt-row" chiare per default */
.alt-row {
    background: #f8fafc;
}

/* slate-50 */
.alt-row .text-block {
    color: #0f172a;
}

.alt-row .kicker {
    color: #334155;
}

/* slate-600 */
.alt-row .lead {
    color: #1f2937;
}

/* gray-800 */

/* Variante scura quando serve: aggiungi .alt-row--dark al wrapper */
.alt-row.alt-row--dark {
    background: radial-gradient(1200px 600px at 10% -20%, rgba(56, 189, 248, .18), transparent 60%),
        #0b1220;
}

.alt-row.alt-row--dark .text-block,
.alt-row.alt-row--dark .kicker,
.alt-row.alt-row--dark .lead {
    color: #e5e7eb;
}

/* gray-200 */

/* Hero: considerata sezione scura */
.hero,
.hero .overlay {
    background: #0b1220;
}

.hero h1,
.hero p {
    color: #fff;
}

/* Helper: qualunque blocco con fondo scuro usa .on-dark sul wrapper */
.on-dark,
.on-dark * {
    color: inherit;
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6 {
    color: #fff;
}

.on-dark p,
.on-dark .desc,
.on-dark .lead {
    color: #e5e7eb;
}

.on-dark a {
    color: #93c5fd;
}

/* blue-300 */
.on-dark .btn-outline {
    color: #fff;
    border-color: #fff;
}

.on-dark .btn-outline:hover {
    background: rgba(255, 255, 255, .12);
}

/* ====== CARD / PILASTRI ====== */
.pillars {
    background: #f8fafc;
}

.pillar {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 10px 25px rgba(2, 6, 23, .08);
}

.pillar .title {
    color: #0f172a;
}

.pillar .desc {
    color: #334155;
}

/* ====== PROGETTI IN EVIDENZA ====== */
.projects {
    background: #ffffff;
}

.project-card {
    background: #fff;
    color: #0f172a;
}

.project-card .meta {
    color: #475569;
}

/* slate-600 */

/* ====== FOTO PLACEHOLDER (per non “sparire” su bianco) ====== */
.media-placeholder {
    background: linear-gradient(135deg, #e2e8f0, #f8fafc);
    border: 1px dashed #cbd5e1;
}

/* ====== FINE FIX CONTRASTO GLOBALE (da valutare se rimuovere) ====== */


/* ================================ ELABORATI TIPICI ================================= */
.deliverables {
    padding: 64px 0 48px;
}

.deliverables-head .kicker {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12px;
    color: #64748b;
}

.deliverables-head h2 {
    font-size: clamp(28px, 3.5vw, 40px);
    margin: 6px 0 8px;
}

.deliverables-head .lead {
    color: #334155;
    max-width: 62ch;
}

/* Filtri */
.deliverables-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 28px;
}

.deliverables-filters .pill {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
}

.deliverables-filters .pill:hover {
    border-color: #042C68;
    color: #042C68;
}

.deliverables-filters .pill.is-active {
    background: #042C68;
    border-color: #042C68;
    color: #fff;
}

/* Griglia */
.deliverables-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.deliverable-card {
    grid-column: span 6;
    /* 2 col su desktop medio */
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(2, 6, 23, .08);
    transform: translateZ(0);
}

@media (min-width: 1100px) {
    .deliverable-card {
        grid-column: span 4;
    }
}

/* 3 col */
@media (max-width: 640px) {
    .deliverable-card {
        grid-column: span 12;
    }
}

/* 1 col */

.deliverable-card .thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.deliverable-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .4s ease;
}

.deliverable-card:hover .thumb img {
    transform: scale(1.06);
}

.badge {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(2, 6, 23, .75);
    color: #fff;
    font-size: 12px;
    backdrop-filter: blur(4px);
}

.card-body {
    padding: 14px 14px 16px;
}

.card-body .title {
    font-size: 18px;
    margin: 2px 0 4px;
    color: #0f172a;
}

.card-body .meta {
    font-size: 13px;
    color: #64748b;
}

.actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.btn.btn-sm {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 10px;
}

.btn-outline {
    border: 1px solid #0ea5e9;
    color: #0ea5e9;
    background: transparent;
}

.btn-outline:hover {
    background: rgba(14, 165, 233, .08);
}

/* Nota finale */
.deliverables-note {
    margin-top: 28px;
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.deliverables-note p {
    margin: 0;
    color: #334155;
}

/* Lightbox */
.lightbox[aria-hidden="true"] {
    display: none;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.lb-stage {
    background: #0b1220;
    width: min(1200px, 96vw);
    height: min(78vh, 860px);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.lb-stage img,
.lb-stage iframe,
.lb-stage embed {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #0b1220;
}

.lb-close,
.lb-nav {
    position: absolute;
    top: 12px;
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s ease;
}

.lb-close {
    right: 12px;
}

.lb-close:hover,
.lb-nav:hover {
    background: rgba(255, 255, 255, .18);
}

.lb-nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    padding: 10px 12px;
    border-radius: 10px;
}

.lb-nav.prev {
    left: 12px;
}

.lb-nav.next {
    right: 12px;
}


/* --- Link coerenti con brand (#042C68) nelle sezioni deliverables --- */
.deliverables a,
.deliverables .card-body a,
.deliverables .deliverables-note a {
    color: #042C68;
}

.deliverables a:hover {
    text-decoration: underline;
}

.btn.btn-primary {
    background: #042C68;
    border: 1px solid #042C68;
    color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    filter: brightness(1.05);
}

.btn.btn-sm {
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 1.1;
}

/* Lightbox zoom cursori */
.lightbox .lb-stage img.zoomable {
    cursor: grab;
}

.lightbox .lb-stage img.zoomable:active {
    cursor: grabbing;
}

/* (opzionale) micro UI hint per zoom */
.lightbox .zoom-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    pointer-events: none;
}

/* === BUTTONS (outline brand) === */
.btn.btn-primary {
    background: transparent;
    border: 1.5px solid #042C68;
    color: #042C68;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: rgba(4, 44, 104, 0.06);
}

/* Dim. pulsante piccolo coerente */
.btn.btn-sm {
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 1.1;
}

/* === LIGHTBOX robusta + stage visibile === */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    /* mostrata via JS */
    align-items: center;
    justify-content: center;
}

.lightbox[aria-hidden="false"] {
    display: flex;
}

.lightbox .lb-stage {
    position: relative;
    width: min(95vw, 1200px);
    height: min(85vh, 900px);
    background: #fff;
    /* evita “schermata blu” */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

/* Media contenuti nello stage */
.lightbox .lb-stage img,
.lightbox .lb-stage iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* immagini sempre visibili */
    display: block;
}

/* NAV + CLOSE */
.lightbox .lb-close {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 2;
    font-size: 34px;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.lightbox .lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    border: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
}

.lightbox .lb-nav.prev {
    left: 16px;
}

.lightbox .lb-nav.next {
    right: 16px;
}

.lightbox .lb-nav:hover {
    background: rgba(0, 0, 0, .5);
}

/* Zoom cursori + hint */
.lightbox .lb-stage img.zoomable {
    cursor: grab;
}

.lightbox .lb-stage img.zoomable:active {
    cursor: grabbing;
}

.lightbox .zoom-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    pointer-events: none;
}

/* === LIGHTBOX centrata, semplice === */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    /* mostrata via JS */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
}

.lightbox[aria-hidden="false"] {
    display: flex;
}

.lightbox .lb-stage {
    position: relative;
    width: min(95vw, 1200px);
    height: min(85vh, 850px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

/* Media dentro lo stage */
.lightbox .lb-stage img,
.lightbox .lb-stage iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Zoom: un solo step */
.lightbox .lb-stage img.zoomable {
    cursor: zoom-in;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 200ms ease;
}

.lightbox .lb-stage img.zoomable.zoomed {
    cursor: zoom-out;
    transform: scale(1.8);
    /* fattore di zoom singolo */
}

/* Pulsanti nav e chiudi */
.lightbox .lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 3;
    font-size: 34px;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.lightbox .lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    border: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
}

.lightbox .lb-nav.prev {
    left: 16px;
}

.lightbox .lb-nav.next {
    right: 16px;
}

.lightbox .lb-nav:hover {
    background: rgba(0, 0, 0, .5);
}

/* Bottoni outline blu e link coerenti */
.btn.btn-primary {
    background: transparent;
    border: 1.5px solid #042C68;
    color: #042C68;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: rgba(4, 44, 104, 0.06);
}

.deliverables .card-body a:not(.btn),
.deliverables .lead a,
.deliverables-head a,
a.inline-link {
    color: #042C68;
    text-decoration: none;
}

.deliverables .card-body a:not(.btn):hover,
.deliverables .lead a:hover,
.deliverables-head a:hover,
a.inline-link:hover {
    text-decoration: underline;
}

/* cursore lente in stato normale (non zoom) */
.lightbox .lb-stage img.zoomable {
    cursor: zoom-in;
}

/* quando zoommata (JS imposta grab/grabbing durante pan) */
.lightbox .lb-stage img.zoomable.zoomed {
    cursor: grab;
}

/* Correzione colore titoli sezione progetto */
.at-xlarge strong,
.at-border-bottom strong,
.at-border-prj .at-xlarge strong,
.at-column .at-xlarge {
    color: inherit !important;
}

/* Alternativamente, se vuoi forzare il nero o grigio scuro */
.at-xlarge,
.at-xlarge strong {
    color: #222 !important;
}

/* IMMAGINI X PROGETTO COLONNA 2 */
.prj-image {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.prj-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* IMMAGINI X PROGETTO COLONNA PER HOMEPAGE TITLE CARDS */
.proj-grid {
    display: grid;
    gap: 24px;
}

.proj-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.proj-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.proj-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}

.proj-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.proj-body {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.proj-body h4 {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.proj-body p {
    margin-top: 0;
}

.proj-cta {
    margin-top: auto;
    padding-top: 10px;
}

.btn-link {
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .proj-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .proj-grid-4 {
        grid-template-columns: 1fr;
    }
}