/* ============================================
   RESPONSIVE — concrete-jungle.jp
   Depends on: all section CSS files
   ============================================ */

/* === TABLET (768px - 1024px) === */
@media (max-width: 1024px) {
  .billboard__wall {
    grid-template-columns: 1fr 1fr;
  }

  .billboard__poster--3 {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }

  .gallery__item {
    width: 300px;
  }

  .lounge__cards {
    grid-template-columns: 1fr 1fr;
  }

  /* Exit: Ticket stacks vertically on tablets too */
  .exit__ticket {
    flex-direction: column;
  }

  .exit__ticket-divider {
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      var(--color-border) 0px,
      var(--color-border) 8px,
      transparent 8px,
      transparent 16px
    );
  }

  .exit__ticket-divider::before,
  .exit__ticket-divider::after {
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
  }

  .exit__ticket-divider::before {
    left: -10px;
    top: 50%;
  }

  .exit__ticket-divider::after {
    right: -10px;
    left: auto;
    bottom: auto;
    top: 50%;
  }

  .exit__ticket-right {
    padding: var(--space-lg);
  }
}

/* === MOBILE (< 768px) === */
@media (max-width: 768px) {
  /* Entry */
  .entry__bg {
    grid-template-columns: repeat(2, 1fr);
    opacity: 0.15;
  }

  .entry__building--3,
  .entry__building--4 {
    display: none;
  }

  .entry__logo {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  /* Gallery: vertical stack instead of horizontal scroll */
  .gallery__track {
    flex-direction: column;
    overflow-x: visible;
    padding: 0 var(--space-lg);
    gap: var(--space-lg);
  }

  .gallery__item {
    width: 100%;
    flex: 0 0 auto;
  }

  .gallery__scroll-hint {
    display: none;
  }

  /* Billboard */
  .billboard__wall {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .billboard__poster--1,
  .billboard__poster--2,
  .billboard__poster--3 {
    transform: rotate(0);
  }

  .billboard__poster--3 {
    max-width: 100%;
  }

  /* Lounge */
  .lounge__cards {
    grid-template-columns: 1fr;
  }

  .lounge__terminal {
    max-width: 100%;
  }

  /* Exit rules moved to tablet breakpoint */
  /* Popup: fullscreen modal */
  .popup-window {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: scale(0.9);
  }

  .popup-window.is-active {
    transform: scale(1);
  }

  .popup-window__body {
    max-height: calc(100vh - 40px);
  }
}

/* === Disable custom cursor on touch devices === */
@media (hover: none) {
  body {
    cursor: auto;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .entry__logo {
    animation: none;
  }

  .entry__logo::before,
  .entry__logo::after {
    animation: none;
    display: none;
  }

  .entry__scroll-hint {
    animation: none;
  }

  .entry__tagline {
    opacity: 1;
    animation: none;
  }

  .marquee__track {
    animation: none;
  }

  .lounge__grid-bg {
    animation: none;
  }

  .terminal__cursor {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}