/* SAG Kompetencespor - Responsive Design */

/* Fix piano overlapping preview links when aspect ratio is too wide */
@media screen and (min-aspect-ratio: 16/9) and (max-height: 1000px) {
  .sag-bottom {
    height: 140px; /* Reduce bottom section height */
  }

  .sag-key-label {
    font-size: 12px; /* Slightly smaller text */
    padding-bottom: 8px;
  }
}
@media screen and (min-aspect-ratio: 16/9) and (max-height: 1200px) {
  .sag-year-page .sag-links-area {
    padding: 0 0 0 100px;
  }
}

/* Even more compact at very short heights */
@media screen and (min-aspect-ratio: 16/9) and (max-height: 800px) {
  .sag-bottom {
    height: 120px; /* Further reduce bottom section height */
  }

  .sag-key-label {
    font-size: 11px; /* Smaller text */
    padding-bottom: 6px;
  }

  .sag-link-text {
    font-size: 11px; /* Smaller preview link text */
    padding: 4px 8px; /* Less padding */
  }

  .sag-preview-column {
    gap: 4px 8px; /* Less gap between preview links */
  }
}

/* Reduce bottom section when width is narrower */
@media screen and (max-width: 1600px) {
  .sag-bottom {
    height: 140px; /* Reduce bottom section height for narrower screens */
  }

  /* Make left side more narrow to give more space for preview links */
  .sag-category-box,
  .sag-info-box,
  .sag-corner-box {
    width: calc(var(--corner-width) - 100px);
  }
}

/* Make year titles smaller at even narrower widths */
@media screen and (max-width: 1500px) {
  .sag-year-header h2 {
    font-size: 42px; /* Reduce from 60px by ~30% */
  }
}

/* Hide header text but keep arrow at very narrow widths */
@media screen and (max-width: 1024px) {
  .sag-column-nav__text {
    display: none; /* Hide "Gå til årgang" text */
  }
}

/* Stack middle section vertically for mobile */
@media screen and (max-width: 1024px) {
  .sag-middle {
    flex-direction: column; /* Stack rows vertically */
  }

  .sag-row {
    flex-direction: column; /* Stack category, SVG, and preview links vertically */
    gap: 12px; /* Smaller gap between stacked elements */
  }

  .sag-category-box {
    width: 100%; /* Full width for category box */
    height: auto; /* Auto height instead of full height */
    min-height: 60px; /* Minimum height for readability */
  }

  .sag-content-area {
    flex-direction: column; /* Stack SVG and preview links vertically */
    gap: 12px;
  }

  .sag-svg-area {
    height: 120px; /* Fixed height for SVG */
    width: 100%;
  }

  .sag-links-area {
    width: 100%; /* Full width for preview links */
    padding-bottom: 0; /* Remove bottom padding */
  }
}

/* Stack SAG Kompetencer box above headers for mobile */
@media screen and (max-width: 1024px) {
  .sag-top {
    flex-direction: column; /* Stack vertically */
    gap: 12px;
  }

  .sag-corner-box {
    width: 100%; /* Full width for SAG Kompetencer box */
    height: auto; /* Auto height */
    min-height: 60px; /* Minimum height for readability */
  }

  .sag-years-box {
    width: 100%; /* Full width for headers */
    height: auto; /* Auto height */
  }

  .sag-years-box .sag-year-header {
    width: 33.333%; /* Each header takes 1/3 of the width */
    height: auto; /* Auto height */
    min-height: 80px; /* Minimum height for readability */
  }
}

/* Remove full-height constraint for mobile */
@media screen and (max-width: 1024px) {
  html,
  body {
    height: auto !important; /* Remove full height constraint */
    overflow: visible !important; /* Enable scrolling */
  }

  .sag-container {
    height: auto !important; /* Let container flow naturally */
    min-height: 100vh; /* Minimum full viewport height */
  }

  .sag-top,
  .sag-middle,
  .sag-bottom {
    height: auto !important; /* Let sections flow naturally */
    flex-shrink: 0; /* Prevent shrinking */
  }
}

/* Stack piano info box above piano for mobile */
@media screen and (max-width: 1024px) {
  .sag-bottom {
    flex-direction: column; /* Stack vertically */
    gap: 12px;
  }

  .sag-info-box {
    width: 100%; /* Full width for info box */
    height: auto; /* Auto height */
    min-height: 60px; /* Minimum height for readability */
  }

  .sag-piano-area {
    width: 100%; /* Full width for piano */
    height: 200px !important; /* Increased height for piano */
  }

  .sag-piano {
    height: 160px !important; /* Fixed height for piano */
  }

  .sag-key-label {
    font-size: 12px; /* Smaller text for mobile */
    padding-bottom: 10px; /* Adjust padding */
  }
}