/* ── Tablet (768–1199px) ─────────────────────────────────── */

@media (max-width: 1199px) {
  /* Hero */
  .page-hero {
    --page-hero-image-height: clamp(14rem, 20vw, 22rem);
    --page-hero-space-top: 2rem;
  }

  .page-hero__title {
    max-width: 18ch;
  }

  .image-mosaic {
    padding: var(--space-after-hero) 0 2.25rem;
    --mosaic-unit-height: clamp(15rem, 28vw, 22.5rem);
  }

  .about-page__section--wide {
    max-width: none;
  }
}

/* ── Mobile (≤ 767px) ────────────────────────────────────── */

@media (max-width: 767px) {
  .simple-page {
    padding: var(--space-section-sm) 0;
  }

  .page-hero__title {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }

  .page-hero__subtitle {
    font-size: var(--text-base);
  }

  .simple-page__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-page__section--wide {
    max-width: none;
  }

  .services-page {
    --services-space-section: 2.25rem;
  }

  :root {
    --space-after-hero: 2.25rem;
  }

  .process-timeline__content {
    margin-bottom: 1rem;
  }

  .cta-block--final {
    margin-top: 2rem;
    padding-top: 1.25rem;
  }

  .article-detail {
    padding: var(--space-section-sm) 0;
  }

  .article-detail__back {
    margin-bottom: 1.5rem;
  }

  .article-detail__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .article-detail__summary {
    gap: 0.625rem;
    padding: var(--card-padding);
  }

  .article-detail__title {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .article-detail__body {
    margin-top: 1.75rem;
    padding: var(--card-padding);
  }

  .article-content {
    font-size: var(--text-base);
  }

  .home-page {
    --home-space-section: 2.25rem;
  }

  /* Hero */
  .page-hero {
    --page-hero-space-top: 1.5rem;
    --page-hero-space-bottom: clamp(1.25rem, 3vw, 1.75rem);
  }

  .page-hero__inner {
    grid-template-columns: 1fr;
  }

  .page-hero__media {
    display: none;
  }

  .page-hero__title {
    margin-bottom: 0.875rem;
    max-width: none;
  }

  .page-hero__subtitle {
    margin-bottom: 1.25rem;
  }

  .page-hero__actions .button {
    max-width: 100%;
  }
}

@media (max-width: 320px) {
  .page-hero__title {
    font-size: 1.75rem;
  }
}

/* ── Small mobile (≤ 479px) ───────────────────────────────── */

@media (max-width: 479px) {
  .home-page {
    --home-space-section: 1.75rem;
  }

  .services-page {
    --services-space-section: 1.75rem;
  }

  .page-hero {
    --page-hero-space-top: 1.25rem;
  }

  .page-hero__title {
    font-size: clamp(1.75rem, 8.25vw, 2.125rem);
  }

  .instagram-strip__header.section__header {
    margin-bottom: 1rem;
  }
}