/* =========================================================
   LAYOUT.CSS
   - Grid systems
   - Section structure
   - Spacing
   - Viewport-heavy rules (LCP relevant)
   ========================================================= */

/* Hero layout */
.hero_grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
    /*gap: 10px;*/
}

/* Page section grids */
.page-section-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
    gap: 10px;
}

.page-section-grid-right {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: end;
    gap: 100px;
}

/* Video sections */
.video-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto; /*100vh;*/
}

/* Video inside grids */
.video-in-grid {
    width: 90%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.video-in-grid-right {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Spacing system */
.big-spacer-between-page-sections {
    height: 2cm;
}

.small-spacer-between-page-sections {
    height: 1cm;
}

/* Trust layout */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

/* Problem layout */
.problem-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 2rem 0;
}

.problem-row:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.shaded-box-wrapper {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 3rem 2rem;
}


/* Optional: tighten icon alignment */
.shaded-box-icon {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}


/* Responsive layout overrides */
@media (max-width: 1024px) {
    .hero_grid,
    .page-section-grid,
    .page-section-grid-right {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {
    .hero_grid,
    .page-section-grid,
    .page-section-grid-right {
        grid-template-columns: 1fr;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    #page_body {
        padding: 5vh 20px;
    }

    #logo_image {
        height: 28px;
    }
}

@media (max-width: 600px) {
    .page-section-grid {
        display: flex;
        flex-direction: column;
    }
}