/* ===================================
   CSS LAYOUT STYLES
   Used by: css-layout.html
   Demonstrates: Box Model, Flexbox, Grid
   =================================== */

/* --- Box Model (Padding vs Margin) --- */
.box-model-container {
    border: 2px solid #333;
    background-color: #e0e0e0;
    /* Grey background */
    margin: 20px;
    /* Bahar ki space */
    padding: 20px;
    /* Andar ki space */
}

.inner-box {
    background-color: #4285F4;
    /* Blue box */
    color: white;
    padding: 15px;
    border: 2px solid darkblue;
}

/* --- Flexbox Example (Row) --- */
.flex-container {
    display: flex;
    /* Magic starts here */
    gap: 10px;
    /* Items ke darmiyan gap */
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px dashed #333;
}

.flex-item {
    background-color: #34A853;
    /* Google Green */
    color: white;
    padding: 20px;
    flex: 1;
    /* Sab barabar jagah lein */
    text-align: center;
}

/* --- CSS Grid Example --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Equal Columns */
    gap: 10px;
    margin-top: 10px;
}

.grid-item {
    background-color: #EA4335;
    /* Google Red */
    color: white;
    padding: 20px;
    text-align: center;
}