/* Responsive overrides — tablet (<=1024px) and mobile (<=640px).
   Uses !important to win over inline style attributes set in JSX. */

/* ─────── Tablet ─────── */
@media (max-width: 1024px) {
  /* Homepage hero: 3-card row stacks */
  .r-hero-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .r-hero {
    padding: 56px 32px !important;
  }
  .r-hero-card-tall {
    min-height: 0 !important;
  }

  /* Section horizontal padding */
  .r-pad {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Work rows: number + content + cover stack */
  .r-work-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .r-work-num {
    font-size: 44px !important;
    line-height: 1 !important;
  }
  .r-work-title {
    font-size: 52px !important;
  }
  .r-work-cover {
    aspect-ratio: 16 / 9 !important;
  }
  .r-work-head {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .r-work-h2 {
    font-size: 40px !important;
  }

  /* About */
  .r-about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px !important;
  }
  .r-smiski {
    height: 80px !important;
    right: 32px !important;
    top: -32px !important;
  }
  .r-about-portrait {
    max-width: 280px;
  }
  .r-about-h2 {
    font-size: 44px !important;
  }
  .r-about-body {
    grid-template-columns: 1fr !important;
  }
  .r-skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer */
  .r-footer-card {
    padding: 40px !important;
  }

  /* ─── Case study ─── */
  .r-case-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .r-case-meta {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .r-case-block {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .r-case-stats-grid,
  .r-case-metrics-grid,
  .r-case-insights-grid {
    grid-template-columns: 1fr !important;
  }
  .r-case-personas-grid,
  .r-case-framework-grid,
  .r-case-imagepair,
  .r-case-next-images,
  .r-case-gallery-grid,
  .r-closer {
    grid-template-columns: 1fr !important;
  }
  .r-case-next-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .r-case-next-link {
    grid-template-columns: 1fr auto !important;
  }
  .r-case-footer-card {
    padding: 40px !important;
  }
}

/* ─────── Mobile ─────── */
@media (max-width: 640px) {
  /* Nav: hide center links, tighten paddings */
  .r-nav {
    margin: 12px 12px 0 !important;
  }
  .r-nav-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .r-nav-links {
    display: none !important;
  }
  .r-nav-logo-text {
    font-size: 18px !important;
  }
  .r-nav-cta {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .r-case-nav-mid {
    display: none !important;
  }
  .r-case-nav-aux {
    gap: 8px !important;
  }
  .r-case-nav-aux .r-resume-link {
    display: none !important;
  }

  /* Hero */
  .r-hero {
    padding: 40px 20px !important;
  }
  .r-hero-card {
    padding: 22px !important;
  }
  .r-hero-blurb {
    font-size: 18px !important;
  }
  .r-hero-learning {
    font-size: 28px !important;
  }
  .r-hero-now {
    font-size: 22px !important;
  }

  /* Generic section padding */
  .r-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Work */
  .r-work-row {
    padding: 24px 0 !important;
    gap: 16px !important;
  }
  .r-work-num {
    font-size: 32px !important;
  }
  .r-work-title {
    font-size: 36px !important;
    line-height: 1 !important;
  }
  .r-work-summary {
    font-size: 15px !important;
  }
  .r-work-h2 {
    font-size: 32px !important;
  }
  .r-archive-link {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* Archive: drop sub + year columns */
  .r-archive-row {
    grid-template-columns: 32px 1fr 24px !important;
    padding: 14px 16px !important;
  }
  .r-archive-sub,
  .r-archive-year {
    display: none !important;
  }
  .r-archive-title {
    font-size: 15px !important;
  }

  /* About */
  .r-about {
    padding: 40px 20px !important;
  }
  .r-about-grid {
    padding: 28px !important;
  }
  .r-about-h2 {
    font-size: 34px !important;
  }
  .r-about-body {
    font-size: 15px !important;
  }
  .r-skills-card {
    padding: 28px !important;
  }
  .r-skills-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .r-toolkit-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Footer */
  .r-footer {
    padding: 0 20px 40px !important;
  }
  .r-footer-card {
    padding: 32px 24px !important;
  }
  .r-footer-cta-row a {
    font-size: 14px !important;
    padding: 12px 18px !important;
  }
  .r-footer-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 36px !important;
  }

  /* ─── Case study ─── */
  .r-case-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .r-case-meta {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .r-case-stats-grid,
  .r-case-metrics-grid,
  .r-case-insights-grid {
    grid-template-columns: 1fr !important;
  }
  .r-case-metrics-card {
    padding: 28px !important;
  }
  .r-case-metrics-item {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(245, 237, 226, 0.18) !important;
    padding-top: 18px !important;
  }
  .r-case-metrics-item:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
  .r-case-persona {
    grid-template-columns: 80px 1fr !important;
    gap: 16px !important;
    padding: 24px !important;
  }
  .r-case-persona-avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 36px !important;
  }
  .r-case-next {
    padding: 32px 24px !important;
  }
  .r-case-next-link {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 28px 24px !important;
  }
  .r-case-next-link-arrow {
    font-size: 44px !important;
  }
  .r-case-footer-card {
    padding: 32px 24px !important;
  }
  .r-case-hero-sub {
    font-size: 22px !important;
  }
}