/*
Theme Name: studio-b77
Theme URI: https://b77.studio
Author: Kirill Blinovskii
Author URI: https://b77.studio
Description: b77.studio theme
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-b77
*/

/* ============================================================
   1. Шрифты (self-host). Файлы .woff2 — в /fonts/.
   ============================================================ */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/montserrat-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/montserrat-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/montserrat-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lora-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/lora-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lora-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* ============================================================
   2. Токены (design system v1)
   ============================================================ */
:root {
    /* Цвет */
    --bg: #fffefd;
    /*--surface: #FCFAF5;*/
    /*--surface: #fcfdff;*/
    --surface: #fbfcfd;
    /*--surface-alt: #F2ECE1;*/
    --surface-alt: #fffdfb;
    --navy: #32445E;
    --navy-deep: #28323F;
    --ink: #2A323C;
    --muted: #6E7789;
    --mono-label: #9A8F7C;
    --red: #CA0813;
    --red-hover: #A0060E;
    --on-dark: #F8F5EF;
    --on-dark-muted: #C3CBD7;
    --border: #d0d6e3;
    --border-strong: #8897ae;

    /* Шрифты */
    --font-head: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body: 'Lora', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace, sans-serif;

    /* Типографическая шкала */
    --fs-display: clamp(2rem, 5vw, 3.5rem);
    --fs-h1: clamp(1.75rem, 4vw, 2.75rem);
    --fs-h2: clamp(1.5rem, 3vw, 1.9rem);
    --fs-h3: 1.125rem;
    --fs-big: clamp(1.5rem, 4vw, 2rem);
    --fs-lead: 1.1875rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.875rem;
    --fs-label: 0.75rem;

    /* Межстрочные и трекинг */
    --lh-tight: 1.05;
    --lh-head: 1.15;
    --lh-body: 1.7;
    --ls-display: -0.02em;
    --ls-label: 0.08em;

    /* Отступы (база 4px) */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    --section-y: clamp(2.5rem, 3rem, 4rem);

    /* Радиусы */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Layout */
    --container: 1180px;
    --measure: 68ch;

    /* Прочее */
    --transition: 500ms ease;
    --shadow: none;
}

/* ============================================================
   3. Сброс и база
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--navy);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--navy-deep);
}

.red-color {
    color: var(--red);
}

.red-dark-color {
    color: var(--red-hover);
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--navy);
    line-height: var(--lh-head);
    margin: 0 0 var(--space-md);
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: var(--ls-display);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
}

p {
    margin: 0 0 var(--space-md);
}

/* Метка / кикер (mono) */
.kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
}

/* Красная точка — поплакатный мотив */
.dot {
    color: var(--red);
}

/* Доступность */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: var(--space-md);
    top: var(--space-md);
    z-index: 100;
    background: var(--navy);
    color: var(--on-dark);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* ============================================================
   4. Layout
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.section {
    padding-block: var(--section-y);
    margin-top: var(--space-md);
}

main {
    display: block;
}

/* ============================================================
   5. Кнопки
   ============================================================ */
.btn {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-body);
    text-decoration: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.btn-primary {
    background: var(--red);
    color: var(--on-dark);
    border: none;
    padding: 0.875rem 1.75rem;
}

.btn-primary:hover {
    background: var(--red-hover);
    color: var(--on-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--border-strong);
    padding: 0.75rem 1.625rem;
}

.btn-secondary:hover {
    background: var(--surface);
    color: var(--navy);
}

/* Иконки (инлайн SVG, Tabler) */
.icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    flex: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn .icon {
    width: 1.1em;
    height: 1.1em;
}

.section-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

.section-more .icon {
    width: 1em;
    height: 1em;
}

/* ============================================================
   6. Шапка
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-height: 72px;
}

.site-branding {
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
}

.site-brand {
    font-weight: 700;
    color: var(--navy);
    font-family: var(--font-head);
}

.site-branding .studio {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--muted);
    line-height: 1;
}

.site-brand .dot {
    display: inline-block;
    transform: translateX(-1px);
}

.site-since {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    color: var(--muted);
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--navy);
    text-decoration: none;
}

.main-nav a:hover, .main-nav .current-menu-item > a {
    color: var(--navy-deep);
    border-bottom: 1.5px solid var(--red);
}

.lang-switcher {
    display: flex;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    margin-top: 5px;
}

.lang-switcher a {
    color: var(--mono-label);
    text-decoration: none;
}

.lang-switcher .current-lang, .lang-switcher a:hover {
    color: var(--navy);
}

/* Бургер ↔ красный крестик (без JS, checkbox hack) */
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    cursor: pointer;
    width: 28px;
    height: 22px;
    position: relative;
    z-index: 60;
}

