/* ==========================================================================
   ATHAR — responsive.css
   Mobile-first adaptations, ordered largest breakpoint first so that later
   declarations win. Every rule here only exists to prevent overflow or to
   re-balance the layout on a smaller viewport.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large monitors (≤ 1199px)
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Tablet / small laptop (≤ 899px)
   -------------------------------------------------------------------------- */

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

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

  .concept-step:nth-child(2n) .concept-step__arrow {
    display: none;
  }

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

  .page-header {
    align-items: flex-start;
  }

  /* The primary nav disappears here and is replaced by the drawer button. */
  .menu-toggle {
    display: inline-flex;
  }

  .hero__inner {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Large phone (≤ 639px)
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  :root {
    --header-h: 62px;
  }

  .container {
    padding-inline: var(--sp-4);
  }

  .app-nav {
    display: none;
  }

  .header-tools {
    margin-inline-start: auto;
  }

  .page {
    padding-block: var(--sp-7) var(--sp-9);
  }

  .hero {
    padding-block: var(--sp-8) var(--sp-7);
  }

  .section {
    padding-block: var(--sp-7);
  }

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

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

  .concept-step__arrow {
    display: none;
  }

  .hero__aside {
    margin-block-start: var(--sp-8);
  }

  .form-card {
    padding: var(--sp-6);
    border-radius: var(--r-lg);
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .app-footer__inner {
    flex-direction: column;
  }

  .toast-root {
    inset-inline: var(--sp-4);
    inset-block-end: var(--sp-4);
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Small phone (≤ 419px)
   -------------------------------------------------------------------------- */

@media (max-width: 419px) {
  .display {
    font-size: clamp(2.4rem, 2rem + 7vw, 3.4rem);
  }

  .hero__actions .btn,
  .cluster .btn {
    width: 100%;
  }

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

/* --------------------------------------------------------------------------
   Very small / landscape phones
   -------------------------------------------------------------------------- */

@media (max-width: 359px) {
  .mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-height: 460px) and (orientation: landscape) {
  .hero {
    padding-block: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   Large screens — give the composition more room, don't just scale up
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .hero__lead {
    font-size: var(--fs-lg);
  }
}

/* --------------------------------------------------------------------------
   Touch & pointer ergonomics
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .card--hover:hover,
  .artifact-card:hover,
  .mode-card:hover {
    transform: none;
  }

  .btn:active {
    transform: none;
  }
}

@media (pointer: coarse) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
  }
}

/* Respect Windows "lighter" contrast requirements */
@media (forced-colors: active) {
  .btn {
    border: var(--bw-1) solid CanvasText;
  }

  .card,
  .app-header {
    border: var(--bw-1) solid CanvasText;
  }
}