/* invitation.css
   Fully responsive stylesheet for the invitation card.
   - Use with the HTML provided earlier (classes: .wrap .card .title .names .name .amp .ribbon-row .ribbon .bow .block .save .couple .month .date-row .date-pill .date-circle .venue .address .flower .corner-spray .ornament .left-lines)
   - Designed to scale the entire composition proportionally with the card container.
*/

/* =========================
   Variables and base
   ========================= */
:root {
    --bg: #0c0c0c;
    --gold: #c79b30;
    --gold-dark: #a67820;
    --muted: rgba(255,255,255,0.06);
    --accent: #f3d786;
    --card-max-width: 840px;
    --card-aspect-ratio: calc(3 / 4.4); /* portrait ratio used as hint */
}

/* Base reset */
* {
    box-sizing: border-box
}

html {
    /* base font scales with viewport, clamp prevents extremes */
    font-size: clamp(12px, 1.25vw, 18px);
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: #f7ecd6;
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================
   Layout: center & scale card
   ========================= */
.wrap {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px,3.0vw,48px);
}

/* The card is fluid and scales with width.
   We prefer width-based sizing so all children use % relative to card.
*/
.card {
    width: 100%;
    max-width: var(--card-max-width);
    position: relative;
    /* prefer aspect-ratio when supported; fallback uses padding hack */
    aspect-ratio: 3 / 4.4;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)), var(--bg);
    border-radius: 8px;
    padding: clamp(18px, 3.2vw, 40px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    overflow: visible; /* allow decorative elements to show outside safely */
    transform-origin: top center;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .card {
        height: auto;
        /* Use padding-top to emulate ratio: padding-top = (height/width)*100%.
       Our ratio is 4.4/3 ≈ 1.4667 => padding-top = 146.67% which is too tall.
       Better approach: let the content set height; we've set min-height to emulate portrait.
    */
        min-height: clamp(560px, 70vh, 920px);
    }
}

/* =========================
   Corner sprays + ornaments
   Use % sizes & positions so they scale with card width
   ========================= */
.corner-spray {
    position: absolute;
    width: 22%;
    /* keep it roughly square by using aspect-ratio */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 10% 20%, rgba(199,155,48,0.35) 0px, rgba(199,155,48,0.12) 18%, transparent 34%), radial-gradient(circle at 80% 70%, rgba(199,155,48,0.25) 0px, transparent 40%);
    mix-blend-mode: screen;
    filter: blur(1px) saturate(1.05);
    z-index: 2;
    pointer-events: none;
}

    /* positions relative to card */
    .corner-spray.left-top {
        left: -4%;
        top: -4%;
        transform: scale(1.02);
    }

    .corner-spray.right-bottom {
        right: -4%;
        bottom: -4%;
        transform: scale(1.02);
    }

/* Ornamental corner lines container - percentage based */
.ornament {
    position: absolute;
    width: 28%;
    height: 20%;
    right: 3.2%;
    top: 2.4%;
    z-index: 6;
    opacity: 0.96;
}

    .ornament svg {
        width: 100%;
        height: 100%;
        display: block;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
    }

/* left variant */
.ornament-left {
    left: 3.2%;
    right: auto;
    top: 2.6%;
    width: 24%;
}

/* =========================
   Title and names (responsive typography)
   Use relative units (rem / em) that scale with html font-size
   ========================= */
.title {
    font-family: "Playfair Display", serif;
    color: var(--gold);
    text-align: center;
    font-size: clamp(1.4rem, 2.2vw, 2.2rem); /* scales */
    margin-top: 0.4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    z-index: 5;
}

/* Names row: use flex with space-between and % widths */
.names {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4%;
    margin-top: calc(1.6rem + 0.4vw);
    padding: 0 4%;
    z-index: 5;
}

/* Each name takes ~40% width so center ampersand sits well */
.name {
    width: 40%;
    font-family: "Great Vibes", "Vivaldi", cursive;
    color: var(--gold);
    font-size: clamp(2.4rem, 7.2vw, 5.2rem); /* large on desktop, smaller on phone */
    line-height: 0.86;
    text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 6px 30px rgba(0,0,0,0.6);
    display: block;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

    /* If a name is too long, allow wrapping but keep style */
    .name[data-long="true"] {
        white-space: normal;
        font-size: clamp(1.9rem, 5.2vw, 4rem);
    }

/* Ampersand sits in the middle, same vertical center */
.amp {
    width: 12%;
    text-align: center;
    font-family: "Playfair Display", serif;
    color: var(--gold);
    font-size: clamp(1.8rem, 5.5vw, 4.8rem);
    opacity: 0.95;
    transform: translateY(6%);
    line-height: 1;
}
.theme {
    font-family: "Great Vibes", "Vivaldi", cursive;
    font-size: clamp(0.4rem, 5.2vw, 3.2rem); /* large on desktop, smaller on phone */
}
.ll {
    font-family: "Great Vibes", "Vivaldi", cursive;
    width: 40%;
    color: var(--gold);
    font-size: clamp(0.4rem, 5.2vw, 3.2rem); /* large on desktop, smaller on phone */
    line-height: 0.86;
    text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 6px 30px rgba(0,0,0,0.6);
    display: block;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Ensure names compress nicely on narrow screens */
@media (max-width:520px) {
    .names {
        gap: 6px;
        padding: 0 3%;
    }

    .name {
        width: 38%;
        font-size: clamp(1.4rem, 8.2vw, 3.2rem);
    }

    .amp {
        width: 12%;
        font-size: clamp(1.2rem, 6.2vw, 2.6rem);
        transform: translateY(0);
    }
}

/* =========================
   Ribbon + Bow
   Ribbon is percentage-based; bow is scalable SVG sized by width %
   ========================= */
.ribbon-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(0.8rem, 2.4vw, 2.2rem);
    z-index: 4;
    position: relative;
}

.ribbon {
    width: 92%;
    height: clamp(38px, 6.2vw, 84px); /* scales with viewport */
    background: linear-gradient(90deg, rgba(199,155,48,1) 0%, rgba(201,158,53,0.98) 30%, rgba(176,139,34,0.9) 60%, rgba(199,155,48,1) 100%);
    border-radius: 40px;
    box-shadow: inset 0 -8px 18px rgba(0,0,0,0.55), 0 6px 12px rgba(0,0,0,0.5);
    position: relative;
}

/* Bow sizing: use % width relative to card so it scales with ribbon */
.bow {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -56%);
    z-index: 6;
    width: 46%;
    max-width: 420px;
    min-width: 160px;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}