.burger, .burger::before, .burger::after {
    position: absolute;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--navy);
    transition: transform var(--transition), opacity var(--transition), background var(--transition);
}

.burger {
    top: 50%;
    transform: translateY(-50%);
}

.burger::before {
    content: "";
    top: -8px;
}

.burger::after {
    content: "";
    top: 8px;
}

/* Открыто: линии складываются в красный крест */
.nav-toggle:checked ~ .nav-toggle-label .burger {
    background: transparent;
}

.nav-toggle:checked ~ .nav-toggle-label .burger::before {
    background: var(--red);
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle:checked ~ .nav-toggle-label .burger::after {
    background: var(--red);
    top: 0;
    transform: rotate(-45deg);
}

.breadcrumbs {
    margin-top: var(--space-xl);
    font-size: var(--fs-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    font-weight: 300;
    color: var(--muted);
}

.breadcrumbs a {
    color: var(--muted);
}

.breadcrumbs a:hover {
    text-decoration-color: var(--red);
}

/* ============================================================
   7. Контент (Gutenberg / записи)
   ============================================================ */

.entry-content {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-4xl);
}

.entry-content > * {
    margin-block: 0 var(--space-md);
}

.entry-content h2 {
    margin-top: var(--space-2xl);
}

.entry-content h3 {
    margin-top: var(--space-xl);
}

.entry-content blockquote {
    margin: var(--space-xl) 0;
    padding-left: var(--space-lg);
    border-left: 2px solid var(--red);
    font-style: italic;
    color: var(--ink);
}

.entry-content code, .entry-content pre {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}

.entry-content pre {
    background: var(--surface-alt);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow: auto;
}

.entry-content figure {
    margin: var(--space-xl) 0;
}

.entry-content :is(.alignwide) {
    max-width: var(--container);
}

.entry-content :is(.alignfull) {
    max-width: none;
}

/* Список записей (блог / заметки) */
.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xl);
}

.post-list .entry-title {
    margin-bottom: var(--space-xs);
}

.post-list .entry-title a {
    color: var(--navy);
    text-decoration: none;
}

.entry-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--mono-label);
    transform: translateY(-5px);
}

/* Пагинация */
.pagination {
    margin-top: var(--space-3xl);
    display: flex;
    justify-content: end;
    font-family: var(--font-mono);
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.pagination .page-numbers {
    font-size: var(--fs-big);
    text-decoration: none;
}
.pagination .prev, .pagination .next {
    font-size: var(--fs-body);
}

.pagination .page-numbers.current, .pagination .page-numbers:hover {
    color: var(--red-hover);
}

/* ============================================================
   8. Подвал
   ============================================================ */
.site-footer {
    background: var(--navy-deep);
    color: var(--on-dark);
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-xl);
    margin-top: var(--space-2xl);
}

.site-footer a {
    color: var(--on-dark);
}

.site-footer .footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xl);
    justify-content: space-between;
}

.site-footer .footer-brand {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: var(--ls-display);
}

.footer__menu-wrapper {
    margin-top: var(--space-2xl);
}
.site-footer nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-sm);
}

.site-footer nav a {
    font-family: var(--font-head);
    font-size: var(--fs-small);
    text-decoration: none;
    color: var(--on-dark-muted);
}

.site-footer nav a:hover {
    color: var(--on-dark);
}

.site-footer .footer-bottom {
    margin-top: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--fs-small);
    color: var(--on-dark-muted);
    display: flex;
    justify-content: space-between;
}
.footer__c2a-wrapper {
    display: flex;
    flex-direction: column;
}
.footer__c2a-wrapper > a {
    margin-bottom: var(--space-sm);
}
/* ============================================================
   9. Главная (front-page)
   ============================================================ */

/* Hero */
.hero-title {
    font-size: var(--fs-display);
    margin-top: var(--space-sm);
}

