/* =========================================================
   responsive.css — Breakpoints (mobile-first overrides)
   ========================================================= */

/* iOS Safari doesn't support background-attachment: fixed — JS parallax.js drives these variables */
@media (max-width: 1024px) {
  .hero-services-wrapper::before {
    background-attachment: scroll;
    background-position: center var(--hero-bg-y, 50%);
  }
  .portfolio::before {
    background-attachment: scroll;
    background-position: center var(--port-bg-y, 50%);
  }
}

/* Mobile: swap in 800px-wide background images — ~90% smaller than 2000px originals */
@media (max-width: 768px) {
  .hero-services-wrapper::before {
    background-image: url("../images/backgrounds/bg_intro-mobile.jpg");
    background-image: image-set(url("../images/backgrounds/bg_intro-mobile.webp") type("image/webp"), url("../images/backgrounds/bg_intro-mobile.jpg") type("image/jpeg"));
  }
  .portfolio::before {
    background-image: url("../images/backgrounds/bg_port-mobile.jpg");
    background-image: image-set(url("../images/backgrounds/bg_port-mobile.webp") type("image/webp"), url("../images/backgrounds/bg_port-mobile.jpg") type("image/jpeg"));
  }
}

@media (max-width: 720px) {
  /* fixed 500vh — always bigger than any tab content, crop never shifts */
  .portfolio::before {
    bottom: auto;
    height: 500vh;
    background-attachment: scroll;
    background-position: center var(--port-bg-y, 30%);
  }
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-media-placeholder { width: 260px; height: 260px; inset-inline-end: -15%; opacity: 0.6; }

  /* folder: scale tabs down for tablet */
  .portfolio-filters { width: 420px; height: 54px; }
  .filter-btn { width: 160px; height: 54px; font-size: var(--fs-md); }
  .filter-btn:nth-child(2) { inset-inline-start: 130px; }
  .filter-btn:nth-child(3) { inset-inline-start: 260px; }
  .portfolio-inner { padding: var(--space-5) var(--space-5); }
}

@media (max-width: 720px) {
  /* photos tab: full-bleed collage */
  .portfolio-grid[data-category="photos"] {
    display: block;
    position: static;
    padding: 0;
  }

  /* strip folder padding when photos is active so collage goes edge-to-edge */
  .portfolio-inner:has(.portfolio-grid[data-category="photos"]:not([hidden])) {
    padding: 0;
  }

  /* also remove the negative margin so tabs don't overlap the top of the collage */
  .portfolio-folder:has(.portfolio-grid[data-category="photos"]:not([hidden])) .portfolio-filters {
    margin-bottom: 0;
  }

  .portfolio-grid[data-category="photos"] .gallery-track {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid[data-category="photos"] .gallery-track img {
    height: 140px;
  }

  .portfolio-grid[data-category="photos"] .gallery-track picture:nth-child(5) {
    grid-column: span 2;
  }

  .portfolio-grid[data-category="photos"] .gallery-track picture:nth-child(5) img {
    height: 110px;
  }

  .hamburger { display: flex; }

  .main-nav {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    width: min(75vw, 280px);
    background: rgba(10, 10, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 0 0 var(--radius-sm);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    padding: var(--space-6) var(--space-3) var(--space-3);
    z-index: 2999;
  }

  .main-nav.is-open { transform: translateX(0); }

  .main-nav ul {
    flex-direction: column;
    gap: var(--space-2);
  }

  .main-nav a {
    font-size: var(--fs-lg);
    font-weight: 700;
  }

  body[dir="ltr"] .main-nav a { font-size: var(--fs-sm); }
  body[dir="rtl"] .main-nav a { font-size: var(--fs-xl); }

  .services-grid { grid-template-columns: 1fr; }
  .portfolio-grid[data-category="music"] .portfolio-card { flex: 0 0 200px; max-width: 200px; }
  .video-card { flex: 0 1 100%; }

  .hero-media-placeholder { display: none; }

  h1 { font-size: clamp(2rem, 9vw, 3rem); }

  .music-link .music-logo { height: 1.1rem; width: 1.1rem; }
  .portfolio-card { padding: var(--space-2); }
  .portfolio-card-tag { font-size: 0.7rem; }

  /* shrink lang button so it doesn't crowd small-screen content */
  .lang-switch { font-size: var(--fs-sm); padding: 0.4rem 0.9rem; }
  /* push hero down enough to clear the fixed button */
  .hero-services-inner { padding-block-start: var(--space-6); }

  /* folder: compact tabs for mobile */
  .portfolio-filters { width: 310px; height: 48px; }
  .filter-btn { width: 130px; height: 48px; font-size: var(--fs-sm); }
  .filter-btn:nth-child(2) { inset-inline-start: 90px; }
  .filter-btn:nth-child(3) { inset-inline-start: 180px; }
  .portfolio-inner { padding: var(--space-4) var(--space-4); }
  .portfolio-grid[data-category="video"] { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* XP windows: keep them small on mobile; position is owned by JS */
  .xp-window {
    max-width: calc(100vw - 16px) !important;
    max-height: 52vh !important;
  }
  .xp-dialog {
    width: min(300px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: 48vh !important;
  }
}

@media (max-width: 480px) {
  /* folder: minimal tabs for small phones */
  .portfolio-filters { width: 260px; height: 44px; }
  .filter-btn { width: 110px; height: 44px; font-size: var(--fs-xs); }
  .filter-btn:nth-child(2) { inset-inline-start: 75px; }
  .filter-btn:nth-child(3) { inset-inline-start: 150px; }
  .portfolio-inner { padding: var(--space-3) var(--space-3); }
  .portfolio-grid[data-category="photos"] .gallery-track img { height: 110px; }
  .portfolio-grid[data-category="photos"] .gallery-track picture:nth-child(5) img { height: 90px; }
}