/* ==========================================================================
   responsive.css
   Invitación XV · Danna Sarahi
   Ajustes finales para móvil, tablet, escritorio y pantallas especiales.

   Orden recomendado:
   1. app.css / site.css
   2. cover.css
   3. sections.css
   4. cards.css
   5. buttons.css
   6. animations.css
   7. responsive.css

   Este archivo debe cargarse AL FINAL para aplicar correcciones responsivas
   sin modificar la lógica de Blazor ni el JavaScript.
   ========================================================================== */

/* ==========================================================================
   1. BASE RESPONSIVA
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

.welcome-screen,
.invitation-content,
.story-step {
    width: 100%;
    max-width: 100%;
}

/* Evita desplazamiento horizontal por decoraciones o animaciones. */
.welcome-screen,
.invitation-content,
.invitation-content .story-step {
    overflow-x: clip;
}

/* ==========================================================================
   2. VARIABLES POR TAMAÑO
   ========================================================================== */

:root {
    --responsive-page-padding: 24px;
    --responsive-section-gap: 32px;
    --responsive-content-width: 1120px;
}

@media (min-width: 1280px) {
    :root {
        --responsive-page-padding: 46px;
        --responsive-section-gap: 48px;
        --responsive-content-width: 1180px;
    }
}

@media (max-width: 900px) {
    :root {
        --responsive-page-padding: 22px;
        --responsive-section-gap: 28px;
    }
}

@media (max-width: 560px) {
    :root {
        --responsive-page-padding: 17px;
        --responsive-section-gap: 22px;
    }
}

/* ==========================================================================
   3. PORTADA GENERAL
   ========================================================================== */

.welcome-screen {
    min-height: 100svh;
    min-height: 100dvh;
}

.welcome-screen__content {
    width: min(
        calc(100% - (var(--responsive-page-padding) * 2)),
        760px
    );

    margin-inline: auto;
}

