/* Country Selector - Edit Page */
.country-selector-container {
    position: relative;
    width: 100%;
}

.country-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--input-bg, #1a1a2e);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
}

.country-selector-trigger:hover {
    border-color: var(--primary-color, #6366f1);
}

.country-selector-trigger:focus {
    outline: none;
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.country-selector-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.country-selector-placeholder {
    color: var(--text-muted, #888);
}

.country-selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary-color, #6366f1);
    color: white;
    border-radius: 12px;
    font-size: 12px;
}

.country-selected-count {
    background: var(--secondary-bg, #252540);
    color: var(--text-color, #e0e0e0);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
}

.country-selector-arrow {
    margin-left: 10px;
    color: var(--text-muted, #888);
    transition: transform 0.2s;
}

.country-selector-container.open .country-selector-arrow {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.country-selector-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg, #1e1e38);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none;
    max-height: 450px;
    overflow: hidden;
    flex-direction: column;
}

.country-selector-container.open .country-selector-dropdown {
    display: flex;
}

/* Search Box */
.country-search-box {
    padding: 12px;
    border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.country-search-input {
    width: 100%;
    padding: 10px 14px;
    padding-left: 36px;
    background: var(--input-bg, #1a1a2e);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 6px;
    color: var(--text-color, #e0e0e0);
    font-size: 14px;
}

.country-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #6366f1);
}

.country-search-wrapper {
    position: relative;
}

.country-search-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #888);
}

/* Actions Bar */
.country-actions-bar {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #2a2a4a);
    background: var(--secondary-bg, #252540);
}

.country-action-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 6px;
    color: var(--text-color, #e0e0e0);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.country-action-btn:hover {
    background: var(--hover-bg, #2a2a4a);
    border-color: var(--primary-color, #6366f1);
}

/* Regions List */
.country-regions-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.country-region {
    border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.country-region:last-child {
    border-bottom: none;
}

.country-region-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--secondary-bg, #252540);
    transition: background 0.2s;
}

.country-region-header:hover {
    background: var(--hover-bg, #2a2a4a);
}

.country-region-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color, #e0e0e0);
}

.country-region-title i {
    transition: transform 0.2s;
}

.country-region.expanded .country-region-title i {
    transform: rotate(90deg);
}

.country-region-count {
    font-size: 12px;
    color: var(--text-muted, #888);
    background: var(--input-bg, #1a1a2e);
    padding: 2px 8px;
    border-radius: 10px;
}

.country-region-count.has-selected {
    background: var(--primary-color, #6366f1);
    color: white;
}

.country-region-select-all {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 4px;
    color: var(--text-muted, #888);
    font-size: 11px;
    cursor: pointer;
}

.country-region-select-all:hover {
    border-color: var(--primary-color, #6366f1);
    color: var(--primary-color, #6366f1);
}

/* Countries List within Region */
.country-region-countries {
    display: none;
    padding: 8px 14px;
    background: var(--input-bg, #1a1a2e);
}

.country-region.expanded .country-region-countries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
}

.country-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.country-checkbox-item:hover {
    background: var(--hover-bg, #2a2a4a);
}

.country-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color, #6366f1);
    cursor: pointer;
}

.country-checkbox-item label {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color, #e0e0e0);
    user-select: none;
}

.country-checkbox-item.selected {
    background: rgba(99, 102, 241, 0.1);
}

.country-checkbox-item.hidden {
    display: none;
}

/* Footer */
.country-selector-footer {
    padding: 12px;
    border-top: 1px solid var(--border-color, #2a2a4a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--secondary-bg, #252540);
}

.country-selected-info {
    font-size: 13px;
    color: var(--text-muted, #888);
}

.country-done-btn {
    padding: 8px 20px;
    background: var(--primary-color, #6366f1);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.country-done-btn:hover {
    background: var(--primary-hover, #5558e3);
}

/* ===================== */
/* Country Display - Page View */
/* ===================== */

.country-display-grouped {
    position: relative;
}

.country-summary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--primary-color, #6366f1);
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.country-summary-toggle:hover {
    color: var(--primary-hover, #5558e3);
}

.country-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s;
}

.country-display-grouped.expanded .country-toggle-icon {
    transform: rotate(180deg);
}

.country-regions-list {
    display: none;
    margin-top: 10px;
    padding: 12px;
    background: var(--card-bg, rgba(30, 30, 56, 0.5));
    border-radius: 8px;
    border: 1px solid var(--border-color, #2a2a4a);
}

.country-display-grouped.expanded .country-regions-list {
    display: block;
}

.country-region-group {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.country-region-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.country-region-name {
    display: block;
    font-weight: 600;
    color: var(--primary-color, #6366f1);
    margin-bottom: 4px;
    font-size: 13px;
}

.country-region-items {
    display: block;
    color: var(--text-muted, #888);
    font-size: 13px;
    line-height: 1.5;
}

.country-list-simple {
    color: var(--text-color, #e0e0e0);
}

.country-none {
    color: var(--text-muted, #888);
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .country-selector-dropdown {
        position: fixed;
        top: 10%;
        left: 5%;
        right: 5%;
        bottom: 10%;
        max-height: none;
        border-radius: 12px;
    }

    .country-region.expanded .country-region-countries {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
/**
 * 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 .page-actions-section,
.server-page--sections .srv-page-details {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Server details card should show all content */
.server-page--sections .server-details-card {
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

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

/* ============================================
   Full-Width Section Component Styling
   ============================================ */

/* When components are in a single-column (full-width) section,
   constrain their width and center them for better readability */
.page-section--cols-1 .page-section__column {
    /* Create a contained layout for components */
    align-items: center;
}

/* Default max-width for all components - responsive with 1200px cap */
.page-section--cols-1 .page-section__column > .page-component,
.page-section--cols-1 .page-section__column > .page-section-card,
.page-section--cols-1 .page-section__column > .srv-page-details,
.page-section--cols-1 .page-section__column > .server-details-card,
.page-section--cols-1 .page-section__column > .description-card {
    width: 100%;
    max-width: min(1200px, 90vw);
}

/* Title section - full width of container */
.page-section--cols-1 .page-section__column > .title-card,
.page-section--cols-1 .page-section__column > .server-page-title {
    width: 100%;
    max-width: min(1200px, 95vw);
}

/* Cards that benefit from multi-column layout in wide containers */
.page-section--cols-1 .rules-content,
.page-section--cols-1 .staff-list,
.page-section--cols-1 .faq-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 16px;
}

/* Gallery should use more columns when wider */
.page-section--cols-1 .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Comments section - constrain for readability */
.page-section--cols-1 .comments-section,
.page-section--cols-1 .page-comments {
    max-width: min(1000px, 85vw);
    width: 100%;
}

/* Review cards in a grid layout */
.page-section--cols-1 .reviews-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

/* Content feed - constrain width for readability */
.page-section--cols-1 .content-feed,
.page-section--cols-1 .page-feed {
    max-width: min(800px, 80vw);
    width: 100%;
}

/* Vote section - keep compact but responsive */
.page-section--cols-1 .vote-section,
.page-section--cols-1 .page-vote-section {
    max-width: min(600px, 70vw);
    width: 100%;
}

/* Server status and details - side by side when space allows */
.page-section--cols-1 .server-status-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: min(1200px, 90vw);
    width: 100%;
}

.page-section--cols-1 .server-status-wrapper > * {
    flex: 1 1 300px;
    max-width: 500px;
}

/* Links section - grid layout */
.page-section--cols-1 .links-section,
.page-section--cols-1 .page-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    max-width: min(1200px, 90vw);
    width: 100%;
}

/* Video embeds - constrain aspect ratio and width */
.page-section--cols-1 .video-embed,
.page-section--cols-1 .page-video {
    max-width: min(1200px, 90vw);
    width: 100%;
}

/* Discord widget - don't stretch too wide but responsive */
.page-section--cols-1 .discord-widget,
.page-section--cols-1 .discord-embed {
    max-width: min(500px, 60vw);
    width: 100%;
}

/* MOTD display - keep centered and readable */
.page-section--cols-1 .motd-display,
.page-section--cols-1 .server-motd {
    max-width: min(900px, 80vw);
    width: 100%;
}

/* ============================================
   Container Query Support (Modern Browsers)
   ============================================ */
@supports (container-type: inline-size) {
    .page-section__column {
        container-type: inline-size;
        container-name: section-column;
    }

    /* When column is wider than 800px, use multi-column layouts */
    @container section-column (min-width: 800px) {
        .rules-content,
        .staff-list,
        .faq-list {
            grid-template-columns: repeat(2, 1fr);
        }

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

    @container section-column (min-width: 1200px) {
        .rules-content,
        .staff-list,
        .faq-list {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

/* ============================================
   Full-Width Section Background Variants
   ============================================ */
.page-section--cols-1.section-featured {
    background: var(--bg-card, #1e222a);
    padding: 30px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-light, #2d333b);
}

.page-section--cols-1.section-highlight {
    background: linear-gradient(135deg, rgba(74, 174, 220, 0.08) 0%, rgba(74, 174, 220, 0.02) 100%);
    padding: 30px 20px;
    border-left: 3px solid var(--brand-primary, #4AAEDC);
}

/* ============================================
   Specific Component Styling in Full-Width Sections
   ============================================ */

/* Staff team - grid layout */
.page-section--cols-1 .component-staff-team .staff-grid,
.page-section--cols-1 .component-staff-team .staff-role-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* FAQ section - better grid */
.page-section--cols-1 .component-faq-section .faq-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
}

/* Rules section - multi-column when wide */
.page-section--cols-1 .component-server-rules .rules-list {
    column-count: 2;
    column-gap: 30px;
}

.page-section--cols-1 .component-server-rules .rules-list > * {
    break-inside: avoid;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .page-section--cols-1 .component-server-rules .rules-list {
        column-count: 1;
    }
}

/* Reviews component - grid layout */
.page-section--cols-1 .component-reviews .reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

/* Gallery component - larger images */
.page-section--cols-1 .component-gallery .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Gallery/Carousel - at least 50% screen width in full-width sections */
.page-section--cols-1 .gallery-section-card,
.page-section--cols-1 .unified-carousel,
.page-section--cols-1 .component-gallery {
    min-width: min(50vw, 100%);
    max-width: min(1200px, 90vw);
    width: 100%;
}

.page-section--cols-1 .unified-carousel .carousel-slide img {
    max-height: 500px;
}

.page-section--cols-1 .unified-carousel .carousel-slide .video-wrapper,
.page-section--cols-1 .unified-carousel .carousel-slide .video-wrapper iframe {
    min-height: 400px;
    height: 400px;
}

/* Server status - compact centered card */
.page-section--cols-1 .component-server-status {
    max-width: min(600px, 70vw);
}

.page-section--cols-1 .component-server-status .server-status-card {
    width: 100%;
}

/* Vote section - compact centered */
.page-section--cols-1 .component-vote-section {
    max-width: min(600px, 70vw);
}

/* Discord widget - don't stretch */
.page-section--cols-1 .component-discord-widget {
    max-width: min(500px, 60vw);
}

/* Comments - readable width */
.page-section--cols-1 .component-comments {
    max-width: min(1000px, 85vw);
}

/* Content feed - narrow for readability */
.page-section--cols-1 .component-content-feed {
    max-width: min(800px, 80vw);
}

/* Description - readable width */
.page-section--cols-1 .component-description,
.page-section--cols-1 .description-card {
    max-width: min(1200px, 90vw);
}

/* Application forms - grid for multiple forms */
.page-section--cols-1 .component-application-forms .application-forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

/* Store widget - grid packages */
.page-section--cols-1 .component-store-widget .packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Creations gallery - larger cards */
.page-section--cols-1 .component-creations-gallery .creations-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* MOTD - centered and constrained */
.page-section--cols-1 .component-motd-display {
    max-width: min(900px, 80vw);
}

/* Embed widget - constrained */
.page-section--cols-1 .component-embed-widget {
    max-width: min(1200px, 90vw);
}

/* Links component - horizontal grid */
.page-section--cols-1 .component-links .links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Videos component - grid layout */
.page-section--cols-1 .component-videos .videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

/* Minigames list - grid cards */
.page-section--cols-1 .component-minigames-list .minigames-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Mods/plugins list - grid cards */
.page-section--cols-1 .component-mods-plugins-list .mods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* World info - grid for multiple worlds */
.page-section--cols-1 .component-world-info .worlds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Features grid - already a grid, just tune it */
.page-section--cols-1 .component-features-grid .features-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Timeline - constrain width */
.page-section--cols-1 .component-server-timeline {
    max-width: min(1000px, 85vw);
}

/* ============================================
   Fixed Page Actions (Report, Claim)
   ============================================ */
.page-actions-fixed {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.server-page--sections {
    position: relative;
    padding-top: 50px; /* Make room for fixed actions */
}

.page-actions-fixed .page-action-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-actions-fixed .report-btn {
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary, #666);
}

.page-actions-fixed .report-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

.page-actions-fixed .claim-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.page-actions-fixed .claim-btn:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .page-actions-fixed {
        position: relative;
        top: 0;
        right: 0;
        justify-content: center;
        padding: 10px;
        margin-bottom: 10px;
    }

    .server-page--sections {
        padding-top: 0;
    }
}