/* ==========================================================================
   HOMEPAGE LAYOUT
   ========================================================================== */


/* ==========================================================================
   SECTION RHYTHM
   ========================================================================== */

.section {

    padding-block: var(--homepage-section-spacing-mobile);

}

.section:first-of-type {

    padding-top: calc(var(--homepage-section-spacing-mobile) * .9);

}

.homepage-hero {

    padding-bottom: 5rem;

}

/* ==========================================================================
   CONTENT CONTAINERS
   ========================================================================== */

.homepage-hero .container,
.section .container {

    width: min(100%, var(--homepage-container-width));

    margin-inline: auto;

}

.content-container {

    max-width: var(--homepage-reading-width);

    margin-inline: auto;

}



/* ==========================================================================
   HERO GRID
   ========================================================================== */

.hero-grid {

    display: grid;

    align-items: center;

    gap: clamp(2rem, 4vw, 5rem);

}

.hero-content {
    align-self: center;
}

.hero-content {

    max-width: 34rem;

}

.hero-visual {

    align-self: start;

}

.hero-figure {

    margin-top: -1.25rem;

}

.hero-figure img {

    max-width: 1080px;

}

/* ==========================================================================
   GENERIC GRIDS
   ========================================================================== */

.grid {

    display: grid;

    gap: var(--homepage-space-lg);

}



/* ==========================================================================
   FIGURE LAYOUTS
   ========================================================================== */

.figure {

    margin: 0;

}

.figure img {

    display: block;

    width: 100%;

    height: auto;

    margin-inline: auto;

}



/* ==========================================================================
   ACTIONS
   ========================================================================== */

.actions {

    display: flex;

    flex-direction: column;

    gap: var(--homepage-space-sm);

}



/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.navigation ul {

    display: flex;

    flex-wrap: wrap;

    gap: var(--homepage-space-sm);

    justify-content: center;

    padding: 0;

    margin: 0;

    list-style: none;

}



/* ==========================================================================
   HERO MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .hero-content {

        max-width: 34rem;

        margin-inline: auto;

        text-align: center;

    }

    .hero-content h1 {

        margin-inline: auto;

    }

    .hero-description {

        margin-inline: auto;

    }

}


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 768px) {

    .section {

        padding-block: var(--homepage-section-spacing-tablet);

    }

    .actions {

        flex-direction: row;

        align-items: center;

    }

}



@media (min-width: 1024px) {

    .section {

        padding-block: var(--homepage-section-spacing-desktop);

    }

        .hero-grid {

        grid-template-columns:
            minmax(430px, .9fr) minmax(0, 1.45fr);

        gap: 2.5rem;

    }

    .platform-capabilities {

        grid-template-columns: repeat(2, 1fr);

    }

    .outcomes-grid {

        grid-template-columns: repeat(3, 1fr);

    }

    .industries-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .homepage-hero {

        padding-top: 4rem;

        padding-bottom: 5rem;

    }

}


/* ==========================================================================
   RESPONSIVE IMAGES
   ========================================================================== */

.figure picture {

    display: block;

}

.figure picture img {

    display: block;

    width: 100%;

    height: auto;

}


/* ==========================================================================
   FIX: Impede elementos de estourarem a largura e causarem
   barra de rolagem fantasma na Homepage
   ========================================================================== */

main,
.section,
.figure,
.figure img,
picture,
picture img {
  max-width: 100vw;
  overflow-x: clip;
}