/* =========================================================
   infrastructure.css  –  Infrastructure page only
   ========================================================= */

/* ---- Hero override (breadcrumb only, no tall padding) ---- */
.hero {
    padding: 24px 0 0;
}

.infra-breadcrumb {
    color: var(--secondary-black);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    padding-left: 8px;
}

/* ==========================================================
   INTRO SECTION  –  2-col: text left | server image right
   ========================================================== */
.infra-intro {
    width: 100%;
    max-width: var(--container-max-width);
    padding: 40px 0 40px;
}

.infra-intro-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    align-items: start;
    column-gap: 40px;
    row-gap: 0;
}

.infra-intro-text {
    display: contents;
}

.infra-video-text {
    margin-top: 40px;
    padding-bottom: 20px;
}

.infra-video-text h2 {
    font-size: 36px;
    font-weight: 500;
    line-height: 44px;
    color: var(--secondary-black);
    max-width: 950px;
    margin: 0 auto;
    text-align: left;
}

.infra-intro-text h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--secondary-black);
    margin-bottom: 32px;
}

.infra-intro-text .intro-body {
    grid-column: 1;
    grid-row: 2;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--secondary-black);
    margin-bottom: 24px;
}

.infra-intro-bold {
    grid-column: 1;
    grid-row: 3;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--secondary-black);
}

.infra-intro-bold a {
    color: var(--primary-color);
}

.infra-intro-image {
    grid-column: 2;
    grid-row: 2 / 4;
    overflow: hidden;
    align-self: start;
    width: calc(100% + var(--container-padding));
    max-width: none;
}

.infra-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
}

/* ==========================================================
   FIRST NODE SECTION  –  architecture diagram | DC text
   ========================================================== */
.first-node-section {
    width: 100%;
    max-width: var(--container-max-width);
    padding: 40px 0 80px;
    position: relative;
    z-index: 2;
}

.first-node-grid {
    display: grid;
    grid-template-columns: 452px 1fr;
    gap: 80px;
    align-items: start;
}

/* ---- First Node left image ---- */
.first-node-left-image {
    align-self: stretch;
    max-width: 452px;
}

.first-node-left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- First Node text ---- */
.first-node-text h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--secondary-black);
    margin-bottom: 28px;
}

.first-node-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--secondary-black);
    margin-bottom: 16px;
}


.deco-1 {
    position: absolute;
    bottom: 100px;
    right: 270px;
    width: 60px;
    height: auto;
    pointer-events: none;
    opacity: 0.9;
}

.deco-2{
    position: absolute;
    top: -30px;
    right: 10px;
    width: 100px;
    height: auto;
    pointer-events: none;
}

.deco-3 {
    position: absolute;
    bottom: 150px;
    left: 300px;
    width: 130px;
    height: auto;
    pointer-events: none;
}

.deco-4 {
    display: none;
    pointer-events: none;
}

/* ==========================================================
   PILLARS SECTION  –  grey bg, 4 cards
   ========================================================== */
.pillars-section {
    width: 100%;
    max-width: var(--container-max-width);
    background-color: var(--background-white);
    padding: 28px 0 40px;
    position: relative;
    z-index: 2;
}

.pillars-section .section-title {
    padding-left: var(--container-padding);
    margin-bottom: 44px;
    font-size: 50px;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 52px;
    padding: 0 var(--container-padding);
}

.pillar-card {
    background: var(--background-white);
    padding: 28px 22px 64px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.pillar-card-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    align-self: center;
}

.pillar-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--secondary-black);
    line-height: 18px;
    margin-top: 15px;
}

.pillar-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--secondary-black);
    margin: 0;
}



/* ==========================================================
   BETA SECTION
   ========================================================== */
.beta-section {
    width: 100%;
    max-width: var(--container-max-width);
    padding: 28px 0 400px;
    position: relative;
    z-index: 2;
    background: var(--background-white);
}

.beta-section h2 {
    font-size: 50px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--secondary-black);
    margin-bottom: 32px;
}

.beta-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--secondary-black);
    margin-bottom: 20px;
}



/* ==========================================================
   MAP PARALLAX  –  replicates our_story scroll-image
   ========================================================== */
.scroll-image {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    height: 640px;
    overflow: hidden;
    position: relative;
}

.scroll-image img {
    width: 100%;
    max-width: var(--container-max-width);
    height: 640px;
    object-fit: cover;
    z-index: 0;
}

/* position:fixed + top are set entirely by sticky.js to avoid Safari placing
   the image at top:0 before JS runs */

/* ==========================================================
   VISION SECTION  –  overlaps map from below
   ========================================================== */
.vision-section {
    width: 100%;
    max-width: var(--container-max-width);
    padding: 32px 0 28px;
    margin-top: -80px;
    position: relative;
    z-index: 2;
    background: var(--background-white);
}

.vision-section h2 {
    font-size: 50px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--secondary-black);
    margin-bottom: 28px;
}

.vision-section p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--secondary-black);
    margin-bottom: 16px;
}

/* ==========================================================
   RESPONSIVE  –  1440
   ========================================================== */
@media (max-width: 1440px) {
    .infra-intro-text h1 {
        font-size: 44px;
    }

    .first-node-text h2 {
        font-size: 34px;
    }

    .first-node-grid {
        gap: 60px;
    }

    .pillars-section .section-title {
        font-size: 40px;
    }

    .beta-section h2,
    .vision-section h2 {
        font-size: 40px;
    }
}

