/**
 * ==================================
 * 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; }

/* ===================================
   Responsive Visibility (breakpoint: 768px = md)
   =================================== */

/* Только на десктопе: скрыт на мобильных, виден на md+ */
.gc-desktop-only {
    display: none !important;
}

@media (min-width: 768px) {
    .gc-desktop-only {
        display: block !important;
    }
}

/* Только на мобильных: виден на мобильных, скрыт на md+ */
@media (min-width: 768px) {
    .gc-mobile-only {
        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);
}

@media (max-width: 767.98px) {
    .form-page-container {
        padding: var(--spacing-md) var(--spacing-sm);
        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: var(--layout-page-max-width);
    margin: 0 auto;
    padding: var(--spacing-md) 0;
}

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

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

@media (max-width: 767.98px) {
    .page-layout {
        gap: var(--spacing-mdl);
    }
}

/* Центрированный контент (для форм редактирования и т.п.) */
.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-lg);
}

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

    /* Широкий сайдбар слева (каталог эпиков): иначе :has(.wide) перебивает .sidebar-left и колонки переворачиваются */
    .catalog-layout.sidebar-left:has(.catalog-sidebar-wide) {
        grid-template-columns: var(--layout-catalog-sidebar-wide-width) 1fr;
    }

    .catalog-layout.catalog-layout--without-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

.catalog-layout--without-sidebar .catalog-main {
    grid-column: 1 / -1;
}

