/* ==========================================================================
   Invitation card — one component for picker, preview, guest page and export.
   The card is drawn on a 360×450 grid; everything is in em and the base font
   size follows the container width, so the card scales as a picture would.
   Always place it inside .inv-frame.
   ========================================================================== */

.inv-frame {
    container-type: inline-size;
    width: 100%;
}

.inv-card {
    --body-font: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    font-size: calc(100cqw / 22.5); /* 16px at 360px wide */
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body-font);
    direction: rtl;
    text-align: center;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* The card must look the same on every page, including the bare export/story pages
   that load only this stylesheet: reset browser default margins (zero specificity,
   so the margins set on card classes below still apply). */
.inv-card, .inv-card * { box-sizing: border-box; }
.inv-card :where(p, h1, h2, h3, ul, ol, figure) { margin: 0; padding: 0; }

/* Art layer */
.inv-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.inv-art [class*="s-"] { fill: none; }
.inv-art .s-accent { stroke: var(--accent); }
.inv-art .s-accent2 { stroke: var(--accent-2); }
.inv-art .s-ink { stroke: var(--ink); }
.inv-art .f-bg { fill: var(--bg); }
.inv-art .f-surface { fill: var(--surface); }
.inv-art .f-ink { fill: var(--ink); }
.inv-art .f-accent { fill: var(--accent); }
.inv-art .f-accent2 { fill: var(--accent-2); }

/* Text layer */
.inv-body {
    position: absolute;
    inset: 0;
    padding: var(--pad, 3.5em 2.75em);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 0.22em;
}

.inv-body > * { flex-shrink: 0; }
.inv-body [hidden] { display: none !important; }

.inv-guest {
    font-size: 0.7em;
    color: var(--muted);
    padding: 0.15em 0.9em;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 2em;
    margin-bottom: 0.25em;
}
.inv-guest b { color: var(--ink); font-weight: 700; }

/* Official invitations: "تحت رعاية …" opens the card */
.inv-patron {
    font-size: 0.68em;
    color: var(--muted);
    line-height: 1.5;
    max-width: 22em;
    margin-bottom: 0.35em;
}
.inv-patron b { display: block; color: var(--ink); font-weight: 700; font-size: 1.12em; }

.inv-prayer {
    font-family: var(--display), serif;
    font-size: 0.74em;
    line-height: 1.7;
    color: var(--muted);
    max-width: 22em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.2em;
}

.inv-host { font-size: 0.86em; font-weight: 700; color: var(--ink); line-height: 1.4; }
.inv-verb { font-size: 0.72em; color: var(--muted); }

.inv-names {
    font-family: var(--display), serif;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.3;
    margin: 0.15em 0 0.05em;
    word-break: break-word;
    max-width: 100%;
}
.inv-names.size-xl { font-size: 2.35em; }
.inv-names.size-lg { font-size: 1.95em; }
.inv-names.size-md { font-size: 1.6em; }
.inv-names.size-sm { font-size: 1.3em; }
.inv-amp { font-size: 0.55em; color: var(--muted); margin: 0 0.35em; font-weight: 400; vertical-align: middle; }
.inv-names.stack { display: flex; flex-direction: column; align-items: center; line-height: 1.18; }
.inv-names.stack .inv-amp { margin: -0.05em 0 -0.1em; font-size: 0.5em; }

.inv-sub { font-size: 0.78em; font-weight: 600; color: var(--ink); }

