/* =========================================================
   TAYLOR REIS — PORTFOLIO
   Responsive Styles

   Breakpoints:
   Mobile      < 640px
   Tablet      640px+
   Notebook    1024px+
   Desktop     1280px+
   Ultrawide   1536px+
========================================================= */

/* =========================================================
   01. BASE / MOBILE
   < 640px
========================================================= */

@media (max-width: 639px) {
  html {
    scroll-padding-top: 72px;
  }

  /* ---------------------------------------------------------
     GLOBAL
  --------------------------------------------------------- */

  body {
    font-size: 15px;
  }

  section {
    scroll-margin-top: 72px;
  }

  /* ---------------------------------------------------------
     HEADER
  --------------------------------------------------------- */

  header nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ---------------------------------------------------------
     HERO
  --------------------------------------------------------- */

  #home {
    min-height: auto;

    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  #home h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);

    line-height: 1.02;
  }

  #home p {
    font-size: 1rem;
  }

  /* ---------------------------------------------------------
     SECTIONS
  --------------------------------------------------------- */

  #about,
  #skills,
  #projects,
  #experience,
  #github,
  #contact {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .section-kicker {
    font-size: 0.62rem;
  }

  /* ---------------------------------------------------------
     STACK
  --------------------------------------------------------- */

  .stack-card {
    min-height: auto;

    padding: 1.25rem;
  }

  .stack-card-header {
    gap: 0.85rem;
  }

  .stack-card-title {
    font-size: 0.95rem;
  }

  .stack-card-description {
    font-size: 0.75rem;
  }

  .stack-technologies {
    gap: 0.4rem;
  }

  .tech-tag {
    padding: 0.38rem 0.58rem;

    font-size: 0.65rem;
  }

  /* ---------------------------------------------------------
     PROJECTS
  --------------------------------------------------------- */

  #featured-projects {
    display: grid;

    grid-template-columns: 1fr;

    gap: 1.25rem;
  }

  .project-content {
    padding: 1.25rem;
  }

  .project-description {
    font-size: 0.82rem;
  }

  /* ---------------------------------------------------------
     EXPERIENCE
  --------------------------------------------------------- */

  .experience-list::before {
    left: 4px;
  }

  .experience-card {
    grid-template-columns: 1fr;

    gap: 20px;

    padding-left: 30px;
    padding-bottom: 40px;

    margin-bottom: 40px;
  }

  .experience-card::before {
    left: 0;

    top: 6px;
  }

  .experience-meta {
    align-items: flex-start;

    text-align: left;

    gap: 5px;
  }

  .experience-company {
    max-width: none;
  }

  .experience-role {
    font-size: 1.3rem;
  }

  .experience-description {
    font-size: 0.92rem;
  }

  .experience-highlights {
    gap: 8px;
  }

  .experience-highlights li {
    font-size: 0.86rem;
  }

  .experience-technologies {
    gap: 6px;
  }

  /* ---------------------------------------------------------
     GITHUB
  --------------------------------------------------------- */

  .github-stat-card {
    min-height: 115px;

    padding: 1rem;
  }

  .github-stat-value {
    font-size: 1.5rem;
  }

  .github-stat-label {
    font-size: 0.58rem;

    line-height: 1.4;
  }

  .github-panel {
    min-height: auto;

    padding: 1.25rem;
  }

  /* ---------------------------------------------------------
     FORM
  --------------------------------------------------------- */

  .form-input {
    padding: 0.9rem;
  }

  /* ---------------------------------------------------------
     TOAST
  --------------------------------------------------------- */

  .toast {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;

    max-width: none;
  }

  /* ---------------------------------------------------------
     FOOTER
  --------------------------------------------------------- */

  footer {
    text-align: center;
  }
}

/* =========================================================
   02. SMALL MOBILE
   <= 375px
========================================================= */

@media (max-width: 375px) {
  #home {
    padding-top: 7rem;
  }

  #home h1 {
    font-size: 2.55rem;
  }

  .focus-tag,
  .tech-tag {
    font-size: 0.62rem;
  }

  .github-stat-value {
    font-size: 1.35rem;
  }

  .experience-card {
    padding-left: 26px;
  }

  .experience-role {
    font-size: 1.2rem;
  }
}

