/* ==========================================================================
   DEVNOVA SOLUTIONS LTD — responsive.css
   Breakpoints: 1440 / 1200 / 1024 / 860 / 720 / 560 / 400 / 340
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large desktop refinements (1441px and above)
   -------------------------------------------------------------------------- */

@media (min-width: 1441px) {
  :root {
    --shell: 1380px;
  }

  .hero {
    min-height: min(84vh, 900px);
  }
}

/* --------------------------------------------------------------------------
   Laptop (max 1200px)
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root {
    --header-h: 72px;
  }

  .primary-nav__link {
    padding-inline: 0.42rem;
    font-size: 0.85rem;
  }

  .primary-nav__link::after {
    left: 0.42rem;
    right: 0.42rem;
  }

  .svc-body {
    grid-template-columns: minmax(0, 1fr) 268px;
  }

  .process-nav {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .legal-layout {
    grid-template-columns: 226px minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Tablet landscape / small laptop (max 1024px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .primary-nav__list,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero {
    min-height: 0;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__visual {
    min-height: 260px;
  }

  .page-hero__grid,
  .svc-hero__grid,
  .error-page__grid,
  .cta-band__inner,
  .constellation,
  .contact-layout,
  .svc-body,
  .split,
  .split--wide-left,
  .split--wide-right,
  .section-head--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .constellation__copy {
    order: -1;
  }

  .section-head--split {
    align-items: start;
    gap: var(--space-m);
  }

  .svc-aside,
  .contact-aside,
  .legal-toc,
  .process-tabs {
    position: static;
    max-height: none;
  }

  .svc-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principles,
  .related-grid,
  .next-steps,
  .process-panel__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-xl);
  }

  .journey__line {
    display: none;
  }

  .journey__stage::before {
    top: -46px;
  }

  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-toc {
    max-height: 320px;
  }

  .svc-feature--wide {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Tablet portrait (max 860px)
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activities {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-group__pair,
  .scenario-grid,
  .service-list,
  .inc-exc,
  .about-pillars,
  .company-record,
  .process-modes {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-feature--wide {
    grid-column: span 1;
  }

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .process-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }

  .process-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .process-tab {
    border-inline-end: 1px solid var(--ink-line);
  }

  .process-panel {
    min-height: 0;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-band__inner {
    gap: var(--space-l);
  }
}

/* --------------------------------------------------------------------------
   Large mobile (max 720px)
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    --header-h: 64px;
    --section-y: clamp(3rem, 2rem + 5vw, 4.25rem);
  }

  .brand__mark {
    width: 30px;
    height: 30px;
  }

  .brand__name {
    font-size: 1.05rem;
  }

  .brand__sub {
    font-size: 0.5rem;
    letter-spacing: 0.24em;
  }

  .nav-toggle span:not(.nav-toggle__bars span) {
    display: none;
  }

  .nav-toggle {
    padding: 0.5rem 0.7rem;
    min-width: 44px;
    justify-content: center;
  }

  .mobile-nav__link {
    font-size: var(--step-1);
    padding-block: 0.95rem;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .related-grid,
  .next-steps,
  .process-panel__cols,
  .svc-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .journey__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 62px;
  }

  .constellation__stage {
    aspect-ratio: 1 / 1.05;
    min-height: 400px;
  }

  /* Nodes sit at 21% / 79% of the stage and are centred on that point, so the
     width must stay at or below 40% to keep them inside the clipped stage. */
  .constellation__node {
    width: 40%;
    font-size: 0.76rem;
    padding: 0.55rem 0.65rem;
  }

  .constellation__core {
    width: 108px;
    height: 108px;
  }

  .svc-feature {
    padding: var(--space-m);
  }

  .svc-feature__num {
    font-size: 1.9rem;
    top: 0.6rem;
    right: 0.9rem;
  }

  .form-section {
    padding: var(--space-m);
  }

  .cookie-banner {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: var(--space-s);
  }

  .cookie-banner .btn {
    flex: 1 1 auto;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .step-flow__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .legal-toc {
    max-height: 260px;
  }
}

/* --------------------------------------------------------------------------
   Standard mobile (max 560px)
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  h1 {
    letter-spacing: -0.026em;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 1.4rem + 6.6vw, 3.1rem);
    letter-spacing: -0.028em;
  }

  .hero__facts {
    gap: 0.5rem var(--space-m);
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .btn-row .btn {
    flex: 1 1 100%;
  }

  .scenario,
  .card,
  .service-card,
  .contact-card,
  .fact-panel,
  .next-step,
  .inc-exc > div {
    padding: var(--space-m);
  }

  .process-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .process-panel {
    padding: var(--space-m);
  }

  .journey__track {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-l);
    padding-top: 54px;
  }

  .svc-hero__specs {
    gap: var(--space-m);
  }

  .service-card__actions .btn,
  .svc-feature__foot .btn {
    width: 100%;
  }

  .filter-chip {
    font-size: 0.66rem;
    padding-inline: 0.8rem;
  }

  /* Long category labels cannot stay on one line at this width. */
  .tag {
    white-space: normal;
  }

  .data-table {
    min-width: 460px;
  }

  .cookie-banner__actions {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Small mobile (max 400px)
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  :root {
    --gutter: 1rem;
  }

  .brand__sub {
    display: none;
  }

  .hero__badge {
    font-size: 0.6rem;
    padding: 0.4rem 0.7rem 0.4rem 0.45rem;
  }

  .constellation__node {
    width: 40%;
    font-size: 0.72rem;
  }

  .spec-pair {
    gap: var(--space-s);
  }

  .legal-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Very small (max 340px) — 320px safety
   -------------------------------------------------------------------------- */

@media (max-width: 340px) {
  :root {
    --gutter: 0.85rem;
  }

  .brand__name {
    font-size: 0.98rem;
  }

  .brand__mark {
    width: 26px;
    height: 26px;
  }

  .btn {
    padding-inline: 1.1rem;
    font-size: 0.88rem;
  }

  .constellation__stage {
    min-height: 460px;
  }

  .constellation__core {
    width: 92px;
    height: 92px;
  }

  .constellation__core strong {
    font-size: 0.84rem;
  }
}

/* --------------------------------------------------------------------------
   Landscape phones — keep the mobile menu usable
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  .mobile-nav__link {
    font-size: 1.05rem;
    padding-block: 0.7rem;
    min-height: 44px;
  }

  .hero {
    padding-block: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Coarse pointer — remove hover-only depth effects
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .card:hover,
  .svc-feature:hover,
  .service-card:hover,
  .related-card:hover,
  .btn:hover {
    transform: none;
    box-shadow: none;
  }

  .tilt {
    transform: none !important;
  }
}