/**
 * ==================================
 * GunCult UI Kit - Layout Utilities
 * ==================================
 * 
 * Система utility классов для layout и positioning
 */

/* ===================================
   Display
   =================================== */
.gc-block { display: block !important; }
.gc-inline-block { display: inline-block !important; }
.gc-inline { display: inline !important; }
.gc-flex { display: flex !important; }
.gc-inline-flex { display: inline-flex !important; }
.gc-grid { display: grid !important; }
.gc-inline-grid { display: inline-grid !important; }
.gc-hidden { display: none !important; }

/* ===================================
   Flexbox - Direction
   =================================== */
.gc-flex-row { flex-direction: row !important; }
.gc-flex-row-reverse { flex-direction: row-reverse !important; }
.gc-flex-col { flex-direction: column !important; }
.gc-flex-col-reverse { flex-direction: column-reverse !important; }

/* ===================================
   Flexbox - Wrap
   =================================== */
.gc-flex-wrap { flex-wrap: wrap !important; }
.gc-flex-nowrap { flex-wrap: nowrap !important; }
.gc-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* ===================================
   Flexbox - Justify Content
   =================================== */
.gc-justify-start { justify-content: flex-start !important; }
.gc-justify-end { justify-content: flex-end !important; }
.gc-justify-center { justify-content: center !important; }
.gc-justify-between { justify-content: space-between !important; }
.gc-justify-around { justify-content: space-around !important; }
.gc-justify-evenly { justify-content: space-evenly !important; }

/* ===================================
   Flexbox - Align Items
   =================================== */
.gc-items-start { align-items: flex-start !important; }
.gc-items-end { align-items: flex-end !important; }
.gc-items-center { align-items: center !important; }
.gc-items-baseline { align-items: baseline !important; }
.gc-items-stretch { align-items: stretch !important; }

/* ===================================
   Flexbox - Align Content
   =================================== */
.gc-content-start { align-content: flex-start !important; }
.gc-content-end { align-content: flex-end !important; }
.gc-content-center { align-content: center !important; }
.gc-content-between { align-content: space-between !important; }
.gc-content-around { align-content: space-around !important; }
.gc-content-stretch { align-content: stretch !important; }

/* ===================================
   Flexbox - Align Self
   =================================== */
.gc-self-auto { align-self: auto !important; }
.gc-self-start { align-self: flex-start !important; }
.gc-self-end { align-self: flex-end !important; }
.gc-self-center { align-self: center !important; }
.gc-self-stretch { align-self: stretch !important; }

/* ===================================
   Flexbox - Grow & Shrink
   =================================== */
.gc-flex-grow-0 { flex-grow: 0 !important; }
.gc-flex-grow-1 { flex-grow: 1 !important; }
.gc-flex-shrink-0 { flex-shrink: 0 !important; }
.gc-flex-shrink-1 { flex-shrink: 1 !important; }
.gc-flex-1 { flex: 1 !important; }

/* ===================================
   Grid - Template Columns
   =================================== */
.gc-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.gc-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.gc-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.gc-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.gc-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.gc-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.gc-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Grid - Auto columns */
.gc-grid-cols-auto { grid-template-columns: auto !important; }
.gc-grid-cols-min { grid-template-columns: min-content !important; }
.gc-grid-cols-max { grid-template-columns: max-content !important; }

/* ===================================
   Grid - Template Rows
   =================================== */
.gc-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
.gc-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
.gc-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.gc-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.gc-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }

/* ===================================
   Grid - Column Span
   =================================== */
.gc-col-span-1 { grid-column: span 1 / span 1 !important; }
.gc-col-span-2 { grid-column: span 2 / span 2 !important; }
.gc-col-span-3 { grid-column: span 3 / span 3 !important; }
.gc-col-span-4 { grid-column: span 4 / span 4 !important; }
.gc-col-span-6 { grid-column: span 6 / span 6 !important; }
.gc-col-span-12 { grid-column: span 12 / span 12 !important; }
.gc-col-span-full { grid-column: 1 / -1 !important; }

/* ===================================
   Position
   =================================== */
.gc-static { position: static !important; }
.gc-relative { position: relative !important; }
.gc-absolute { position: absolute !important; }
.gc-fixed { position: fixed !important; }
.gc-sticky { position: sticky !important; }

/* ===================================
   Position - Inset
   =================================== */
.gc-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.gc-inset-auto { top: auto; right: auto; bottom: auto; left: auto; }

/* Individual positions */
.gc-top-0 { top: 0 !important; }
.gc-right-0 { right: 0 !important; }
.gc-bottom-0 { bottom: 0 !important; }
.gc-left-0 { left: 0 !important; }

