/* ==========================================================================
   Responsive Adaptations — Refined Mobile & Tablet Reflow
   ========================================================================== */

/* Tablet & Medium Screens (< 992px) */
@media (max-width: 992px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .hero__photo-wrap {
    max-width: 380px;
    margin: 0 auto;
  }

  .hero__badge-row {
    justify-content: center;
  }

  .hero__text {
    align-items: center;
  }

  .hero__tagline,
  .hero__tagline-en {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__meta-grid {
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .about__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about__image-wrap {
    max-width: 380px;
    margin: 0 auto;
    position: static;
  }

  .skills__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .skills__tools-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery__masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }

  .gallery__item--wide {
    grid-column: span 1;
  }

  .video-work__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .video-work__card:last-child:nth-child(7) {
    grid-column: span 2;
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
  }

  .design-work__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .design-work__item--span-2 {
    grid-column: span 2;
  }

  .contact__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .contact__right {
    padding-top: 0;
  }

  /* Lightbox Tablet */
  .lightbox__dialog {
    grid-template-columns: 1fr 320px;
    max-height: 85vh;
  }
}

/* Mobile & Small Screens (< 768px) */
@media (max-width: 768px) {
  .nav__status {
    display: none;
  }

  .nav__cta {
    display: none;
  }

  .nav__logo img {
    height: 56px;
  }

  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    width: min(84vw, 320px);
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-lg);
    background: rgba(14, 14, 18, 0.94);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-left: 1px solid var(--border-highlight);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    transition: transform var(--duration-normal) var(--ease-out);
    z-index: 105;
  }

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

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-out);
    z-index: 104;
  }

  .nav-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .nav__link {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding: 12px 0;
    min-height: 48px;
  }

  .nav__toggle {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: var(--space-xl);
  }

  .hero__photo-wrap {
    max-width: 280px;
  }

  .hero__photo-wrap::before {
    inset: -8px;
  }

  .hero__photo-wrap::after {
    bottom: -22px;
    font-size: 0.6rem;
  }

  .hero__scroll-hint {
    display: none;
  }

  .skills__tools-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__masonry {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .gallery__item--tall {
    grid-row: span 1;
  }

  .video-work__grid {
    grid-template-columns: 1fr;
  }

  .video-work__card:last-child:nth-child(7) {
    grid-column: span 1;
    max-width: none;
    margin: 0;
  }

  .design-work__grid {
    grid-template-columns: 1fr;
  }

  .design-work__item--span-2 {
    grid-column: span 1;
  }

  /* Lightbox Mobile: Stack Media on top, Details below */
  .lightbox {
    padding: 8px;
  }

  .lightbox__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    max-height: 92vh;
    width: 100%;
  }

  .lightbox__media-wrap {
    min-height: 250px;
    max-height: 52vh;
  }

  .lightbox__img {
    max-height: 50vh;
  }

  .lightbox__meta-panel {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: 38vh;
    padding: var(--space-md);
  }

  .lightbox__title {
    font-size: var(--text-lg);
  }

  .lightbox__desc-id {
    font-size: var(--text-xs);
    line-height: 1.6;
  }

  .lightbox__desc-en {
    display: none; /* Hide English subtitle on small screens to conserve vertical height */
  }

  .lightbox__nav-btn {
    width: 38px;
    height: 38px;
  }

  .footer__container {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}