/**
 * responsive.css — Глобальные адаптивные стили RegionTrade
 *
 * Грузится ГЛОБАЛЬНО, Desktop-first.
 *
 * ВАЖНО: Компонентные адаптивные стили живут в своих файлах:
 * - header.css    → header, top-bar, mobile menu
 * - footer.css    → footer grid, bottom
 * - catalog.css   → product grid, catalog header, subcategories
 * - single-product.css → sp-card, gallery, tabs, delivery, prices
 * - base.css      → CTA card, breadcrumbs, pagination
 *
 * Здесь ТОЛЬКО:
 * - Глобальные изменения (container, section, typography)
 * - Hero (front-page)
 * - Кросс-компонентные правила
 * - Print, reduced-motion, hover:none
 *
 * Брейкпоинты:
 * - 1280px — small desktop
 * - 1024px — tablet landscape
 * -  768px — tablet portrait
 * -  576px — mobile landscape
 * -  420px — mobile portrait
 */


/* ===================================================
   1280px — SMALL DESKTOP
   =================================================== */

@media (max-width: 1280px) {

    :root {
        --container-pad: 1.25rem;
    }

}


/* ===================================================
   1024px — TABLET LANDSCAPE
   =================================================== */

@media (max-width: 1024px) {

    /* Hero */
    .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .hero__visual {
        justify-content: flex-start;
    }

    .hero__visual-card {
        max-width: 100%;
        flex-direction: row;
        align-items: center;
    }

    .hero__title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    .hero__facts {
        gap: var(--gap-xl);
    }

    /* Advantages */
    .advantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid fallback (если .grid-N всё ещё используется) */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA (home) */
    .home-cta__inner {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }
}


/* ===================================================
   768px — TABLET PORTRAIT
   =================================================== */

@media (max-width: 768px) {

    /* Глобальные отступы */
    .section {
        padding-top: var(--gap-2xl);
        padding-bottom: var(--gap-2xl);
    }

    /* Hero */
    .hero {
        padding: var(--gap-2xl) 0;
    }

    .hero__visual-card {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__facts {
        gap: var(--gap-lg);
        flex-wrap: wrap;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

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

    /* Section header */
    .section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-sm);
    }

    /* Subcategories: горизонтальный скролл */
    .catalog-subcats__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--gap-sm);
        scrollbar-width: none;
    }

    .catalog-subcats__list::-webkit-scrollbar {
        display: none;
    }

    .catalog-subcats__item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Modal */
    .modal {
        padding: var(--gap-sm);
        align-items: flex-end;
    }

    .modal__container {
        max-height: 85vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .modal__container--wide {
        max-width: 100%;
    }

    .modal__body {
        padding: var(--gap-lg);
    }

    /* Breadcrumbs: скролл */
    .breadcrumbs__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .breadcrumbs__list::-webkit-scrollbar {
        display: none;
    }

    .breadcrumbs__item {
        white-space: nowrap;
        flex-shrink: 0;
    }
}


/* ===================================================
   576px — MOBILE LANDSCAPE
   =================================================== */

@media (max-width: 576px) {

    /* Grid: всё в 1 колонку */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Hero */
    .hero__title {
        font-size: 1.5rem;
    }

    .hero__fact-num {
        font-size: var(--fs-xl);
    }

    /* Categories (home) */
    .home-categories__grid {
        grid-template-columns: 1fr;
    }

    .cat-card {
        padding: var(--gap-md);
    }

    /* Advantages: горизонтальные карточки */
    .advantages__grid {
        grid-template-columns: 1fr;
    }

    .advantage-card {
        text-align: left;
        display: flex;
        flex-direction: row;
        gap: var(--gap-md);
        padding: var(--gap-md);
    }

    .advantage-card__icon {
        margin: 0;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    /* Product Card: горизонтальный layout */
    .product-card {
        flex-direction: row;
        align-items: stretch;
    }

    .product-card__image-link {
        width: 120px;
        flex-shrink: 0;
    }

    .product-card__image {
        aspect-ratio: 1 / 1;
        height: 100%;
    }

    .product-card__content {
        padding: var(--gap-sm) var(--gap-sm) 0;
    }

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

    .product-card__desc {
        display: none;
    }

    .product-card__footer {
        padding: var(--gap-sm);
    }

    .product-card__actions {
        flex-direction: column;
    }

    .product-card__price-value {
        font-size: var(--fs-base);
    }

    /* Cart items */
    .cart-item {
        flex-wrap: wrap;
    }

    .cart-item__image {
        width: 50px;
        height: 50px;
    }

    .cart-item__title {
        white-space: normal;
    }

    /* Forms */
    .form__input {
        padding: 10px 14px;
        font-size: var(--fs-sm);
    }

    .form__submit {
        padding: 14px;
    }

    /* Top Bar: минимальный */
    .top-bar {
        font-size: 11px;
    }

    .top-bar__left {
        width: 100%;
    }

    .top-bar__right {
        display: none;
    }
}


/* ===================================================
   420px — MOBILE PORTRAIT
   =================================================== */

@media (max-width: 420px) {

    :root {
        --container-pad: 0.75rem;
    }

    /* Typography */
    h1 {
        font-size: var(--fs-xl);
    }

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

    .section__title {
        font-size: var(--fs-lg);
    }

    /* Hero */
    .hero__title {
        font-size: 1.3rem;
    }

    .hero__facts {
        gap: var(--gap-md);
    }

    .hero__fact-num {
        font-size: var(--fs-lg);
    }

    .hero__fact-text {
        font-size: 10px;
    }

    /* Header */
    .header__inner {
        height: 56px;
        gap: var(--gap-sm);
    }

    .header__logo-img {
        max-height: 32px;
    }

    .header__cart {
        width: 38px;
        height: 38px;
    }

    /* Product Card: обратно в колонку */
    .product-card {
        flex-direction: column;
    }

    .product-card__image-link {
        width: 100%;
    }

    .product-card__image {
        aspect-ratio: 16 / 10;
    }

    /* Modal */
    .modal__body {
        padding: var(--gap-md);
    }

    .modal__title {
        font-size: var(--fs-lg);
    }

    /* Mobile Menu: полная ширина */
    .mobile-menu__panel {
        width: 100%;
        max-width: 100%;
        padding: var(--gap-lg);
    }
}


/* ===================================================
   PRINT STYLES
   =================================================== */

@media print {

    .top-bar,
    .header,
    .mobile-menu,
    .scroll-top,
    .modal,
    .footer__socials,
    .hero__actions,
    .product-card__actions,
    .sp-actions,
    .catalog-cta,
    .home-cta,
    .breadcrumbs-section,
    .pagination,
    .toast {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .product-card {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
        flex-direction: column;
    }

    .sp-card {
        grid-template-columns: 1fr 1fr;
    }

    .footer {
        background: #fff;
        color: #000;
        border-top: 2px solid #000;
    }

    .prose {
        max-width: 100%;
    }
}


/* ===================================================
   REDUCED MOTION (accessibility)
   =================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero::before {
        display: none;
    }
}


/* ===================================================
   HOVER: NONE (touch devices)
   =================================================== */

@media (hover: none) {

    .product-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .cat-card:hover {
        transform: none;
    }

    .advantage-card:hover {
        transform: none;
    }

    .btn--primary:hover {
        transform: none;
    }

    .sp-delivery__card:hover {
        transform: none;
    }

    .catalog-subcats__item:hover {
        border-color: var(--c-border);
        background: var(--c-white);
    }
}