/* =========================================
   A DAY MADE JUST FOR YOU
   RESPONSIVE STYLES
========================================= */


/* 1. TABLET
   Aturan untuk layar dengan lebar maksimal 768px
*/

@media (max-width: 768px) {

    /* Mengurangi jarak di sekitar website */
    .site-shell {
        padding: 24px;
        gap: var(--space-md);
    }

    /* Mengurangi lebar area konten */
    .page-container {
        max-width: 100%;
    }

    /* Mengurangi jarak antar elemen */
    .content-stack {
        gap: var(--space-md);
    }

    /* Ukuran judul sedikit diperkecil */
    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

}


/* 2. MOBILE
   Aturan untuk layar dengan lebar maksimal 480px
*/

@media (max-width: 480px) {

    /* Mengatur ruang di sekitar halaman */
    .site-shell {
        min-height: 100vh;
        min-height: 100svh;

        padding: 18px 16px;

        gap: var(--space-md);
    }


    /* HEADER MOBILE */

    .site-header {
        gap: var(--space-sm);

        padding-bottom: var(--space-sm);
    }

    .site-brand {
        font-size: 10px;

        letter-spacing: 0.08em;
    }

    .page-indicator {
        font-size: 10px;
    }


    /* MAIN CONTENT MOBILE */

    .main-content {
        width: 100%;

        align-items: center;
    }

    .page-container {
        width: 100%;
    }


    /* FOOTER MOBILE */

    .site-footer {
        flex-wrap: wrap;

        justify-content: space-between;

        gap: var(--space-sm);

        padding-top: var(--space-sm);
    }

    .site-footer p {
        font-size: 10px;
    }


    /* MUSIC PLAYER MOBILE */

    .music-toggle {
        padding: 8px 12px;

        font-size: var(--text-xs);
    }


    /* TYPOGRAPHY MOBILE */

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    p {
        font-size: var(--text-sm);

        line-height: 1.7;
    }


    /* PAGE NAVIGATION MOBILE */

    .page-navigation {
        gap: var(--space-sm);

        margin-top: var(--space-lg);
    }


    /* BUTTON MOBILE */

    button {
        max-width: 100%;
    }

}


/* 3. EXTRA SMALL MOBILE
   Aturan untuk layar dengan lebar maksimal 360px
*/

@media (max-width: 360px) {

    .site-shell {
        padding: 14px 12px;
    }

    .site-brand {
        font-size: 9px;
    }

    h1 {
        font-size: 1.6rem;
    }

    .music-toggle {
        padding: 7px 10px;
    }

}


/* =========================================
   OPENING PAGE - MOBILE
========================================= */

@media (max-width: 480px) {

    .opening-page {
        gap: var(--space-md);

        padding: var(--space-lg) 0;
    }

    .envelope-scene {
        width: min(230px, 72vw);
    }

    .opening-text h1 {
        font-size: 1.9rem;
    }

    .opening-text p {
        font-size: var(--text-sm);
    }

    .primary-button {
        width: min(100%, 260px);

        padding: 13px 20px;
    }

}

/* =========================================
   QUIZ PAGE - MOBILE
========================================= */

@media (max-width: 480px) {

    .quiz-page {
        gap: var(--space-md);

        padding: var(--space-lg) 0;
    }

    .quiz-heading {
        font-size: 1.9rem;
    }

    .quiz-card {
        padding: 22px 18px;
    }

    .quiz-question {
        font-size: var(--text-base);
    }

    .quiz-question-title {
        font-size: var(--text-base);
    }

    #quiz-answer {
        font-size: 16px;
    }

    .quiz-actions button {
        min-height: 44px;
    }

}

/* =========================================
   BIRTHDAY PAGE - MOBILE
========================================= */

@media (max-width: 768px) {

    .birthday-layout {
        grid-template-columns: 1fr;

        max-width: 520px;

        gap: var(--space-xl);
    }

    .birthday-calendar-card {
        max-width: 420px;

        margin: 0 auto;
    }

    .birthday-greeting {
        width: 100%;

        align-items: center;

        text-align: center;
    }

    .birthday-message {
        width: 100%;

        text-align: left;
    }

}


