/* =========================================================
   HEIGHT COMPACT  –  max-height: 865px
   Landscape phones and short-viewport desktops/tablets.
   ========================================================= */

/* ---- Desktop / Tablet landscape (>768px wide, ≤865px tall) ---- */
@media (min-width: 769px) and (max-height: 920px) {
   .section {
      padding: 36px 80px 36px 10px;
   }

   .nav-logo {
      width: 72px;
      height: 72px;
   }

   .logo-initials {
      font-size: 16px;
   }

   .nav-links {
      gap: 14px;
   }

   .section-label {
      font-size: 36px;
      -webkit-text-stroke: 2px var(--color-main);
   }

   .arrow-icon {
      width: 80px;
   }

   /* Re-position arrows so they stay inside the visible content area */
   .arrow-btn--hero {
      top: 275px;
   }
   .arrow-btn--why-me {
      top: calc(100% - 36px);
   }
   .arrow-btn--skills {
      top: calc(50% - 105px);
   }
   .arrow-btn--work {
      top: calc(100% - 36px);
   }
   .arrow-btn--references {
      top: 184px;
   }

   .about-content h3 {
      font-size: 3vw;
   }

   #why-me {
      padding-top: 112px;
   }

   /* Hero */
   .hero-name {
      font-size: 56px;
   }

   .hero-image {
      width: 600px;
      margin: 0 auto;
   }

   /* Skills */
   .skills-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
   }

   .skill-icon,
   .skill-item img {
      width: 44px;
      height: 44px;
   }

   .skill-item {
      font-size: 13px;
   }
   /* Projekt */
   .project-card {
      height: 473px;
      padding: 16px;
   }

   .project-number {
      font-size: 72px;
   }

   .project-card h3 {
      font-size: 40px;
   }

   .project-about p,
   .project-details p,
   .project-card-footer p {
      font-size: 15px;
   }

   .detail-label {
      font-size: 18px;
   }

   .project-card-media {
      width: 240px;
   }

   .project-card-media img {
      height: 88%;
   }

   .project-card--ongoing {
      height: 245px;
   }

   .project-card--ongoing .project-number {
      font-size: 38px;
   }

   .project-card--ongoing h3 {
      font-size: 24px;
   }

   .project-card--ongoing p {
      font-size: 14px;
   }

   /* Contact */
   .contact-info {
      height: 72vh;
   }

   .contact-tagline,
   .contact-description {
      font-size: 16px;
   }

   .contact-form textarea {
      height: 80px;
   }

   .contact-wrapper {
      padding-top: 24px;
   }

   /* Legal / Privacy */
   .legal-wrapper {
      padding-top: 24px;
   }
}

/* ---- Project card layout fix for landscape (wide + short) ---- */
@media (min-width: 769px) and (max-height: 547px) {
   .project-card {
      height: 235px;
   }

   .project-card.is-expanded {
      height: auto;
   }

   .project-card-upper {
      flex-direction: row;
   }
}

/* ---- Nav link font size reduction at wide screens with short height ---- */
@media (min-width: 2300px) and (max-height: 1360px) {
   .nav-links a {
      font-size: 35px;
   }
}

/* ---- Nav link font size reduction below 720px height ---- */
@media (min-width: 769px) and (max-height: 720px) {
   .nav-links a {
      font-size: 24px;
   }
}

/* ---- References column layout on short desktops ---- */
@media (min-width: 765px) and (max-height: 1450px) {
   .reference-card {
      flex-direction: column;
      gap: 8px;
   }

   .reference-divider {
      width: 100%;
      height: 1px;
      align-self: auto;
   }
}

/* ---- Mobile landscape (≤768px wide, ≤865px tall) ---- */
@media (max-width: 768px) and (max-height: 865px) {
   /* Mobile menu: shorter so it doesn't overflow on landscape */
   .mobile-menu-overlay {
      height: 260px;
      overflow-y: auto;
   }

   /* Legal / Privacy: less top offset needed (nav is 60px) */
   #legal-p1,
   #privacy-p1 {
      padding-top: 70px;
   }
}