/* ==========================================
RESPONSIVE
========================================== */

@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .hero__content {
    margin-inline: auto;
  }

  .hero__description {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .navbar__menu {
    display: none;
  }

  .hero {
    padding-block: 5rem;
  }

  .section-header {
    margin-bottom: 3rem;
  }

  .clickable-card {
    min-height: auto;
  }

  .contact-grid,
  .impact-grid {
    grid-template-columns: 1fr;
  }

  .footer__content {
    flex-direction: column;

    align-items: flex-start;
  }

  .cta__actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hero__title {
    max-width: 100%;
  }

  .hero__visual {
    max-width: 320px;
  }

  .flip-card {
    width: 240px;
  }
}

/* ==========================================
   HERO - MOBILE
========================================== */

@media (max-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr;

    gap: var(--space-4);
  }

  .hero__media {
    order: -1;
  }

  .hero__visual {
    width: min(90vw, 420px);

    max-width: 420px;

    margin-inline: auto;

    padding: var(--space-2);
  }

  .hero-svg {
    width: 100%;

    height: auto;
  }

  .hero-svg svg {
    width: 100%;

    height: auto;
  }
}

/* ==========================================
CONTENT - RESPONSIVE
========================================== */

@media (max-width: 768px) {
  .overview__grid,
  .content-grid,
  .gallery,
  .stats,
  .highlights {
    grid-template-columns: 1fr;
  }

  .overview__meta {
    padding-left: 0;

    padding-top: var(--space-4);

    border-left: 0;

    border-top: 1px solid var(--color-border);
  }

  .page-nav {
    flex-direction: column;
  }

  .page-nav__item:last-child {
    text-align: left;
  }

  .author {
    flex-direction: column;

    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .page-content,
  .page-content--wide {
    max-width: 100%;
  }

  .content p,
  .content li {
    font-size: var(--fs-body);
  }
}

/* ==========================================
   RESPONSIVE - RESUME
========================================== */

@media (max-width: 768px) {
  .company-header {
    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-2);
  }

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

  .experience-card {
    min-height: auto;
  }

  .experience-card__header {
    flex-direction: row;

    align-items: baseline;

    flex-wrap: wrap;

    gap: var(--space-2);
  }

  .experience-card__metric {
    font-size: var(--fs-h2);
  }

  .experience-card__title {
    font-size: var(--fs-h3);
  }

  .resume-download {
    padding: var(--space-4);
  }
}

@media (max-width: 640px) {
  .experience-card__metric {
    font-size: var(--fs-h2);
  }

  .experience-card__title {
    font-size: var(--fs-h3);
  }

  .resume-download__description {
    font-size: var(--fs-body);
  }
}

/* ==========================================
   RESPONSIVE - CONTACT
========================================== */

@media (max-width: 1024px) {
  .contact-topic {
    gap: var(--space-4);
  }

  .contact-topic__title {
    flex-basis: 14rem;
  }
}

@media (max-width: 768px) {
  .contact-topic {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
  }

  .contact-topic__title {
    /* Reset everything from desktop */

    flex: 0 0 auto;

    width: auto;

    min-width: 0;

    margin: 0;

    padding: 0;
  }

  .contact-topic__description {
    margin: 0;

    padding: 0;
  }
}

@media (max-width: 640px) {
  .contact-topic__description {
    font-size: var(--fs-body);
  }
}

/* ==========================================
RESPONSIVE - PROJECT META
========================================== */

@media (max-width: 768px) {
  .project-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .project-meta {
    grid-template-columns: 1fr;

    gap: var(--space-3);
  }

  .project-meta > div {
    display: flex;

    flex-direction: column;

    gap: var(--space-half);

    padding-bottom: var(--space-3);

    border-bottom: 1px solid var(--color-border);
  }

  .project-meta > div:last-child {
    padding-bottom: 0;

    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .project-meta {
    grid-template-columns: 1fr;
  }
}