/* ==========================================================
   RESPONSIVE  –  1024
   ========================================================== */
@media (max-width: 1024px) {
    .hero {
        padding: 24px 0 0;
    }

    /* Intro — colonna singola: titolo > testo > bold > video */
    .infra-intro-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .infra-intro-text h1 {
        grid-column: 1;
        grid-row: 1;
        font-size: 38px;
        margin-bottom: 28px;
    }

    .infra-intro-text .intro-body {
        grid-column: 1;
        grid-row: 2;
    }

    .infra-intro-bold {
        grid-column: 1;
        grid-row: 3;
        font-size: 20px;
    }

    .infra-intro-image {
        grid-column: 1;
        grid-row: 4;
        width: 100%;
        max-width: 100%;
        align-self: auto;
        margin-top: 28px;
    }

    /* First Node — colonna singola: titolo > testo > immagine */
    .first-node-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .first-node-text {
        display: contents;
    }

    .first-node-text h2 {
        grid-column: 1;
        grid-row: 1;
        font-size: 28px;
        margin-bottom: 24px;
    }

    .first-node-text p {
        grid-column: 1;
    }

    .first-node-left-image {
        grid-column: 1;
        grid-row: 10;
        max-width: 452px;
        margin: 28px auto 0;
    }

    .first-node-left-image img {
        width: 100%;
        height: auto;
        object-fit: initial;
    }

    /* Pillars */
    .pillars-section .section-title {
        font-size: 36px !important;
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Beta */
    .beta-section h2 {
        font-size: 32px;
    }

    /* Map */
    .scroll-image,
    .scroll-image img {
        height: 420px;
    }

    .scroll-image img {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        top: auto !important;
    }

    /* Parallax disattivato: sezioni tornano a piena larghezza */
    .vision-section,
    .pillars-section,
    .beta-section {
        width: 100%;
        max-width: var(--container-max-width);
        margin-top: 0;
    }

    .pillars-section .section-title {
        padding-left: var(--container-padding);
    }

    .pillars-grid {
        padding: 0 var(--container-padding);
    }

    /* Vision */
    .vision-section h2 {
        font-size: 32px;
    }

    /* Decorations */
    .deco-1 {
        right: auto;
        left: 10px;
        bottom: 200px;
    }

    .deco-2 {
        right: 60px;
        width: 80px;
    }
}

/* ==========================================================
   RESPONSIVE  –  768px only  (deco-4)
   ========================================================== */
/* deco-4 non usato nel layout a colonna singola */

/* ==========================================================
   RESPONSIVE  –  tablet only (deco-1 position fix)
   ========================================================== */
@media (min-width: 860px) and (max-width: 1024px) {
    .deco-1 {
        bottom: 40px;
    }
}

/* ==========================================================
   RESPONSIVE  –  480
   ========================================================== */
@media (max-width: 480px) {
    .infra-intro {
        padding: 24px 0 40px;
    }

    /* Mobile: colonna singola, ordine: titolo > testo > bold > video */
    .infra-intro-text h1 {
        font-size: 44px;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .infra-intro-text .intro-body {
        grid-row: 2;
        font-size: 16px;
    }

    .infra-intro-bold {
        grid-row: 3;
        font-size: 18px;
    }

    .infra-intro-image {
        grid-row: 4;
        margin-top: 20px;
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        width: calc(100% + 2 * var(--container-padding));
        max-width: none;
    }

    .first-node-section {
        padding: 32px 0 40px;
    }

    .first-node-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .first-node-text {
        display: contents;
    }

    .first-node-text h2 {
        grid-column: 1;
        grid-row: 1;
        font-size: 44px;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .first-node-text p {
        grid-column: 1;
    }

    .first-node-left-image {
        grid-column: 1;
        grid-row: 10;
        max-width: 452px;
        margin: 20px auto 0;
    }

    .first-node-left-image img {
        width: 100%;
        height: auto;
        object-fit: initial;
    }

    .gpu-units {
        gap: 6px;
    }

    .pillar-card {
        display: grid;
        grid-template-columns: 136px 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 8px;
        align-items: start;
        padding: 20px 16px;
    }

    .pillar-card-img {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 136px;
        height: 136px;
        align-self: center;
    }

    .pillar-label {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        align-self: end;
    }

    .pillar-desc {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .pillars-section {
        padding: 48px 0;
        width: 100%;
        max-width: var(--container-max-width);
    }

    .pillars-section .section-title {
        font-size: 44px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        padding-left: var(--container-padding) !important;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--container-padding);
    }

    .beta-section {
        padding: 48px 0;
        width: 100%;
        max-width: var(--container-max-width);
    }

    .vision-section {
        width: 100%;
        max-width: var(--container-max-width);
    }

    .beta-section h2 {
        font-size: 44px;
        font-weight: 600;
        line-height: 1.2;
    }

    .scroll-image,
    .scroll-image img {
        height: 280px;
    }

    .vision-section {
        padding: 48px 0 24px;
    }

    .vision-section h2 {
        font-size: 44px;
        font-weight: 600;
        line-height: 1.2;
    }

    /* Decorations */
    .deco-1 {
        bottom: -20px;
        right: 70px;
        left: auto;
        width: 50px;
        z-index: 3;
    }

    .deco-2 {
        right: 80px;
    }

    .deco-3 {
        display: none;
    }
}