/* provide a tiny transform tweak for very small screens */
@media (max-width:420px) {
    .bow {
        width: 62%;
        transform: translate(-50%, -50%);
    }

    .ribbon {
        height: clamp(30px, 9.6vw, 56px);
        border-radius: 28px;
    }
}

/* =========================
   Save the date block (centered)
   ========================= */
.block {
    margin-top: clamp(2.2rem, 6.4vw, 6.6rem);
    text-align: center;
    z-index: 5;
    padding: 0 6%;
}

.save {
    color: var(--gold);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.0rem, 2.2vw, 1.6rem);
    letter-spacing: 0.22em;
    font-weight: 700;
}

.couple {
    margin-top: clamp(0.6rem, 2.0vw, 1.1rem);
    color: var(--gold);
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: clamp(0.86rem, 1.9vw, 1.10rem);
    text-transform: uppercase;
    opacity: 0.95;
    word-break: break-word;
}

.month {
    margin-top: clamp(0.7rem, 1.8vw, 1.2rem);
    color: var(--gold);
    font-family: "Playfair Display", serif;
    font-size: clamp(0.9rem, 1.9vw, 1.2rem);
    letter-spacing: 0.08em;
}

/* =========================
   Date pill (center with two side blocks)
   ========================= */
.date-row {
    margin-top: clamp(0.9rem, 2.2vw, 1.6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4.6vw, 36px);
    z-index: 5;
}

.date-pill {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.4vw, 22px);
    font-weight: 700;
    color: var(--gold);
    flex-wrap: nowrap;
}

    /* sides are flexible but have a minimum percentage width */
    .date-pill .side {
        border-top: 2px solid rgba(255,255,255,0.12);
        border-bottom: 2px solid rgba(255,255,255,0.06);
        padding: clamp(8px, 1.4vw, 14px) clamp(10px, 2.6vw, 26px);
        text-transform: uppercase;
        font-size: clamp(0.76rem, 1.6vw, 1rem);
        letter-spacing: 0.12em;
        min-width: 18%;
        text-align: center;
        background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(255,255,255,0.012));
    }

/* circular date */
.date-circle {
    width: clamp(44px, 8.2vw, 86px);
    height: clamp(44px, 8.2vw, 86px);
    border-radius: 50%;
    background: radial-gradient(circle at 1% 3%, white 1%, #fff8e8 12%, var(--gold) 45%, var(--gold-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.0rem, 2.3vw, 2.0rem);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.6), inset 0 -6px 8px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

/* =========================
   Venue & address
   ========================= */
.venue {
    margin-top: clamp(0.9rem, 2.4vw, 1.6rem);
    font-weight: 700;
    color: #f2e7cf;
    font-size: clamp(0.84rem, 1.8vw, 1.1rem);
    text-align: center;
}

.address {
    text-align: center;
    font-size: clamp(0.72rem, 1.6vw, 0.98rem);
    color: rgba(255,255,255,0.72);
    margin-bottom: clamp(8px, 1.2vw, 14px);
}

/* =========================
   Decorative flowers (scale by %) to avoid px clipping
   ========================= */
.flower {
    position: absolute;
    width: 18%;
    height: auto;
    right: 3.2%;
    bottom: 3.2%;
    z-index: 3;
    opacity: 0.96;
    transform: rotate(2deg);
    pointer-events: none;
}

    .flower.left {
        left: 3.0%;
        right: auto;
        bottom: 3.0%;
        transform: rotate(-6deg) scale(0.98);
    }

/* left-lines */
.left-lines {
    position: absolute;
    left: 3.2%;
    bottom: 22%;
    z-index: 6;
    opacity: 0.9;
    width: 18%;
    pointer-events: none;
}

    .left-lines svg {
        width: 100%;
        height: auto;
        display: block;
    }

/* =========================
   Utility/responsive tweaks
   - Prevent text from collapsing on tiny widths
   - Slight scaling for very small viewports to keep layout intact
   ========================= */
@media (max-width: 380px) {
    .card {
        padding: clamp(12px, 4vw, 18px);
    }

    .name {
        font-size: clamp(1.6rem, 8.8vw, 2.6rem);
    }

    .amp {
        font-size: clamp(1.0rem, 6.2vw, 1.6rem);
    }
}

/* If you want to enforce a uniform scale below some width (optional):
   This preserves the composition and uses transform scale to avoid layout collapse.
   Uncomment if your card appears too tall or elements overlap at very small widths.

@media (max-width: 320px){
  .card{
    transform: scale(0.95);
  }
}
*/

/* =========================
   Accessibility: ensure decorative elements are ignored by assistive tech
   ========================= */
.corner-spray, .ornament, .flower, .left-lines, .bow {
    aria-hidden: true;
    pointer-events: none;
}

/* =========================
   End of file
   ========================= */