.inv-meta {
    width: 100%;
    max-width: 19.5em;
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 1.25fr;
    margin: 0.6em 0 0.4em;
    border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.inv-meta-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    padding: 0.5em 0.35em;
    min-width: 0;
}
.inv-meta-cell + .inv-meta-cell { border-right: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

/* Narrow motifs: place on its own row */
.motif-arch .inv-meta, .motif-mashrabiya .inv-meta { grid-template-columns: 1fr 1fr; }
.motif-arch .inv-meta-loc, .motif-mashrabiya .inv-meta-loc {
    grid-column: 1 / -1;
    border-right: none !important;
    border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 0.4em;
}
.inv-k { font-size: 0.58em; color: var(--muted); letter-spacing: 0.02em; }
.inv-meta b { font-size: 0.8em; font-weight: 700; color: var(--ink); line-height: 1.35; }
.inv-meta small { font-size: 0.58em; color: var(--muted); }
.inv-meta-loc b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inv-closing {
    font-family: var(--display), serif;
    font-size: 0.92em;
    color: var(--accent);
    line-height: 1.5;
}

.inv-qr {
    position: absolute;
    left: 1.1em;
    bottom: 1.1em;
    width: 3.7em;
    padding: 0.28em 0.28em 0.15em;
    background: #fff;
    border-radius: 0.4em;
    box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
}
.inv-qr svg { display: block; width: 100%; height: auto; }
.inv-qr span { font-size: 0.4em; color: #333; white-space: nowrap; }

/* Per-motif safe areas for text */
.motif-bisht      { --pad: 3.6em 3em 3.3em; }
.motif-mashrabiya { --pad: 4.6em 3.7em 2.2em; }
.motif-sadu       { --pad: 3.7em 2.4em 3.7em; }
.motif-dunes      { --pad: 4.4em 2.2em 3.6em; }
.motif-pearl      { --pad: 4.9em 2.2em 3em; }
.motif-saffron    { --pad: 4.6em 2.6em 2.6em; }
.motif-henna      { --pad: 4.4em 3em; }
.motif-palms      { --pad: 4.4em 2.8em 3.9em; }
.motif-arch       { --pad: 5.4em 3.2em 2.4em; }
.motif-lantern    { --pad: 4.4em 3.4em 3.6em; }
.motif-pop        { --pad: 4.6em 3em 4.2em; }
.motif-silver     { --pad: 4.8em 3em 4.6em; }
.motif-rose       { --pad: 5em 2.6em 4.4em; }
.motif-dhow       { --pad: 3.8em 2.6em 6.4em; }
.motif-incense    { --pad: 4.2em 2.8em 5.2em; }
.motif-kumma      { --pad: 5.4em 2.6em 3.6em; }
.motif-plain      { --pad: 3.4em 2.8em; }
.motif-frame      { --pad: 3.6em 3em; }
.motif-seal       { --pad: 6em 3em 3.4em; }
.motif-diwan      { --pad: 5em 3em 3.6em; }
.motif-deco       { --pad: 5.8em 3em 3.6em; }
.motif-aura       { --pad: 3.8em 3em; }
.motif-skyline    { --pad: 3em 2.6em 5.4em; }
.motif-sunset     { --pad: 4.4em 3.2em 4.6em; }
.motif-camp       { --pad: 4.2em 2.8em 5.6em; }
.motif-jebel      { --pad: 4.4em 2.8em 6em; }

.motif-palms .inv-art > g:first-of-type { opacity: 0.8; }
.motif-arch .inv-meta { max-width: 16em; }
.motif-arch .inv-prayer { -webkit-line-clamp: 1; max-width: 16em; }
.has-qr .inv-body { padding-bottom: 4.9em; }
/* Motifs whose art fills the bottom keep their larger safe area */
.has-qr.motif-dhow .inv-body { padding-bottom: 6.4em; }
.has-qr.motif-skyline .inv-body { padding-bottom: 5.4em; }
.has-qr.motif-camp .inv-body { padding-bottom: 5.6em; }
.has-qr.motif-jebel .inv-body { padding-bottom: 6em; }
.motif-skyline .inv-prayer { -webkit-line-clamp: 1; }
/* Text near the top of the arch must stay inside it */
.motif-sunset .inv-prayer, .motif-sunset .inv-patron { max-width: 15em; }

.inv-brand {
    position: absolute;
    right: 1.1em;
    bottom: 0.9em;
    font-family: 'Plus Jakarta Sans', var(--body-font);
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    padding: 0.15em 0.6em;
    border-radius: 1em;
    opacity: 0.85;
    direction: ltr;
}

/* Announcements: no time, place only if given, date cell spans the row */
.inv-card[data-kind="Announcement"] .inv-meta { grid-template-columns: 1fr; max-width: 15em; }
.inv-card[data-kind="Announcement"] .inv-meta-time { display: none; }
.inv-card[data-kind="Announcement"] .inv-meta-loc {
    grid-column: auto;
    border-right: none !important;
    border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 0.4em;
}
.inv-card[data-kind="Announcement"] .inv-meta-loc:not([hidden]) { display: flex; }
.inv-card[data-kind="Announcement"] .inv-meta-loc b { -webkit-line-clamp: 1; }

/* Announcement showing the venue without the date: no divider above the venue */
.inv-card[data-kind="Announcement"] .inv-meta-date[hidden] ~ .inv-meta-loc { border-top: none; }