/**
 * ============================================================================
 * Art Festival Asia — беттің ОРТАҚ қаңқасы (layout жүйесі)
 * ============================================================================
 *
 * НЕГЕ БҰЛ ФАЙЛ КЕРЕК БОЛДЫ
 * -------------------------
 * Әр бет өз контейнерін қолмен жазатын: біреуі `max-w-7xl`, екіншісі
 * `max-w-4xl`, үшіншісі `max-w-3xl`; гутерлер де әртүрлі болатын
 * (`px-4` мен `px-4 sm:px-6 lg:px-8` араласқан). Соның салдарынан бір
 * бөлімнің ішінде бетті ауыстырғанда мазмұн солға-оңға секіретін —
 * ең айқын мысалы: `/kk/organizers` (7xl) → `/kk/organizers/history`
 * (4xl), қойындылар да, тақырып та орнынан жылжып кететін.
 *
 * Енді ені, гутері, тік ырғағы — бәрі осы файлдағы токендерден
 * келеді. Бет шаблондары тек `page page--wide page-section` сияқты
 * ортақ класстарды қолданады, «сиқырлы» сан жазбайды.
 *
 * ҚҰРАМЫ
 * ------
 *   1. Токендер                    — ені, гутер, аралық, радиус
 *   2. Бет қаңқасы + жабысқақ футер — header / main / footer
 *   3. Контейнерлер (.page)        — бір ғана көлденең тор
 *   4. Тік ырғақ (.page-section)
 *   5. Тақырыптар (.page-title)
 *   6. Бөлім қойындылары (.section-tabs)
 *   7. Бос күй (.empty-state)
 *   8. Оқуға ыңғайлы ені (.prose-measure)
 *
 * ЕСКЕРТУ: бұл файл дизайнды ӨЗГЕРТПЕЙДІ — түс, шрифт, компонент
 * көрінісі бұрынғыдай. Тек өлшем мен аралық бір жүйеге келтірілген.
 * Формалардың өз жүйесі бөлек файлда: `assets/css/forms.css`.
 */

/* ---------------------------------------------------------------------------
   1. Токендер
--------------------------------------------------------------------------- */
:root {
    /* Сайттың басты торы. 80rem = 1280px — хедер мен футердің ені,
       сондықтан бет мазмұны логотип/мәзірмен ДӘЛ бір сызықтан басталады. */
    --afa-container: 80rem;

    /* Бір бағанды форма ағыны (өтінім формасы сияқты) */
    --afa-container-form: 42rem;

    /* Ортаға тұрған шағын карточка: кіру, тіркелу, растау экраны */
    --afa-container-narrow: 28rem;

    /* Көлденең гутер — @media арқылы өседі (3-бөлімді қараңыз).
       Мәні хедер/футердегі `px-4 sm:px-6 lg:px-8`-пен бірдей. */
    --afa-gutter: 1rem;

    /* Тік ырғақ */
    --afa-section-y: 3rem;      /* әдеттегі бет бөлімі */
    --afa-section-y-lg: 4rem;   /* басты беттің маркетингтік блоктары */

    /* Аралық шкаласы — кездейсоқ mb-2/mb-6/mb-8 орнына */
    --afa-gap-xs: 0.5rem;
    --afa-gap-sm: 0.75rem;
    --afa-gap-md: 1.5rem;
    --afa-gap-lg: 2rem;
    --afa-gap-xl: 2.5rem;

    /* Мәтіннің оқуға ыңғайлы ені */
    --afa-measure: 68ch;

    --afa-border: #e2e8f0;      /* slate-200 — блок шекарасы */
    --afa-muted: #94a3b8;       /* slate-400 — бос күй мәтіні */
    --afa-lead: #64748b;        /* slate-500 — сипаттама мәтіні */
    --afa-accent: #ec1e79;      /* brand.pink */
}

@media (min-width: 640px) {
    :root { --afa-gutter: 1.5rem; }
}

@media (min-width: 1024px) {
    :root { --afa-gutter: 2rem; }
}

/* ---------------------------------------------------------------------------
   2. Бет қаңқасы: header → main (өседі) → footer

   Қысқа беттерде футер экранның ортасында қалқып тұрмауы үшін —
   `min-height: 100dvh` + flex бағаны. Бұл viewport-қа байланысты
   «хак» емес, стандартты sticky-footer үлгісі: биіктік БЕКІТІЛМЕЙДІ,
   тек негізгі аймақ бос орынды толтырады.
--------------------------------------------------------------------------- */
.site-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@supports (min-height: 100dvh) {
    /* Мобильді браузерлердің жиналмалы адрес жолағын дұрыс есептейді */
    .site-body { min-height: 100dvh; }
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    margin-top: auto; /* мазмұн аз болса — футер төменге ығысады */
}

/* ---------------------------------------------------------------------------
   3. Контейнер — сайттағы БІРДЕН-БІР көлденең тор
--------------------------------------------------------------------------- */
.page {
    width: 100%;
    max-width: var(--afa-container);
    margin-inline: auto;
    padding-inline: var(--afa-gutter);
}

/* Ені бойынша нұсқалар. Әдепкісі — .page (80rem), төмендегілер тек
   НАҚТЫ функционалдық себеп болғанда қолданылады. */
