/* =============================================
   leo-mobile.css
   Полная адаптация под iPhone & Android
   Breakpoints: 480 / 640 / 768 / 900 / 1024
   ============================================= */

/* ════════════════════════════════════════════
   БАЗОВЫЕ МОБИЛЬНЫЕ УЛУЧШЕНИЯ
   Работают на всех экранах < 1024px
════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Отключаем десктопный nav — показываем бургер */
  .header-nav { display: none; }
  .burger-btn { display: flex; }

  /* Шапка */
  .header-wrap { gap: var(--sp-4); }

  /* Логотип — чуть меньше */
  .leo-logo-img { height: 36px; }

  /* Карточки — 3 в ряд */
  .grid-products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }

  /* Категории — 3 в ряд */
  .cat-grid { grid-template-columns: repeat(3, 1fr); }

  /* Секция бренда */
  .brand-about-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════
   ПЛАНШЕТЫ — 768px – 900px
════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Карточки — 2 в ряд */
  .grid-products { grid-template-columns: repeat(2, 1fr); }

  /* Категории — 2+2+1 */
  .cat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Lookbook */
  .lookbook-card { width: clamp(190px, 40vw, 280px); }

  /* Outfit builder */
  .outfit-grid { grid-template-columns: 1fr 1fr; }
  .outfit-hero-card { grid-row: span 1; }

  /* Stats bar */
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }

  /* Cinema caption — less right padding */
  .cinema-caption { padding-right: calc(var(--container-pad) + 100px); }

  /* Instagram grid — 4 columns */
  .ig-grid { grid-template-columns: repeat(4, 1fr); }

  /* Chapter labels hidden on mid */
  .cinema-chapter-label { display: none; }

  /* About section */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ════════════════════════════════════════════
   МАЛЕНЬКИЕ ПЛАНШЕТЫ / БОЛЬШИЕ ТЕЛЕФОНЫ
   640px – 768px