/* Для страниц с контентом (detail pages) — чуть больший gap между секциями */
.catalog-main--content {
    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-lg);
        overflow: hidden;
        position: sticky;
        top: 67px;
        align-self: start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

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

    /* Секции на всю ширину вьюпорта; горизонтальные поля у контента задают gc-panel-header / gc-panel-content */
    .catalog-main {
        order: 1;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Полноэкранный лейаут каталога (Notion-style):
   sidebar прибит к левому краю, без внешнего max-width. */
.catalog-layout--page {
    width: 100%;
    gap: 0;
}

@media (min-width: 992px) {
    .catalog-layout--page {
        grid-template-columns: 240px 1fr;
        min-height: calc(100vh - 56px);
        align-items: start;
    }

    .catalog-layout--page .catalog-sidebar {
        background: var(--bg-content-main);
        border: none;
        border-right: 1px solid var(--ui-border);
        border-radius: 0;
        overflow: visible;
        overflow-y: auto;
        padding: var(--spacing-md) 0;
        position: sticky;
        top: 56px;
        height: calc(100vh - 56px);
        max-height: none;
        align-self: start;
    }

    .catalog-layout--page .catalog-main {
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

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

/* ===================================
   Mobile Navigation Offset
   Два режима — как у мобильной шапки: без табов / с табами (variables.css --gc-mobile-nav-*).
   =================================== */

.gc-mobile-nav-offset {
    /* Компактная шапка (лого или один заголовок без полосы табов) */
    height: calc(var(--gc-nav-bar-height) + env(safe-area-inset-top, 0px));
}

.gc-mobile-nav-offset-with-tabs {
    /* Расширенная шапка: safe-area + pt навбара + строка заголовка + gap + полоса табов + pb — см. --gc-mobile-nav-expanded-inner-height */
    height: calc(env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-expanded-inner-height));
}

.gc-mobile-nav-offset-level-2 {
    height: calc(64px + env(safe-area-inset-top, 0px));
}

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

/* ===================================
   Сайт: оболочка, футер, юридические страницы
   =================================== */

/* app.blade: body > .gc-app-frame > (.gc-app-chrome | .gc-app-shell). */
.gc-app-frame {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gc-app-chrome {
    flex: 0 0 auto;
    min-width: 0;
}

/*
 * Режим без chrome (join и др.): вёрстка не рендерит навбары, но body всё ещё получает
 * padding-top/bottom из navbar.css под фиксированные бары — сбрасываем.
 */
html.gc-hide-app-chrome body {
    --gc-body-pad-top: 0px;
    --gc-body-pad-bottom: 0px;
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 992px) {
    html.gc-hide-app-chrome body {
        padding-top: 0 !important;
    }
}

.gc-app-shell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Основной блок: минимум высота области контента body — футер уходит ниже первого экрана (не прижат к низу вьюпорта) */
.gc-app-main {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    /* Одна величина: несколько min-height (vh/svh/dvh) подряд дают рывки при пересчёте вьюпорта на мобильных. */
    min-height: calc(100vh - var(--gc-body-pad-top, 0px) - var(--gc-body-pad-bottom, 0px));
}

/* Футер сайта: приглушённый фон (--bg-main), следует data-theme.
   Колонка — как page-container-flush (--layout-page-max-width); горизонтальный инсет только на адаптиве — у .gc-site-footer-inner. */
.gc-site-footer {
    flex-shrink: 0;
    border-top: none;
    background: var(--bg-main);
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--spacing-md);
    /* Снизу чуть больше воздуха над зоной таббара; safe-area для home indicator */
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    .gc-site-footer {
        padding-top: var(--spacing-lg);
        padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
    }
}

.gc-site-footer-inner {
    box-sizing: border-box;
    max-width: var(--layout-page-max-width);
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
}

/* Адаптив: инсеты слева/справа (у корня футера padding 0 — см. выше) */
@media (max-width: 991px) {
    .gc-site-footer-inner {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

@media (max-width: 576px) {
    .gc-site-footer-inner {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
}

.gc-site-footer-row {
    width: 100%;
    min-width: 0;
}

.gc-site-footer-row--brand {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

/* Кнопка слева, копирайт справа (противоположный угол) */
.gc-site-footer-row--legal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.gc-site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--font-primary);
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast) ease;
}

.gc-site-footer-brand:hover {
    opacity: 0.88;
}

.gc-site-footer-brand:focus-visible {
    outline: 2px solid var(--accent-link);
    outline-offset: 3px;
}

.gc-site-footer-logo {
    display: block;
    height: 18px;
    width: auto;
}

.gc-site-footer-copy-inline {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--font-tertiary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: end;
}

.gc-site-footer-legal.gc-dropdown {
    display: inline-block;
}

/* Компактная кнопка; остальное — из .gc-dropdown-toggle (тема, шеврон) */
.gc-site-footer-legal .gc-site-footer-legal-toggle.gc-dropdown-toggle {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

/* Юридические страницы */
.gc-legal-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
}

.gc-legal-page-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.gc-legal-page-inner {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.gc-legal-page-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-inline: var(--spacing-2xs);
}

.gc-legal-page-eyebrow {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--font-tertiary);
}

.gc-legal-page-title {
    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--font-primary);
    font-family: var(--font-family-heading);
}

.gc-legal-page-card.gc-panel {
    overflow: hidden;
}

.gc-legal-page-card-content.gc-panel-content {
    gap: var(--spacing-lg);
}

.gc-legal-draft.gc-callout {
    border: 1px solid rgba(var(--warning-color-rgb), 0.35);
}

.gc-legal-prose {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gc-legal-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-secondary);
}

.gc-legal-section:first-child {
    padding-top: 0;
    border-top: none;
}

.gc-legal-section h2 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--font-primary);
    font-family: var(--font-family-heading);
}

.gc-legal-section p {
    margin: 0;
    font-size: var(--font-size-mdl);
    line-height: 1.6;
    color: var(--font-secondary);
}

.gc-legal-section ul {
    margin: 0;
    padding-left: 1.25em;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-size-mdl);
    line-height: 1.6;
    color: var(--font-secondary);
}

.gc-legal-section a {
    color: var(--accent-link);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.gc-legal-section a:hover {
    color: var(--accent-link-hover);
}

/* ===================================
   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>
*/