@media (max-width: 480px) {

    .birthday-page {
        gap: var(--space-lg);

        padding: var(--space-lg) 0;
    }

    .birthday-calendar-card {
        padding: 20px 16px;
    }

    .calendar-month {
        font-size: 2rem;

        margin: 18px 0;
    }

    .calendar-days {
        gap: 4px;
    }

    .calendar-day {
        font-size: 12px;
    }

    .birthday-greeting h1 {
        font-size: 2.1rem;
    }

}

/* =========================================
   GALLERY PAGE - RESPONSIVE
========================================= */


@media (max-width: 768px) {

    .gallery-page {
        gap: var(--space-lg);

        padding: var(--space-lg) 0;
    }

    .gallery-grid {
        gap: var(--space-md);
    }

}


@media (max-width: 480px) {

    .gallery-heading h1 {
        font-size: 2rem;
    }

   
.gallery-grid {
    width: 100%;
    min-width: 0;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.gallery-heading {
    width: 100%;
    padding-inline: 5px;
}

.gallery-heading h1 {
    font-size: clamp(1.65rem, 7vw, 2rem);
    overflow-wrap: break-word;
}

.gallery-card,
.gallery-appreciation {
    min-width: 0;
}

.main-content {
    min-width: 0;
}


    .gallery-featured {
        grid-column: 1 / -1;

        grid-row: auto;
    }

    .gallery-featured .gallery-photo-placeholder {
        aspect-ratio: 4 / 5;

        min-height: 260px;
    }

    .gallery-card {
        padding: 7px;

        gap: 7px;
    }

    .gallery-photo-placeholder {
        min-height: 130px;

        font-size: 9px;
    }

    .gallery-wide .gallery-photo-placeholder {
        min-height: 140px;
    }

    .gallery-caption {
        font-size: 11px;

        line-height: 1.5;
    }

    .gallery-appreciation {
        padding: 22px 17px;
    }

    .gallery-appreciation h2 {
        font-size: 1.35rem;
    }

    .gallery-appreciation p:not(.eyebrow) {
        font-size: var(--text-sm);
    }

}

/* =========================================
   PAGE 05 - DREAMS PAGE RESPONSIVE
========================================= */


/* TABLET */

@media (max-width: 768px) {

    .dreams-stories {
        grid-template-columns: 1fr;

        max-width: 600px;

        gap: var(--space-md);
    }

    .dreams-story-card {
        padding: 25px;
    }

}


/* MOBILE */

@media (max-width: 480px) {

    .dreams-page {
        gap: var(--space-lg);

        padding: var(--space-lg) 0;
    }

    .dreams-heading {
        padding-inline: 5px;
    }

    .dreams-heading h1 {
        font-size: 2rem;
    }

    .dreams-intro-card {
        padding: 25px 18px;
    }

    .dreams-intro-card h2 {
        font-size: 1.25rem;
    }

    .dreams-story-card {
        padding: 22px 18px;

        gap: var(--space-md);
    }

    .dreams-story-content h2 {
        font-size: 1.25rem;
    }

    .dreams-story-content > p:last-child {
        font-size: var(--text-sm);
    }

    .dreams-closing {
        padding: var(--space-md);
    }

}

/* =========================================
   PAGE 06 - BIAS SURPRISE RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .bias-page {
        padding: var(--space-lg) 0;
    }

}


@media (max-width: 480px) {

    .bias-page {
        gap: var(--space-md);

        padding: var(--space-md) 0;
    }

    .bias-scene-content {
        gap: var(--space-lg);
    }

    .bias-envelope,
    .bias-gift-intro,
    .bias-closing-scene {
        min-height: 280px;

        padding: 25px 17px;
    }

    .bias-envelope h1,
    .bias-gift-intro h1,
    .bias-closing-scene h1 {
        font-size: 1.8rem;
    }

    .bias-message-card {
        padding: 18px 14px;
    }

    .bias-message-content {
        padding: 20px 14px;
    }

    .bias-message-content > p[lang="ko"] {
        font-size: var(--text-sm);
    }

    .bias-translation {
        font-size: var(--text-sm);
    }

    .bias-gallery-scene h1 {
        font-size: 1.7rem;
    }

    .bias-photo-placeholder {
        width: min(100%, 340px);
    }

    .bias-surprise-scene h2 {
        font-size: var(--text-lg);
    }

    .bias-photo-caption {
        font-size: var(--text-base);
    }

    .bias-navigation {
        gap: 8px;
    }

    .bias-navigation button {
        min-height: 44px;

        padding: 10px 16px;
    }

}

/* =========================================
   PAGE 07 - LETTER RESPONSIVE
========================================= */


@media (max-width: 768px) {

    .letter-page {
        gap: var(--space-lg);

        padding: var(--space-lg) 0;
    }

}


@media (max-width: 480px) {

    .letter-heading h1 {
        font-size: 2rem;
    }

    .letter-envelope-stage {
        width: min(235px, 72vw);
    }

    .letter-paper {
        padding: 25px 19px;
    }

    .letter-content {
        font-size: var(--text-sm);

        line-height: 1.9;
    }

    .letter-content p {
        margin-bottom: var(--space-md);
    }

    .letter-content h2 {
        font-size: var(--text-lg);
    }

    .letter-closing {
        padding: 28px 18px;
    }

    .letter-closing h2 {
        font-size: 1.7rem;
    }

    .closing-main-message {
        font-size: var(--text-base) !important;
    }

}

/* =========================================
   GALLERY MODAL - MOBILE RESPONSIVE
========================================= */


@media (max-width: 480px) {

    /* Area pop-up */

    .gallery-modal {
        padding: 12px;
    }


    /* Kartu pop-up */

    .gallery-modal-panel {
        width: 100%;

        max-height: 90vh;

        padding: 22px 17px;

        border-radius: var(--radius-md);
    }


    /* Foto */

    .gallery-modal-image {
        max-height: 280px;
    }


    /* Judul */

    .gallery-modal-panel h2 {
        font-size: 1.3rem;

        margin: var(--space-md) 0;
    }


    /* Deskripsi */

    .gallery-modal-description {
        font-size: var(--text-sm);

        line-height: 1.8;
    }


    /* Tombol X */

    .gallery-modal-close {
        top: 8px;
        right: 10px;
    }


    /* Tombol kembali */

    .gallery-modal-back {
        width: 100%;
    }

}

/* =========================================
   PAGE 08 - DOCUMENTATION RESPONSIVE
========================================= */


/* TABLET */

@media (max-width: 768px) {

    .documentation-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: var(--space-md);
    }

}