════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Header ── */
  :root { --header-h: 58px; }

  .leo-logo-img  { height: 32px; }
  .leo-logo-sub  { display: none; }  /* скрываем подпись */
  .hdr-btn { width: 36px; height: 36px; }

  /* ── Announcement bar ── */
  .announce-bar {
    font-size: 10px;
    padding: 8px var(--sp-4);
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
  }
  .announce-bar .announce-sep:first-of-type,
  .announce-bar .announce-sep { display: none; }
  .announce-close { right: var(--sp-3); }

  /* ── Body shift ── */
  body.has-announce-bar { padding-top: calc(var(--header-h) + 36px); }
  body.has-announce-bar .leo-header { top: 36px; }

  /* ── Cinema Hero ── */
  .cinema-hero { min-height: 100svh; }

  /* Caption — full width, bottom */
  .cinema-caption {
    padding-right: var(--container-pad);
    padding-bottom: calc(clamp(30px,6vh,60px) + var(--sp-16));
  }
  .cinema-title {
    font-size: clamp(2.2rem, 11vw, 4rem);
    margin-bottom: var(--sp-4);
  }
  .cinema-subtitle {
    font-size: 10px;
    white-space: normal;
    letter-spacing: 0.1em;
    margin-bottom: var(--sp-6);
  }
  .cinema-cta { flex-direction: column; gap: var(--sp-2); }
  .btn-cinema-primary,
  .btn-cinema-ghost {
    padding: 0.75rem var(--sp-6);
    font-size: 11px;
    justify-content: center;
  }

  /* Hide chapter dots on small screens */
  .cinema-chapters,
  .cinema-chapters-sep { display: none; }

  /* Progress bar — keep, move closer to edge */
  .cinema-progress {
    right: var(--sp-5);
    bottom: calc(clamp(30px,6vh,60px) + var(--sp-6));
  }

  /* ── Marquee ── */
  .marquee-inner { animation-duration: 20s; }
  .marquee-item-leo { font-size: 10px; }

  /* ── Product grid — 2 columns ── */
  .grid-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  /* Smaller product card text */
  .product-name-leo { font-size: 0.8rem; }
  .product-label    { font-size: 9px; }
  .price-current,
  .price-sale       { font-size: 0.875rem; }
  .price-old        { font-size: 0.75rem; }

  /* Size chips on mobile — fewer, smaller */
  .product-quick-add { flex-wrap: wrap; gap: 3px; }
  .size-chip-leo {
    padding: 4px 8px;
    font-size: 9px;
    min-width: 34px;
  }

  /* ── Category grid ── */
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }

  /* ── Section titles ── */
  .section-title-leo { font-size: clamp(1.4rem, 5vw, 2rem); }
  .section-eyebrow   { font-size: 9px; }

  /* ── Autumn editorial ── */
  .autumn-editorial { min-height: 70vh; }
  .autumn-editorial-title { font-size: clamp(2rem, 8vw, 3rem); }

  /* ── Lookbook ── */
  .lookbook-card { width: clamp(160px, 45vw, 240px); aspect-ratio: 2/3; }
  .lookbook-title { font-size: var(--text-xl); }

  /* ── Outfit grid — 2 ── */
  .outfit-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

  /* ── Stats bar ── */
  .stats-bar  { padding: var(--sp-6) var(--container-pad); }
  .stat-num   { font-size: clamp(1.6rem, 6vw, 2.5rem); }
  .stat-label { font-size: 9px; }

  /* ── Instagram grid — 3 columns ── */
  .ig-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Sale banner ── */
  .sale-banner { padding: var(--sp-12) var(--container-pad); }
  .sale-badge-big { font-size: clamp(3rem, 15vw, 7rem); }

  /* ── Features strip ── */
  .features-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }
  .feature-icon { font-size: 1.8rem; }
  .feature-title { font-size: var(--text-sm); }

  /* ── Footer ── */
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-newsletter { padding: var(--sp-8) var(--sp-6); }
  .footer-nl-form { flex-direction: column; gap: var(--sp-3); max-width: 100%; }
  .footer-nl-input { border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.15); padding: var(--sp-3) var(--sp-4); }
  .footer-nl-btn { border-radius: var(--r-sm); padding: var(--sp-3); }

  /* ── WhatsApp ── */
  .wa-float { bottom: var(--sp-5); right: var(--sp-5); }
  .wa-btn   { width: 48px; height: 48px; }

  /* ── Back to top ── */
  .back-top { bottom: 80px; right: var(--sp-5); width: 40px; height: 40px; }

  /* ── Mobile nav ── */
  .mobile-nav { width: min(320px, 85vw); }
  .mobile-nav-link { font-size: var(--text-sm); padding: var(--sp-4) var(--sp-6); }
}


