/*
 * Mobile layout safeguards
 * Loaded after the site's other stylesheets so these rules only affect
 * narrow viewports. Desktop presentation is intentionally unchanged.
 */
@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  *,
  *::before,
  *::after {
    min-width: 0;
  }

  .container,
  .page-hero,
  .page-hero-inner,
  section,
  header,
  footer,
  main {
    max-width: 100%;
  }

  .container {
    width: 100%;
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
  }

  img {
    height: auto;
  }

  h1,
  h2 {
    word-break: normal;
    overflow-wrap: normal;
  }

  p,
  li {
    overflow-wrap: break-word;
  }

  /* Break genuinely unbroken values such as URLs and email addresses,
     without splitting normal headings, labels, or button text. */
  .detail-main a,
  .detail-sidebar a,
  .legal-body a,
  .contact-detail a,
  .footer-email {
    overflow-wrap: anywhere;
  }

  .btn,
  .nav-cta,
  .btn-hero-primary,
  .btn-hero-outline {
    max-width: 100%;
    white-space: normal;
  }

  /* Keep reveal motion vertical on touch screens. Horizontal entrance
     transforms make the document's visual edges appear to jump while
     scrolling and can expose a wider layout between animation frames. */
  .js-gsap-active .reveal-left,
  .js-gsap-active .reveal-right {
    transform: translateY(16px);
  }

  .reveal-left,
  .reveal-right {
    max-width: 100%;
  }

  /* Long rows should wrap instead of expanding their parent. */
  .terminal-line,
  .t-output,
  .footer-email,
  .detail-meta-bar,
  .footer-bottom,
  .footer-legal-links {
    max-width: 100%;
  }

  .terminal-line,
  .t-output {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .detail-meta-bar,
  .footer-bottom {
    align-items: flex-start;
  }

  /* Preserve intentional detail-image crops after the mobile image reset. */
  .detail-hero-img img {
    height: clamp(200px, 52vw, 300px);
    object-fit: cover;
  }

  /* Prevent common two-column layouts and their children from preserving
     desktop intrinsic widths at the narrowest breakpoints. */
  .contact-grid,
  .detail-layout,
  .cta-layout,
  .about-imm-layout,
  .about-chair-layout,
  .orbital-layout,
  .dashboard-grid,
  .form-grid {
    width: 100%;
    min-width: 0;
  }

  .form-card,
  .cta-panel,
  .cta-terminal,
  .cta-terminal-premium,
  .pd-content-card,
  .pd-details-card,
  .pd-stack-card,
  .pd-sidebar-cta,
  .bd-author-card,
  .bd-recent-card {
    max-width: 100%;
    min-width: 0;
  }

  .cta-terminal-premium {
    width: 100%;
  }

  .form-card {
    padding: clamp(20px, 6vw, 32px);
  }

  .aiv-frame,
  .aiv-photo,
  .aiv-photo-placeholder {
    max-width: 100%;
  }

  /* Carousel tracks are allowed to be wider internally, but their viewport
     is never allowed to widen the page itself. */
  .ind-viewport,
  .wwb-viewport,
  .swiper,
  .swiper-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .ind-track,
  .wwb-track {
    max-width: none;
  }

  .ind-card,
  .wwb-card {
    width: min(100%, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  /* Legacy pages define these grids with desktop minimums. At phone
     widths those minimums force a horizontal layout even though the page
     itself is clipped, leaving content inaccessible rather than responsive. */
  .news-grid,
  .leadership-grid,
  .chip-grid {
    grid-template-columns: 1fr !important;
  }

  /* Keep inline legacy dimensions from becoming a second mobile breakpoint. */
  .partner-page .pd-hero-meta,
  .pd-hero-meta {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Data tables remain readable without pushing the document wider. */
  .table-wrap,
  .table-responsive,
  .admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-hero {
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }

  .page-hero h1 {
    font-size: clamp(2.25rem, 12vw, 4rem);
  }

  /* Prevent absolutely positioned decorative artwork from becoming a
     horizontal scroll source while retaining the artwork itself. */
  .hero-immersive,
  .about-immersive,
  .section-dark,
  .site-footer {
    overflow-x: clip;
  }
}

@media (max-width: 390px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .form-card,
  .cta-panel,
  .pd-content-card,
  .pd-details-card,
  .pd-stack-card,
  .pd-sidebar-cta,
  .bd-author-card,
  .bd-recent-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .detail-hero-img img {
    height: 200px;
  }

  .footer-legal-links {
    width: 100%;
    gap: 14px;
  }

  .cookie-banner-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cookie-banner-text {
    min-width: 0 !important;
  }

  .cookie-banner-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cookie-banner-actions .cookie-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
}

/* Tablet guardrails for legacy inline-grid pages. Desktop values remain
   untouched above this breakpoint. */
@media (min-width: 768px) and (max-width: 1024px) {
  .technologies-philosophy-layout {
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr) !important;
    gap: 40px !important;
  }

  .cta-terminal-premium {
    min-width: 0;
  }
}

/* ── Final heading paint + inner-page mobile layout fixes ────────
   This file is loaded last so the gradient spans cannot be reset by
   the legacy heading rules in the older stylesheets. */
h1 em.text-gradient,
h1 em.text-gradient-light,
h2 em.text-gradient,
h2 em.text-gradient-light {
  display: inline-block !important;
  color: var(--blue-light, #5a9ef5) !important;
  background-image: linear-gradient(135deg, var(--blue-mid, #2b62c8) 0%, var(--blue-light, #5a9ef5) 50%, var(--cyan, #00c8ff) 100%) !important;
  background-color: transparent !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: heading-shimmer 5s linear infinite !important;
  transform: none !important;
}

.section-dark h1 em.text-gradient-light,
.section-dark h2 em.text-gradient-light,
.orbital-section h2 em.text-gradient-light,
.hero-immersive h2 em.text-gradient-light {
  background-image: linear-gradient(135deg, var(--blue-light, #5a9ef5) 0%, var(--cyan, #00c8ff) 100%) !important;
}

@media (max-width: 767px) {
  /* These two pages used inline desktop grids, so their earlier
     responsive rules could not change the column count. */
  .industries-approach-layout,
  .technologies-philosophy-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .technologies-philosophy-grid {
    grid-template-columns: 1fr !important;
  }

  .technology-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .industries-approach-layout .reveal-left,
  .technologies-philosophy-layout .reveal-left {
    width: 100%;
  }

  .page-hero-inner {
    width: 100%;
  }

  .page-hero h1 {
    max-width: 100%;
    font-size: clamp(2.25rem, 12vw, 4rem);
    line-height: 1.08;
  }

  .detail-hero {
    padding-top: 112px !important;
    padding-bottom: 52px !important;
  }

  .detail-hero h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1.12;
  }

  .detail-layout,
  .sd-layout,
  .contact-grid,
  .cta-layout,
  .about-chair-layout,
  .about-timeline-layout {
    gap: 32px;
  }

  .about-chair-layout .chair-portrait-img-box {
    max-width: 420px;
  }

  .detail-meta-bar {
    gap: 10px 16px;
  }
}

@media (max-width: 480px) {
  .technology-category-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .industries-approach-layout,
  .technologies-philosophy-layout {
    gap: 26px !important;
  }
}