/* ═══════════════════════════════════════════════════════════
 *  Card Fluid — invitation front face scales WITH the card
 *  @module wp-card-fluid.css  (loads last in the cascade chain)
 *
 *  Why: the card's size is computed in JS (getLayout) and changes
 *  continuously with the viewport, but the text inside used fixed px
 *  and vw-based sizes with breakpoint overrides (900px / 640px).
 *  That made the text jump at breakpoints and overflow the card on
 *  narrow windows ("YOUR LOVE FEELS" clipped at the card edge).
 *
 *  Fix: the front face is a size container and every dimension
 *  inside is expressed in cqw (1cqw = 1% of the card's width), so
 *  the whole face scales as one picture. Values below are the live
 *  desktop design measured at the reference card width of 405px
 *  (px / 405 * 100). Letter-spacing / line-height are em/unitless
 *  upstream, so they follow automatically.
 *
 *  Phones keep their own tuned layout from wp-mobile.css: the
 *  (pointer: coarse)/(hover: none) block uses !important and wins,
 *  and mobile-safe mode at <=640px is excluded below. Touch-screen
 *  laptops (mobile-safe class, fine pointer, wider than 640px) DO
 *  get the fluid face, so they don't fall back to fixed px text.
 * ═══════════════════════════════════════════════════════════ */

@supports (width: 1cqw) {
    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front {
        container-type: inline-size;
        container-name: wp-card-front;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__invitation-inner {
        padding: 12.84cqw 13.83cqw;
        gap: 0;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__intro-top {
        gap: 4.94cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__brand-lockup {
        gap: 1.48cqw;
        margin-top: 0;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__brand {
        font-size: 4.2cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__subbrand {
        font-size: 2.963cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__title {
        font-size: 8.642cqw;
        margin-top: 4.444cqw;
        max-width: none;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__title span {
        font-size: inherit;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__script {
        font-size: 4.938cqw;
        margin-top: -1.235cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__intro-mid {
        margin-top: 3.704cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__seal {
        width: 24.69cqw;
        margin-top: 0;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__intro-bottom {
        margin-top: 4.938cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__copy {
        font-size: 2.963cqw;
        margin-top: 0;
        max-width: none;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__keyhole-lockup {
        margin-top: 7.407cqw;
        padding-top: 0;
        gap: 2.963cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__keyhole {
        width: 6.914cqw;
    }

    .wedding-portal:not(.wedding-portal--mobile-safe) .wedding-portal__card-face--front .wedding-portal__keyhole-text {
        font-size: 2.963cqw;
    }
}

/* Touch-screen laptops / large tablets in mobile-safe mode (phones excluded). */
@supports (width: 1cqw) {
    @media (min-width: 641px) {
        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front {
            container-type: inline-size;
            container-name: wp-card-front;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__invitation-inner {
            padding: 12.84cqw 13.83cqw;
            gap: 0;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__intro-top {
            gap: 4.94cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__brand-lockup {
            gap: 1.48cqw;
            margin-top: 0;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__brand {
            font-size: 4.2cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__subbrand {
            font-size: 2.963cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__title {
            font-size: 8.642cqw;
            margin-top: 4.444cqw;
            max-width: none;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__title span {
            font-size: inherit;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__script {
            font-size: 4.938cqw;
            margin-top: -1.235cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__intro-mid {
            margin-top: 3.704cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__seal {
            width: 24.69cqw;
            margin-top: 0;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__intro-bottom {
            margin-top: 4.938cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__copy {
            font-size: 2.963cqw;
            margin-top: 0;
            max-width: none;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__keyhole-lockup {
            margin-top: 7.407cqw;
            padding-top: 0;
            gap: 2.963cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__keyhole {
            width: 6.914cqw;
        }

        .wedding-portal.wedding-portal--mobile-safe .wedding-portal__card-face--front .wedding-portal__keyhole-text {
            font-size: 2.963cqw;
        }
    }
}