/* responsive.css
   Only viewport breakpoints live here. Load after styles2.css.
*/

/* =============== Desktop-specific upsizes (≥ 1024px) =============== */
@media (min-width: 1024px) {
  /* Longer section-rule lines on desktop */
  :root {
    --section-rule: clamp(280px, 40vw, 420px);
    --section-gap: 3.5rem;
  }

  /* Skills: 3 across on row 1, bottom two fill entire row */
  .skills-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.6rem;
    max-width: 1400px;
    margin: 0 auto;
  }
  .skills-grid > .skill-box:nth-child(-n + 3) {
    grid-column: span 2;
  }
  .skills-grid > .skill-box:nth-child(n + 4) {
    grid-column: span 3;
  }

  /* Organizations: 2 up top, one centered below */
  .org-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .org-grid .org-card:nth-child(1),
  .org-grid .org-card:nth-child(2) {
    grid-column: span 3;
  }
  .org-grid .org-card:nth-child(3) {
    grid-column: 2 / span 4;
  }

  /* push top pair toward each other */
  .org-grid .org-card:nth-child(1) {
    justify-self: end;
  }
  .org-grid .org-card:nth-child(2) {
    justify-self: start;
  }
  .org-grid .org-card:nth-child(3) {
    justify-self: center;
  }
}

/* =============== Tablet & small laptop (≤ 1024px) =============== */
@media (max-width: 1024px) {
  :root {
    --section-rule: clamp(200px, 36vw, 320px);
    --section-gap: 2.25rem;
  }

  .nav .container {
    max-width: 100%;
    padding: 0.75rem 1rem;
  }

  /* Hero spacing and image size */
  .hero-inner {
    gap: 1.5rem;
    padding: 0 1rem;
  }
  .hero-left,
  .hero-right {
    margin-right: 0;
    padding-left: 0;
    flex: 1 1 48%;
  }
  .hero-center .hero-img,
  .hero-logo img.hero-img {
    width: clamp(340px, 46vw, 520px);
    height: auto;
  }

  /* Projects */
  .project-item {
    gap: 1.25rem;
  }
  .project-slideshow {
    max-width: 520px;
    width: 100%;
  }

  /* Skills → 2 columns */
  .skills {
    width: min(1200px, 96vw);
  }
  .skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .skill-box {
    padding: 2.2rem 1.6rem 1.6rem;
    min-height: clamp(220px, 30vw, 280px);
  }

  /* Organizations → 2 columns, bottom spans full */
  .organizations {
    width: min(1200px, 96vw);
  }
  .org-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .org-grid .org-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* Footer */
  .footer-content {
    gap: 1.25rem;
  }
}

/* =============== Large phones / portrait tablet (≤ 768px) =============== */
@media (max-width: 768px) {
  :root {
    --section-rule: clamp(160px, 44vw, 240px);
    --section-gap: 1.75rem;
  }

  .nav .container {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
  .nav nav {
    justify-content: center;
    width: 100%;
  }

  .hero {
    padding-top: 4rem;
  } /* <-- extra breathing room */
  .hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .hero-left,
  .hero-right {
    text-align: center;
    flex: 1 1 100%;
  }
  .rightauto-container {
    margin-top: 2rem;
    border-left: 0;
    padding-left: 0;
  }

  .project-item {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  .slideshow-container {
    width: 100%;
    max-width: 560px;
  }

  .skills-grid {
    grid-template-columns: 1fr !important;
  }
  .skill-box {
    min-height: clamp(220px, 46vw, 280px);
    padding: 2rem 1.25rem 1.25rem;
  }

  .org-grid {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
  .org-card {
    width: min(92vw, 540px);
    aspect-ratio: 5 / 4;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 0.9rem;
  }
  .contact-info p {
    justify-content: center;
  }
  .credits::before {
    width: 90%;
  }
}

/* =============== Small phones (≤ 480px) =============== */
@media (max-width: 480px) {
  :root {
    --section-rule: clamp(140px, 52vw, 200px);
    --section-gap: 1.25rem;
  }

  .hero {
    padding-top: 6rem;
  } /* <-- a bit more on tiny phones */

  .hero h1 {
    font-size: 2.4rem;
  }
  .hero h2 {
    font-size: 1.8rem;
  }
  .hero-typed,
  .typed-text,
  .right-intro {
    font-size: 1.4rem;
  }

  .btn-download-cv {
    font-size: 1.25rem;
    padding: 10px 18px;
  }
  .social-icons a {
    padding: 8px;
    font-size: 1.2rem;
  }

  .project-details h3 {
    font-size: 1.25rem;
  }
  .project-details li {
    font-size: 1.05rem;
  }

  .skill-box {
    min-height: 220px;
    padding: 1.6rem 1rem 1rem;
  }

  .org-card {
    width: 92vw;
    aspect-ratio: 1 / 1;
  }

  .footer {
    padding: 1.5rem 1rem;
  }
  .social-links a {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }
  .contact-info i {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }
}

/* ===== Contact Modal: responsive tweaks ===== */

/* Make the dialog never exceed the viewport; scroll inside if needed */
.mz-dialog {
  max-height: min(86vh, 680px);
  overflow: auto;
}

/* Tablet and down */
@media (max-width: 768px) {
  .mz-dialog {
    width: min(96vw, 520px);
    margin: 8vh auto 0;
    padding: 16px;
    border-radius: 12px;
  }

  .mz-form label {
    font-size: 0.85rem;
  }

  /* Stack buttons on small screens */
  .mz-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .mz-btn {
    width: 100%;
  }

  /* Let the message box breathe but keep it capped */
  .mz-form textarea {
    max-height: 30vh; /* replaces the 148px cap on small screens */
  }
}

/* Phones */
@media (max-width: 480px) {
  .mz-dialog {
    width: 94vw;
    margin: 6vh auto 0;
    padding: 14px;
    border-radius: 10px;
  }

  .mz-close {
    top: 8px;
    right: 8px;
  }

  /* Prevent iOS zoom-on-focus */
  .mz-form input,
  .mz-form textarea {
    font-size: 16px;
  }
}

/* Optional: account for iOS safe areas in landscape */
@supports (padding: max(0px)) {
  .mz-dialog {
    margin-top: max(6vh, env(safe-area-inset-top));
    margin-bottom: max(2vh, env(safe-area-inset-bottom));
  }
}