/* =====================================================
   RESPONSIVE ENHANCEMENTS
   Mobile styles are the base (styles.css). These rules
   progressively enhance tablet and desktop layouts.
   ===================================================== */

/* ---------- Very small phones ---------- */
@media (max-width: 340px) {
    .container { padding-inline: 1rem; }
    .event { padding-inline: 1rem; }
    .hero__dates { gap: 0.6rem; }
    .hero__date-full { font-size: 0.95rem; }
}

/* ---------- Extremely narrow (under 300px) ---------- */
@media (max-width: 300px) {
    .hero__dates { flex-direction: column; gap: 0.8rem; }
    .hero__date-sep { display: none; }
    .countdown__label { font-size: 0.62rem; letter-spacing: 0.04em; }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
    .container { padding-inline: 2.5rem; }

    .window { width: 16rem; }

    .hero__dates { gap: 2.5rem; }

    .events {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 2rem;
    }

    .event { max-width: 26rem; }

    .event__actions .btn { max-width: 17rem; }

    .events__both .btn,
    .invitation-actions .btn { width: auto; min-width: 15rem; }

    .invitation-actions {
        flex-direction: row;
        justify-content: center;
    }

    .families {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 2.5rem;
    }

    .family { flex: 1 1 0; }

    .families__knot {
        flex-direction: column;
        align-self: stretch;
        justify-content: center;
    }

    .families__knot::before,
    .families__knot::after {
        width: 1px;
        height: 4rem;
        background: linear-gradient(180deg, transparent, var(--gold));
    }

    .families__knot::after { background: linear-gradient(180deg, var(--gold), transparent); }

    .closing__names {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 0.5em;
    }

    .share-sheet { align-items: center; }

    .share-sheet__panel {
        margin-inline: 1.5rem;
        border-radius: 1.4rem;
        border-bottom: 1px solid var(--gold-soft);
    }
}

/* ---------- Desktop ----------
   Phones read top-to-bottom in one column; a wide screen gets
   side-by-side compositions so no section is a thin strip
   floating in empty space. */
@media (min-width: 1024px) {
    :root { --space-section: clamp(5rem, 8vw, 8rem); }

    .container { padding-inline: 4rem; }

    /* Hero: the window on the left, the words on the right */
    .hero {
        flex-direction: row;
        justify-content: center;
        gap: clamp(3rem, 6vw, 7rem);
        padding: calc(var(--h) * 6) 4rem calc(var(--h) * 9);
    }

    .window {
        width: min(30vw, calc(var(--h) * 56), 28rem);
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .hero__text {
        width: auto;
        max-width: 36rem;
        align-items: flex-start;
        text-align: left;
    }

    .hero__names { align-items: flex-start; }

    .hero__name { font-size: clamp(2.6rem, min(4.2vw, calc(var(--h) * 7)), 5rem); }

    .hero__amp {
        height: clamp(3rem, calc(var(--h) * 10), 6rem);
        margin-left: 0.4rem;
    }

    .hero__lead,
    .hero__invite { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }

    .hero__dates { justify-content: flex-start; gap: 2.5rem; }

    .hero__date { align-items: flex-start; }

    .hero__scroll {
        position: absolute;
        left: 50%;
        bottom: calc(var(--h) * 2.5);
        margin: 0;
        transform: translateX(-50%);
    }

    .intro-done .hero__scroll.reveal-load { animation-name: rise-in-centered; }

    @keyframes rise-in-centered {
        from { opacity: 0; transform: translate(-50%, 14px); }
        to   { opacity: 1; transform: translate(-50%, 0); }
    }

    /* Epigraph: room to breathe at full size */
    .epigraph { padding: 4.5rem 4rem; }

    /* Events: wider cards */
    .events { gap: 3rem; }

    .event {
        max-width: 38rem;
        padding: 3.75rem 2.5rem 2.5rem;
    }

    /* Qur'an: the two verses side by side, joined by the star */
    #quran .container--narrow {
        max-width: 76rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 4rem;
    }

    #quran .verse-sep {
        margin: 0;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        align-self: stretch;
    }

    #quran .verse-sep::before,
    #quran .verse-sep::after {
        content: "";
        flex: 1;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--gold-soft));
    }

    #quran .verse-sep::after { background: linear-gradient(180deg, var(--gold-soft), transparent); }

    #quran .verse__arabic--large { font-size: clamp(2.2rem, 3.2vw, 3.2rem); }

    /* Families: a touch wider apart */
    .families { gap: 4rem; }

    /* Invitation: words and buttons beside the card */
    #invitation .container {
        display: grid;
        grid-template-columns: minmax(0, 26rem) auto;
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas:
            ".       card"
            "head    card"
            "actions card"
            "status  card"
            ".       card";
        justify-content: center;
        column-gap: clamp(3rem, 7vw, 7rem);
    }

    #invitation .section-head {
        grid-area: head;
        margin-bottom: 2rem;
        text-align: left;
    }

    #invitation .section-sub { margin-left: 0; }

    #invitation .card-stage { grid-area: card; }

    #invitation .invitation-actions {
        grid-area: actions;
        margin-top: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    #invitation .invitation-actions .btn { width: 100%; max-width: 19rem; }

    #invitation .invitation-status { grid-area: status; text-align: left; }

    @media (hover: hover) {
        .event {
            transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
        }

        .event:hover {
            transform: translateY(-6px);
            box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.85), 0 0 60px -20px rgba(217, 185, 112, 0.25);
        }

        .invite-card:hover {
            transform: rotateX(3deg) rotateY(-4deg) translateY(-6px);
        }
    }
}

/* ---------- Wide desktop: QR beside the buttons ----------
   Only from 1200px, where each card is wide enough for both */
@media (min-width: 1200px) {
    .event {
        display: grid;
        grid-template-columns: minmax(14.5rem, 1fr) auto;
        column-gap: 1.75rem;
        align-content: start;
        padding-inline: 2.75rem;
    }

    .event > * { grid-column: 1 / -1; }

    .event .event__actions {
        grid-column: 1;
        align-self: center;
        align-items: stretch;
    }

    .event .event__actions .btn {
        max-width: none;
        white-space: nowrap;
        padding-inline: 1.1rem;
    }

    .event .qr-card {
        display: flex;
        grid-column: 2;
        margin-top: 1.3rem;
        align-self: center;
    }

    .event__qr-toggle { display: none; }

    .event .qr-card__code canvas,
    .event .qr-card__code img {
        width: 118px;
        height: 118px;
    }
}

/* ---------- Large desktop ---------- */
@media (min-width: 1280px) {
    .window { width: 17rem; }
    .invite-card { width: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
    .event, .invite-card { transition: none !important; transform: none !important; }
}

/* One celebration only: centre its card instead of leaving an empty column */
@media (min-width: 768px) {
    [data-only] .events { grid-template-columns: minmax(0, 38rem); justify-content: center; }
}