/* ═══════════════════════════════════════════════════════════
 *  Mobile — Mobile invite corrections, iPhone-safe overrides
 *  @module wp-mobile.css
 * ═══════════════════════════════════════════════════════════ */

/* Mobile Invite correction pass: keep desktop composition untouched, but
   restore proportional typography and wrapping inside the smaller touch card. */
@media (max-width: 640px) {
    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__loader-inner {
        gap: 2px;
        max-width: 80vw;
        padding-inline: 18px;
        letter-spacing: 0.16em;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__loader-brand {
        max-width: 100%;
        font-size: clamp(0.92rem, 4.4vw, 1.06rem);
        line-height: 1.12;
        letter-spacing: 0.18em;
        white-space: normal;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__loader-subbrand {
        font-size: 0.54rem;
        letter-spacing: 0.28em;
        margin-top: 4px;
        white-space: normal;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__loader-spinner {
        width: 40px;
        height: 40px;
        margin-top: 16px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__invitation-inner {
        justify-content: space-between;
        gap: 0;
        padding: 32px 18px 20px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__intro-top,
    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__intro-mid,
    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__intro-bottom {
        width: 100%;
        max-width: 100%;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__intro-top {
        gap: 10px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__intro-mid {
        margin-top: 8px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__intro-bottom {
        margin-top: 12px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__brand-lockup {
        gap: 2px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__brand {
        font-size: clamp(0.98rem, 4.6vw, 1.12rem);
        line-height: 0.98;
        letter-spacing: 0.05em;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__subbrand {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__title {
        width: 100%;
        max-width: 9.6ch;
        margin-top: 8px;
        font-size: clamp(1.56rem, 7.8vw, 2.04rem);
        line-height: 0.96;
        letter-spacing: 0.008em;
        text-align: center;
        text-wrap: balance;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__title span,
    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__copy span {
        display: block;
        white-space: normal;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow-wrap: anywhere;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__script {
        margin-top: 0;
        font-size: clamp(1.16rem, 5.8vw, 1.46rem);
        line-height: 0.94;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__seal {
        width: clamp(62px, 19vw, 76px);
        margin-top: 0;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__copy {
        width: 100%;
        max-width: 20ch;
        margin-top: 0;
        font-size: clamp(0.66rem, 2.8vw, 0.74rem);
        line-height: 1.42;
        letter-spacing: 0.08em;
        text-align: center;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__keyhole-lockup {
        margin-top: 12px;
        padding-top: 0;
        gap: 5px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__keyhole {
        width: 20px;
    }

    .wedding-portal.wedding-portal--mobile-safe .wedding-portal__keyhole-text {
        font-size: 0.6rem;
        letter-spacing: 0.06em;
    }
}

/* Final iPhone-safe override layer.
   Uses touch/mobile media directly so the composition does not depend only on
   a runtime class being visible in the cascade. */
@media (max-width: 767px) and (pointer: coarse) {
    .wedding-portal .wedding-portal__loader {
        place-items: center !important;
        background-color: transparent !important;
        background-image:
            radial-gradient(circle at 18% 16%, rgba(255, 237, 211, 0.14), transparent 24%),
            var(--wp-portal-watercolor) !important;
        background-position: center center, center center !important;
        background-size: cover, cover !important;
        background-repeat: no-repeat, no-repeat !important;
    }

    .wedding-portal .wedding-portal__build-marker {
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 1300;
        display: block;
        padding: 4px 7px;
        border-radius: 999px;
        background: rgba(12, 10, 10, 0.44);
        color: rgba(255, 244, 228, 0.82);
        font-family: Manrope, sans-serif;
        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        pointer-events: none;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    body.wedding-portal-active {
        background-attachment: scroll, scroll !important;
    }

    .wedding-portal.is-loader-active .wedding-portal__stage {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .wedding-portal .wedding-portal__loader-inner {
        gap: 3px !important;
        max-width: none !important;
        padding-inline: 0 !important;
        letter-spacing: 0.12em !important;
        transform: translateY(-4.6vh) !important;
    }

    .wedding-portal .wedding-portal__loader-brand {
        display: block !important;
        max-width: none !important;
        font-size: clamp(0.72rem, 3.3vw, 0.88rem) !important;
        line-height: 1.14 !important;
        letter-spacing: 0.1em !important;
        white-space: nowrap !important;
    }

    .wedding-portal .wedding-portal__loader-subbrand {
        display: block !important;
        max-width: 100% !important;
        font-size: 0.5rem !important;
        line-height: 1.12 !important;
        letter-spacing: 0.22em !important;
        margin-top: 2px !important;
        white-space: normal !important;
    }

    .wedding-portal .wedding-portal__loader-spinner {
        display: none !important;
    }

    .wedding-portal .wedding-portal__grain,
    .wedding-portal .wedding-portal__vignette {
        display: none !important;
    }

    .wedding-portal .wedding-portal__backdrop,
    .wedding-portal .wedding-portal__grain,
    .wedding-portal .wedding-portal__vignette,
    .wedding-portal .wedding-portal__stage {
        inset: -2px -2px -2px -2px;
    }

    .wedding-portal .wedding-portal__invitation-inner {
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 22px 12px 15px !important;
    }

    .wedding-portal .wedding-portal__intro-top,
    .wedding-portal .wedding-portal__intro-mid,
    .wedding-portal .wedding-portal__intro-bottom {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wedding-portal .wedding-portal__intro-top {
        gap: 7px !important;
    }

    .wedding-portal .wedding-portal__intro-mid {
        margin-top: -6px !important;
    }

    .wedding-portal .wedding-portal__intro-bottom {
        margin-top: 0 !important;
    }

    .wedding-portal .wedding-portal__brand-lockup {
        gap: 1px !important;
        margin-top: 0 !important;
    }

    .wedding-portal .wedding-portal__brand {
        font-size: clamp(0.9rem, 4vw, 1rem) !important;
        line-height: 0.98 !important;
        letter-spacing: 0.045em !important;
    }

    .wedding-portal .wedding-portal__subbrand {
        font-size: 0.56rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.06em !important;
    }

    .wedding-portal .wedding-portal__title {
        width: auto !important;
        max-width: none !important;
        margin-top: 15px !important;
        font-size: clamp(1.16rem, 5.3vw, 1.46rem) !important;
        line-height: 0.94 !important;
        letter-spacing: 0.01em !important;
        text-align: center !important;
        text-wrap: initial !important;
        transform: translateY(12px) !important;
    }

    .wedding-portal .wedding-portal__title span {
        display: block !important;
        width: max-content !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wedding-portal .wedding-portal__title span:first-child {
        font-size: 0.94em !important;
    }

    .wedding-portal .wedding-portal__title span:last-child {
        font-size: 1em !important;
    }

    .wedding-portal .wedding-portal__script {
        margin-top: 6px !important;
        font-size: clamp(1rem, 4.9vw, 1.28rem) !important;
        line-height: 0.94 !important;
        transform: translateY(12px) !important;
    }

    .wedding-portal .wedding-portal__seal {
        width: clamp(50px, 14vw, 58px) !important;
        margin-top: -8px !important;
    }

    .wedding-portal .wedding-portal__copy {
        width: auto !important;
        max-width: none !important;
        margin-top: -16px !important;
        font-size: clamp(0.5rem, 2.15vw, 0.58rem) !important;
        line-height: 1.3 !important;
        letter-spacing: 0.045em !important;
        text-align: center !important;
        transform: translateY(-12px) !important;
    }

    .wedding-portal .wedding-portal__copy span {
        display: block !important;
        width: max-content !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wedding-portal .wedding-portal__keyhole-lockup {
        margin-top: 4px !important;
        padding-top: 0 !important;
        gap: 4px !important;
        transform: translateY(-8px) !important;
    }

    .wedding-portal .wedding-portal__keyhole {
        width: 16px !important;
    }

    .wedding-portal .wedding-portal__keyhole-text {
        font-size: 0.52rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.05em !important;
    }
}