/**
 * layout.css — контейнер, header, footer, grid
 * clubmarket
 */

/* ══════════════════════════════════════════════
   КОНТЕЙНЕР
   ══════════════════════════════════════════════ */
.container {
    width: 100%;
    max-width: 1380px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

@media (max-width: 768px) {
    .container { padding-inline: var(--sp-4); }
}

/* ══════════════════════════════════════════════
   ЗАГАЛЬНИЙ LAYOUT
   ══════════════════════════════════════════════ */
body { padding-top: var(--header-h); }

.main-content {
    flex: 1;
    padding-block: var(--sp-12);
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
/* .site-header керується в menu.css (2-рядкова структура) */

/* .header-inner → .hdr-row в menu.css */

/* ── Логотип ── */
.site-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 40px;
    width: auto;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-name {
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.logo-sub {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    white-space: nowrap;
}

/* .logo-sub — підзаголовок НІКОЛИ не ховається (header.php → .logo-sub) */
@media (max-width: 480px) {
    .logo-name { font-size: var(--text-sm); }
    .logo-sub  { font-size: 9px; }
}

/* ══════════════════════════════════════════════
   МОБІЛЬНИЙ ХЕДЕР — 2 РЯДКИ (≤768px)
   Рядок 1: [лого + назва + підзаголовок]
   Рядок 2: [⊞ фільтри] [🔍 пошук] [☰ бургер]
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Знімаємо фіксовану висоту, даємо автоматичну */
    .site-header { height: auto; }

    /* header-inner переходить у flex-wrap */
    .header-inner {
        flex-wrap: wrap;
        padding-block: var(--sp-3);
        gap: var(--sp-2);
        align-items: center;
    }

    /* Рядок 1: лого займає весь перший рядок */
    .site-logo { flex: 1 1 auto; order: 0; }

    /* Рядок 2: .header-actions займає повну ширину (header.php → .header-actions) */
    .header-actions {
        flex: 0 0 100%;
        order: 1;
        margin-left: 0 !important;
        padding-bottom: var(--sp-2);
    }

    /* 2-рядковий хедер на мобілці: ~130px */
    body { padding-top: 136px; }
    .mobile-menu { top: 130px; }
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.site-footer {
    background: var(--c-primary-darker);
    color: #e2eaf3;
    padding-block: var(--sp-10);
    margin-top: auto;
}

.footer-inner {
    max-width: 1380px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
    display: flex;
    gap: var(--sp-12);
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: var(--sp-8);
}

.footer-bottom {
    max-width: 1380px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.footer-brand { max-width: 280px; }

.footer-logo-name {
    font-size: var(--text-md);
    font-weight: 800;
    color: #fff;
    display: block;
    margin-bottom: var(--sp-1);
}

.footer-logo-sub {
    font-size: var(--text-xs);
    color: rgba(255,255,255,.5);
    display: block;
    margin-bottom: var(--sp-3);
}

.footer-tagline {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.55);
    line-height: 1.5;
    margin: 0;
}

.footer-copy {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.4);
    margin: 0;
}

.footer-dev {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: rgba(255,255,255,.3);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ══════════════════════════════════════════════
   PAGE-LIST — sidebar + cards grid
   ══════════════════════════════════════════════ */
.page-list-wrap {
    max-width: 1380px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
    padding-block: var(--sp-8);
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: var(--sp-6);
    align-items: start;
}

@media (max-width: 1024px) {
    .page-list-wrap {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════
   СТАТИЧНІ СТОРІНКИ
   ══════════════════════════════════════════════ */
.page-static  { max-width: 860px; margin-inline: auto; }
.page-club    { max-width: 1100px; margin-inline: auto; }
.page-404     { display: flex; justify-content: center; padding-block: var(--sp-12); }

.error-wrap   { text-align: center; max-width: 480px; }
.error-code   {
    display: block;
    font-size: 8rem; font-weight: 900;
    line-height: 1; color: var(--c-border);
    letter-spacing: -0.05em; margin-bottom: var(--sp-4);
}
.error-title  { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.error-desc   { color: var(--c-text-muted); line-height: 1.7; margin-bottom: var(--sp-8); }