/* =========================================================
   03. TABLET
   640px — 767px
========================================================= */

@media (min-width: 640px) and (max-width: 767px) {
  #featured-projects {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.5rem;
  }

  .experience-list::before {
    left: 4px;
  }

  .experience-card {
    grid-template-columns: 1fr;

    gap: 20px;

    padding-left: 32px;
    padding-bottom: 42px;

    margin-bottom: 42px;
  }

  .experience-card::before {
    left: 0;

    top: 6px;
  }

  .experience-meta {
    align-items: flex-start;

    text-align: left;
  }

  .experience-company {
    max-width: none;
  }
}

/* =========================================================
   04. TABLET / SMALL NOTEBOOK
   768px — 1023px
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  #featured-projects {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.5rem;
  }

  .stack-card {
    min-height: 190px;
  }

  .experience-list::before {
    left: 4px;
  }

  .experience-card {
    grid-template-columns: 1fr;

    gap: 22px;

    padding-left: 32px;
    padding-bottom: 44px;

    margin-bottom: 44px;
  }

  .experience-card::before {
    left: 0;

    top: 7px;
  }

  .experience-meta {
    align-items: flex-start;

    text-align: left;
  }

  .experience-company {
    max-width: none;
  }
}

/* =========================================================
   05. NOTEBOOK
   1024px — 1279px
========================================================= */

@media (min-width: 1024px) and (max-width: 1279px) {
  #home h1 {
    font-size: 3.6rem;
  }

  #featured-projects {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.5rem;
  }

  .experience-card {
    grid-template-columns:
      140px
      minmax(0, 1fr);

    gap: 54px;
  }

  .experience-list::before {
    left: 164px;
  }

  .experience-card::before {
    left: 160px;
  }
}

/* =========================================================
   06. DESKTOP
   >= 1280px
========================================================= */

@media (min-width: 1280px) {
  #featured-projects {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.5rem;
  }

  #featured-projects .project-card:first-child {
    grid-column: span 2;
  }

  #featured-projects .project-card:first-child .project-image {
    aspect-ratio: 16 / 7.5;
  }
}

/* =========================================================
   07. LARGE DESKTOP
   >= 1536px
========================================================= */

@media (min-width: 1536px) {
  #home h1 {
    max-width: 850px;
  }

  .stack-card {
    min-height: 220px;
  }

  #featured-projects {
    gap: 1.75rem;
  }
}

/* =========================================================
   08. ULTRAWIDE
   >= 1920px
========================================================= */

@media (min-width: 1920px) {
  body {
    font-size: 16px;
  }

  #home {
    min-height: 900px;
  }
}

/* =========================================================
   09. LOW HEIGHT SCREENS
========================================================= */

@media (min-width: 1024px) and (max-height: 750px) {
  #home {
    min-height: 750px;

    padding-top: 7rem;
    padding-bottom: 4rem;
  }
}

/* =========================================================
   10. TOUCH DEVICES
========================================================= */

@media (hover: none) {
  .stack-card:hover,
  .project-card:hover,
  .social-link:hover {
    transform: none;
  }

  .project-card:hover .project-image img {
    transform: none;
  }

  .tech-tag:hover {
    transform: none;
  }
}

/* =========================================================
   11. POINTER / MOUSE
========================================================= */

@media (hover: hover) and (pointer: fine) {
  .project-card,
  .stack-card,
  .social-link,
  .nav-link,
  button,
  a {
    cursor: pointer;
  }
}

/* =========================================================
   12. LANDSCAPE MOBILE
========================================================= */

@media (max-width: 900px) and (orientation: landscape) {
  #home {
    min-height: auto;

    padding-top: 7rem;
    padding-bottom: 4rem;
  }
}

/* =========================================================
   13. PRINT
========================================================= */

@media print {
  header,
  footer,
  #toast,
  #menuOverlay,
  #mobileMenu,
  #contact form {
    display: none !important;
  }

  body {
    background: white !important;

    color: black !important;
  }

  section {
    break-inside: avoid;
  }

  .aos,
  .hero-r {
    opacity: 1 !important;

    transform: none !important;
  }
}