/* Shared mobile/tablet layout fixes — overrides inline grid columns that crush text on phones */

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 960px) {
  .r-pad {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .r-nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .r-nav-links {
    gap: 12px 16px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    max-width: 100% !important;
  }

  .r-brand-name {
    display: none !important;
  }

  .r-stack,
  .r-hero,
  .r-split,
  .r-project,
  .r-post-hero,
  .r-post-body,
  .r-timeline,
  .r-method,
  .r-series,
  .r-talk {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .r-hero > *,
  .r-split > *,
  .r-project > *,
  .r-post-hero > *,
  .r-post-body > *,
  .r-timeline > *,
  .r-method > *,
  .r-series > *,
  .r-talk > * {
    min-width: 0;
  }

  .r-hero {
    align-items: start !important;
  }

  .r-hero-fig {
    width: min(200px, 100%) !important;
  }

  .r-aside {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid #1F2A3C;
    padding-top: 24px;
  }

  .r-cols-4,
  .r-cols-5 {
    grid-template-columns: 1fr 1fr !important;
  }

  .r-cols-3 {
    grid-template-columns: 1fr !important;
  }

  .r-cols-2 {
    grid-template-columns: 1fr !important;
  }

  .r-box {
    padding: 28px 22px !important;
  }

  .r-thesis {
    padding: 36px 24px !important;
    gap: 28px !important;
  }

  .r-post-toc {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px 20px !important;
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #1F2A3C;
  }

  .r-post-toc > div:first-child {
    flex: 0 0 100%;
  }

  .r-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 560px) {
  .r-pad {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .r-cols-4,
  .r-cols-5 {
    grid-template-columns: 1fr !important;
  }

  .r-series {
    gap: 16px !important;
  }

  .r-method {
    gap: 10px !important;
  }

  .r-project {
    padding: 28px 20px !important;
  }
}