/* MOBILE */

@media (max-width: 480px) {

    .documentation-page {
        padding: var(--space-lg) 0;

        gap: var(--space-lg);
    }

    .documentation-heading h1 {
        font-size: 2rem;
    }

    .documentation-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .documentation-card {
        padding: 6px;
    }

    .documentation-photo-placeholder {
        aspect-ratio: 4 / 3;
    }

    .documentation-closing p {
        font-size: var(--text-xs);
    }

}

/* =========================================
   PAGE 08 - DOCUMENTATION MOBILE
========================================= */


/* TABLET */

@media (max-width: 768px) {

    .documentation-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: var(--space-md);
    }

}


/* MOBILE */

@media (max-width: 480px) {

    .documentation-page {
        gap: var(--space-lg);

        padding: var(--space-lg) 0;
    }


    .documentation-heading h1 {
        font-size: 2rem;
    }


    .documentation-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .documentation-card {
        padding: 7px;

        gap: 8px;
    }


    .documentation-photo-frame {
        aspect-ratio: 4 / 3;
    }


    .documentation-caption {
        font-size: 11px;

        line-height: 1.5;
    }


    .documentation-more {
        font-size: 10px;
    }


    /* POP-UP MOBILE */

    .documentation-modal {
        padding: 12px;
    }


    .documentation-modal-panel {
        width: 100%;

        max-height: 90vh;

        padding: 22px 17px;

        border-radius: var(--radius-md);
    }


    .documentation-modal-image {
        max-height: 260px;
    }


    .documentation-modal-panel h2 {
        font-size: 1.3rem;
    }


    .documentation-modal-description {
        font-size: var(--text-sm);

        line-height: 1.8;
    }


    .documentation-modal-close {
        top: 8px;
        right: 10px;
    }


    .documentation-modal-back {
        width: 100%;
    }

}