/* ============================================
   POCITS Layouts CSS - Grid & Responsive Styles
   Consolidated from hub-specific CSS files
   Created: 2025-12-27
   ============================================ */

/* =========================================
   CONTENT GRID LAYOUTS
   ========================================= */

/* Standard 2-column layout (main + sidebar) */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

/* Detail page layout (main + fixed sidebar) */
.content-grid.detail-layout {
    grid-template-columns: 1fr 300px;
}

/* Directory layout (sidebar + main) */
.content-grid.directory-layout {
    grid-template-columns: 220px 1fr;
}

/* Main content area */
.main-content {
    min-width: 0;
}

.main-content > h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Sidebar area */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================
   GRID LAYOUTS
   ========================================= */

/* Business/Product grid - 3 columns */
.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Provider grid - 2 columns */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Places grid - 2 columns */
.places-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Delegates grid - 3 columns */
.delegates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* =========================================
   FRACTAL LAYOUT OVERRIDES
   Hub-specific layout class overrides
   ========================================= */
.fractal-layout.hub-layout,
.fractal-layout.book-layout,
.fractal-layout.mall-layout,
.fractal-layout.cmty-layout,
.fractal-layout.medi-layout,
.fractal-layout.smarts-layout,
.fractal-layout.topx-layout {
    display: block;
}

.fractal-layout.detail-layout,
.fractal-layout.topx-detail-layout {
    display: block;
}

.fractal-layout.directory-layout {
    display: block;
    max-width: 900px;
}

/* =========================================
   RESPONSIVE - Large Tablet (1024px)
   ========================================= */
@media (max-width: 1024px) {
    /* Content grids collapse to single column */
    .content-grid,
    .content-grid.detail-layout,
    .content-grid.directory-layout {
        grid-template-columns: 1fr;
    }

    /* Hide sidebar on tablet */
    .sidebar {
        display: none;
    }

    /* Stats row becomes 2 columns */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Business grid becomes 2 columns */
    .business-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Provider grid becomes single column */
    .providers-grid {
        grid-template-columns: 1fr;
    }

    /* Delegates grid becomes 2 columns */
    .delegates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Featured card stacks */
    .featured-card {
        grid-template-columns: 1fr;
    }

    .featured-image {
        height: 150px;
    }

    /* Topic header content stacks */
    .topic-header-content,
    .detail-header-content {
        flex-direction: column;
        gap: 1rem;
    }
}

/* =========================================
   RESPONSIVE - Small Tablet (768px)
   ========================================= */
@media (max-width: 768px) {
    /* Hub headers get smaller padding */
    .hub-header,
    .book-header,
    .mall-header,
    .cmty-header,
    .medi-header,
    .smarts-header,
    .topx-header,
    .topic-header,
    .detail-header {
        padding: 1.5rem;
    }

    .hub-header h1,
    .book-header h1,
    .mall-header h1,
    .cmty-header h1,
    .medi-header h1,
    .smarts-header h1,
    .topx-header h1,
    .topic-header h1,
    .detail-header h1 {
        font-size: 1.5rem;
    }

    /* Stat cards adjust */
    .stat-card .value {
        font-size: 1.5rem;
    }

    /* Section cards adjust padding */
    .section-card {
        padding: 1.25rem;
    }
}

/* =========================================
   RESPONSIVE - Mobile (640px)
   ========================================= */
@media (max-width: 640px) {
    /* Quick links/actions wrap */
    .quick-links,
    .quick-actions {
        flex-wrap: wrap;
    }

    .quick-link,
    .quick-action {
        flex: 1 1 auto;
        min-width: 120px;
        justify-content: center;
    }

    /* Business grid single column */
    .business-grid {
        grid-template-columns: 1fr;
    }

    /* Places grid single column */
    .places-grid {
        grid-template-columns: 1fr;
    }

    /* Delegates grid single column */
    .delegates-grid {
        grid-template-columns: 1fr;
    }

    /* Search bar stacks */
    .search-bar {
        flex-direction: column;
    }

    /* Stats row may need 1 column on very small */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feed tabs scroll */
    .feed-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .feed-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Topic stats wrap */
    .topic-stats {
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* Featured card image smaller */
    .featured-image {
        height: 120px;
    }
}

/* =========================================
   RESPONSIVE - Extra Small (480px)
   ========================================= */
@media (max-width: 480px) {
    /* Hub headers minimal padding */
    .hub-header,
    .book-header,
    .mall-header,
    .cmty-header,
    .medi-header,
    .smarts-header,
    .topx-header,
    .topic-header,
    .detail-header {
        padding: 1rem;
    }

    .hub-header h1,
    .book-header h1,
    .mall-header h1,
    .cmty-header h1,
    .medi-header h1,
    .smarts-header h1,
    .topx-header h1,
    .topic-header h1,
    .detail-header h1 {
        font-size: 1.25rem;
    }

    /* Section cards minimal padding */
    .section-card,
    .sidebar-card {
        padding: 1rem;
    }

    /* Quick links full width */
    .quick-link,
    .quick-action {
        width: 100%;
        flex: none;
    }
}

/* =========================================
   UTILITY LAYOUT CLASSES
   ========================================= */

/* Flex utilities */
.flex {
    display: flex;
}

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

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

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

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

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

/* Gap utilities */
.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

/* Margin utilities */
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

/* Text alignment */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Width utilities */
.w-full {
    width: 100%;
}

.min-w-0 {
    min-width: 0;
}

/* Display utilities */
.hidden {
    display: none;
}

.block {
    display: block;
}

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

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

/* Show/hide at breakpoints */
@media (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .show-tablet-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }
}