/* =========================================================================
   Mobile-first: aturan di bawah hanya menambah pada layar yang lebih lebar.
   Titik uji: 360px, 390px, tablet 768px, desktop 1366px & 1920px.
   ========================================================================= */

/* --------------------------------------------------- layar sangat sempit */
@media (max-width: 374px) {
    .countdown { gap: .35rem; }
    .countdown__cell { padding-inline: .2rem; }
    .choice span { padding-inline: .8rem; }
    .opening__guest { padding-inline: 1rem; }
}

/* ------------------------------------------------------- tablet ke atas  */
@media (min-width: 768px) {
    /* Mulai tablet, bingkai persegi kembali dipakai dan ornamen mobile dilepas */
    .opening__frame { display: block; }
    .opening__vine { display: none; }

    /* Nama mempelai memakai ukuran besar sejak tablet, sehingga ruang tersisa
       untuk foto lebih sempit daripada di ponsel. */
    .hero__photo img {
        max-height: calc(100vh - 620px);
        max-height: calc(100svh - 620px);
    }

    .gallery-grid { grid-template-columns: repeat(4, 1fr); }
    .gallery-item--landscape { grid-column: span 2; }

    /* Empat kolom sudah terisi rapi, pelebaran khusus mobile dibatalkan */
    .gallery-item--portrait:last-child { grid-column: auto; }

    /* Foto potret pertama dibuat lebih tinggi agar susunan tidak monoton */
    .gallery-item--portrait:first-child { grid-row: span 2; }
    .gallery-item--portrait:first-child .gallery-item__btn,
    .gallery-item--portrait:first-child .gallery-item__btn img { height: 100%; }
    .gallery-item--portrait:first-child .gallery-item__btn img { aspect-ratio: auto; }

    .timeline { padding-left: 0; }
    .timeline::before { left: 50%; translate: -50% 0; }

    .timeline__item { width: calc(50% - 2rem); }
    .timeline__item:nth-child(odd) { justify-self: start; text-align: right; }
    .timeline__item:nth-child(even) { justify-self: end; }

    .timeline__item:nth-child(odd) .timeline__dot { left: auto; right: -2.55rem; }
    .timeline__item:nth-child(even) .timeline__dot { left: -2.55rem; }

    .event-list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

    .lightbox__image { max-height: 80svh; }
}

/* ------------------------------------------------------ desktop ke atas  */
@media (min-width: 1024px) {
    .couple-grid {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .couple-card { max-width: 24rem; }
    .couple-grid__amp { font-size: clamp(3rem, 4vw, 4rem); }

    /*
     | Desktop memakai foto mendatar sebagai latar seluruh section hero:
     | pasangan berada di kiri dan kanan dengan ruang kosong di tengah,
     | tepat untuk menaruh nama mempelai. Foto berbingkai tidak lagi dipakai.
     | Berkasnya hanya diunduh bila media query ini aktif, jadi tampilan
     | ponsel tidak ikut menanggung bebannya.
     */
    .section--hero {
        display: grid;
        align-content: center;
        min-height: 100svh;
        background-image:
            linear-gradient(rgba(251, 247, 240, .3), rgba(251, 247, 240, .3)),
            url('../images/couple/hero-bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero__photo { display: none; }

    .gallery-grid { gap: 1rem; }

    /* Ornamen sudut boleh lebih besar karena ruang tepi lebih lega */
    .section .ornament--top-left,
    .section .ornament--top-right,
    .section .ornament--bottom-left,
    .section .ornament--bottom-right { --ornament-size: 210px; }

    .lightbox { gap: 1.5rem; }
    .lightbox__nav, .lightbox__close { width: 52px; height: 52px; }
}

/* ------------------------------------------------- layar sangat lebar    */
@media (min-width: 1600px) {
    :root {
        --container: 1240px;
        --fs-display: clamp(4rem, 5vw, 6rem);
    }

    .hero__photo { max-width: 28rem; }
}

/* --------------------------------------------------- orientasi mendatar  */
@media (max-height: 520px) and (orientation: landscape) {
    .opening { place-items: start center; overflow-y: auto; }
    .opening__inner { padding-block: 1.5rem; gap: .45rem; }
    .opening__names { font-size: clamp(2rem, 9vh, 3rem); }
    .opening__guest { margin-top: .3rem; padding-block: .7rem; }
    .opening__guest-note { display: none; }
    .particles { display: none; }
}

/* ------------------------------------------- perangkat tanpa hover halus */
@media (hover: none) {
    .gallery-item__btn:hover img,
    .hero__photo:hover img,
    .couple-card:hover .couple-card__photo img { scale: 1; }

    .gallery-item__veil { opacity: .25; }
}

/* ------------------------------------------------------------ pencetakan */
@media print {
    .opening, .music, .to-top, .scroll-progress, .preloader, .lightbox { display: none !important; }
    .invitation { opacity: 1 !important; visibility: visible !important; }
    body { background: #fff; }
}