.gc-top-auto { top: auto !important; }
.gc-right-auto { right: auto !important; }
.gc-bottom-auto { bottom: auto !important; }
.gc-left-auto { left: auto !important; }

/* ===================================
   Z-Index
   =================================== */
.gc-z-0 { z-index: 0 !important; }
.gc-z-10 { z-index: 10 !important; }
.gc-z-20 { z-index: 20 !important; }
.gc-z-30 { z-index: 30 !important; }
.gc-z-40 { z-index: 40 !important; }
.gc-z-50 { z-index: 50 !important; }
.gc-z-100 { z-index: 100 !important; }
.gc-z-999 { z-index: 999 !important; }
.gc-z-max { z-index: 9999 !important; }
.gc-z-auto { z-index: auto !important; }

/* ===================================
   Width
   =================================== */
.gc-w-auto { width: auto !important; }
.gc-w-full { width: 100% !important; }
.gc-w-screen { width: 100vw !important; }
.gc-w-min { width: min-content !important; }
.gc-w-max { width: max-content !important; }
.gc-w-fit { width: fit-content !important; }

/* Fixed widths */
.gc-w-0 { width: 0 !important; }
.gc-w-1\/4 { width: 25% !important; }
.gc-w-1\/3 { width: 33.333333% !important; }
.gc-w-1\/2 { width: 50% !important; }
.gc-w-2\/3 { width: 66.666667% !important; }
.gc-w-3\/4 { width: 75% !important; }

/* ===================================
   Height
   =================================== */
.gc-h-auto { height: auto !important; }
.gc-h-full { height: 100% !important; }
.gc-h-screen { height: 100vh !important; }
.gc-h-min { height: min-content !important; }
.gc-h-max { height: max-content !important; }
.gc-h-fit { height: fit-content !important; }

/* Fixed heights */
.gc-h-0 { height: 0 !important; }
.gc-h-1\/4 { height: 25% !important; }
.gc-h-1\/3 { height: 33.333333% !important; }
.gc-h-1\/2 { height: 50% !important; }
.gc-h-2\/3 { height: 66.666667% !important; }
.gc-h-3\/4 { height: 75% !important; }

/* ===================================
   Min/Max Width
   =================================== */
.gc-min-w-0 { min-width: 0 !important; }
.gc-min-w-full { min-width: 100% !important; }
.gc-min-w-min { min-width: min-content !important; }
.gc-min-w-max { min-width: max-content !important; }

.gc-max-w-xs { max-width: 20rem !important; }      /* 320px */
.gc-max-w-sm { max-width: 24rem !important; }      /* 384px */
.gc-max-w-md { max-width: 28rem !important; }      /* 448px */
.gc-max-w-lg { max-width: 32rem !important; }      /* 512px */
.gc-max-w-xl { max-width: 36rem !important; }      /* 576px */
.gc-max-w-2xl { max-width: 42rem !important; }     /* 672px */
.gc-max-w-3xl { max-width: 48rem !important; }     /* 768px */
.gc-max-w-4xl { max-width: 56rem !important; }     /* 896px */
.gc-max-w-5xl { max-width: 64rem !important; }     /* 1024px */
.gc-max-w-6xl { max-width: 72rem !important; }     /* 1152px */
.gc-max-w-7xl { max-width: 80rem !important; }     /* 1280px */
.gc-max-w-full { max-width: 100% !important; }
.gc-max-w-screen { max-width: 100vw !important; }
.gc-max-w-none { max-width: none !important; }

/* ===================================
   Min/Max Height
   =================================== */
.gc-min-h-0 { min-height: 0 !important; }
.gc-min-h-full { min-height: 100% !important; }
.gc-min-h-screen { min-height: 100vh !important; }

.gc-max-h-full { max-height: 100% !important; }
.gc-max-h-screen { max-height: 100vh !important; }
.gc-max-h-none { max-height: none !important; }

/* ===================================
   Overflow
   =================================== */
.gc-overflow-auto { overflow: auto !important; }
.gc-overflow-hidden { overflow: hidden !important; }
.gc-overflow-visible { overflow: visible !important; }
.gc-overflow-scroll { overflow: scroll !important; }

.gc-overflow-x-auto { overflow-x: auto !important; }
.gc-overflow-y-auto { overflow-y: auto !important; }
.gc-overflow-x-hidden { overflow-x: hidden !important; }
.gc-overflow-y-hidden { overflow-y: hidden !important; }

/* ===================================
   Object Fit
   =================================== */
.gc-object-contain { object-fit: contain !important; }
.gc-object-cover { object-fit: cover !important; }
.gc-object-fill { object-fit: fill !important; }
.gc-object-none { object-fit: none !important; }
.gc-object-scale-down { object-fit: scale-down !important; }

/* ===================================
   Page Containers
   =================================== */

