/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */

/* Tablet: 1024px */
@media (max-width: 1024px) {
    :root {
        --content-width: 55%;
        --decor-width: 45%;
    }

    .hero__torn-top {
        top: -140px;
    }

    .hero__seal {
        margin: -100px auto 30px;
        width: 140px;
        height: 140px;
    }

    .event__card-content {
        padding: var(--space-lg) var(--space-md);
    }

    .event__invitation {
        font-size: 18px;
    }

    .event__day {
        font-size: 28px;
    }

    .event__venue {
        font-size: 28px;
        top: 60px;
    }

    .event__map-link {
        font-size: 22px;
        top: 20px;
    }

    .event__map-star {
        width: 120px;
        height: 120px;
        margin: 0 -40px;
    }
}

/* Mobile: 768px - Right panel hidden */
@media (max-width: 768px) {
    .decor-panel {
        display: none;
    }

    .content-panel {
        width: 100%;
    }

    :root {
        --section-padding: var(--space-lg) var(--space-md);
        --font-size-base: 16px;
    }

    /* Header photo */
    .header-photo {
        aspect-ratio: 4 / 3;
    }

    /* Hero */
    .section--hero {
        padding: 0 var(--space-md) var(--space-lg);
    }

    .hero__torn-top {
        top: -100px;
        left: -10px;
        right: -10px;
    }

    .hero__seal {
        margin: -80px auto 24px;
        width: 120px;
        height: 120px;
    }

    .hero__subtitle {
        font-size: 22px;
        letter-spacing: 0.2em;
    }

    .hero__names {
        font-size: clamp(36px, 10vw, 56px);
        margin-bottom: 24px;
    }

    .hero__date {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .hero__quote p {
        font-size: clamp(22px, 5vw, 30px);
    }

    .hero__quote cite {
        font-size: clamp(16px, 3.5vw, 22px);
    }

    /* Event */
    .event__card-content {
        padding: var(--space-lg) var(--space-sm);
    }

    .event__invitation {
        font-size: 14px;
        letter-spacing: 0.12em;
        top: -20px;
    }

    .event__day {
        font-size: 22px;
    }

    .event__date {
        font-size: clamp(24px, 5vw, 32px);
    }

    .event__venue {
        font-size: 22px;
        top: 40px;
    }

    .event__map-link {
        font-size: 18px;
        top: 15px;
    }

    .event__map-star {
        width: 80px;
        height: 80px;
        margin: 0 -25px;
    }

    /* Rundown */
    .rundown__item {
        gap: var(--space-lg);
    }

    .rundown__event {
        font-size: 20px;
    }

    .rundown__sub {
        font-size: 16px;
    }

    .rundown__time {
        font-size: 28px;
    }

    /* Gallery */
    .gallery__polaroid {
        width: 70%;
        margin-top: -30px;
    }

    /* Dresscode */
    .section--dresscode .section__subtitle {
        font-size: 18px;
    }

    /* RSVP */
    .rsvp__question {
        font-size: 18px;
    }

    .rsvp__toggle {
        gap: var(--space-lg);
    }

    .rsvp__toggle-btn {
        font-size: var(--font-size-lg);
    }

    /* Gift */
    .gift__intro {
        font-size: 20px;
    }

    .gift__bank,
    .gift__number,
    .gift__holder {
        font-size: 20px;
    }

    .section__title {
        font-size: 28px;
    }
}

/* Small phone: 480px */
@media (max-width: 480px) {
    :root {
        --section-padding: var(--space-md) var(--space-sm);
        --font-size-base: 15px;
    }

    /* Hero */
    .section--hero {
        padding: 0 var(--space-sm) var(--space-md);
    }

    .hero__torn-top {
        top: -60px;
        left: -8px;
        right: -8px;
    }

    .hero__seal {
        margin: -50px auto 16px;
        width: 90px;
        height: 90px;
    }

    .hero__subtitle {
        font-size: 18px;
        letter-spacing: 0.15em;
        margin-bottom: 16px;
    }

    .hero__names {
        font-size: clamp(32px, 12vw, 48px);
        margin-bottom: 16px;
    }

    .hero__date {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .hero__quote p {
        font-size: clamp(20px, 5vw, 26px);
    }

    .hero__quote cite {
        font-size: clamp(14px, 3vw, 18px);
    }

    /* Event */
    .event__card-content {
        padding: var(--space-md) var(--space-xs);
    }

    .event__invitation {
        font-size: 12px;
        letter-spacing: 0.1em;
        top: -10px;
        margin-bottom: var(--space-sm);
    }

    .event__day {
        font-size: 18px;
    }

    .event__date {
        font-size: clamp(20px, 5vw, 28px);
    }

    .event__venue {
        font-size: 18px;
        top: 20px;
    }

    .event__map-link {
        font-size: 14px;
        top: 10px;
    }

    .event__map-star {
        width: 50px;
        height: 50px;
        margin: 0 -15px;
    }

    /* Rundown */
    .rundown__item {
        gap: var(--space-md);
    }

    .rundown__event {
        font-size: 16px;
    }

    .rundown__sub {
        font-size: 14px;
    }

    .rundown__time {
        font-size: 22px;
    }

    .rundown__rope {
        width: 50px;
    }

    /* Gallery */
    .gallery__polaroid {
        width: 75%;
        margin-top: -25px;
        padding: 6px 6px 20px;
    }

    /* Dresscode */
    .section--dresscode .section__subtitle {
        font-size: 16px;
    }

    /* RSVP */
    .rsvp__question {
        font-size: 16px;
    }

    .rsvp__toggle-btn {
        font-size: 22px;
    }

    .rsvp__icon--hearts {
        width: 28px;
        height: 28px;
    }

    .rsvp__icon--circle {
        width: 22px;
        height: 22px;
    }

    .rsvp__label {
        font-size: 14px;
    }

    .rsvp__input {
        font-size: 16px;
        padding: 10px 12px;
    }

    .rsvp__submit {
        font-size: 16px;
        padding: 14px;
    }

    /* Gift */
    .gift__intro {
        font-size: 18px;
    }

    .gift__bank,
    .gift__number,
    .gift__holder {
        font-size: 18px;
    }

    /* Footer */
    .footer__thankyou {
        font-size: clamp(36px, 10vw, 56px);
    }

    .section__title {
        font-size: 22px;
        letter-spacing: 0.15em;
    }
}