/* ════════════════════════════════════════════
   АЙФОНЫ — до 480px (iPhone SE, 12, 13, 14, 15)
════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Header ── */
  :root {
    --header-h: 54px;
    --container-pad: 1rem;
    --section-pad: 2.5rem;
  }

  .leo-logo-brand { font-size: 1.1rem; }
  .leo-logo-img   { height: 28px; }

  /* ── Announcement ── */
  .announce-bar { font-size: 9px; padding: 7px var(--sp-3); }

  /* ── Cinema hero ── */
  .cinema-title  { font-size: clamp(1.9rem, 13vw, 3rem); line-height: 1.05; }
  .cinema-location {
    font-size: 8px;
    padding: 3px 10px;
    margin-bottom: var(--sp-3);
  }
  .cinema-subtitle { margin-bottom: var(--sp-4); }
  .cinema-cta      { gap: var(--sp-2); }
  .btn-cinema-primary { padding: 0.65rem var(--sp-5); font-size: 10px; }
  .btn-cinema-ghost   { padding: 0.65rem var(--sp-5); font-size: 10px; }

  /* Scroll indicator hidden on small phones */
  .cinema-scroll { display: none; }

  /* ── Product grid — 2 columns tight ── */
  .grid-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }

  /* Product card — compact */
  .product-card-leo { border-radius: var(--r-sm); }
  .product-info-leo { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .product-name-leo { font-size: 0.75rem; line-height: 1.35; }
  .product-label    { font-size: 8px; margin-bottom: 2px; }
  .price-current    { font-size: 0.85rem; }
  .price-sale       { font-size: 0.85rem; }
  .price-old        { font-size: 0.7rem; }

  /* Size chips on phone — hide inside card, show on tap later */
  .size-chip-leo {
    padding: 3px 6px;
    font-size: 8px;
    min-width: 28px;
  }

  /* Product wish button */
  .product-wish { width: 32px; height: 32px; top: var(--sp-2); right: var(--sp-2); }

  /* ── Category grid — 2 col ── */
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
  .cat-info h3 { font-size: var(--text-sm); }
  .cat-info a  { font-size: 9px; }

  /* ── Section headers ── */
  .section-title-leo { font-size: clamp(1.25rem, 7vw, 1.8rem); }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .section-link-leo { font-size: 10px; }

  /* ── Marquee ── */
  .marquee-item-leo { font-size: 9px; letter-spacing: 0.12em; }

  /* ── Autumn editorial ── */
  .autumn-editorial         { min-height: 55vh; }
  .autumn-editorial-title   { font-size: clamp(1.7rem, 10vw, 2.5rem); line-height: 1.1; }
  .autumn-editorial-sub     { font-size: 10px; margin-bottom: var(--sp-5); }
  .autumn-editorial-eyebrow { font-size: 8px; margin-bottom: var(--sp-2); }
  .autumn-editorial-content { padding: var(--sp-6); }

  /* ── Lookbook strip ── */
  .lookbook-card {
    width: clamp(140px, 58vw, 200px);
    aspect-ratio: 3/4;
  }
  .lookbook-card-name  { font-size: var(--text-sm); }
  .lookbook-card-price { font-size: 11px; }
  .lookbook-card-label { font-size: 8px; }
  .lookbook-head       { padding-inline: var(--container-pad); }
  .lookbook-title      { font-size: var(--text-lg); }

  /* ── Outfit grid — single column ── */
  .outfit-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .outfit-hero-card,
  .outfit-small-card { aspect-ratio: 4/3; }

  /* ── Stats bar ── */
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--sp-6) var(--sp-4);
    gap: 0;
  }
  .stat-item { padding: var(--sp-4) var(--sp-2); }
  .stat-num  { font-size: 1.8rem; }
  .stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.15); }

  /* ── Instagram grid — 2 cols ── */
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }

  /* ── Sale banner ── */
  .sale-eyebrow   { font-size: 9px; }
  .sale-badge-big { font-size: clamp(3rem, 18vw, 6rem); }
  .sale-subtitle  { font-size: var(--text-sm); }

  /* ── Features ── */
  .features-strip { grid-template-columns: repeat(2, 1fr); padding: var(--sp-6); gap: var(--sp-5); }
  .feature-icon   { font-size: 1.5rem; }
  .feature-title  { font-size: 11px; }
  .feature-desc   { font-size: 10px; }

  /* ── Footer ── */
  .footer-main-grid    { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-brand-col    { grid-column: auto; }
  .footer-brand-name   { font-size: var(--text-xl); }
  .footer-brand-desc   { font-size: var(--text-xs); }
  .footer-col-title    { font-size: var(--text-sm); }
  .footer-col ul li a  { font-size: var(--text-xs); }
  .footer-bottom-bar   { flex-direction: column; gap: var(--sp-2); text-align: center; font-size: 10px; }

  /* ── WhatsApp ── */
  .wa-float    { bottom: 72px; right: var(--sp-4); }
  .wa-tooltip  { display: none; }

  /* ── Back to top ── */
  .back-top { bottom: 76px; right: var(--sp-4); width: 38px; height: 38px; }

  /* ── Mobile nav ── */
  .mobile-nav       { width: 100%; border-radius: 0; }
  .mobile-nav-link  { padding: var(--sp-4) var(--container-pad); }
}


