/**
 * =========================================================================
 * RESPONSIVE ADAPTATIONS (Mobile-First to Desktop)
 * Chuyện Tình Chúng Mình – Kỷ Niệm Ngày Cưới
 * =========================================================================
 */

/* =========================================================================
   TABLET & DESKTOP (Min-Width: 768px)
   ========================================================================= */

@media (min-width: 768px) {
  .numbers-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .gallery-card--featured {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .gallery-grid--masonry {
    grid-template-columns: repeat(3, 1fr);
  }

  .family-tree-diagram {
    flex-direction: row;
  }
}

@media (min-width: 1280px) {
  .gallery-grid--masonry {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-card--featured {
    grid-column: span 2;
  }
}

/* =========================================================================
   MOBILE ADAPTATIONS (Max-Width: 767px)
   ========================================================================= */

@media (max-width: 767px) {
  /* Navigation */
  .site-nav {
    gap: 1.1rem;
  }

  .nav-link {
    font-size: 0.8125rem;
  }

  /* Header Music Button gọn gàng */
  .header-music-btn {
    padding: 0.35rem 0.75rem;
  }

  .header-music-btn .music-text {
    display: none; /* Chỉ hiện equalizer icon trên thanh header mobile */
  }

  .floating-music-btn {
    display: flex;
  }

  /* Hero */
  .hero-content {
    padding-top: 5rem;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
    letter-spacing: 0.08em;
  }

  /* Grand Live Love Clock Mobile */
  .grand-clock-wrapper {
    margin-bottom: 2rem;
  }

  .milestone-switcher {
    gap: 0.4rem;
  }

  .switcher-pill {
    padding: 0.45rem 0.9rem;
    font-size: 0.8125rem;
  }

  .live-clock-card {
    padding: 1.75rem 1rem;
  }

  .live-clock-units {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 0.75rem;
  }

  .unit-ring-container {
    width: 82px;
    height: 82px;
  }

  .unit-num {
    font-size: 1.6rem;
  }

  .clock-summary-pill {
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
  }

  /* Section 02 - Counters Grid */
  .numbers-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .counter-card {
    padding: 2rem 1.5rem;
  }

  /* Section 03 - Timeline Mobile: 1 Cột Thẳng Đứng */
  .timeline-wrapper {
    padding: 1rem 0;
  }

  .timeline-track-line {
    left: 20px;
    transform: none;
  }

  .timeline-item {
    justify-content: flex-start !important;
    padding-left: 50px;
  }

  .timeline-marker {
    left: 20px;
    top: 1.75rem;
    transform: translate(-50%, 0);
  }

  .timeline-card {
    width: 100%;
    padding: 1.5rem 1.25rem;
  }

  .timeline-title {
    font-size: 1.5rem;
  }

  .timeline-quote {
    font-size: 1.0625rem;
    padding-left: 1rem;
  }

  /* Section 04 - Gallery Controls */
  .gallery-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .filter-pills-group {
    justify-content: center;
  }

  .view-mode-toggle {
    align-self: center;
  }

  .filter-btn {
    font-size: 0.8125rem;
    padding: 0.4rem 0.875rem;
  }

  .gallery-grid--masonry {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Filmstrip Mobile */
  .filmstrip-frame {
    width: 240px;
  }

  .frame-photo-box {
    height: 170px;
  }

  /* Section 05 - Family Diagram Mobile: Xếp Dọc */
  .family-tree-diagram {
    flex-direction: column;
    gap: 1.5rem;
  }

  .tree-node {
    width: 100%;
    min-width: unset;
  }

  .tree-divider {
    transform: rotate(90deg);
    margin: -0.5rem 0;
  }

  /* Section 06 - Wax Sealed Letter */
  .envelope-cover {
    padding: 2.75rem 1.25rem;
  }

  .wax-seal-circle {
    width: 64px;
    height: 64px;
  }

  .parchment-paragraph {
    font-size: 1.15rem;
    line-height: 1.85;
  }

  .signature-text {
    font-size: 2.25rem;
  }

  /* Lightbox Mobile Navigation */
  .lightbox-dialog {
    padding: 1rem 0.75rem;
  }

  .lightbox-viewport {
    max-height: 55vh;
  }

  .lightbox-img {
    max-height: 55vh;
  }

  .lightbox-nav-btn {
    width: 40px;
    height: 40px;
  }

  .lightbox-nav-btn--prev { left: 0.25rem; }
  .lightbox-nav-btn--next { right: 0.25rem; }

  .lightbox-caption-desc {
    display: none;
  }

  /* Floating Back-to-Top */
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
  }

  .floating-music-btn {
    bottom: 1.5rem;
    left: 1.5rem;
    width: 40px;
    height: 40px;
  }
}

/* =========================================================================
   VERY SMALL SCREENS (Max-Width: 360px)
   ========================================================================= */

@media (max-width: 360px) {
  .timeline-item {
    padding-left: 42px;
  }

  .timeline-track-line {
    left: 16px;
  }

  .timeline-marker {
    left: 16px;
  }

  .unit-ring-container {
    width: 72px;
    height: 72px;
  }

  .unit-num {
    font-size: 1.35rem;
  }
}

/* =========================================================================
   IPHONE NOTCH & SAFE AREA SUPPORT
   ========================================================================= */

@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
  }

  .back-to-top {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }

  .floating-music-btn {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}