/*
  responsive.css — Adaptive Styles for PlatonicFarm
  ============================================================
  Breakpoint cascade (max-width = mobile overrides):
    1023px — intermediate desktop (iPad landscape, netbooks)
    768px  — tablet & mobile (main breakpoint)
    480px  — small mobile
    360px  — very small mobile (Galaxy S, iPhone SE etc.)

  This file patches the fixed desktop styles in style.css.
  Load AFTER style.css.
*/


/* ============================================================
   INTERMEDIATE DESKTOP — 769px–1279px
   Container padding: плавная интерполяция от 27px@769px до 64px@1280px.
   ============================================================ */
@media (max-width: 1279px) {
  :root {
    --container-pad: clamp(16px, calc(7.24vw - 1.79rem), 64px);
  }

  [class*="__container"],
  [class*="__wrapper"] {
    padding-left: clamp(16px, calc(7.24vw - 1.79rem), 64px) !important;
    padding-right: clamp(16px, calc(7.24vw - 1.79rem), 64px) !important;
  }
}


/* ============================================================
   TABLET / MOBILE — ≤768px
   Container padding override + section/card spacing tightening.
   z-index:auto и display:block — отключение системного контроллера,
   который блокирует pointer-events на интерактивных детях.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --container-pad: clamp(16px, 3.5vw, 40px);
    --section-spacing: 48px;
    --card-padding: 20px;
    --card-gap: 16px;
  }

  [class*="__container"],
  [class*="__wrapper"] {
    padding-left: clamp(16px, 3.5vw, 40px) !important;
    padding-right: clamp(16px, 3.5vw, 40px) !important;
    z-index: auto !important;
    display: block !important;
  }

  .container {
    padding-inline: clamp(16px, 3.5vw, 40px);
  }

  h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  h3 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }
}


/* ============================================================
   REVIEWS Carousel — drag-scroll viewport tuning
   ============================================================ */
@media (max-width: 768px) {
  .reviews__slider {
    margin: 0 -20px;
    cursor: grab;
  }

  .reviews__slider:active,
  .reviews__slider.is-dragging {
    cursor: grabbing;
  }

  .reviews__track {
    padding: 0 20px;
    gap: 16px;
  }

  .reviews__card {
    min-width: calc(100vw - 60px);
    max-width: calc(100vw - 60px);
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .reviews__slider {
    margin: 0 -16px;
  }

  .reviews__track {
    padding: 0 16px;
  }

  .reviews__card {
    min-width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
  }

  /* Reduce right-edge gradient fade — 80px covers too much on small screens */
  .reviews__slider::after {
    width: 40px;
  }

  .reviews__avatar-wrapper {
    width: 56px;
    height: 56px;
  }
}


/* ============================================================
   SMALL MOBILE — ≤480px
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --container-pad: 16px;
    --section-spacing: 40px;
  }

  [class*="__container"],
  [class*="__wrapper"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .footer__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ============================================================
   VERY SMALL — ≤360px (Galaxy S, iPhone SE)
   ============================================================ */
@media (max-width: 360px) {
  :root {
    --container-pad: 14px;
  }

  [class*="__container"],
  [class*="__wrapper"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* ============================================================
   SAFE AREA INSETS (iPhone notch / Dynamic Island)
   ============================================================ */
@supports (padding: max(0px)) {
  .footer__container {
    padding-left: max(var(--container-pad), env(safe-area-inset-left)) !important;
    padding-right: max(var(--container-pad), env(safe-area-inset-right)) !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}