/**
 * Page Sections CSS
 *
 * Grid-based layout system for section-based page layouts.
 * Supports 1-4 columns per section with flexible widths.
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
    --section-gap: 20px;
    --section-margin: 30px;
    --column-gap: 20px;
    --section-padding: 0;
    --section-border-radius: 0;
    --section-bg: transparent;
}

/* ============================================
   Base Section Styles
   ============================================ */
.page-section {
    display: grid;
    gap: var(--section-gap, 20px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--section-margin, 30px);
    padding: var(--section-padding, 0);
    background: var(--section-bg, transparent);
    border-radius: var(--section-border-radius, 0);
    overflow: hidden;
}

.page-section:last-child {
    margin-bottom: 0;
}

/* ============================================
   Column Count Variations
   ============================================ */

/* Single column - full width */
.page-section--cols-1 {
    grid-template-columns: 1fr;
}

/* Two columns - uses CSS variables for widths */
/* Use minmax to allow shrinking when percentages + gap exceed 100% */
.page-section--cols-2 {
    grid-template-columns: minmax(0, var(--col-1-width, 1fr)) minmax(0, var(--col-2-width, 1fr));
}

/* Three columns */
.page-section--cols-3 {
    grid-template-columns: minmax(0, var(--col-1-width, 1fr)) minmax(0, var(--col-2-width, 2fr)) minmax(0, var(--col-3-width, 1fr));
}

/* Four columns */
.page-section--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Using custom grid template if provided */
.page-section[style*="--grid-template"] {
    grid-template-columns: var(--grid-template);
}

/* ============================================
   Column Styles
   ============================================ */
