/* ==========================================================================
   Invitations: template palettes, illustrations and the invitation card.
   Each template is a [data-template="<key>"] block that only sets variables;
   the layout below is shared. Keys match App\Event\EventTemplateRegistry.
   ========================================================================== */

[data-template] {
    --inv-bg: #fffdf9;
    --inv-surface: #ffffff;
    --inv-ink: #202020;
    --inv-muted: #5f646b;
    --inv-accent: #e34352;
    --inv-accent-ink: #ffffff;
    --inv-c1: #ff5c67;
    --inv-c2: #ffd966;
    --inv-c3: #c9f3e8;
    --inv-c4: #e6dcff;
    --inv-heading-font: 'Manrope', system-ui, sans-serif;
}

[data-template="kids_boy"] {
    --inv-bg: #eaf4ff;
    --inv-ink: #13294b;
    --inv-muted: #4a5d7a;
    --inv-accent: #2860c4;
    --inv-c1: #2f6fdb;
    --inv-c2: #7fd6c2;
    --inv-c3: #ffc933;
    --inv-c4: #ff7a59;
}

[data-template="kids_girl"] {
    --inv-bg: #fff0f5;
    --inv-ink: #4a1f3d;
    --inv-muted: #7a5068;
    --inv-accent: #c2306f;
    --inv-c1: #ff9cc2;
    --inv-c2: #c8b6ff;
    --inv-c3: #ffc933;
    --inv-c4: #d63d84;
}

[data-template="kids_party"] {
    --inv-bg: #fffbea;
    --inv-ink: #2b2b2b;
    --inv-muted: #5f646b;
    --inv-accent: #d63a48;
    --inv-c1: #ff5c67;
    --inv-c2: #ffc933;
    --inv-c3: #52bf98;
    --inv-c4: #7b9cff;
}

[data-template="birthday"] {
    --inv-bg: #fff8e1;
    --inv-ink: #2d2415;
    --inv-muted: #6b5d45;
    --inv-accent: #c2410c;
    --inv-c1: #ffcf3f;
    --inv-c2: #ff8a65;
    --inv-c3: #fff3d6;
    --inv-c4: #e34352;
}

[data-template="jubilee"] {
    --inv-bg: #1f1b2e;
    --inv-surface: #2a2540;
    --inv-ink: #f6efe0;
    --inv-muted: #c9bfa8;
    --inv-accent: #d4af37;
    --inv-accent-ink: #1f1b2e;
    --inv-c1: #d4af37;
    --inv-c2: #f3e2a9;
    --inv-c3: #a996e0;
    --inv-c4: #ffffff;
}

[data-template="wedding"] {
    --inv-bg: #fbf6f1;
    --inv-ink: #4a3b3b;
    --inv-muted: #7a6a66;
    --inv-accent: #9c4f5b;
    --inv-c1: #c9a227;
    --inv-c2: #d98c98;
    --inv-c3: #9fb48f;
    --inv-c4: #ffffff;
    --inv-heading-font: 'Caveat', 'Manrope', cursive;
}

[data-template="housewarming"] {
    --inv-bg: #eef8f3;
    --inv-ink: #23352c;
    --inv-muted: #52665b;
    --inv-accent: #a9502c;
    --inv-c1: #c8643b;
    --inv-c2: #7cc4a4;
    --inv-c3: #ffc933;
    --inv-c4: #ffffff;
}

[data-template="new_year"] {
    --inv-bg: #0f2340;
    --inv-surface: #16305a;
    --inv-ink: #f5f7fb;
    --inv-muted: #b8c4d9;
    --inv-accent: #e7b73c;
    --inv-accent-ink: #0f2340;
    --inv-c1: #2e9e6a;
    --inv-c2: #e7b73c;
    --inv-c3: #ffffff;
    --inv-c4: #ff5c67;
}

[data-template="party"] {
    --inv-bg: #f3eeff;
    --inv-ink: #2a2140;
    --inv-muted: #5c5373;
    --inv-accent: #6741d9;
    --inv-c1: #7048e8;
    --inv-c2: #ff5c67;
    --inv-c3: #ffc933;
    --inv-c4: #5fd1b5;
}

