/*
 * Template "Tanggal Besar" (Save the Date) — editorial poster, mobile-first.
 * --inv-primary    the one strong colour (solid numerals, colour block)
 * --inv-accent     text on the colour block
 * --inv-background page colour (band under the photo, closing)
 * --inv-text       text on the page colour
 * Sizes use container units (cqw) of the phone-width column, so desktop keeps the phone poster.
 */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--inv-background); }

body.tb-body {
    margin: 0;
    min-height: 100vh;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.tb-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

.tb {
    position: relative;
    max-width: 30rem; margin: 0 auto;
    container-type: inline-size;
    background: var(--inv-background);
}

/* ---------- first screen ---------- */
.tb-hero {
    --tb-stroke: #fff;
    display: flex; flex-direction: column;
    min-height: 100svh;
}
.tb-hero--empty { --tb-stroke: var(--inv-accent); }

.tb-photo {
    position: relative; flex: 1 1 auto; min-height: 44svh; overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% 18%, color-mix(in srgb, var(--inv-primary) 82%, #fff) 0%, transparent 60%),
        linear-gradient(170deg, var(--inv-primary) 0%, color-mix(in srgb, var(--inv-primary) 70%, #000) 100%);
}
.tb-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 30%;
}
/* soft shade at the top (for the kicker) and at the bottom (for the outlined numerals) */
.tb-photo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, rgb(0 0 0 / .42) 0%, rgb(0 0 0 / 0) 22%),
        linear-gradient(0deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 38%);
}
.tb-hero--empty .tb-photo::after {
    background: linear-gradient(0deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / 0) 40%);
}

/* without a photo: the couple's initials, large and quiet */
.tb-photo__initials {
    position: absolute; inset: 0 0 18% 0; display: grid; place-items: center;
    font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400;
    font-size: 34cqw; line-height: 1; letter-spacing: -.02em;
    color: color-mix(in srgb, var(--inv-accent) 30%, transparent);
}

.tb-kicker {
    position: absolute; z-index: 2; top: 0; left: 0; right: 0; margin: 0;
    padding: 1.4rem 1.25rem 0;
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase;
    color: var(--tb-stroke); text-shadow: 0 1px 8px rgb(0 0 0 / .25);
}
.tb-kicker::before, .tb-kicker::after {
    content: ''; width: 1.75rem; height: 1px; background: currentColor; opacity: .75;
}
.tb-hero--empty .tb-kicker { text-shadow: none; }

/* the band under the photo */
.tb-band {
    position: relative; z-index: 2;
    padding: 0 1.25rem 1.6rem;
    background: var(--inv-background);
    text-align: center;
}

/*
 * The giant date. --tb-pull is how far the numerals reach up into the photo; the outlined copy is
 * clipped to that part and the solid copy to the rest, so the line between them is the photo's edge.
 */
.tb-big {
    --tb-size: min(41cqw, 25svh, 11.5rem);
    --tb-pull: calc(var(--tb-size) * .52);
    position: relative; display: grid;
    margin: calc(-1 * var(--tb-pull)) 0 0;
    font-family: 'Anton', 'Impact', sans-serif; font-weight: 400;
    font-size: var(--tb-size); line-height: .86; letter-spacing: -.005em;
    white-space: nowrap;
}
.tb-big__line { grid-area: 1 / 1; display: block; }
.tb-big__glyphs { display: inline-block; padding-top: .05em; }
.tb-big i { font-style: normal; margin: 0 -.04em; }
.tb-big__line--outline {
    color: transparent;
    -webkit-text-stroke: max(2px, .014em) var(--tb-stroke);
    clip-path: inset(-.5em -.5em calc(100% - var(--tb-pull)) -.5em);
}
.tb-big__line--solid {
    color: var(--inv-primary);
    clip-path: inset(var(--tb-pull) -.5em -.5em -.5em);
}
.tb-big__line--solid i { color: var(--inv-text); }

.tb-meta {
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    margin: .7rem 0 0;
    font-size: .74rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
}
.tb-meta__rule { flex: 0 0 2.25rem; height: 2px; background: var(--inv-primary); }