.hero-lead {
    font-size: var(--fs-lead);
    color: var(--ink);
    margin-top: var(--space-md);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.hero-value {
    font-style: italic;
    color: var(--muted);
    max-width: 56ch;
    margin-top: var(--space-xl);
    margin-bottom: 0;
    padding-left: var(--space-md);
    border-left: 2px solid var(--red);
}

/* Заголовок секции с ссылкой */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.section-more {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-small);
    text-decoration: none;
    white-space: nowrap;
    color: var(--red);
}

/* Что я делаю */
/* 4 карточки в ряд; оставшиеся центрируются (6 → 4 + 2 по центру) */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

.section-foot {
    display: flex;
    justify-content: end;
    margin-top: var(--space-xl);
}

.services-grid .service-card {
    flex: 0 1 calc((100% - 3 * var(--space-md)) / 4);
}

.service-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.service-card .icon {
    width: 24px;
    height: 24px;
    color: var(--red);
}

.service-card h3 {
    margin: var(--space-md) 0 var(--space-2xs);
}

.service-card p {
    color: var(--muted);
    font-size: var(--fs-small);
    line-height: 1.5;
    margin: 0;
}

/* Работы: сетка (два варианта ширины карточки) */
.works-grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1fr;                 /* вариант A — карточка на всю ширину */
}

/* вариант B — две карточки в ряд (~50% минус гэп) */
.works-grid--split {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}

/* ---- Карточка работы (горизонтальная) ----
   DOM-порядок = мобильная раскладка: категория → текст → обложка → ссылка.
   На десктопе grid-areas уводят обложку вправо, а ссылку — вниз левой колонки. */
.work-card {
    display: grid;
    grid-template-columns: 1fr;                 /* мобильная раскладка по умолчанию */
    gap: var(--space-md);
    min-width: 0;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: border-color var(--transition);
}

.work-card:hover {
    border-color: var(--border-strong);
}

/* Категория — красная метка с красной чертой слева */
.work-cat, span.work-cat-wrapper a {
    justify-self: start;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    padding-left: var(--space-sm);
    border-left: 3px solid var(--red);
}

.work-cat:hover {
    color: var(--red-hover);
}

/* Текстовая колонка */
.work-body {
    min-width: 0;
}

.work-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-head);
    letter-spacing: var(--ls-display);
}

.work-title a {
    color: var(--navy);
    text-decoration: none;
}

.work-title a:hover {
    color: var(--navy-deep);
}

.work-excerpt {
    color: var(--muted);
    margin: 0 0 var(--space-lg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Теги — чипы с иконкой */
.work-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.work-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--navy);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.25rem var(--space-sm);
    white-space: nowrap;
}

.work-tag .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--navy);
}

/* Обложка */
.work-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-thumb--lock {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-deep);
}

.work-thumb--lock span {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

/* Ссылка «Смотреть проект» */
.work-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--navy);
    text-decoration: none;
}

.work-link .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--red);
    transition: transform var(--transition);
}

.work-link:hover {
    color: var(--navy-deep);
}

.work-link:hover .icon {
    transform: translateX(3px);
}

/* Десктоп: две колонки — обложка справа во всю высоту, ссылка внизу слева */
@media (min-width: 768px) {
    .work-card:not(.work-card--nomedia) {
        grid-template-columns: 1.15fr 0.85fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "cat    media"
            "body   media"
            "spacer media"
            "link   media";
        column-gap: var(--space-xl);
        row-gap: var(--space-sm);
        padding: var(--space-xl);
    }

    .work-card:not(.work-card--nomedia) .work-cat   { grid-area: cat; }
    .work-card:not(.work-card--nomedia) .work-body  { grid-area: body; }
    .work-card:not(.work-card--nomedia) .work-thumb { grid-area: media; }
    .work-card:not(.work-card--nomedia) .work-link  { grid-area: link; align-self: end; }

    /* Обложка тянется на всю высоту карточки */
    .work-card:not(.work-card--nomedia) .work-thumb {
        aspect-ratio: auto;
        min-height: 240px;
    }

    .work-card--nomedia {
        padding: var(--space-xl);
    }

    /* Чередование: у чётных карточек полноширинной сетки обложка слева */
    .works-grid:not(.works-grid--split) > .work-card:nth-child(even):not(.work-card--nomedia) {
        grid-template-columns: 0.85fr 1.15fr;
        grid-template-areas:
            "media cat"
            "media body"
            "media spacer"
            "media link";
    }
}

/* Чем отличаюсь */
.difference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-xl);
}

