/* ============================================================
   RESPONSIVE.CSS — Breakpoints for Ali Housseny Portfolio
============================================================ */

/* ── Large desktops (1200px+) ── */
@media (min-width: 1200px) {
  .wall__cards-grid {
    grid-template-columns: 240px 1fr 240px;
  }
  .monitor__screen {
    width: 300px;
    height: 185px;
  }
}

/* ── Tablets landscape / small desktops (900px–1199px) ── */
@media (max-width: 1199px) {
  :root { font-size: 15px; }

  .wall__cards-grid {
    grid-template-columns: 190px 1fr 190px;
    gap: 0.75rem;
  }

  .monitor__screen {
    width: 230px;
    height: 140px;
  }

  .desk__monitors {
    gap: 0.75rem;
  }

  .desk__left-items,
  .desk__right-items {
    min-width: 60px;
  }
}

/* ── Tablets portrait (600px–899px) ── */
@media (max-width: 899px) {
  /* Nav */
  .nav__links {
    position: fixed;
    top: 0; right: -100%;
    width: 240px; height: 100vh;
    background: rgba(10,8,5,0.97);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid rgba(200,121,65,0.2);
    backdrop-filter: blur(10px);
  }
  .nav__links.is-open { right: 0; }
  .nav__toggle { display: flex; }
  .nav__link { font-size: 1rem; }

  /* Wall grid → single column */
  .wall__cards-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .wall__col--left,
  .wall__col--right {
    display: contents; /* let items flow into grid naturally */
  }
  .wall__col--center { grid-column: 1 / -1; }

  .wall__bottom-row {
    grid-template-columns: 1fr 1fr;
  }
  .wall__bottom-row .wall-card:last-child {
    grid-column: 1 / -1;
  }

  /* Neon sign */
  .neon-sign__inner {
    padding: 1rem 2rem;
  }
  .neon-sign__name {
    font-size: 2rem;
  }

  /* Desk → simplified */
  .room__desk {
    grid-template-columns: 60px 1fr 70px;
  }
  .monitor__screen {
    width: 180px;
    height: 110px;
  }
  .desk__monitors { gap: 0.5rem; }
  .desk__surface { padding: 0.75rem 1rem; gap: 0.5rem; }
  .desk__left-items,
  .desk__right-items { min-width: 40px; gap: 0.5rem; }
  .desk__books-stack { display: none; }
  .desk__lamp { display: none; }

  .monitor__code-content { font-size: 0.52rem; }

  /* Modal */
  .modal {
    padding: 1.5rem;
    max-height: 90vh;
  }
  .modal-skills__categories { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .github-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile (max 599px) ── */
@media (max-width: 599px) {
  :root { font-size: 14px; }

  .nav { padding: 0.75rem 1rem; }

  .room__wall {
    padding: 70px 0.75rem 0.75rem;
  }

  /* Wall → full single column */
  .wall__cards-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .wall__col--center {
    grid-column: 1;
  }
  .wall__bottom-row {
    grid-template-columns: 1fr;
  }
  .wall__bottom-row .wall-card:last-child {
    grid-column: 1;
  }

  /* Stickies hidden on small screens */
  .wall__stickies { display: none; }

  /* Neon sign smaller */
  .neon-sign__inner {
    padding: 0.75rem 1rem;
  }
  .neon-sign__name { font-size: 1.6rem; }
  .neon-sign__title { font-size: 0.75rem; }
  .wall__neon-sign { padding: 0.5rem 1rem; }

  /* Desk simplified for mobile */
  .room__desk {
    grid-template-columns: 0 1fr 0;
    min-height: 160px;
  }
  .room__shelf--left,
  .room__shelf--right { display: none; }

  .desk__surface {
    padding: 0.5rem;
    gap: 0.25rem;
    justify-content: center;
  }
  .desk__left-items { display: none; }
  .desk__right-items { display: none; }

  .desk__monitors { gap: 0.3rem; }
  .monitor__screen {
    width: 130px;
    height: 80px;
  }
  .monitor__code-content { font-size: 0.45rem; padding: 0.3rem; }

  .desk__keyboard-area { display: none; }
  .desk__led-ambient { width: 280px; }

  /* Cards smaller */
  .wall-card { min-height: 120px; }
  .wall-card--wide { min-height: 160px; }
  .wall-card--sm { min-height: 100px; }
  .wall-card__title { font-size: 0.8rem; }

  /* Modal full-screen */
  .modal-overlay { padding: 0.5rem; }
  .modal {
    padding: 1.25rem;
    max-height: 95vh;
    border-radius: 4px;
  }
  .modal__content h2 { font-size: 1.4rem; }
  .modal-skills__categories { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .github-stats { grid-template-columns: 1fr; }
  .modal-about__links { flex-direction: column; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #particles-canvas { display: none; }
}

/* ── High contrast ── */
@media (prefers-contrast: high) {
  .wall-card--paper {
    border: 2px solid #000;
  }
  .wall-card--dark {
    border: 2px solid #fff;
  }
  .nav__link { color: #fff; }
}
/* ============================================================
   ROOM PANORAMA — horizontal swipe / pan
   The room photo is 16:9. On screens narrower than that
   ratio (most phones & tablets in portrait), object-fit:cover
   was cropping the left/right edges of the wall with no way
   to reach them. This block keeps the photo at its full,
   uncropped 16:9 ratio and turns the room into a horizontally
   scrollable strip, so the user can swipe left/right to see
   everything on the wall. Hotspots scroll together with the
   image since they share the same coordinate space.
============================================================ */
@media (max-aspect-ratio: 16/9) {

  html, body {
    overflow: hidden;
  }

  .room {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .room::-webkit-scrollbar { display: none; }

  .photo-room {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    height: 100vh;
    height: 100dvh;
    width: calc(100vh * (16 / 9));
    width: calc(100dvh * (16 / 9));
    max-width: none;
    scroll-snap-align: center;
  }

  .photo-room__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .photo-room__hotspots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Swipe-to-explore hint */
  .room-swipe-hint {
    position: fixed;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    background: rgba(13,10,7,.72);
    border: 1px solid rgba(255,179,71,.25);
    border-radius: 999px;
    color: var(--clr-amber-glow);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    opacity: 1;
    transition: opacity .6s ease;
    pointer-events: none;
    white-space: nowrap;
  }
  .room-swipe-hint__icon {
    display: inline-block;
    animation: roomSwipeIconMove 1.6s ease-in-out infinite;
  }
  .room-swipe-hint.is-hidden {
    opacity: 0;
  }

  @keyframes roomSwipeIconMove {
    0%, 100% { transform: translateX(-4px); }
    50%       { transform: translateX(4px);  }
  }
}

/* Hide swipe hint entirely when the screen is wide enough
   to show the whole 16:9 photo without cropping */
@media (min-aspect-ratio: 16/9) {
  .room-swipe-hint { display: none !important; }
}