/* ============================================
   TURATHYA - LAYOUT UTILITIES
   Container, grid systems, and spacing
   ============================================ */

/* ==================== CONTAINER ==================== */

.container {
    width: 100%;
    max-width: var(--container-2xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-xl {
    max-width: var(--container-xl);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }
}

/* ==================== GRID SYSTEMS ==================== */

.grid {
    display: grid;
    gap: var(--gap-md);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* Responsive grid */
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Gap utilities */
.gap-sm {
    gap: var(--gap-sm);
}

.gap-md {
    gap: var(--gap-md);
}

.gap-lg {
    gap: var(--gap-lg);
}

.gap-xl {
    gap: var(--gap-xl);
}

/* ==================== FLEXBOX ==================== */

.flex {
    display: flex;
}

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

.flex-row {
    flex-direction: row;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

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

.flex-1 {
    flex: 1 1 0%;
}

/* ==================== SPACING UTILITIES ==================== */

/* Margin */
.m-0 {
    margin: 0;
}

.m-auto {
    margin: auto;
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mt-12 {
    margin-top: var(--space-12);
}

.mt-16 {
    margin-top: var(--space-16);
}

.mt-24 {
    margin-top: var(--space-24);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mb-12 {
    margin-bottom: var(--space-12);
}

.mb-16 {
    margin-bottom: var(--space-16);
}

.mb-24 {
    margin-bottom: var(--space-24);
}

.my-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.my-12 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
}

.my-16 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-16);
}

.my-24 {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-4 {
    padding: var(--space-4);
}

.p-6 {
    padding: var(--space-6);
}

.p-8 {
    padding: var(--space-8);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.py-12 {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.py-16 {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.py-24 {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

/* ==================== SECTIONS ==================== */

.section {
    padding-top: var(--space-section-lg);
    padding-bottom: var(--space-section-lg);
}

.section-sm {
    padding-top: var(--space-section-sm);
    padding-bottom: var(--space-section-sm);
}

.section-lg {
    padding-top: var(--space-section-xl);
    padding-bottom: var(--space-section-xl);
}

.section-spacing {
    margin-bottom: var(--space-section-md);
}

@media (min-width: 1024px) {
    .section-spacing {
        margin-bottom: var(--space-section-lg);
    }
}

/* Card grid spacing after section headers */
.section-header + .grid,
.section-header + .auctions-toolbar {
    margin-top: var(--space-subtitle-content);
}

/* ==================== PAGE HEADER ==================== */

.page-header {
    text-align: center;
    padding-top: var(--space-section-lg);
    margin-bottom: var(--space-section-md);
}

.page-header h1 {
    margin-bottom: var(--space-title-subtitle);
}

.page-subtitle,
.page-header > p {
    max-width: var(--subtitle-max-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-subtitle-content);
}

/* ==================== SECTION DIVIDER ==================== */

.section-divider {
    display: block;
    width: 100%;
    height: 10px;
    background-color: #C4B5A5; /* warm sandy beige — matches Fill BG 3 */
    border: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

/* ==================== READABLE TEXT WIDTH ==================== */

.readable-width {
    max-width: var(--text-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* ==================== INFO PAGES – Title/Subtitle rhythm ==================== */
/* Info pages use container-md with h1 + p.text-lg as title/subtitle */

.container-md > h1 {
    text-align: center;
    padding-top: var(--space-section-sm);
}

.container-md > h1 + .text-lg {
    text-align: center;
    max-width: var(--subtitle-max-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-subtitle-content);
}

/* ==================== MOBILE SPACING REDUCTION ==================== */

@media (max-width: 640px) {
    .page-header {
        padding-top: var(--space-section-md);
        margin-bottom: var(--space-section-sm);
    }

    .section {
        padding-top: var(--space-section-md);
        padding-bottom: var(--space-section-md);
    }

    .section-spacing {
        margin-bottom: var(--space-section-sm);
    }
}

/* ==================== DISPLAY ==================== */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.hidden {
    display: none;
}

/* ==================== POSITION ==================== */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* ==================== WIDTH & HEIGHT ==================== */

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.max-w-full {
    max-width: 100%;
}

/* ==================== OVERFLOW ==================== */

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}