/* DeepCiphers / Module 6: responsive composition only. */
@layer dc-responsive {
  /* Keep content visible from first paint when entry motion is disabled. */
  @media (prefers-reduced-motion: reduce) {
    #case-studies-grid :is(.case-studies-heading, .filters),
    .portfolio-detail-page :is(.hero-copy, .hero-phones, .overview-copy,
      .overview-phones, .problem-copy, .problem-character, .solution-visual, .solution-copy) {
      opacity: 1 !important;
    }
    #case-studies-grid :is(.case-studies-heading, .filters) {
      transform: none !important;
    }
  }

  @media (max-width: 768px) {
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .fullcycle-pin-wrap,
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .fullcycle-pin {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
    }
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .fullcycle-content {
      position: relative !important;
      inset: auto !important;
      display: flex !important;
      flex-direction: column !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      width: 100% !important;
      max-width: 100% !important;
      transform: none !important;
    }
    .fullcycle-mobile-stack-region {
      max-height: none !important;
      position: relative;
      width: 100%;
      min-width: 0;
      flex: none;
    }
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .cards-area {
      flex: none !important;
      aspect-ratio: auto !important;
    }
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .video-box {
      flex: none !important;
      position: relative !important;
      top: auto !important;
      width: min(100%, 390px) !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: 16 / 9;
      left: auto !important;
      right: auto !important;
      transform: none !important;
      margin-inline: auto !important;
    }
    /* The JS scroll stage and CSS must describe the same single-card stack. */
    .fullcycle-section[data-dc-stack-mode='mobile'] .cards-area {
      display: block !important;
      height: var(--mobile-stage-height, 420px) !important;
      min-height: var(--mobile-stage-height, 420px) !important;
      gap: 0 !important;
      clip-path: inset(-12px -12px);
      isolation: isolate;
    }
    .fullcycle-section[data-dc-stack-mode='mobile'] .cards-area > .service-card {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
    }
    .fullcycle-section[data-dc-stack-mode='mobile'] .service-card > img {
      flex: 1 1 0 !important;
      height: auto !important;
      min-height: 140px !important;
      width: 100% !important;
      object-fit: cover;
    }
    /* A short landscape screen cannot comfortably contain a pinned card.
       Use the existing card composition in normal flow; reduced motion does
       the same so every step remains reachable without a long scroll stage. */
    .fullcycle-section[data-dc-stack-mode='flow'] .cards-area {
      position: relative !important;
      inset: auto !important;
      transform: none !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 24px !important;
      height: auto !important;
      max-height: none !important;
      width: min(100%, 390px) !important;
      max-width: 100% !important;
      min-height: 0 !important;
      margin-inline: auto !important;
    }
    .fullcycle-section[data-dc-stack-mode='flow'] .service-card {
      flex: none !important;
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      transform: none !important;
    }
    .fullcycle-section[data-dc-stack-mode='flow'] .service-card > img {
      flex: 0 0 auto !important;
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 10;
      object-fit: cover;
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .fullcycle-section[data-dc-stack-mode='desktop'] .cards-area {
      clip-path: inset(-12px -12px);
    }
  }
}