/* ============================================================
   Audioengine - Responsive CSS
   Breakpoints:
     xs:  < 480px   (mobile small)
     sm:  480–767px (mobile large)
     md:  768–1023px (tablet)
     lg:  1024–1279px (laptop)
     xl:  ≥ 1280px  (desktop)
   ============================================================ */

/* ============================================================
   LAPTOP  (≤ 1200px)
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --container-pad: 1.25rem;
  }

  .footer__main {
    grid-template-columns: 180px 1fr 1.4fr 1fr 0.8fr;
    gap: 1.5rem;
  }
}

/* ============================================================
   NAV BREAKPOINT  (≤ 1360px)
   Hide desktop nav links and show the hamburger / mobile menu
   earlier — full desktop menu only renders on wider laptops.
   ============================================================ */
@media (max-width: 1360px) {
  .nav__menu {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }
}

/* ============================================================
   TABLET LANDSCAPE  (≤ 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  :root {
    --nav-height: 60px;
  }

  /* Nav – hide desktop menu, show hamburger */
  .nav__menu {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Logo: slightly smaller on tablet */
  .nav__logo picture,
  .nav__logo-img {
    height: 38px;
    max-width: 180px;
  }

  /* On tablet keep topbar center visible, hide left text */
  .topbar__left {
    display: none;
  }
  .topbar__right{
    display: none;
  }

  /* Hero — tablet adjustments */
  .hero {
    height: calc(100vh - var(--topbar-height) - var(--nav-height));
    min-height: 420px;
    max-height: 680px;
  }

  .hero__content {
    bottom: 10%;
    left: 4%;
    max-width: 420px;
  }

  /* Trust bar — tablet (≤1023): hide desktop list, show Swiper */
  .trust-bar__desktop {
    display: none !important;
  }

  .trust-bar__swiper-wrap {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  /* Products */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* Promo blocks */
  /* Promo blocks — stack vertically on tablet */
  .promo-block {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* Restore natural order (image top, content bottom) for both layouts */
  .promo-block__image   { order: 1 !important; }
  .promo-block__content { order: 2 !important; }

  .promo-block__image {
    min-height: 260px;
    aspect-ratio: 16 / 9;
  }

  .promo-block__content {
    padding: 2rem 2rem;
  }

  .promo-block .btn--outline {
    align-self: flex-start;
  }

  /* Reviews — tablet: stack left+right vertically */
  .reviews__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-top: 12rem;
    padding-inline: 2rem;
  }

  .reviews__left {
    width: 100%;
  }

  /* Photo mosaic */
  .photo-grid__mosaic {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Why choose — tablet: 2 columns */
  .why-choose__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* Streaming */
  .streaming__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  /* Gallery strip */
  .gallery-strip__track {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   TABLET PORTRAIT  (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --nav-height: 56px;
    --topbar-height: 36px;
  }

  /* Topbar */
  .topbar__left {
    display: none;
  }
   .topbar__right{
    display: none;
  }

  .topbar__center {
    display: flex;
  }

  .topbar__right .topbar__phone-label {
    display: none;
  }

  /* Hero — tablet portrait */
  .hero {
    min-height: 360px;
    max-height: 560px;
  }

  .hero__content {
    bottom: 8%;
    left: 1.25rem;
    max-width: calc(100% - 2.5rem);
  }

  .hero__title {
    font-size: 1.6rem;
  }

  .hero__subtitle {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }

  /* Trust bar — tablet portrait: Swiper already active, smaller icon */
  .trust-bar__swiper-wrap .trust-bar__icon {
    width: 40px;
    height: 34px;
  }

  .trust-bar__swiper-wrap .trust-bar__icon img {
    max-width: 40px;
    max-height: 34px;
  }

  .trust-bar__swiper-wrap .trust-bar__item {
    padding: 16px 18px;
    gap: 10px;
  }

  /* Products – single column */
  .product-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }

  /* Gallery Swiper — less peek on mobile */
  .gallery-swiper {
    padding-inline: 8%;
  }

  /* Promo blocks — tighter padding on small tablet */
  .promo-block__content {
    padding: 1.75rem 1.25rem;
  }

  .promo-block__image {
    min-height: 220px;
  }

  /* Reviews — mobile: tighter padding, SVG slightly smaller */
  .reviews__body {
    padding-top: 9rem;
    padding-inline: 1.25rem;
  }

  .reviews__svg-wrap {
    width: 90%;
  }

  /* Photo grid */
  .photo-grid__mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Why choose — mobile: single column */
  .why-choose__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
    gap: 1.5rem;
  }

  /* Streaming */
  .streaming__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
  }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .footer__brand {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .footer__bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  /* Section spacing */
  .section {
    padding-block: 3rem;
  }

  .section--lg {
    padding-block: 4rem;
  }
}

/* ============================================================
   MOBILE  (≤ 479px)
   ============================================================ */
@media (max-width: 479px) {
  :root {
    --container-pad: 1rem;
    --nav-height: 52px;
  }

  /* Logo: compact on small screens */
  .nav__logo picture,
  .nav__logo-img {
    height: 32px;
    max-width: 150px;
  }

  /* Topbar */
  .topbar__right a {
    font-size: 0.7rem;
  }

  /* Hero — small mobile */
  .hero {
    min-height: 300px;
    max-height: 460px;
  }

  .hero__title {
    font-size: 1.4rem;
  }

  .hero__subtitle {
    font-size: 0.9rem;
  }

  /* Trust bar — small mobile: even smaller Swiper slide items */
  .trust-bar__swiper-wrap .trust-bar__item {
    padding: 14px 14px;
    gap: 9px;
  }

  .trust-bar__swiper-wrap .trust-bar__icon {
    width: 36px;
    height: 30px;
  }

  .trust-bar__swiper-wrap .trust-bar__icon img {
    max-width: 36px;
    max-height: 30px;
  }

  .trust-bar__swiper-wrap .trust-bar__label {
    font-size: 0.75rem;
  }

  .trust-bar__label {
    font-size: 0.7rem;
    white-space: normal;
  }

  /* Products */
  .product-grid {
    max-width: 100%;
  }

  /* Gallery Swiper — minimal peek on small mobile */
  .gallery-swiper {
    padding-inline: 5%;
  }

  /* Reviews */
  .reviews__track {
    max-width: 100%;
  }

  /* Streaming */
  .streaming__grid {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr;
  }

  .footer__brand {
    flex-direction: column;
  }

  /* Back to top */
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    font-size: 0.875rem;
  }

  /* Promo content padding */
  .promo-block__content {
    padding: 1.5rem 1rem;
  }

  /* Why choose */
  .why-choose__grid {
    max-width: 100%;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .topbar,
  .giveaway-badge,
  .mobile-menu,
  .back-to-top,
  .search-overlay,
  .nav__hamburger,
  .nav__actions,
  .hero .btn,
  .footer__social {
    display: none !important;
  }

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

  .container {
    max-width: 100%;
  }

  a {
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  .hero__img-wrapper {
    max-height: 300px;
  }
}

/* ============================================================
   ACCESSIBILITY – REDUCED MOTION
   ============================================================ */
@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;
  }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  /* Opt-out for this design – Audioengine uses light theme */
  /* Add dark mode vars here if needed in the future */
}

/* ============================================================
   FOCUS VISIBLE – ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   HOVER SUPPORT CHECK – TOUCH DEVICES
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .nav__dropdown {
    display: none;
  }

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

  .promo-block:hover .promo-block__image img,
  .why-card:hover .why-card__image img,
  .gallery-strip__item:hover img,
  .photo-grid__item:hover img {
    transform: none;
  }
}