/* --------------------------------------------------------------------------
   Illustration: shapes use classes, not fill="", so one SVG serves every
   palette (presentation attributes cannot read CSS variables).
   -------------------------------------------------------------------------- */
.inv-art { display: block; width: 100%; height: auto; }
.inv-art .c1 { fill: var(--inv-c1); }
.inv-art .c2 { fill: var(--inv-c2); }
.inv-art .c3 { fill: var(--inv-c3); }
.inv-art .c4 { fill: var(--inv-c4); }
.inv-art .cw { fill: #ffffff; }
.inv-art .c-flame { fill: #ffb020; }
.inv-art .c-trunk { fill: #8b5a2b; }
.inv-art .soft { opacity: .45; }
.inv-art .s1, .inv-art .s3, .inv-art .s-ink, .inv-art .s-soft,
.inv-art [class*="s-c"] { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.inv-art .s1 { stroke: var(--inv-c1); }
.inv-art .s3 { stroke: var(--inv-c3); stroke-width: 5; }
.inv-art .s-ink { stroke: var(--inv-muted); stroke-width: 1.5; }
.inv-art .s-soft { stroke: var(--inv-muted); stroke-width: 1; opacity: .3; }
.inv-art .s-c1 { stroke: var(--inv-c1); }
.inv-art .s-c2 { stroke: var(--inv-c2); }
.inv-art .s-c3 { stroke: var(--inv-c3); }
.inv-art .s-c4 { stroke: var(--inv-c4); }
.inv-art .thick { stroke-width: 13; stroke-linecap: butt; }
.inv-art .ring { stroke-width: 7; }
/* Shapes that are both filled and outlined. */
.inv-art .cw.s1 { fill: #ffffff; }
.inv-art .c2.s1 { fill: var(--inv-c2); }
.inv-art .c4.s-c1 { fill: var(--inv-c4); stroke-width: 2; }

/* --------------------------------------------------------------------------
   Invitation card (preview in the dashboard, full page for guests)
   -------------------------------------------------------------------------- */
.inv-card {
    background: var(--inv-bg);
    color: var(--inv-ink);
    border-radius: var(--brand-radius-lg, 28px);
    overflow: hidden;
    box-shadow: var(--brand-shadow, 0 10px 30px rgba(32, 32, 32, .07));
}

.inv-card__cover { position: relative; }

.inv-card__cover img {
    display: block;
    width: 100%;
    /* The width/height attributes only reserve space; without height: auto the
       height attribute wins and a portrait photo is shown at full height. */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.inv-card__art { padding: 1.25rem 1.5rem 0; }
.inv-card__art .inv-art { max-width: 340px; margin: 0 auto; }

.inv-card__body { padding: 1rem 1.5rem 1.75rem; text-align: center; }

.inv-card__emoji { font-size: 2rem; line-height: 1; }

.inv-card__title {
    font-family: var(--inv-heading-font);
    font-weight: 800;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    line-height: 1.1;
    margin: .5rem 0 .25rem;
    color: var(--inv-ink);
    overflow-wrap: anywhere;
}

[data-template="wedding"] .inv-card__title { font-weight: 700; font-size: clamp(2.2rem, 9vw, 3.2rem); }

.inv-card__subtitle { color: var(--inv-muted); font-weight: 600; margin-bottom: 1rem; }

.inv-card__facts {
    display: inline-grid;
    gap: .35rem;
    text-align: left;
    margin: .5rem auto 1rem;
    padding: 0;
    list-style: none;
}

.inv-card__facts li { display: flex; gap: .5rem; }

.inv-card__greeting { font-weight: 700; }

.inv-card .btn-inv {
    --bs-btn-bg: var(--inv-accent);
    --bs-btn-border-color: var(--inv-accent);
    --bs-btn-color: var(--inv-accent-ink);
    --bs-btn-hover-bg: var(--inv-accent);
    --bs-btn-hover-border-color: var(--inv-accent);
    --bs-btn-hover-color: var(--inv-accent-ink);
    --bs-btn-active-bg: var(--inv-accent);
    --bs-btn-active-color: var(--inv-accent-ink);
    filter: saturate(1.05);
}

.inv-card .btn-inv:hover { filter: brightness(.94); }

.inv-card .btn-inv-outline {
    --bs-btn-color: var(--inv-ink);
    --bs-btn-border-color: var(--inv-accent);
    --bs-btn-hover-bg: var(--inv-accent);
    --bs-btn-hover-border-color: var(--inv-accent);
    --bs-btn-hover-color: var(--inv-accent-ink);
    --bs-btn-active-bg: var(--inv-accent);
    --bs-btn-active-color: var(--inv-accent-ink);
}

.inv-panel {
    background: var(--inv-surface);
    color: var(--inv-ink);
    border-radius: var(--brand-radius, 18px);
    padding: 1.25rem;
    text-align: left;
}

.inv-muted { color: var(--inv-muted); }

/* --------------------------------------------------------------------------
   Template picker (wizard step 1)
   -------------------------------------------------------------------------- */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 1rem;
}

.template-tile {
    display: block;
    background: var(--inv-bg);
    color: var(--inv-ink);
    border-radius: var(--brand-radius, 18px);
    border: 2px solid transparent;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--brand-shadow-sm, 0 2px 10px rgba(32, 32, 32, .05));
    transition: transform .15s ease, border-color .15s ease;
}

.template-tile:hover, .template-tile:focus-visible {
    color: var(--inv-ink);
    border-color: var(--inv-accent);
    transform: translateY(-2px);
}

.template-tile .inv-art { padding: .75rem .75rem 0; }

.template-tile__label {
    display: block;
    padding: .5rem .9rem .9rem;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .template-tile { transition: none; }
    .template-tile:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Guest page (/e/{slug}, /i/{token})
   -------------------------------------------------------------------------- */
.inv-page {
    background: var(--inv-bg);
    color: var(--inv-ink);
    min-height: 100%;
}

.inv-page .inv-card {
    max-width: 640px;
    box-shadow: var(--brand-shadow-lg, 0 24px 60px rgba(32, 32, 32, .10));
    background: var(--inv-bg);
    /* A thin ring separates the card from the page of the same colour. */
    outline: 1px solid color-mix(in srgb, var(--inv-ink) 8%, transparent);
}

.inv-card__actions { padding: 0 1.25rem 1.75rem; }

/* Small map of the place (Yandex Static API through our server); opens Yandex Maps. */
.inv-map {
    display: block;
    max-width: 325px;
    margin: 0 auto .75rem;
    border-radius: var(--brand-radius, 18px);
    overflow: hidden;
    outline: 1px solid color-mix(in srgb, var(--inv-ink) 10%, transparent);
}

.inv-map img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 576px) {
    .inv-card__actions { padding: 0 2rem 2.25rem; }
}

.inv-card__personal {
    text-align: center;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.inv-banner {
    padding: .75rem 1.25rem;
    font-weight: 700;
    text-align: center;
}

.inv-banner--info { background: color-mix(in srgb, var(--inv-accent) 14%, var(--inv-surface)); }
.inv-banner--warn { background: #ffe3e3; color: #8a1c1c; }

.inv-panel .form-label, .inv-panel legend { color: var(--inv-ink); font-weight: 700; }
.inv-panel .form-text { color: var(--inv-muted); }

.rsvp-choices { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 480px) {
    .rsvp-choices { grid-template-columns: repeat(3, 1fr); }
}
.rsvp-choices .btn { padding-inline: .75rem; }
.rsvp-choices .btn-check:checked + .btn {
    background: var(--inv-accent);
    border-color: var(--inv-accent);
    color: var(--inv-accent-ink);
}
.rsvp-choices .btn-check:focus-visible + .btn { outline: 3px solid var(--inv-accent); outline-offset: 2px; }

/* Hidden from people, still visible to naive bots. */
.rsvp-hp {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rsvp-form.is-declined .rsvp-people { display: none; }

.rsvp-thanks {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--inv-ink) 20%, transparent);
}

.rsvp-change summary { cursor: pointer; color: var(--inv-accent); }
[data-template="jubilee"] .rsvp-change summary,
[data-template="new_year"] .rsvp-change summary { color: var(--inv-accent); }

.inv-link { color: var(--inv-ink); font-weight: 700; text-decoration: none; }
.inv-link:hover { color: var(--inv-accent); }

.inv-footnote { color: var(--inv-muted); }
.inv-footnote a { color: inherit; }