/* Final responsive navigation, project-card, Learn More, and icon pass — July 23, 2026 */

/* Slightly larger primary navigation with a true LinkedIn icon aligned to the text. */
body:not(.project-page) .site-nav__links .site-nav__link {
  font-size: 19px !important;
  line-height: 1 !important;
}

body:not(.project-page) .linkedin-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

body:not(.project-page) .linkedin-link svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
}

/* Tablet navigation: evenly distributed and vertically centered. */
@media (max-width: 1100px) {
  body:not(.project-page) .site-nav {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    min-height: 68px !important;
  }

  body:not(.project-page) .site-nav::before,
  body:not(.project-page) .linkedin-link {
    width: 34px !important;
  }

  body:not(.project-page) .site-nav__links {
    width: min(100%, 720px) !important;
  }

  body:not(.project-page) .site-nav__links .site-nav__link {
    min-height: 68px !important;
    font-size: 19px !important;
  }

  body:not(.project-page) .linkedin-link {
    min-height: 68px !important;
  }

  body:not(.project-page) .linkedin-link svg {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }
}

@media (max-width: 680px) {
  body:not(.project-page) .site-nav {
    grid-template-columns: 27px minmax(0, 1fr) 27px !important;
    column-gap: 9px !important;
    min-height: 62px !important;
    padding-inline: 13px !important;
  }

  body:not(.project-page) .site-nav::before,
  body:not(.project-page) .linkedin-link {
    width: 27px !important;
  }

  body:not(.project-page) .site-nav__links .site-nav__link {
    min-height: 62px !important;
    padding-inline: 2px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }

  body:not(.project-page) .linkedin-link {
    min-height: 62px !important;
  }

  body:not(.project-page) .linkedin-link svg {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }
}

@media (max-width: 390px) {
  body:not(.project-page) .site-nav {
    grid-template-columns: 24px minmax(0, 1fr) 24px !important;
    column-gap: 6px !important;
    padding-inline: 9px !important;
  }

  body:not(.project-page) .site-nav::before,
  body:not(.project-page) .linkedin-link {
    width: 24px !important;
  }

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

  body:not(.project-page) .linkedin-link svg {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
  }
}

/* Correct homepage project-card proportions and type on smaller screens. */
@media (max-width: 760px) {
  .page-home .projects {
    padding-inline: clamp(28px, 6.5vw, 44px) !important;
  }

  .page-home .project-grid {
    grid-template-columns: 1fr !important;
    width: min(100%, 540px) !important;
    margin-inline: auto !important;
    row-gap: 30px !important;
  }

  .page-home .project-card__link {
    display: flex !important;
    height: auto !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
  }

  .page-home .project-card__cover {
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .page-home .project-card__content {
    display: block !important;
    min-height: 88px !important;
    height: auto !important;
    flex: 0 0 auto !important;
    padding: 15px 17px 14px !important;
  }

  .page-home .project-card__title {
    margin: 0 0 7px !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
  }

  .page-home .project-card__meta {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
  }
}

@media (max-width: 460px) {
  .page-home .projects {
    padding-inline: 24px !important;
  }

  .page-home .project-grid {
    width: min(100%, 390px) !important;
    row-gap: 26px !important;
  }

  .page-home .project-card__content {
    min-height: 84px !important;
    padding: 14px 15px 13px !important;
  }

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

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

/* Keep Learn More cards proportionate, with all text aligned inside the brown panel. */
@media (max-width: 900px) {
  .project-page .learn-more {
    padding-inline: clamp(28px, 5vw, 46px) !important;
  }

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

  .project-page .learn-more__title {
    margin-bottom: 24px !important;
    font-size: clamp(2rem, 5vw, 2.45rem) !important;
  }

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

  .project-page .learn-more-card__link {
    display: flex !important;
    height: 100% !important;
    flex-direction: column !important;
  }

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

  .project-page .learn-more-card__content {
    display: flex !important;
    min-height: 118px !important;
    height: auto !important;
    padding: 16px 18px 17px !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .project-page .learn-more-card__title {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }

  .project-page .learn-more-card__action {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  .project-page .learn-more-card__action::after {
    content: none !important;
  }
}

@media (max-width: 560px) {
  .project-page .learn-more {
    margin-top: 34px !important;
    padding: 34px 24px 48px !important;
  }

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

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

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

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

  .project-page .learn-more-card__content {
    min-height: 102px !important;
    padding: 15px 16px 16px !important;
    gap: 10px !important;
  }

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

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