/* ==========================================================================
   RESPONSIVE.CSS - RESPONSIVE STYLES FOR DESKTOP, TABLET & MOBILE
   ========================================================================== */

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
    .navbar {
        padding: 15px 25px;
    }

    .hero-title {
        font-size: clamp(2rem, 5vw, 3.2rem);
        white-space: nowrap;
    }

    .ceremony-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .map-wrapper {
        height: 220px;
    }

    .timeline-wrapper::before {
        left: 30px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 15px;
        text-align: left !important;
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-item:nth-child(odd) .timeline-badge,
    .timeline-item:nth-child(even) .timeline-badge {
        left: 19px;
        right: auto;
    }

    /* Gallery Grid Tablet */
    .gallery-grid {
        column-count: 2;
        column-gap: 15px;
    }

    .gallery-card {
        margin-bottom: 15px;
    }
}

/* Mobile Devices (max-width: 600px) */
@media (max-width: 600px) {
    .navbar {
        padding: 12px 18px;
    }

    .nav-menu {
        display: none; /* Mobile navigation simplified */
    }

    .hero-card {
        padding: 35px 20px;
    }

    .hero-title {
        font-size: clamp(1.6rem, 5.5vw, 2.5rem);
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
    }

    /* Fix section title không bị tràn màn hình gây lệch trang */
    .section-title {
        font-size: clamp(1.7rem, 5.5vw, 2.2rem);
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
    }

    .countdown-card {
        min-width: 75px;
        padding: 15px;
    }

    .countdown-number {
        font-size: 2.2rem;
    }

    .couple-card {
        padding: 25px 18px;
    }

    /* Fix tên cô dâu chú rể xuống dòng linh hoạt */
    .couple-name {
        font-size: clamp(1.7rem, 5.5vw, 2.2rem);
        white-space: normal;
        word-break: break-word;
    }

    .avatar-frame {
        width: 150px;
        height: 150px;
    }

    .floating-btn {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .gift-qr-img {
        width: 180px;
        height: 180px;
    }

    /* Fix footer brand */
    .footer-brand {
        font-size: clamp(1.7rem, 5.5vw, 2.2rem);
        white-space: normal;
        word-break: break-word;
    }

    /* Gallery Grid Mobile */
    .gallery-grid {
        column-count: 2;
        column-gap: 10px;
    }

    .gallery-card {
        margin-bottom: 10px;
    }

    /* Lightbox Modal Mobile Tweaks */
    .lightbox-modal {
        padding: 10px 5px;
        justify-content: center;
    }

    /* Đưa nút mũi tên trái/phải lên giữa 2 bên màn hình để không bị thanh home/bottom bar che */
    .lightbox-nav-btn {
        position: absolute;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        z-index: 20;
    }

    .lightbox-nav-btn.prev-btn {
        left: 10px;
    }

    .lightbox-nav-btn.next-btn {
        right: 10px;
    }

    .lightbox-content-wrapper {
        max-width: 96vw;
        max-height: 80vh;
    }

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

    .lightbox-close-btn {
        top: max(15px, env(safe-area-inset-top));
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 2rem;
        z-index: 20;
    }
}