/* Bento Box Layout - CSS Grid Template Areas Example */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
    color: #1f2937;
}

.page-header,
.page-content {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
}

.page-header {
    padding: 3rem 0 2rem;
}

.page-header h1 {
    margin: 0 0 0.75rem;
}

.page-header p {
    margin: 0;
    max-width: 70ch;
    line-height: 1.6;
}

.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.page-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background-color: #111827;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.page-content {
    padding-bottom: 3rem;
}

.demo-section {
    margin-bottom: 2.5rem;
}

.section-heading {
    margin-bottom: 1rem;
}

.section-heading h2 {
    margin: 0 0 0.5rem;
}

.section-heading p {
    margin: 0;
    max-width: 70ch;
    line-height: 1.6;
}

.bento-container {
    display: grid;
    border: solid 1px #ddd;
    border-radius: 20px;
    background-color: rgb(22, 22, 49);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 1rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;

    grid-template-areas:
        "hero hero feature1"
        "hero hero feature2"
        "wide wide feature3";
}

.item {
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #111827;
    min-height: 96px;
    text-align: center;
    padding: 1rem;
}

/* Assign areas */
.item-1 {
    grid-area: hero;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.82) 0%, rgba(118, 75, 162, 0.82) 100%);
    color: #ffffff;
}

.item-2 {
    grid-area: feature1;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.item-3 {
    grid-area: feature2;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.item-4 {
    grid-area: feature3;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.item-5 {
    grid-area: wide;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .bento-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        grid-template-areas:
            "hero"
            "feature1"
            "feature2"
            "feature3"
            "wide";
    }
}

.overlapping-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.item-6 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    grid-area: 1 / 1 / 3 / 3; /* Spans 2 rows and 2 columns */
    z-index: 2;
    
}

.item-7 {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    grid-area: 1 / 3 / 3 / 5; /* Spans all rows and last column */
    z-index: 1;
}

.item-8 {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    grid-area: 2 / 2 / 4 / 4; /* overlaps with Item 7 - Spans last two rows and middle two columns */
    z-index: 3;
}

/* Justify Items Example */
.justified-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: solid 1px #ddd;
    border-radius: 12px;
    gap: 1rem;
    padding: 1.5rem;
    background-color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
    justify-items: start; /* Align each item to the start of its grid cell. */
    justify-content: center; /* Center the entire grid within the container */
}

.item-9, .item-10, .item-11 {
    width: 50px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

@media (max-width: 768px) {
    .page-header {
        padding-top: 2rem;
    }

    .page-nav {
        flex-direction: column;
    }

    .page-nav a {
        width: 100%;
    }

    .overlapping-container,
    .justified-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .item-6,
    .item-7,
    .item-8 {
        grid-area: auto;
    }
}

/* Align Items Example */
.aligned-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    border: solid 1px #ddd;
    border-radius: 12px;
    gap: 1rem;
    padding: 1.5rem;
    background-color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
    align-items: space-evenly; /* Align each item to the end of its grid cell. */
    align-content: end; /* Center the entire grid within the container */
}