.page--form { max-width: var(--afa-container-form); }
.page--narrow { max-width: var(--afa-container-narrow); }

/* ---------------------------------------------------------------------------
   4. Тік ырғақ
--------------------------------------------------------------------------- */
.page-section {
    padding-block: var(--afa-section-y);
}

.page-section--lg {
    padding-block: var(--afa-section-y-lg);
}

/* ---------------------------------------------------------------------------
   5. Тақырыптар мен мазмұн иерархиясы

   Бұрын бірдей беттердің h1-і mb-2 / mb-6 / mb-8 болып әрқилы жүретін.
   Енді екі ғана нұсқа: жалғыз тақырып және сипаттамасы бар тақырып.
--------------------------------------------------------------------------- */
.page-title {
    font-size: 1.875rem;   /* text-3xl — бұрынғысындай */
    line-height: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 var(--afa-gap-lg);
}

/* Тақырып + сипаттама бірге тұрса, олардың арасы кіші, ал блоктың
   астындағы аралық — стандартты. */
.page-header {
    margin-bottom: var(--afa-gap-lg);
}

.page-header > .page-title {
    margin-bottom: 0;
}

.page-header > .page-lead {
    margin: var(--afa-gap-xs) 0 0;
    color: var(--afa-lead);
}

/* Бет ішіндегі бөлім тақырыбы (h2). Бұрын text-2xl font-bold бір жерде
   mb-4, екіншісінде mb-8, үшіншісінде мүлдем маржасыз жүретін. */
.section-title {
    font-size: 1.5rem;      /* text-2xl — бұрынғысындай */
    line-height: 2rem;
    font-weight: 700;
    margin: 0 0 var(--afa-gap-md);
}

/* Тақырып қатарда басқа элементпен (мыс. «Барлығын көру» сілтемесімен)
   қатар тұрса, аралықты сол қатардың өзі береді. */
.section-title--inline { margin-bottom: 0; }

/* Бөлімшенің тақырыбы (h2/h3 — конкурс бетіндегі блоктар) */
.subsection-title {
    font-size: 1.25rem;     /* text-xl */
    line-height: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

/* Карточка ішіндегі тақырып */
.card-title {
    font-size: 1.125rem;    /* text-lg */
    line-height: 1.75rem;
    font-weight: 600;
    margin: 0 0 var(--afa-gap-sm);
}

/* Тақырыптан кейін бірден мазмұн келмейтін жағдай (аралықты сыртқы
   контейнердің space-y-і береді) */
.card-title--flush { margin-bottom: 0; }

/* Карточка тақырыбының ықшам нұсқасы (кабинет баптаулары) */
.card-title--sm {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* ---------------------------------------------------------------------------
   6. Бөлім қойындылары (section navigation)

   Бір бөлімнің беттері арасында ауысқанда қойындылар ЖЫЛЖЫМАУЫ керек.
   Сондықтан:
     • белсенді де, белсенді емес те бірдей `font-weight` — қалыңдық
       ауысса, сөздің ені өзгеріп, көрші қойынды орнынан жылжыр еді;
     • биіктік `min-height` арқылы бекітілген;
     • асты сызық контейнердің шекарасын жауып тұрады (margin-bottom:-1px).
--------------------------------------------------------------------------- */
.section-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--afa-gap-md);
    border-bottom: 1px solid var(--afa-border);
    margin-bottom: var(--afa-gap-xl);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.section-tabs__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-bottom: 0.875rem;
    margin-bottom: -1px;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--afa-lead);
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.section-tabs__link:hover {
    color: var(--afa-accent);
}

.section-tabs__link.is-active {
    color: var(--afa-accent);
    border-bottom-color: var(--afa-accent);
}

.section-tabs__link:focus-visible {
    outline: 2px solid var(--afa-accent);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ---------------------------------------------------------------------------
   7. Бос күй (empty state) — бұрын үш түрлі жазылған
--------------------------------------------------------------------------- */
.empty-state {
    padding-block: var(--afa-section-y-lg);
    text-align: center;
    color: var(--afa-muted);
}

.empty-state--card {
    padding: var(--afa-gap-xl);
    border: 1px solid var(--afa-border);
    border-radius: 1rem;
    background-color: #fff;
}

/* Мазмұн ағынының ішіндегі қысқа хабар (мыс. «Мазмұн әзірленуде») */
.empty-state--inline {
    padding-block: 0;
    text-align: start;
}

/* ---------------------------------------------------------------------------
   8. Оқуға ыңғайлы ені

   Контейнер бүкіл сайтта БІРДЕЙ (тор бұзылмауы үшін), ал ұзын мәтін
   80rem бойына созылмауы керек — сондықтан мәтіннің ӨЗІ шектеледі.
   Тақырып пен қойынды сол күйі бір сызықта тұрады.
--------------------------------------------------------------------------- */
.prose-measure {
    max-width: var(--afa-measure);
}

/* ---------------------------------------------------------------------------
   9. Көлденең асып кетуден қорғау (мобильді)
--------------------------------------------------------------------------- */
html, body {
    overflow-x: clip;
}