/* ═══════════════════════════════════════════════════════════
    RESPONSIVE
═══════════════════════════════════════════════════════════ */

/* Large screens: > 1440px */
@media (min-width: 1441px) {
  :root {
    --site-h-padding: 240px;
  }

  /* Parents must not clip the overflowing image */
  .product-section {
    position: relative;
    overflow: visible;
    z-index: 1;
  }

  .product-image-col {
    position: relative;
    overflow: visible;
  }

  /* Let the image break out of its fixed-height box (drops the 351px from content.css) */
  .product-photo {
    position: relative;
    margin-top: 16px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -120px; /* negative pull so image bleeds into the tech-specs area */
    width: 100%;
    max-width: 650px;
    height: auto;
    max-height: none;
    overflow: visible;
    z-index: 1;
  }

  .product-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 650px;
    max-height: 452px;
    object-fit: contain;
    border-radius: 2px;
  }

  /* Orange section sits above the image so it appears tucked underneath */
  .tech-specs {
    position: relative;
    z-index: 2;
  }
}

/* Product photo bleed-right effect (481px - 1440px) */
@media (min-width: 481px) and (max-width: 1440px) {
  .product-photo {
    position: static;
    width: calc(100% + var(--site-h-padding));
    height: 351px;
    margin-top: 16px;
    margin-left: 0;
    margin-right: calc(-1 * var(--site-h-padding));
    z-index: auto;
    max-width: 650px;
    max-height: 452px;
  }

  .product-photo img {
    width: 100%;
    height: 100%;
    max-width: calc(100% + var(--site-h-padding));
    max-height: 452px;
    object-fit: cover;
  }
}

@media (max-width: 1024px) {

  :root {
    --section-padding: 24px;
    --site-h-padding: 32px;
  }

  /* ── Header ───────────────────────────────────────────── */
  .header-top {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 0;
    position: relative;
  }

  .header-callback {
    position: static;
    order: -1;
    align-self: flex-start;
  }

  .header-callback__label {
    display: none;
  }

  .header-burger {
    display: block;
  }

  .header-nav {
    display: none;
  }

  /* ── Hide hero labels on mobile ────────────────────────── */
  .hero-label {
    display: none;
  }

  /* ── Features ─────────────────────────────────────────── */
  .features-row {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .features-viewport {
    flex: 1 1 0;
    overflow: hidden;
    min-width: 0;
  }

  .feature-item {
    flex: 0 0 auto;
    padding: 0 8px;
  }

  /* ── Product layout ───────────────────────────────────── */
  .product-layout {
    flex-direction: column;
  }

  .product-text-col,
  .product-image-col {
    flex: 1 1 auto;
    width: 100%;
  }

  .product-body-text {
    font-size: 16px;
  }

  .rec-strip__logo {
    width: 140px;
    padding: 8px;
  }

  .product-photo {
    display: none;
  }

  /* ── Features ─────────────────────────────────────────── */
  .features-row {
    gap: 8px;
  }

  .features-viewport {
    flex: 1 1 0;
    overflow: hidden;
    min-width: 0;
  }

  .feature-item {
    min-height: auto;
    gap: 8px;
  }

  .feature-item__icon {
    width: 50px;
    height: 50px;
  }

  .feature-item__label {
    font-size: 12px;
  }

  /* ── Product ──────────────────────────────────────────── */
  .product-body-text {
    font-size: 14px;
  }

  .rec-strip {
    flex-direction: column;
  }

  .rec-strip__logo {
    width: 100%;
    padding: 12px;
  }

  .rec-strip__divider {
    display: none;
  }

  .rec-strip__text {
    padding: 12px;
  }

  /* ── Tech specs ───────────────────────────────────────── */
  .specs-grid {
    grid-template-columns: 1fr;
  }

  .spec-item__number {
    font-size: 24px;
    width: 28px;
  }

  .spec-item__text {
    font-size: 12px;
  }

  /* ── Shared page elements ──────────────────────────────── */
  .page-heading {
    font-size: 16px;
  }

  .page-main {
    gap: 24px;
  }

  /* ── Footer ───────────────────────────────────────────── */
  .footer-map {
    min-height: 150px;
  }

  .doc-row__text {
    font-size: 12px;
  }

  .footer__title {
    font-size: 14px;
  }

  .text-container {
    font-size: 12px;
  }

  .icon-container {
    width: 32px;
    height: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile (≤ 768px) — About page hero image
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.page-about .hero-banner__image-wrapper > img {
    content: url('/img/photo-delta-product.png');
  }

  body.page-about .hero-banner__img {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    overflow: hidden;
  }

  body.page-about .hero-banner__image-wrapper {
    width: 421px;
    max-width: 100%;
    height: auto;
  }

  body.page-about .hero-banner__image-wrapper > img {
    width: 100%;
    height: auto;
    max-width: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Feature items width by breakpoint
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .feature-item {
    width: 208px;
    min-height: 134.4px;
    height: auto;
  }
  .features-viewport {
    max-width: 640px;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .feature-item {
    width: 293px;
    min-height: 134.4px;
    height: auto;
  }
  .features-viewport {
    max-width: 904px;
  }
}
@media (min-width: 1440px) {
  .feature-item {
    width: 322px;
    min-height: 134.4px;
    height: auto;
  }
  .features-viewport {
    max-width: 1312px;
  }
}

@media (max-width: 1023px) {
  .site-footer {
    flex-direction: column;
  }

  .footer-docs {
    order: 1;
    padding: var(--section-padding);
  }

  .footer-contacts {
    order: 2;
    padding: var(--section-padding);
  }

  .footer__szi {
    order: 3;
  }

  .footer-map {
    display: none;
  }
}

/* ── Footer SZI logos grid breakpoints ─────────────────── */

/* < 768px — 1 column */
@media (max-width: 767px) {
  .logos {
    grid-template-columns: 1fr;
  }

  .footer__mobile-logo {
    display: inline;
  }

  .footer__szi {
    padding: 16px;
  }
}

/* 768px – 1439px — 2 columns */
@media (min-width: 768px) and (max-width: 1439px) {
  .logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥ 1440px — 3 columns */
@media (min-width: 1440px) {
  .logos {
    grid-template-columns: repeat(3, 1fr);
  }
}