/**
 * Layout CSS - PHP Responsive Design System
 * Created: 2026-01-29
 * Purpose: Flex/Grid-based responsive layouts
 *
 * Use these utility classes to replace absolute positioning.
 */

/* ===== Flex Layouts ===== */
.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-gap-8 { gap: 8px; }
.flex-gap-12 { gap: 12px; }
.flex-gap-16 { gap: 16px; }
.flex-gap-20 { gap: 20px; }

/* ===== Grid Layouts ===== */
.grid {
    display: grid;
}

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

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

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

/* ===== Responsive Breakpoints ===== */

/* Tablets and large phones (≤900px) */
@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .page {
        padding: 12px;
    }
}

/* Mobile portrait (≤600px) */
@media (max-width: 600px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

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

    .page {
        padding: 8px;
    }

    .flex-between.mobile-stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Hide non-critical elements on small mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* ===== Card Layout ===== */
.card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
    .card {
        padding: 12px;
        border-radius: 6px;
    }
}

/* ===== Container Utilities ===== */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.container-narrow {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== Typography Scale ===== */
:root {
    font-size: 16px;
}

h1 {
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1.2;
}

h2 {
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.3;
}

h3 {
    font-size: clamp(18px, 2.5vw, 24px);
    line-height: 1.4;
}

/* ===== Spacing Utilities ===== */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }

/* ===== Text Alignment ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

@media (max-width: 600px) {
    .text-center-mobile {
        text-align: center;
    }
}