/* July 23, 2026: mobile spacing, Alston carousel, and SilverSneakers refinements */

/* Alston & Bird: the descriptive labels were removed, so keep the three
   carousels in a tighter, uninterrupted sequence. */
.source-case-section--alston .source-media-sections {
  gap: clamp(28px, 3.8vw, 48px) !important;
}

.source-case-section--alston .source-media-section {
  margin: 0 !important;
}

/* SilverSneakers: three-column presentation on full-size screens. */
.project-silversneakers .silversneakers-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.8vw, 26px) !important;
  width: min(calc(100% - 64px), 1320px) !important;
}

/* Spread the standard navigation choices across the available bar on
   laptops, tablets, and phones while keeping LinkedIn at the right. */
@media (max-width: 1024px) {
  body:not(.project-page) .site-nav {
    gap: clamp(18px, 3vw, 32px) !important;
    padding-right: clamp(20px, 3vw, 30px) !important;
    padding-left: clamp(20px, 3vw, 30px) !important;
  }

  body:not(.project-page) .site-nav__links {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  body:not(.project-page) .linkedin-link {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  /* Give project cards more side breathing room as the screen narrows. */
  .page-home .projects {
    padding-right: clamp(30px, 5vw, 50px) !important;
    padding-left: clamp(30px, 5vw, 50px) !important;
  }
}

@media (max-width: 900px) {
  .project-silversneakers .silversneakers-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(calc(100% - 56px), 900px) !important;
  }
}

@media (max-width: 760px) {
  /* More left-side room for the project-page header and introductory copy. */
  .project-page {
    --site-page-gutter: 24px;
  }

  .project-page .project-nav {
    padding-right: 20px !important;
    padding-left: 24px !important;
  }

  .project-page .project-intro {
    width: 100% !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  .project-page .project-title,
  .project-page .project-summary,
  .project-page .project-meta-line,
  .project-page .back-link {
    max-width: 100% !important;
  }

  .source-case-section--alston .source-media-sections {
    gap: 26px !important;
  }

  body:not(.project-page) .site-nav {
    gap: 18px !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  body:not(.project-page) .site-nav__link {
    font-size: clamp(13px, 2.2vw, 15px) !important;
  }

  body:not(.project-page) .linkedin-link {
    font-size: 20px !important;
  }

  .page-home .projects {
    padding-right: clamp(30px, 7vw, 46px) !important;
    padding-left: clamp(30px, 7vw, 46px) !important;
  }

  .page-home .project-grid {
    column-gap: clamp(16px, 4vw, 24px) !important;
    row-gap: clamp(24px, 5vw, 34px) !important;
  }
}

@media (max-width: 560px) {
  body:not(.project-page) .site-nav {
    gap: 14px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body:not(.project-page) .site-nav__link {
    min-height: 40px !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  body:not(.project-page) .linkedin-link {
    min-height: 40px !important;
    font-size: 19px !important;
  }

  /* Smaller, centered homepage cards with more space at both edges. */
  .page-home .projects {
    padding-right: 28px !important;
    padding-left: 28px !important;
  }

  .page-home .project-filter,
  .page-home .project-grid {
    width: min(100%, 314px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .page-home .project-grid {
    grid-template-columns: 1fr !important;
    row-gap: 25px !important;
  }

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

  .page-home .project-card__title {
    margin-bottom: 5px !important;
    font-size: 12px !important;
  }

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

  /* Compact Learn More section on phones. */
  .project-page .learn-more {
    margin-top: 26px !important;
    padding: 28px 24px 36px !important;
  }

  .project-page .learn-more__inner {
    width: min(100%, 330px) !important;
  }

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

  .project-page .learn-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

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

  .project-page .learn-more-card__content {
    min-height: 0 !important;
    gap: 5px !important;
    padding-top: 8px !important;
  }

  .project-page .learn-more-card__title {
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
  }

  .project-page .learn-more-card__action::after {
    font-size: 0.78rem !important;
  }

  .project-silversneakers .silversneakers-gallery {
    grid-template-columns: 1fr !important;
    width: min(calc(100% - 48px), 420px) !important;
    gap: 20px !important;
  }
}

@media (max-width: 390px) {
  .project-page {
    --site-page-gutter: 22px;
  }

  .project-page .project-nav,
  .project-page .project-intro {
    padding-right: 22px !important;
    padding-left: 22px !important;
  }

  body:not(.project-page) .site-nav {
    gap: 11px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  body:not(.project-page) .site-nav__link {
    font-size: 12px !important;
  }

  body:not(.project-page) .linkedin-link {
    font-size: 18px !important;
  }

  .page-home .projects {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }

  .page-home .project-filter,
  .page-home .project-grid {
    width: min(100%, 292px) !important;
  }
}