.tb-names {
    margin: .85rem 0 0;
    font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500;
    font-size: min(9.6cqw, 2.5rem); line-height: 1.1; letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.tb-amp { color: var(--inv-primary); font-weight: 400; padding: 0 .08em; }

.tb-guest { margin: 1rem auto 0; max-width: 22rem; line-height: 1.35; }
.tb-guest__label {
    display: block; margin-bottom: .2rem;
    font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .72;
}
.tb-guest__name { display: block; font-size: .98rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- the colour block ---------- */
.tb-block {
    position: relative; overflow: hidden;
    padding: 4.25rem 1.5rem 3.75rem;
    background: var(--inv-primary);
    color: var(--inv-accent);
    text-align: center;
}
/* the day number again, huge and outlined behind the block */
.tb-block[data-day]::before {
    content: attr(data-day);
    position: absolute; right: -6cqw; bottom: -14cqw; z-index: 0; pointer-events: none;
    font-family: 'Anton', 'Impact', sans-serif; font-size: 112cqw; line-height: .8;
    color: transparent;
    -webkit-text-stroke: 2px color-mix(in srgb, var(--inv-accent) 12%, transparent);
}
.tb-block > * { position: relative; z-index: 1; }

.tb-label {
    margin: 0 0 .6rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; opacity: .82;
}

.tb-city {
    margin: 0;
    font-family: 'Anton', 'Impact', sans-serif; font-weight: 400; text-transform: uppercase;
    line-height: .95; letter-spacing: .01em; overflow-wrap: anywhere;
}
.tb-city--l { font-size: min(19cqw, 5.5rem); }
.tb-city--m { font-size: min(14.5cqw, 4.4rem); }
.tb-city--s { font-size: min(10.5cqw, 3.2rem); }
.tb-city--xs { font-size: min(8cqw, 2.4rem); line-height: 1.05; }

.tb-fulldate {
    display: inline-block; margin: 1.1rem 0 0; padding: .55rem 0;
    border-block: 1px solid color-mix(in srgb, var(--inv-accent) 45%, transparent);
    font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}

.tb-note {
    margin: 1.4rem auto 0; max-width: 21rem;
    font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400;
    font-size: 1.3rem; line-height: 1.4;
}

/* countdown (shared component, restyled): the days huge, the rest in a row under them */
.tb-countdown { margin-top: 3.25rem; }
.tb-countdown .inv-countdown {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    max-width: 22rem; margin: 0 auto;
}
.tb-countdown .inv-countdown__item {
    min-width: 0; padding: .55rem .25rem .2rem; border-radius: 0;
    background: none; color: inherit;
    border-top: 1px solid color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.tb-countdown .inv-countdown__item + .inv-countdown__item:not(:nth-child(2)) {
    border-left: 1px solid color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.tb-countdown .inv-countdown__item:first-child {
    grid-column: 1 / -1; border-top: 0; padding: 0 0 .7rem;
    display: flex; align-items: flex-end; justify-content: center; gap: .6rem;
}
.tb-countdown .inv-countdown__value {
    font-family: 'Anton', 'Impact', sans-serif; font-weight: 400;
    font-size: 2.5rem; line-height: 1.05; letter-spacing: .01em;
}
.tb-countdown .inv-countdown__item:first-child .inv-countdown__value {
    font-size: min(36cqw, 9.5rem); line-height: .82;
}
.tb-countdown .inv-countdown__item:first-child .inv-countdown__label {
    font-size: .8rem; padding-bottom: .5rem; writing-mode: vertical-rl; transform: rotate(180deg);
}
.tb-countdown .inv-countdown__label {
    font-size: .64rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; opacity: .85;
}
.tb-countdown .inv-countdown__done { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 1.15rem; }
.tb-countdown .inv-countdown__actions { margin-top: 1.6rem; }
.tb-countdown .inv-button {
    border-radius: 0; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.tb-countdown .inv-button--outline {
    color: var(--inv-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.tb-countdown .inv-countdown__actions .inv-button:first-child {
    background: var(--inv-accent); color: var(--inv-primary); box-shadow: none;
}

/* ---------- closing ---------- */
.tb-closing {
    padding: 3.5rem 1.75rem 2.75rem;
    text-align: center;
    background: var(--inv-background);
}
.tb-closing__rule { display: block; width: 2.75rem; height: 3px; margin: 0 auto 1.4rem; background: var(--inv-primary); }
/* the photo again, a wide crop on a solid block offset behind it */
.tb-closing__photo {
    position: relative; width: 84%; margin: 0 auto 2.4rem; aspect-ratio: 5 / 4;
}
.tb-closing__photo::before {
    content: ''; position: absolute; inset: 0; transform: translate(.8rem, .8rem);
    background: var(--inv-primary);
}
.tb-closing__photo img {
    position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
}
.tb-closing__text {
    margin: 0 auto; max-width: 22rem;
    font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 1.22rem; line-height: 1.45;
}
.tb-closing__names {
    margin: 1.2rem 0 0;
    font-size: .76rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
}
.tb-closing__names .tb-amp { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; letter-spacing: 0; font-size: 1.15em; }
.tb-closing__date {
    margin: 1.1rem 0 0;
    font-family: 'Anton', 'Impact', sans-serif; font-size: min(22cqw, 6rem); line-height: .9;
    color: var(--inv-primary);
}

/* ---------- short screens (e.g. the browser inside WhatsApp) ---------- */
@media (max-height: 660px) {
    .tb-big { --tb-size: min(38cqw, 23svh, 11.5rem); }
    .tb-band { padding-bottom: 1.1rem; }
    .tb-meta { margin-top: .5rem; }
    .tb-names { margin-top: .55rem; font-size: min(8.6cqw, 2.2rem); }
    .tb-guest { margin-top: .6rem; }
    .tb-guest__name { font-size: .92rem; }
    .tb-kicker { padding-top: 1rem; }
}

/* ---------- desktop: the phone poster centred on a calm field ---------- */
@media (min-width: 600px) {
    html, body.tb-body { background: color-mix(in srgb, var(--inv-text) 7%, var(--inv-background)); }
    .tb { box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-text) 8%, transparent), 0 30px 80px -30px rgb(0 0 0 / .35); }
    .tb-hero { min-height: min(100svh, 56rem); }
}

/*
 * Motion (only with html.inv-anim; see _shared/inv.css): the photo eases out of a slight zoom
 * while the numerals rise into place once. Scroll reveals use one style (up).
 */
@keyframes tb-photo-in { from { transform: scale(1.08); } to { transform: none; } }
@keyframes tb-rise { from { transform: translateY(38%); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
html.inv-anim .tb-photo img, html.inv-anim .tb-photo__initials { animation: tb-photo-in 2.3s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .tb-big__glyphs { animation: tb-rise 1.15s cubic-bezier(.16, 1, .3, 1) .25s both; }