/* Laptop project-intro alignment and phone-only card scaling — July 23, 2026 */

/*
  Laptop only: match the project intro inset shown in the approved reference.
  Learn More remains unchanged at laptop widths.
*/
@media (min-width: 900px) and (max-width: 1440px) {
  .project-page .project-intro {
    width: min(76vw, 1100px) !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Phone only: make the homepage project cards visibly smaller. */
@media (max-width: 600px) {
  .page-home .projects {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .page-home .project-grid {
    width: min(78vw, 300px) !important;
    max-width: 300px !important;
    margin-inline: auto !important;
    row-gap: 24px !important;
  }

  .page-home .project-card,
  .page-home .project-card__link {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-home .project-card__cover {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .page-home .project-card__content {
    min-height: 72px !important;
    padding: 12px 13px 11px !important;
  }

  .page-home .project-card__title {
    margin-bottom: 5px !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
  }

  .page-home .project-card__meta {
    font-size: 10.5px !important;
    line-height: 1.34 !important;
  }

  /* Phone-only Learn More sizing. Laptop/tablet rules are intentionally untouched. */
  .project-page .learn-more {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .project-page .learn-more__inner {
    width: min(72vw, 270px) !important;
    max-width: 270px !important;
    margin-inline: auto !important;
  }

  .project-page .learn-more__title {
    margin-bottom: 18px !important;
    font-size: 1.72rem !important;
  }

  .project-page .learn-more__grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .project-page .learn-more-card:nth-child(n + 3) {
    display: none !important;
  }

  .project-page .learn-more-card__link {
    width: 100% !important;
    max-width: 100% !important;
  }

  .project-page .learn-more-card__cover {
    aspect-ratio: 4 / 3 !important;
  }

  .project-page .learn-more-card__content {
    min-height: 72px !important;
    padding: 12px 13px 11px !important;
    gap: 6px !important;
  }

  .project-page .learn-more-card__title {
    margin-bottom: 5px !important;
    font-size: 13.5px !important;
    line-height: 1.22 !important;
  }

  .project-page .learn-more-card__meta,
  .project-page .learn-more-card__action {
    font-size: 9.75px !important;
    line-height: 1.32 !important;
  }
}

/* Narrow iPhones: show one related project and reduce both card systems again. */
@media (max-width: 390px) {
  .page-home .project-grid {
    width: min(76vw, 260px) !important;
    max-width: 260px !important;
    row-gap: 21px !important;
  }

  .page-home .project-card__content {
    min-height: 68px !important;
    padding: 11px 12px 10px !important;
  }

  .page-home .project-card__title {
    font-size: 13.5px !important;
  }

  .page-home .project-card__meta {
    font-size: 10px !important;
  }

  .project-page .learn-more__inner {
    width: min(70vw, 238px) !important;
    max-width: 238px !important;
  }

  .project-page .learn-more-card:nth-child(n + 2) {
    display: none !important;
  }

  .project-page .learn-more-card__content {
    min-height: 66px !important;
    padding: 11px 12px 10px !important;
  }

  .project-page .learn-more-card__title {
    font-size: 13px !important;
  }

  .project-page .learn-more-card__meta,
  .project-page .learn-more-card__action {
    font-size: 9.25px !important;
  }
}