/* ==========================================================================
   Адаптивность: от узкого телефона до большого монитора.
   Отступы и кегль тянутся сами (clamp в токенах), здесь — только то, что
   действительно меняет раскладку: число колонок, плотность, управление.
   ========================================================================== */

/* ------------------------------ большие экраны ---------------------------- */

@media (min-width: 1600px) {
    :root {
        --container: 1520px;
    }
}

/* ---------------------------- планшет и меньше ---------------------------- */

@media (max-width: 1024px) {
    /* Узкая плитка становится половиной строки, широкая — всей строкой */
    .card--small {
        grid-column: span 3;
    }

    .card--medium,
    .card--large {
        grid-column: span 6;
    }

    /* Бренды на планшете и телефоне — по одному в строку: обложка
       в половину экрана превращалась в марку с подписью в столбик */
    .brand-cell {
        grid-column: span 6;
    }

    .brand-card.tile--portrait .project-image {
        aspect-ratio: 4/5;
    }

    .about-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
    }
}

/* ------------------------------- телефоны -------------------------------- */

@media (max-width: 767px) {
    /* На телефоне читают с 30 см — основной текст крупнее */
    body {
        font-size: 17px;
    }

    p,
    .note__text {
        font-size: var(--text-md);
        line-height: 1.7;
    }

    .projects-grid {
        column-gap: var(--space-4);
        row-gap: 2.5rem;
        margin-top: var(--space-6);
    }

    .work-block .projects-grid {
        margin-top: var(--space-5);
    }

    .work-block + .work-block {
        margin-top: var(--space-8);
    }

    .work-company + .work-company {
        margin-top: var(--space-8);
    }

    .project-title {
        font-size: 1.2rem;
    }

    .project-image {
        margin-bottom: var(--space-3);
        /* Во всю ширину вертикальный кадр вытягивался на два экрана */
        max-height: 82svh;
    }

    .card--medium .project-image {
        aspect-ratio: var(--card-ar, 4/3);
    }

    .card--large .project-image {
        aspect-ratio: var(--card-ar, 1/1);
    }


    /* Обложки брендов на телефоне — в собственных пропорциях (их считает
       сервер): плитка во всю ширину, и общая рамка резала вертикальное
       видео по голове, а горизонтальный снимок — по краям. Без размера
       обложка остаётся в спокойной рамке 4:5. */
    .projects-grid .brand-cell .brand-card .project-image {
        aspect-ratio: var(--cover-ar, 4/5);
        max-height: 78svh;
    }

    /* Рамка выделенного бренда на узком экране прижималась к краям
       и читалась как ошибка вёрстки */
    .brand-card--highlight .project-image {
        outline: none;
    }

    .brand-card .project-title {
        font-size: 1.6rem;
    }

    .card--plain {
        padding-top: var(--space-4);
    }

    .card--plain .project-title {
        font-size: 1.15rem;
    }

    .card--plain .project-description {
        font-size: 1rem;
        line-height: 1.65;
    }

    .skills-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .experience-item {
        padding: var(--space-4) 0;
    }

    /* Контакты — столбиком во всю ширину: попасть пальцем проще */
    .contact-links {
        flex-direction: column;
        align-items: stretch;
        max-width: 22rem;
        margin-inline: auto;
    }

    .contact-link {
        width: auto;
    }

    .page-head {
        padding-top: calc(var(--header-h) + var(--space-6));
    }

    /* Соседние разделы: два ряда — «назад» и «дальше» во всю ширину */
    .steps__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .steps__link--prev,
    .steps__link--next {
        grid-column: 1;
    }

    .steps__link--next {
        text-align: left;
        align-items: flex-start;
    }

    .steps__count {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        padding-bottom: var(--space-2);
    }

    /* Подсказка «листайте» на узком экране — плотнее по разрядке */
    .hero .scroll-hint {
        letter-spacing: 0.12em;
    }

    /* Стекло на телефоне легче: сильное размытие на узкой полосе только мылит */
    :root {
        --glass-blur: 14px;
    }
}

/* ------------------------- раскладка плиток по экранам ----------------------
   Телефоны в портрете (iPhone 13 mini — 375, Pro Max — 430, до 599 px):
   одна колонка, каждая плитка во всю ширину. Раньше «маленькие» плитки
   шли по две в ряд шириной ~160 px — вещь было не разглядеть.

   От 600 px (телефон лёжа, iPad mini, iPad, iPad Pro 11 и 12,9 в портрете,
   до 1024 px): две колонки — «маленькие» плитки по две, остальные во всю
   ширину. Шире 1024 (iPad Pro 12,9 лёжа — 1366, ноутбуки) — полная сетка. */
@media (max-width: 599px) {
    .projects-grid > .project-card,
    .projects-grid > .brand-cell {
        grid-column: span 6;
    }

    .projects-grid {
        row-gap: var(--space-7);
    }
}

@media (min-width: 600px) and (max-width: 1024px) {
    .projects-grid {
        column-gap: var(--space-5);
        row-gap: var(--space-7);
    }

    /* Кадр во всю ширину планшета не должен уходить за экран по высоте */
    .project-image {
        max-height: 80svh;
    }

    .project-title {
        font-size: 1.25rem;
    }
}

/* ------------------------------ просмотр фото ----------------------------- */

@media (max-width: 767px) {
    .lightbox {
        padding: calc(4.5rem + env(safe-area-inset-top)) 0 calc(6rem + env(safe-area-inset-bottom));
    }

    .lightbox__stage {
        min-width: 0;
        min-height: 40svh;
    }

    .lightbox__image {
        max-height: calc(100svh - 13rem);
        border-radius: 0;
    }

    /* Стрелки уезжают вниз: по краям они лежали поверх самой фотографии */
    .lightbox__arrow {
        top: auto;
        bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
        margin-top: 0;
        width: 48px;
        height: 48px;
    }

    .lightbox__arrow--prev {
        left: var(--space-4);
    }

    .lightbox__arrow--next {
        right: var(--space-4);
    }

    .lightbox__close {
        top: calc(var(--space-4) + env(safe-area-inset-top));
        right: var(--space-4);
    }

    .lightbox__counter {
        bottom: calc(var(--space-5) + 14px + env(safe-area-inset-bottom));
    }

    .lightbox__caption {
        padding: 0 var(--space-4);
    }
}

/* --------------------------- очень узкие экраны --------------------------- */

@media (max-width: 380px) {
    .steps__title {
        font-size: 1rem;
    }

    .contact-link {
        width: auto;
    }
}

/* ------------------------------- альбомная -------------------------------- */

/* Телефон лёжа: экран низкий, первый экран не должен занимать три высоты */
@media (max-height: 520px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-h) + var(--space-6));
        padding-bottom: var(--space-7);
    }

    .hero .scroll-hint {
        display: none;
    }
}

/* ------------------------------- печать ----------------------------------- */

@media print {
    .site-nav,
    .editor-bar,
    .brand-open,
    .steps,
    .edit-switch,
    .skip-link,
    .gallery__arrow,
    .gallery__zoom,
    .gallery__dots,
    .brand-card__cta {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    body::before,
    .page-backdrop {
        display: none;
    }
}