.difference-item h3 {
    margin-bottom: var(--space-xs);
}

.difference-item p {
    color: var(--muted);
    margin: 0;
}

/* Отношения / цифры / отзывы */
.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3xl);
    margin: 0 0 var(--space-3xl);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-display);
    color: var(--navy);
    line-height: 1;
}

.stat-cap {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--red-hover);
    margin-top: var(--space-xs);
}

.reviews, .blog-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--space-3xl)), 1fr));
    gap: var(--space-2xl);
}

.review, .blog-post {
    margin-bottom: var(--space-md);
    text-decoration: none;
}

.review-title, .blog-post__title {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--navy);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid;
    border-bottom-color: var(--border);
    transition: all var(--transition);
}

.review:hover .review-title, .blog-post:hover .blog-post__title {
    border-bottom-color: var(--red-hover);
}

.review-excerpt {
    font-style: italic;
}

.single-review__title {
    margin-bottom: var(--space-xl);
}

/* Принципы (тёмная плашка) */
.principles {
    background: var(--navy-deep);
    color: var(--on-dark);
    padding-block: var(--section-y);
}

.principles-list {
    list-style: none;
    margin: var(--space-lg) 0 0;
    padding: 0;
    max-width: var(--measure);
    display: grid;
    gap: var(--space-md);
    font-size: var(--fs-lead);
}

.principles-list .dot {
    color: var(--red);
    font-weight: 700;
}

/* Финальный CTA */
.final-cta {
    margin-bottom: var(--space-4xl);
}

.final-cta h2 {
    font-size: var(--fs-h1);
}

.final-cta-lead {
    color: var(--muted);
    margin-bottom: var(--space-xl);
}

/* ============================================================
   10. Работы: архив и кейс
   ============================================================ */
.archive-head {
    margin-bottom: var(--space-xl);
}

.archive-head h1 {
    margin-top: var(--space-lg);
}

.work-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
}

.work-filter a {
    color: var(--mono-label);
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
}

.work-filter a:hover, .work-filter a.is-active {
    color: var(--navy);
    border-bottom: 1.5px solid var(--red);
}

/* Кейс */
.single-project-head {
    margin-bottom: var(--space-xl);
}

.single-project-head h1 {
    margin-top: var(--space-sm);
}

.project-cover {
    margin: 0 0 var(--space-2xl);
}

.project-cover img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.nda-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    color: var(--mono-label);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-2xl);
}

.project-stack {
    margin-top: var(--space-2xl);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--mono-label);
}

.single-project-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
}
@media (max-width: 920px) {
    .section-head {
        margin-bottom: var(--space-md);
    }
    .services-grid .service-card {
        flex-basis: calc((100% - var(--space-md)) / 2);
    }
}


@media (max-width: 768px) {
    .section {
        padding-block: var(--space-lg);
        margin-top: var(--space-xl);
    }
    .section.hero {
        margin-top: var(--space-xs);
    }
    /* На мобильном: языки слева, бургер справа (на десктопе — как есть). */
    .nav-toggle-label {
        display: block;
        order: 2;
    }
    .lang-switcher {
        order: 1;
        margin-top: 0;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(80vw, 320px);
        background: var(--surface);
        border-left: 1px solid var(--border);
        padding: calc(72px + var(--space-xl)) var(--space-xl) var(--space-xl);
        transform: translateX(100%);
        transition: transform var(--transition);
        z-index: 40;
        overflow-y: auto;
    }

    .nav-toggle:checked ~ .main-nav {
        transform: translateX(0);
    }

    .main-nav ul {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .main-nav a {
        font-size: var(--fs-body);
    }

    .reviews, .blog-posts {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .stats {
        justify-content: start;
        gap: var(--space-xl);
        margin: 0 0 var(--space-3xl);
    }
    .stat {
        align-items: start;
    }

    .breadcrumbs {
        margin-top: var(--space-lg);
    }

    .work-filter {
        gap: var(--space-xs);
    }
    .single-review__title {
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
    }
    .pagination {
        margin-top: var(--space-xl);
    }
    .site-footer .footer-bottom {
        flex-direction: column;
    }
    .site-footer .footer-bottom > div:first-child {
        margin-bottom: var(--space-sm);
    }
}

@media (max-width: 560px) {
    .services-grid .service-card {
        flex-basis: 100%;
    }
}