.welcome-screen h1 {
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.welcome-screen .welcome-date,
.welcome-screen .welcome-phrase,
.welcome-screen .eyebrow {
    max-width: min(100%, 620px);
    text-wrap: balance;
}

/* ==========================================================================
   4. ESCRITORIO GRANDE
   ========================================================================== */

@media (min-width: 1280px) {
    .welcome-screen__content {
        padding-bottom:
            max(48px, env(safe-area-inset-bottom));
    }

    .welcome-screen h1 {
        font-size: clamp(4.8rem, 7vw, 7.6rem);
    }

    .welcome-screen .welcome-date {
        font-size: 1.18rem;
    }

    .invitation-content .story-step {
        padding-inline: var(--responsive-page-padding);
    }

    .invitation-content .story-step__content {
        width: min(100%, var(--responsive-content-width));
    }

    .invitation-content :is(
        .cards-grid,
        .event-cards,
        .info-cards,
        .gift-cards,
        .family-cards
    ) {
        width: min(100%, 1120px);
    }
}

/* ==========================================================================
   5. LAPTOP Y ESCRITORIO NORMAL
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1279px) {
    .welcome-screen__content {
        width: min(calc(100% - 64px), 720px);
        padding-bottom:
            max(38px, env(safe-area-inset-bottom));
    }

    .welcome-screen h1 {
        font-size: clamp(4.2rem, 7.6vw, 6.4rem);
    }

    .invitation-content .story-step__content {
        width: min(100%, 980px);
    }
}

/* ==========================================================================
   6. TABLET HORIZONTAL Y VERTICAL
   ========================================================================== */

@media (min-width: 641px) and (max-width: 900px) {
    .welcome-screen__content {
        width: min(calc(100% - 48px), 680px);
        padding-bottom:
            max(34px, env(safe-area-inset-bottom));
    }

    .welcome-screen h1 {
        font-size: clamp(4rem, 10vw, 5.8rem);
    }

    .welcome-screen .welcome-phrase {
        font-size: clamp(.96rem, 2.5vw, 1.1rem);
    }

    .invitation-content .story-step {
        min-height: 100svh;

        padding:
            max(84px, env(safe-area-inset-top))
            var(--responsive-page-padding)
            max(42px, env(safe-area-inset-bottom));
    }

    .invitation-content .story-step__content {
        width: min(100%, 760px);
    }

    .invitation-content .section-heading h2 {
        font-size: clamp(3rem, 8vw, 4.6rem);
    }

    .invitation-content :is(
        .parents-card,
        .godparents-card,
        .family-card,
        .event-card,
        .calendar-card,
        .countdown-card,
        .dress-code-card,
        .gift-card,
        .envelope-card,
        .rsvp-card,
        .confirmation-card,
        .location-card,
        .message-card,
        .memory-card,
        .info-card,
        .invitation-card,
        .glass-card
    ) {
        width: min(100%, 700px);
    }
}

/* ==========================================================================
   7. MÓVIL GENERAL
   ========================================================================== */

@media (max-width: 640px) {
    body {
        min-width: 0;
    }

    .welcome-screen {
        min-height: 100svh;
    }

    .welcome-screen__content {
        width: min(
            calc(100% - (var(--responsive-page-padding) * 2)),
            520px
        );

        padding:
            max(20px, env(safe-area-inset-top))
            0
            max(26px, env(safe-area-inset-bottom));
    }

    .welcome-screen h1 {
        font-size: clamp(3.05rem, 14vw, 5.1rem);
        line-height: .92;
    }

    .welcome-screen .eyebrow {
        font-size: clamp(.76rem, 3.2vw, .95rem);
        letter-spacing: .17em;
    }

    .welcome-screen .welcome-date {
        font-size: clamp(.9rem, 3.8vw, 1.04rem);
        line-height: 1.4;
    }

    .welcome-screen .welcome-phrase {
        font-size: clamp(.88rem, 3.6vw, 1rem);
        line-height: 1.5;
    }

    .welcome-screen .gold-button--hero {
        width: min(100%, 330px);
        min-height: 54px;
        padding-inline: 20px;
    }

    .invitation-content .story-step {
        width: 100%;
        min-height: 100svh;

        padding:
            max(76px, env(safe-area-inset-top))
            var(--responsive-page-padding)
            max(34px, env(safe-area-inset-bottom));
    }

    .invitation-content .story-step__content {
        width: 100%;
    }

    .invitation-content .section-heading {
        width: 100%;
    }

    .invitation-content .section-heading h2 {
        font-size: clamp(2.35rem, 12vw, 3.75rem);
        line-height: .98;
    }

    .invitation-content .section-heading p:not(.eyebrow) {
        font-size: .94rem;
        line-height: 1.68;
    }

    .invitation-content .lead-text {
        width: 100%;
    }

    .invitation-content :is(
        .parents-card,
        .godparents-card,
        .family-card,
        .event-card,
        .calendar-card,
        .countdown-card,
        .dress-code-card,
        .gift-card,
        .envelope-card,
        .rsvp-card,
        .confirmation-card,
        .location-card,
        .message-card,
        .memory-card,
        .info-card,
        .invitation-card,
        .glass-card
    ) {
        width: 100%;
        max-width: 100%;
    }

    .invitation-content :is(
        .cards-grid,
        .event-cards,
        .info-cards,
        .gift-cards,
        .family-cards
    ) {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .invitation-content :is(
        .button-group,
        .action-buttons,
        .event-card__actions,
        .gift-card__actions,
        .rsvp-card__actions,
        .location-actions
    ) {
        width: 100%;
    }
}

/* ==========================================================================
   8. MÓVILES PEQUEÑOS
   ========================================================================== */

@media (max-width: 420px) {
    :root {
        --responsive-page-padding: 15px;
    }

    .welcome-screen__content {
        padding-bottom:
            max(22px, env(safe-area-inset-bottom));
    }

    .welcome-screen h1 {
        font-size: clamp(2.75rem, 14.7vw, 4.15rem);
    }

    .welcome-screen .welcome-date {
        font-size: .9rem;
    }

    .welcome-screen .welcome-phrase {
        font-size: .86rem;
    }

    .invitation-content .story-step {
        padding-top:
            max(68px, env(safe-area-inset-top));
    }

    .invitation-content .section-heading h2 {
        font-size: clamp(2.15rem, 11.8vw, 3.2rem);
    }

    .invitation-content .lead-text {
        font-size: clamp(1.2rem, 5.8vw, 1.5rem);
    }

    .invitation-content :is(
        .parents-card,
        .godparents-card,
        .family-card,
        .event-card,
        .calendar-card,
        .countdown-card,
        .dress-code-card,
        .gift-card,
        .envelope-card,
        .rsvp-card,
        .confirmation-card,
        .location-card,
        .message-card,
        .memory-card,
        .info-card,
        .invitation-card,
        .glass-card
    ) {
        padding: 23px 16px;
        border-radius: 22px;
    }

    .invitation-content :is(
        .countdown-grid,
        .countdown-card__grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invitation-content :is(
        .calendar-weekday,
        .calendar-card__weekday
    ) {
        font-size: .59rem;
    }

    .invitation-content :is(
        .calendar-day,
        .calendar-card__day
    ) {
        min-height: 36px;
        font-size: .82rem;
    }
}

/* ==========================================================================
   9. MÓVILES MUY PEQUEÑOS
   ========================================================================== */

@media (max-width: 350px) {
    :root {
        --responsive-page-padding: 12px;
    }

    .welcome-screen h1 {
        font-size: clamp(2.45rem, 15vw, 3.55rem);
    }

    .welcome-screen .gold-button--hero {
        min-height: 50px;
        font-size: .84rem;
    }

    .invitation-content .section-heading h2 {
        font-size: clamp(2rem, 12vw, 2.85rem);
    }

    .invitation-content :is(
        .parents-card,
        .godparents-card,
        .family-card,
        .event-card,
        .calendar-card,
        .countdown-card,
        .dress-code-card,
        .gift-card,
        .envelope-card,
        .rsvp-card,
        .confirmation-card,
        .location-card,
        .message-card,
        .memory-card,
        .info-card,
        .invitation-card,
        .glass-card
    ) {
        padding-inline: 14px;
    }

    .invitation-content :is(
        .event-card__detail,
        .event-detail,
        .location-detail
    ) {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        padding-inline: 9px;
    }
}

/* ==========================================================================
   10. PANTALLAS CON POCA ALTURA
   ========================================================================== */

@media (max-height: 740px) and (min-width: 641px) {
    .welcome-screen__content {
        justify-content: flex-end;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .welcome-screen h1 {
        font-size: clamp(3.2rem, 8vh, 5rem);
    }

    .welcome-screen .welcome-phrase {
        margin-bottom: 10px;
    }

    .invitation-content .story-step {
        min-height: auto;
        padding-block: 72px 34px;
    }
}

@media (max-height: 680px) and (max-width: 640px) {
    .welcome-screen__content {
        justify-content: flex-end;
        padding-top: 14px;
        padding-bottom:
            max(16px, env(safe-area-inset-bottom));
    }

    .welcome-screen h1 {
        font-size: clamp(2.6rem, 12vw, 3.9rem);
    }

    .welcome-screen .welcome-date,
    .welcome-screen .welcome-phrase {
        margin-block: 5px;
    }

    .welcome-screen .gold-button--hero {
        margin-top: 12px;
        min-height: 48px;
    }

    .invitation-content .story-step {
        min-height: auto;
        padding-block: 64px 28px;
    }
}

/* ==========================================================================
   11. ORIENTACIÓN HORIZONTAL EN MÓVIL
   ========================================================================== */

@media (orientation: landscape) and (max-height: 560px) {
    .welcome-screen {
        min-height: 100dvh;
    }

    .welcome-screen__content {
        width: min(calc(100% - 42px), 720px);
        justify-content: center;

        padding:
            max(14px, env(safe-area-inset-top))
            0
            max(14px, env(safe-area-inset-bottom));
    }

    .welcome-screen h1 {
        font-size: clamp(2.7rem, 10vh, 4.25rem);
    }

    .welcome-screen .welcome-date,
    .welcome-screen .welcome-phrase {
        margin-block: 4px;
    }

    .welcome-screen .gold-button--hero {
        min-height: 46px;
        margin-top: 10px;
    }

    .invitation-content .story-step {
        min-height: auto;
        padding-block: 58px 26px;
    }
}

/* ==========================================================================
   12. SAFE AREA: IPHONE Y DISPOSITIVOS CON NOTCH
   ========================================================================== */

@supports (padding: max(0px)) {
    .welcome-screen__content {
        padding-left:
            max(0px, env(safe-area-inset-left));
        padding-right:
            max(0px, env(safe-area-inset-right));
    }

    .invitation-content .story-step {
        padding-left:
            max(
                var(--responsive-page-padding),
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                var(--responsive-page-padding),
                env(safe-area-inset-right)
            );
    }
}

/* ==========================================================================
   13. PANTALLAS TÁCTILES
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    .invitation-content :is(
        .gold-button,
        .action-button,
        .primary-button,
        .secondary-button,
        .outline-button,
        .map-button,
        .location-button,
        .calendar-button,
        .gift-button,
        .rsvp-button,
        .confirmation-button,
        .whatsapp-button,
        .event-card__button,
        .gift-card__button,
        .rsvp-card__button,
        .button-primary,
        .button-secondary,
        .button-outline,
        .btn-invitation
    ) {
        min-height: 52px;
    }

    .invitation-content :is(
        .icon-button,
        .round-button
    ) {
        min-width: 48px;
        min-height: 48px;
    }

    .invitation-content :is(
        input,
        select,
        textarea
    ) {
        font-size: 16px;
    }
}

/* ==========================================================================
   14. CONTRASTE ELEVADO
   ========================================================================== */

@media (prefers-contrast: more) {
    .invitation-content :is(
        .parents-card,
        .godparents-card,
        .family-card,
        .event-card,
        .calendar-card,
        .countdown-card,
        .dress-code-card,
        .gift-card,
        .envelope-card,
        .rsvp-card,
        .confirmation-card,
        .location-card,
        .message-card,
        .memory-card,
        .info-card,
        .invitation-card,
        .glass-card
    ) {
        border-color: rgba(130, 84, 34, .55);
        background: rgba(255, 252, 249, .94);
    }

    .invitation-content :is(
        .gold-button,
        .primary-button,
        .button-primary
    ) {
        border-color: rgba(90, 52, 17, .65);
    }
}

/* ==========================================================================
   15. MODO OSCURO DEL SISTEMA
   La invitación mantiene su tema propio; solo reduce brillo excesivo.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .invitation-content {
        color-scheme: light;
    }
}

/* ==========================================================================
   16. IMPRESIÓN
   ========================================================================== */

@media print {
    body {
        background: #fff !important;
    }

    .welcome-screen,
    .music-player,
    .story-progress,
    .floating-controls,
    .cover-sparkles,
    .particles-canvas {
        display: none !important;
    }

    .invitation-content {
        display: block !important;

        background: #fff !important;
    }

    .invitation-content .story-step {
        min-height: auto !important;
        padding: 24px 0 !important;

        opacity: 1 !important;
        filter: none !important;
        transform: none !important;

        break-inside: avoid;
        page-break-inside: avoid;
    }

    .invitation-content :is(
        .parents-card,
        .godparents-card,
        .family-card,
        .event-card,
        .calendar-card,
        .countdown-card,
        .dress-code-card,
        .gift-card,
        .envelope-card,
        .rsvp-card,
        .confirmation-card,
        .location-card,
        .message-card,
        .memory-card,
        .info-card,
        .invitation-card,
        .glass-card
    ) {
        border: 1px solid #c8aa76 !important;
        background: #fff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .invitation-content :is(
        button,
        .gold-button,
        .action-button,
        .primary-button,
        .secondary-button,
        .outline-button,
        .map-button,
        .location-button,
        .calendar-button,
        .gift-button,
        .rsvp-button,
        .confirmation-button,
        .whatsapp-button
    ) {
        display: none !important;
    }
}

/* ==========================================================================
   17. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .welcome-screen,
    .welcome-screen *,
    .invitation-content,
    .invitation-content * {
        scroll-behavior: auto !important;
    }
}
/* ==========================================================================
   Corrección de posición de textos en la portada móvil
   ========================================================================== */

@media (max-width: 640px) {

    .welcome-screen .welcome-screen__content {
        position: absolute;
        inset: 0;
        z-index: 5;
        width: 100%;
        min-height: 100svh;
        min-height: 100dvh;
        margin: 0;
        padding: max(18px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: center;
    }

    /*
       Agrupa corona, nombre, fecha y frase.
       Queda centrado justo encima del botón.
    */
    .welcome-screen .welcome-screen__copy {
        width: min(100%, 520px);
        margin-top: auto;
        margin-right: auto;
        margin-bottom: clamp(14px, 2.5svh, 24px);
        margin-left: auto;
        padding: 12px 8px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transform: none !important;
    }

    .welcome-screen .crown-mark {
        margin: 0 0 5px;
        font-size: clamp(1.6rem, 7vw, 2.25rem);
        line-height: 1;
    }

    .welcome-screen .eyebrow {
        margin: 0 0 5px;
        font-size: clamp(.72rem, 3vw, .9rem);
        letter-spacing: .18em;
        line-height: 1.2;
    }

    .welcome-screen h1 {
        width: 100%;
        margin: 0;
        font-size: clamp(3rem, 13.2vw, 4.6rem);
        line-height: .88;
        text-align: center;
    }

    .welcome-screen .ornament {
        width: min(220px, 58vw);
        margin: 10px auto 8px;
    }

    .welcome-screen .welcome-date {
        margin: 0;
        font-size: clamp(.78rem, 3.4vw, .96rem);
        letter-spacing: .13em;
        line-height: 1.35;
        text-align: center;
    }

    .welcome-screen .welcome-phrase {
        margin: 8px auto 0;
        font-size: clamp(.84rem, 3.5vw, 1rem);
        line-height: 1.35;
        text-align: center;
    }

    .welcome-screen .gold-button--hero {
        position: relative;
        width: min(100%, 340px);
        min-height: 58px;
        margin: 0 auto !important;
        flex: 0 0 auto;
        font-size: clamp(1.1rem, 5vw, 1.38rem);
        transform: none;
    }
}
/* ==========================================================================
   CORRECCIÓN DE PORTADA EN ESCRITORIO
   Conserva completa la fotografía vertical sin recortar cabeza ni vestido.
   ========================================================================== */

@media (min-width: 761px) {

    /* --------------------------------------------------------------
       Capas principales de ambas fotografías
       -------------------------------------------------------------- */

    .welcome-screen .welcome-cover-layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #24131c;
    }

        /*
       Copia ampliada y desenfocada para llenar los costados
       de pantallas horizontales.
    */
        .welcome-screen .welcome-cover-layer::before {
            content: "";
            position: absolute;
            inset: -40px;
            z-index: 0;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            filter: blur(25px) brightness(.52) saturate(.88);
            opacity: .9;
            transform: scale(1.08);
            pointer-events: none;
        }

    /* Fondo correspondiente a la fotografía infantil. */
    .welcome-screen
    .welcome-cover-layer--child::before {
        background-image: linear-gradient( rgba(44, 21, 32, .24), rgba(30, 14, 22, .48) ), url("/images/danna-infancia.webp");
    }

    /* Fondo correspondiente a la fotografía actual. */
    .welcome-screen
    .welcome-cover-layer--xv::before {
        background-image: linear-gradient( rgba(44, 21, 32, .24), rgba(30, 14, 22, .48) ), url("/images/danna-portada.webp");
    }

    /* --------------------------------------------------------------
       Fotografía principal completa
       -------------------------------------------------------------- */

    .welcome-screen
    .welcome-cover-layer
    .welcome-screen__image {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        /*
           contain evita que la fotografía vertical quede recortada.
        */
        object-fit: contain !important;
        object-position: center center !important;
        /*
           Desactiva el zoom heredado porque vuelve a recortar la imagen.
           La transición seguirá funcionando sobre el contenedor.
        */
        animation: none !important;
    }

    /* --------------------------------------------------------------
       Oscurecimiento lateral para dar profundidad
       -------------------------------------------------------------- */

    .welcome-screen .welcome-screen__veil {
        background: linear-gradient( 90deg, rgba(23, 11, 17, .66) 0%, rgba(23, 11, 17, .12) 27%, rgba(23, 11, 17, .08) 50%, rgba(23, 11, 17, .12) 73%, rgba(23, 11, 17, .66) 100% ), linear-gradient( 180deg, rgba(20, 10, 15, .12) 0%, rgba(20, 10, 15, .18) 48%, rgba(20, 10, 15, .66) 100% );
    }

    /* --------------------------------------------------------------
       Texto y botón en la parte inferior
       -------------------------------------------------------------- */

    .welcome-screen .welcome-screen__content {
        position: absolute;
        inset: 0;
        z-index: 5;
        width: min(100%, 760px);
        min-height: 100svh;
        min-height: 100dvh;
        margin: 0 auto;
        padding: max(26px, env(safe-area-inset-top)) 30px max(28px, env(safe-area-inset-bottom));
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: center;
    }

    .welcome-screen .welcome-screen__copy {
        width: min(100%, 680px);
        margin: auto auto clamp(14px, 2.2vh, 24px);
        padding: 20px 26px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /*
           Sombra gradual detrás de los textos para mejorar lectura.
        */
        background: radial-gradient( ellipse at center, rgba(40, 18, 28, .5) 0%, rgba(40, 18, 28, .18) 54%, transparent 76% );
    }

    .welcome-screen .crown-mark {
        margin: 0 0 7px;
        font-size: clamp(1.8rem, 2.5vw, 2.7rem);
        line-height: 1;
    }

    .welcome-screen .eyebrow {
        margin: 0 0 8px;
        font-size: clamp(.82rem, 1.2vw, 1.05rem);
        letter-spacing: .2em;
    }

    .welcome-screen h1 {
        width: 100%;
        margin: 0;
        font-size: clamp(3.5rem, 5.3vw, 6rem);
        line-height: .9;
        text-align: center;
    }

    .welcome-screen .ornament {
        width: min(250px, 38vw);
        margin: 12px auto 10px;
    }

    .welcome-screen .welcome-date {
        margin: 0;
        font-size: clamp(.84rem, 1.25vw, 1.08rem);
        letter-spacing: .14em;
        line-height: 1.4;
    }

    .welcome-screen .welcome-phrase {
        margin: 8px auto 0;
        font-size: clamp(.92rem, 1.3vw, 1.12rem);
        line-height: 1.4;
    }

    .welcome-screen .gold-button--hero {
        width: min(100%, 390px);
        min-height: 60px;
        margin: 0 auto !important;
        flex: 0 0 auto;
        font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    }
}