/* ===== 375px (Small phones) ===== */
@media (max-width: 480px) {
    /* AICODE-NOTE: Hero-тонкая настройка под самые узкие телефоны (≤480px).
       Базовые мобильные размеры заданы в hero.css; здесь — только точечное
       ужатие там, где даже после clamp() остаётся слишком плотно. */
    .hero__title {
        font-size: 1.65rem;
        letter-spacing: 0;
    }

    .hero__subtitle {
        font-size: var(--fs-sm);
    }

    .hero__speech-bubble {
        max-width: 300px;
        padding: 12px 12px;
    }

    .hero__speech-bubble-text {
        font-size: var(--fs-sm);
        line-height: 1.5;
    }

    .hero__photo {
        max-width: 200px;
    }

    .hero__cta {
        font-size: var(--fs-xs);
        padding: 10px 22px;
    }

    .hero__cta-main {
        letter-spacing: 0;
    }

    .tariffs__title {
        font-size: 16px;
        line-height: 1.2;
    }

    .tariff-card__name {
        font-size: var(--fs-xs);
    }

    .contacts__title {
        font-size: var(--fs-md);
    }

    .contacts__btn {
        font-size: var(--fs-xs);
        padding: var(--sp-sm) var(--sp-md);
        min-width: 200px;
    }

    .reviews__title,
    .results__title {
        font-size: var(--fs-md);
    }

    .faq__title {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .review-card {
        padding: var(--sp-md);
    }

    .review-card__slogan {
        font-size: var(--fs-xs);
    }

    .review-card__text {
        font-size: var(--fs-sm);
    }

    .faq-item__question {
        font-size: var(--fs-sm);
        padding: var(--sp-md);
    }

    .faq-item__answer-text {
        font-size: var(--fs-sm);
        padding: 0 var(--sp-md) var(--sp-md);
    }

    /* AICODE-NOTE: Колонки results__grid заданы в results.css (мобила — 3,
       планшет — 6, десктоп — 12). Здесь раньше был override на 2 колонки,
       который ещё и ломал layout (flex vs grid). Оставляю только gap. */
    .results__grid {
        gap: 4px;
    }

    .footer__inner {
        gap: var(--sp-lg);
    }

    .footer__logo-name {
        font-size: var(--fs-xs);
    }
}

/* ===== 481–767px (Large phones / small tablets) ===== */
@media (min-width: 481px) and (max-width: 767px) {
    .hero__title {
        font-size: var(--fs-3xl);
    }

    .tariffs__title {
        font-size: 21px;
    }

    /* AICODE-NOTE: Крупный телефон / малый планшет — 4 колонки в сетке фото. */
    .results__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Tariffs layout fix for small screens ===== */
@media (max-width: 767px) {
    .tariff-card {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ===== Narrow phones (≤380px) — iPhone SE, Galaxy S8 ===== */
@media (max-width: 380px) {
    /* AICODE-NOTE: Ещё более компактные размеры для самых узких экранов,
       чтобы кнопки и тексты не прилипали к краям и к собственным рамкам. */
    .hero__cta {
        font-size: 11px;
        padding: 9px 18px;
    }

    .hero__cta-main {
        letter-spacing: 0;
    }

    .hero__title {
        font-size: 1.45rem;
    }

    .hero__subtitle {
        font-size: 11px;
    }

    .hero__speech-bubble {
        max-width: 280px;
    }

    .contacts__btn {
        min-width: 0;
        width: 100%;
    }
}

/* ===== 1440px+ (Large screens) ===== */
@media (min-width: 1440px) {
    :root {
        --container-max: 1300px;
    }
}