/* GC Container (Tailwind-style) */
.gc-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .gc-container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .gc-container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .gc-container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .gc-container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .gc-container {
        max-width: 1536px;
    }
}

/* Page Container (стандартный контейнер страницы) */
.page-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 767.98px) {
    .page-container {
        padding: 0; /* Без отступов на мобильных - элементы сами управляют своими отступами */
    }
}

/* Form Page Wrapper (обертка для форм с сабхедером) */
.form-page-wrapper {
    width: 100%;
    max-width: 720px;
    margin: var(--spacing-lg) auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 767.98px) {
    .form-page-wrapper {
        margin: var(--spacing-md) 0;
        padding: 0;
    }
}

/* Form Page Container (узкий контейнер для форм) */
.form-page-container {
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--bg-content-main);
    border-radius: var(--radius-xl);
}

@media (max-width: 767.98px) {
    .form-page-container {
        padding: var(--spacing-md) var(--spacing-md);
        overflow-x: hidden;
    }
    
    /* Фикс для Bootstrap row - убираем отрицательные маргины на мобильных */
    .form-page-container .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .form-page-container .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Page Container Flush (без боковых отступов) */
.page-container-flush {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

@media (max-width: 991.98px) {
    .page-container-flush {
        padding: var(--spacing-sm) 0;
    }
}

/* Page Layout - управляет gap между секциями страницы (header и контент) */
.page-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    /* padding убран - управляется через page-container-flush */
}

/* Центрированный контент (для форм редактирования и т.п.) */
.page-content-centered {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ===================================
   Catalog Layout (Grid с сайдбаром)
   =================================== */

.catalog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 992px) {
    /* По умолчанию: контент слева (широкий), сайдбар справа (узкий) */
    .catalog-layout {
        grid-template-columns: 1fr 280px;
        gap: var(--spacing-sm);
    }
    
    /* Вариант с сайдбаром слева */
    .catalog-layout.sidebar-left {
        grid-template-columns: 280px 1fr;
    }
    
    /* Вариант с широким сайдбаром (для exercise page) */
    .catalog-layout:has(.catalog-sidebar-wide) {
        grid-template-columns: 1fr 360px;
    }
}

@media (min-width: 1600px) {
    .catalog-layout {
        grid-template-columns: 1fr 300px;
    }
    
    .catalog-layout.sidebar-left {
        grid-template-columns: 300px 1fr;
    }
    
    /* Вариант с широким сайдбаром на больших экранах */
    .catalog-layout:has(.catalog-sidebar-wide) {
        grid-template-columns: 1fr 400px;
    }
}

.catalog-main {
    min-width: 0;
    padding: 0; /* Без боковых отступов - контент идет до края экрана на мобильных */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); /* Централизованное управление отступами */
}

.catalog-sidebar {
    min-width: 0;
    padding: 0 var(--spacing-md);
}

@media (min-width: 992px) {
    .catalog-sidebar {
        padding: 0;
        background: var(--bg-content-main);
        border-radius: var(--radius-xl);
        overflow: hidden;
        position: sticky;
        top: 78px;
        align-self: start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

@media (max-width: 991.98px) {
    .catalog-sidebar {
        display: none; /* Скрываем сайдбар на мобильных */
    }
    
    .catalog-main {
        order: 1;
    }
}

/* ===================================
   Catalog Header - определен в catalog.css
   =================================== */
/* Стили .catalog-header и дочерних элементов см. в catalog.css */

/* ===================================
   Mobile Navigation Offset
   =================================== */

.gc-mobile-nav-offset {
    height: 66px;
}

.gc-mobile-nav-offset-with-tabs {
    height: 116px;
}

.gc-mobile-nav-offset-level-2 {
    height: 64px;
}

@media (min-width: 992px) {
    .gc-mobile-nav-offset,
    .gc-mobile-nav-offset-with-tabs,
    .gc-mobile-nav-offset-level-2 {
        height: 0;
    }
}

/* ===================================
   Usage Examples
   =================================== */

/*
Example 1: Centered flex container
<div class="gc-flex gc-items-center gc-justify-center gc-h-screen">
    <div>Centered content</div>
</div>

Example 2: Grid layout
<div class="gc-grid gc-grid-cols-3 gc-gap-md">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Example 3: Responsive container
<div class="gc-container gc-mx-auto gc-px-md">
    <p>Content with max-width and centering</p>
</div>

Example 4: Sticky header
<header class="gc-sticky gc-top-0 gc-z-50 gc-w-full">
    <nav>Navigation</nav>
</header>

Example 5: Full-height sidebar
<aside class="gc-w-64 gc-h-screen gc-sticky gc-top-0 gc-overflow-y-auto">
    Sidebar content
</aside>
*/