/* ============================================================
   RESPONSIVE.CSS — Responsive Engine
   Techsheba — Graphic Design Agency & Creative Portfolio
   ------------------------------------------------------------
   Mobile / tablet / desktop breakpoints, mobile menu drawer
   and small-screen layout shifts live here exclusively.
   ============================================================ */

/* ============================================================
   1. LARGE DESKTOP (container-wide sections) — >= 1400px
   ============================================================ */
@media (min-width: 1400px) {
  .hero__inner { width: min(100% - 2.5rem, var(--container-wide)); margin-inline: auto; }
}

/* ============================================================
   2. TABLET LANDSCAPE / SMALL DESKTOP — <= 1100px
   ============================================================ */
@media (max-width: 1100px) {
  .nav { display: none; }

  .header-cta { display: none; }

  .menu-toggle { display: flex; }

  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card { grid-column: span 1; }
  .project-card--wide { grid-column: span 2; }

  .bento-card { grid-column: span 3; }
  .bento-card--feature { grid-column: span 6; }
  .bento-card--tall { grid-row: span 1; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--brand { grid-column: span 2; }
}

/* ============================================================
   3. TABLET PORTRAIT — <= 900px
   ============================================================ */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }

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

  .contact-grid { grid-template-columns: 1fr; }

  /* Hero stacks: message above collage */
  .hero__layout { grid-template-columns: 1fr; }
  .hero__visual { max-width: 540px; justify-self: center; }

  /* Stat band: 3 columns, last stat spans the row */
  .hero__meta { grid-template-columns: repeat(3, 1fr); }
  .hero__meta-item:nth-child(4),
  .hero__meta-item:nth-child(5) { border-left: none; }
  .hero__meta-item:nth-child(5) { grid-column: span 3; }
}

/* ============================================================
   4. MOBILE — <= 640px
   ============================================================ */
@media (max-width: 640px) {
  :root { --header-h: 66px; }

  .container,
  .container--wide { width: min(100% - 2rem, var(--container)); }

  .brand__tag { display: none; }

  .status-dot { display: none; }

  .section { padding-block: clamp(3.5rem, 12vw, 5rem); }

  .hero__title .hl--outline {
    -webkit-text-stroke-width: 1px;
  }

  /* Stat band: 2 columns, last stat spans the row */
  .hero__meta { grid-template-columns: repeat(2, 1fr); }
  .hero__meta-item:nth-child(odd) { border-left: none; }
  /* Restore the divider for item 4 (col 2 of row 2) — the ≤900px rule would remove it */
  .hero__meta-item:nth-child(4) { border-left: 1px solid var(--border-glass); }
  .hero__meta-item:nth-child(5) { grid-column: 1 / -1; }

  .hero__visual { max-width: 100%; }
  .hero__visual-side { width: 70%; margin-right: 0.5rem; }
  .hero__visual::after { transform: translate(7px, 7px); }

  .works-grid { grid-template-columns: 1fr; }
  .project-card,
  .project-card--wide { grid-column: span 1; }

  .project-card__body { flex-direction: column; }
  .project-card__meta { flex-direction: row; justify-items: start; text-align: left; gap: 1rem; }

  .bento-card { grid-column: span 6; }
  .bento-card--feature { grid-row: span 1; }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-col--brand { grid-column: span 1; }

  .menu-drawer { width: 100vw; }

  .metrics-grid { border-radius: var(--radius-lg); }

  .marquee__item { padding-inline: 1.1rem; gap: 1.1rem; }

  .back-to-top { width: 42px; height: 42px; }
}

/* ============================================================
   5. VERY SMALL — <= 380px
   ============================================================ */
@media (max-width: 380px) {
  .btn { padding: 0.9rem 1.3rem; font-size: var(--text-xs); }

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

  .metrics-grid { grid-template-columns: 1fr; }

  .service-card { padding: 1.5rem; }
}

/* ============================================================
   6. MOTION PREFERENCES (marquee/cursor safety)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .marquee--clients .marquee__track {
    animation: none;
    width: 100%;
  }

  /* Keep a single readable copy of the ticker */
  .marquee__group { flex-wrap: wrap; }
  .marquee__group:nth-child(2) { display: none; }

  .status-dot i { animation: none; }
}

/* ============================================================
   7. CASE STUDY PAGE (project.html)
   ============================================================ */
/* Tablet landscape / small desktop */
@media (max-width: 1100px) {
  .case-layout { grid-template-columns: 1fr; }

  /* Aside becomes a two-column fact strip above the story */
  .case-aside {
    position: static;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--bg-surface);
  }

  .case-aside__block { border-bottom: none; padding-bottom: 0; }

  .case-aside .btn { grid-column: 1 / -1; }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .case-stats__inner { grid-template-columns: repeat(2, 1fr); }
  .case-stat:nth-child(3) { grid-column: 1 / -1; border-left: none; }

  .case-next { grid-template-columns: 1fr auto; }
  .case-next__media { grid-column: 1 / -1; width: min(100%, 320px); }
}

/* Mobile */
@media (max-width: 640px) {
  .case-aside { grid-template-columns: 1fr; }

  .case-stats__inner { grid-template-columns: 1fr; }
  .case-stat { border-left: none; border-top: 1px solid var(--border-glass); }
  .case-stat:first-child { border-top: none; }

  .case-hero__meta { gap: 1.4rem 2rem; }

  .case-next { grid-template-columns: 1fr; }
  .case-next__arrow { width: 48px; height: 48px; }
}