.page-section__column {
    display: flex;
    flex-direction: column;
    gap: var(--column-gap, 20px);
    min-width: 0; /* Prevent grid blowout */
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Constrain all content within columns */
.page-section__column > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Full width column */
.page-section__column--full {
    grid-column: 1 / -1;
}

/* Main content column (typically wider) */
.page-section__column--main {
    min-width: 0;
}

/* Sidebar columns */
.page-section__column--sidebar,
.page-section__column--left-sidebar,
.page-section__column--right-sidebar {
    min-width: 0;
}

/* Quarter width columns (4-col layout) */
.page-section__column--quarter {
    min-width: 0;
}

/* ============================================
   Section Type Variants
   ============================================ */

/* Hero section - full width, minimal gap */
.section-hero {
    --section-gap: 0;
    margin-bottom: var(--section-margin, 30px);
}

/* Main content section */
.section-main {
    /* Uses default settings */
}

/* Feed/content section */
.section-feed {
    --section-padding: 20px 0;
}

/* Community section */
.section-community {
    --section-padding: 20px 0;
}

/* Featured section */
.section-featured {
    --section-gap: 0;
    --section-margin: 30px;
}

/* Articles section (3-column layout) */
.section-articles {
    --section-gap: 25px;
}

/* Video hero section */
.section-video-hero {
    --section-gap: 0;
    margin-bottom: 20px;
}

/* Social proof section */
.section-social {
    --section-padding: 20px 0;
    --section-margin: 0;
}

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

/* Tablet landscape and smaller */
@media (max-width: 1200px) {
    .page-section--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-section--cols-3 {
        grid-template-columns: var(--col-1-width, 1fr) var(--col-2-width, 2fr);
    }

    .page-section--cols-3 .page-section__column--right-sidebar {
        grid-column: 1 / -1;
    }
}

/* Tablet portrait and smaller */
@media (max-width: 1024px) {
    :root {
        --section-gap: 15px;
        --section-margin: 25px;
        --column-gap: 15px;
    }

    .page-section--cols-2,
    .page-section--cols-3,
    .page-section--cols-4 {
        grid-template-columns: 1fr;
    }

    .page-section__column--left-sidebar,
    .page-section__column--right-sidebar {
        order: 10; /* Move sidebars to bottom on mobile */
    }

    .page-section__column--main {
        order: 1; /* Main content first */
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --section-gap: 12px;
        --section-margin: 20px;
        --column-gap: 12px;
    }

    .page-section {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    :root {
        --section-gap: 10px;
        --section-margin: 15px;
        --column-gap: 10px;
    }
}

/* ============================================
   Mobile Stacking Variants
   ============================================ */

/* Vertical stacking (default) */
.page-section[data-mobile-stack="vertical"] {
    /* Default behavior */
}

/* Reverse order on mobile */
.page-section[data-mobile-stack="reverse"] {
    @media (max-width: 1024px) {
        & > .page-section__column {
            order: initial;
        }

        & > .page-section__column:first-child {
            order: 10;
        }
    }
}

/* Horizontal scroll on mobile */
.page-section[data-mobile-stack="horizontal"] {
    @media (max-width: 1024px) {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        & > .page-section__column {
            flex: 0 0 85%;
            scroll-snap-align: start;
        }
    }
}

/* ============================================
   Section Preview Diagrams (for layout editor)
   ============================================ */
.section-preview-diagram {
    display: flex;
    gap: 4px;
    height: 30px;
    background: var(--cd-bg-tertiary, #f0f0f0);
    border-radius: 4px;
    padding: 4px;
    overflow: hidden;
}

.section-preview-diagram.section-preview--cols-1 {
    /* Single column */
}

.section-preview-diagram.section-preview--cols-2 .section-preview-column:first-child {
    flex: 0 0 60%;
}

.section-preview-diagram.section-preview--cols-2 .section-preview-column:last-child {
    flex: 0 0 38%;
}

.section-preview-diagram.section-preview--cols-3 .section-preview-column:nth-child(1) {
    flex: 0 0 20%;
}

.section-preview-diagram.section-preview--cols-3 .section-preview-column:nth-child(2) {
    flex: 0 0 55%;
}

.section-preview-diagram.section-preview--cols-3 .section-preview-column:nth-child(3) {
    flex: 0 0 20%;
}

.section-preview-column {
    flex: 1;
    background: var(--cd-primary, #4a90d9);
    border-radius: 2px;
    opacity: 0.6;
}

/* ============================================
   Section Editor Styles
   ============================================ */
.section-editor-item {
    background: var(--cd-bg-secondary, #fff);
    border: 1px solid var(--cd-border, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.section-editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cd-bg-tertiary, #f5f5f5);
    border-bottom: 1px solid var(--cd-border, #e0e0e0);
}

.section-drag-handle {
    cursor: grab;
    color: var(--cd-text-muted, #999);
    padding: 4px;
}

.section-drag-handle:active {
    cursor: grabbing;
}

.section-name {
    font-weight: 500;
    flex: 1;
}

.section-column-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--cd-primary, #4a90d9);
    color: white;
    border-radius: 12px;
}

.section-controls {
    display: flex;
    gap: 8px;
}

.section-controls button {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--cd-text-secondary, #666);
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
}

.section-controls button:hover {
    background: var(--cd-bg-hover, #e8e8e8);
}

.section-delete-btn:hover {
    color: var(--cd-danger, #dc3545);
}

.section-editor-columns {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.section-editor-columns.section-cols-1 {
    grid-template-columns: 1fr;
}

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

.section-editor-columns.section-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

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

.section-editor-column {
    background: var(--cd-bg-tertiary, #f9f9f9);
    border: 1px dashed var(--cd-border, #ddd);
    border-radius: 6px;
    padding: 12px;
    min-height: 100px;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cd-border, #e0e0e0);
}

.column-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cd-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-width {
    font-size: 0.75rem;
    color: var(--cd-text-muted, #999);
}

/* ============================================
   Section Configuration Modal
   ============================================ */
.section-config-modal {
    max-width: 500px;
}

.column-config-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.column-config-slider label {
    min-width: 80px;
    font-size: 0.875rem;
}

.column-config-slider input[type="range"] {
    flex: 1;
}

.column-config-slider .value-display {
    min-width: 50px;
    text-align: right;
    font-size: 0.875rem;
    color: var(--cd-text-secondary, #666);
}

/* ============================================
   Layout-Specific Section Styles
   ============================================ */

/* --- Gaming Server Layout --- */
.layout-gaming-server .section-gaming-hero {
    background: linear-gradient(135deg, rgba(74, 174, 220, 0.1) 0%, rgba(74, 174, 220, 0.05) 100%);
    border-bottom: 2px solid var(--brand-primary, #4AAEDC);
    padding: 20px 0;
    margin-bottom: 30px;
}

.layout-gaming-server .section-feed {
    background: var(--bg-secondary, #1a1d24);
    padding: 30px 0;
    margin: 30px 0;
}

.layout-gaming-server .section-community {
    background: linear-gradient(180deg, transparent 0%, rgba(74, 174, 220, 0.05) 100%);
    padding: 30px 0;
    border-top: 1px solid var(--border-light, #2d333b);
}

/* --- News & Media Layout --- */
.layout-news-media .section-news-hero {
    background: var(--bg-card, #1e222a);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid var(--border-light, #2d333b);
}

.layout-news-media .section-3col {
    --section-gap: 20px;
}

.layout-news-media .section-articles {
    padding: 20px 0;
}

.layout-news-media .section-archive {
    background: var(--bg-secondary, #1a1d24);
    padding: 40px 0;
    margin-top: 30px;
    border-top: 1px solid var(--border-light, #2d333b);
}

/* --- Community & Social Layout --- */
.layout-community-social .section-community-hero {
    background: linear-gradient(135deg, rgba(63, 185, 80, 0.1) 0%, rgba(74, 174, 220, 0.1) 100%);
    padding: 30px 0;
    border-bottom: 2px solid var(--status-success, #3fb950);
    margin-bottom: 30px;
}

.layout-community-social .section-activity {
    padding: 20px 0;
}

.layout-community-social .section-events {
    background: var(--bg-card, #1e222a);
    padding: 30px;
    border-radius: 12px;
    margin: 30px 0;
}

.layout-community-social .section-members {
    padding: 30px 0;
    border-top: 1px solid var(--border-light, #2d333b);
}

/* --- Business & Professional Layout --- */
.layout-business-professional .section-business-hero {
    background: linear-gradient(180deg, var(--bg-secondary, #1a1d24) 0%, var(--bg-primary, #12151a) 100%);
    padding: 40px 0;
    margin-bottom: 40px;
    border-bottom: 3px solid var(--brand-primary, #4AAEDC);
}

.layout-business-professional .section-services {
    padding: 30px 0;
}

.layout-business-professional .section-services .page-section__column {
    background: var(--bg-card, #1e222a);
    padding: 24px;
    border-radius: 10px;
    border: 1px solid var(--border-light, #2d333b);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.layout-business-professional .section-services .page-section__column:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.layout-business-professional .section-contact {
    background: var(--bg-secondary, #1a1d24);
    padding: 40px 0;
    margin-top: 30px;
}

/* --- Creator & Streamer Layout --- */
.layout-creator-streamer .section-creator-hero {
    background: #000;
    padding: 0;
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
}

.layout-creator-streamer .section-sidebar-left {
    --col-1-width: 30%;
    --col-2-width: 70%;
}

.layout-creator-streamer .section-sidebar-left .page-section__column:first-child {
    background: var(--bg-card, #1e222a);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-light, #2d333b);
}

.layout-creator-streamer .section-schedule {
    background: linear-gradient(135deg, rgba(148, 87, 235, 0.1) 0%, rgba(74, 174, 220, 0.1) 100%);
    padding: 40px 0;
    margin: 30px 0;
}

.layout-creator-streamer .section-4col {
    padding: 30px 0;
}

.layout-creator-streamer .section-4col .page-section__column {
    background: var(--bg-card, #1e222a);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-light, #2d333b);
    text-align: center;
}

/* ============================================
   Full-Width Section Backgrounds
   ============================================ */
.section-full-width {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

/* ============================================
   Section Spacing Utilities
   ============================================ */
.section-compact {
    --section-margin: 15px;
    --section-gap: 12px;
}

.section-spacious {
    --section-margin: 50px;
    --section-gap: 30px;
}

.section-no-gap {
    --section-gap: 0;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .page-section {
        break-inside: avoid;
        margin-bottom: 20px;
    }

    .page-section--cols-2,
    .page-section--cols-3,
    .page-section--cols-4 {
        grid-template-columns: 1fr;
    }

    .page-section__column--sidebar {
        display: none;
    }
}

/* ============================================
   Section Mode Page Container
   ============================================ */
/* Override inline-flex from base .server-page class */
/* Using !important to ensure override of inline-flex in main stylesheets */
.server-page.server-page--sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Ensure wrapper and server-list constrain content */
.server-list:has(.server-page--sections) {
    max-width: 100%;
    overflow-x: hidden;
}

/* Also handle if server-list doesn't support :has() */
.server-list {
    max-width: 100vw;
}

/* Ensure sections don't overflow their container */
.server-page--sections .page-section {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure grid columns constrain their content */
.server-page--sections .page-section__column {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

/* Constrain all child elements within columns */
.server-page--sections .page-section__column > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Constrain iframes, embeds, and media within columns */
.server-page--sections .page-section__column iframe,
.server-page--sections .page-section__column video,
.server-page--sections .page-section__column img,
.server-page--sections .page-section__column table {
    max-width: 100%;
}

/* Constrain common page components */
.server-page--sections .server-page-title,
.server-page--sections .title-card,
.server-page--sections .description-card,
.server-page--sections .server-details-card,
.server-page--sections .page-actions-section,
.server-page--sections .srv-page-details {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Page components should not have forced overflow hidden */
.server-page--sections .page-component {
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}