/**
 * GCC — Responsive (Viewport + Container Queries für Embeds/iframe)
 * Keine feste Body-Breite — Mobile-first Service-Panels.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow-x: clip;
}

body.page--gcc {
  width: 100%;
  min-width: 0;
}

/* --- Service-Panels (Mobile-first) --- */

body.page--gcc .service-features {
  container-type: inline-size;
  container-name: gcc-services;
  width: 100%;
}

body.page--gcc .service-feature,
body.page--gcc .service-feature--image-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  grid-template-columns: none;
}

body.page--gcc .service-feature__media {
  order: -1;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  align-self: stretch;
  grid-column: auto;
  grid-row: auto;
}

body.page--gcc .service-feature__body {
  order: 0;
  width: 100%;
  min-width: 0;
  padding-block: 0;
  grid-column: auto;
  grid-row: auto;
}

body.page--gcc .service-feature__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Desktop: nur bei breitem Viewport UND breitem Container (Embed-tauglich) */
@media (min-width: 961px) {
  @container gcc-services (min-width: 720px) {
    body.page--gcc .service-feature {
      display: grid;
      grid-template-columns: minmax(0, 40%) minmax(0, 60%);
      gap: clamp(1.25rem, 3vw, 2rem);
      align-items: stretch;
    }

    body.page--gcc .service-feature--image-right {
      grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    }

    body.page--gcc .service-feature__media {
      order: unset;
      aspect-ratio: 4 / 3;
      grid-column: 1;
      grid-row: 1;
    }

    body.page--gcc .service-feature--image-right .service-feature__media {
      grid-column: 2;
    }

    body.page--gcc .service-feature__body {
      grid-column: 2;
      grid-row: 1;
      padding-block: var(--space-sm);
    }

    body.page--gcc .service-feature--image-right .service-feature__body {
      grid-column: 1;
    }
  }
}

/* --- Viewport: Mobile & Tablet --- */

@media (max-width: 960px) {
  body.page--gcc .section-block {
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }

  body.page--gcc .service-features {
    gap: var(--space-2xl);
  }

  body.page--gcc .service-feature,
  body.page--gcc .service-feature--image-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  body.page--gcc .service-feature__media {
    order: -1;
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  body.page--gcc .service-feature__title {
    font-size: clamp(1.2rem, 5vw, 1.45rem);
  }

  body.page--gcc .service-feature__text {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  body.page--gcc .section-heading {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
  }

  body.page--gcc .section-subheading {
    font-size: 1rem;
    padding-inline: 0;
  }

  body.page--gcc .page-header-hero {
    min-height: min(88svh, 720px);
  }

  body.page--gcc .hero-headline {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  body.page--gcc .hero-subtitle {
    font-size: 1rem;
    max-width: none;
  }

  body.page--gcc .hero-content {
    padding-block: var(--space-xl);
    gap: var(--space-lg);
  }

  body.page--gcc .cta-row--dual {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-sm);
  }

  body.page--gcc .cta-row--dual .cta-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  body.page--gcc .contact-layout {
    grid-template-columns: 1fr;
  }

  body.page--gcc .form-row {
    flex-direction: column;
    gap: var(--space-md);
  }

  body.page--gcc .category-tags {
    gap: var(--space-xs) var(--space-sm);
  }

  body.page--gcc .category-tags__item {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
  }

  body.page--gcc .brands-name-grid {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--space-sm) var(--space-md);
  }

  body.page--gcc .gcc-footer {
    padding-top: clamp(2.5rem, 8vw, 4rem);
    padding-bottom: clamp(1.75rem, 5vw, 2.5rem);
  }

  body.page--gcc .gcc-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  body.page--gcc .padding-x--page {
    padding-left: max(16px, var(--page-gutter));
    padding-right: max(16px, var(--page-gutter));
  }

  body.page--gcc .service-feature,
  body.page--gcc .service-feature--image-right {
    padding: var(--space-sm);
    border-radius: 6px;
  }

  body.page--gcc .hero-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
  }
}