/* ════════════════════════════════════════════
   МАЛЕНЬКИЕ АЙФОНЫ — iPhone SE (375px)
════════════════════════════════════════════ */
@media (max-width: 390px) {

  .cinema-title { font-size: clamp(1.7rem, 14vw, 2.5rem); }

  .grid-products { gap: 6px; }

  .product-info-leo { padding: var(--sp-2); }
  .product-name-leo { font-size: 0.7rem; }

  /* Category — still 2 col but tight */
  .cat-grid { gap: 6px; }

  /* Stats — 2x2 */
  .stat-num { font-size: 1.6rem; }

  .footer-nl-input { font-size: 13px; }
}


/* ════════════════════════════════════════════
   SAFE AREA — iPhone notch & Dynamic Island
   (iPhone X, 11, 12, 13, 14, 15)
════════════════════════════════════════════ */
@supports (padding: max(0px)) {

  .leo-header {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .leo-footer {
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  }

  .mobile-nav {
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }

  .wa-float {
    bottom: max(var(--sp-5), calc(env(safe-area-inset-bottom) + var(--sp-4)));
    right:  max(var(--sp-4), env(safe-area-inset-right));
  }

  .back-top {
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
  }

  .cinema-hero {
    /* учитываем Dynamic Island */
    padding-top: max(0px, env(safe-area-inset-top));
  }

  .announce-bar {
    padding-left:  max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
  }
}


/* ════════════════════════════════════════════
   TOUCH IMPROVEMENTS
   Лучшее поведение нажатий на мобиле
════════════════════════════════════════════ */
@media (hover: none) {

  /* На тач-экранах hover-эффекты активируем иначе */
  .product-img-alt      { opacity: 0 !important; }
  .product-quick-add    { transform: translateY(0) !important; opacity: 1 !important; background: rgba(250,248,243,0.95) !important; }

  /* Category cards — overlay всегда видна немного */
  .cat-overlay { opacity: 0.35 !important; }
  .cat-info    { transform: translateY(0) !important; opacity: 1 !important; }

  /* Outfit shop btn — always visible on touch */
  .outfit-shop-btn { transform: translateY(0) !important; }

  /* Lookbook card overlay */
  .lookbook-card-overlay { opacity: 1 !important; }

  /* Remove hover pseudo-state delays */
  * { -webkit-tap-highlight-color: transparent; }

  /* Увеличиваем зоны нажатия */
  .hdr-btn      { min-width: 44px; min-height: 44px; }
  .burger-btn   { min-width: 44px; min-height: 44px; }
  .size-chip-leo { min-height: 36px; }
  .cat-tab      { min-height: 44px; }
  .mobile-nav-link { min-height: 48px; }

  /* Smooth scroll on iOS */
  .lookbook-strip { -webkit-overflow-scrolling: touch; }
}


/* ════════════════════════════════════════════
   LANDSCAPE MOBILE — горизонтальная ориентация
════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {

  .cinema-hero { min-height: 100vw; height: 100svh; }
  .cinema-title { font-size: clamp(1.8rem, 7vw, 3rem); }
  .cinema-cta { flex-direction: row; }

  /* В горизонтальном — 3 карточки */
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }

  /* Letterbox меньше */
  .cinema-letterbox-top,
  .cinema-letterbox-bot { height: 30px; }
}


/* ════════════════════════════════════════════
   PERFORMANCE — экономим ресурсы на мобиле
════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Убираем grain анимацию (тяжело для GPU) */
  .cinema-hero::before { display: none; }

  /* Плавная прокрутка iOS */
  html { -webkit-overflow-scrolling: touch; }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .cinema-caption, .cinema-title,
    .cinema-subtitle, .cinema-location, .cinema-cta {
      transition: none !important;
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .marquee-inner { animation: none; }
    .wa-btn { animation: none; }
  }
}