@import url('./base.css');

.page {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: var(--space-8xl) var(--space-3xl) var(--space-page-bottom);
}

.liveBanner {
    background: var(--live-banner-bg);
    color: var(--live-banner-text);
    padding: var(--space-lg);
    text-align: center;
    font-weight: 700;
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-2xl);
    white-space: pre-line;
}

.liveTracker {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
    margin: var(--space-4xl) 0 var(--space-2xl);
}

.liveItem {
    background: var(--live-card-bg);
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-sm);
    border: 1px solid var(--live-card-border);
    flex: 1;
    color: var(--live-card-text);
}

.liveLabel {
    font-size: var(--font-size-xs);
    letter-spacing: 1px;
    margin-right: var(--space-xs);
    color: var(--color-primary-600);
    font-weight: 700;
}

.liveNowCard {
    position: relative;
    border: 2px solid transparent;
    background:
        var(--live-active-bg) padding-box,
        var(--live-active-border) border-box;
    background-size: 200% 200%;
    animation: movingBorder 3s linear infinite;
    box-shadow: var(--live-active-shadow);
    color: var(--live-active-text);
    font-weight: 700;
}

@keyframes movingBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.updates {
    margin: var(--space-2xl) 0;
    border: 1px solid var(--section-accent-border);
    border-radius: var(--radius);
    background: var(--section-accent-bg);
    padding: var(--space-2xl);
}

.updates__title {
    margin: 0;
    font-size: var(--font-size-md);
    letter-spacing: var(--letter-space-widest);
    text-transform: uppercase;
}

.updates__intro {
    margin: var(--space-sm) 0 0;
    color: var(--color-text-muted);
}

.updates__list {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-md);
}

.update {
    grid-column: span 6;
    border: 1px solid var(--section-accent-border);
    background: var(--color-surface-900);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.update__meta {
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-text);
    font-weight: 700;
}

.update__title {
    margin-top: var(--space-xs);
    font-weight: 700;
}

.update__text {
    margin-top: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    white-space: pre-line;
}

.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--hero-gap);
    align-items: stretch;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: var(--color-surface-muted);
}

.hero__media {
    min-height: var(--hero-media-min-height);
    background: var(--gradient-hero-media);
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__content {
    padding: var(--space-7xl) var(--space-6xl) var(--space-6xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kicker__date {
    font-size: var(--font-size-date);
    letter-spacing: 0.04em;
    font-family: var(--font-display);
}

.kicker__city {
    margin-top: var(--space-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.title {
    margin: var(--space-2xl) 0 var(--space-xs);
    font-size: var(--font-size-title);
    font-weight: 500;
    letter-spacing: var(--letter-space-title);
    text-transform: uppercase;
}

.scriptline {
    margin: var(--space-xs) 0 var(--space-sm);
}

.scriptline__image {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
}

.host {
    margin-top: var(--space-2xs);
    font-weight: 700;
    letter-spacing: var(--letter-space-wider);
    text-transform: uppercase;
}

.subcopy {
    margin: var(--space-xl) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    max-width: 46ch;
}

.links {
    margin-top: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.chip {
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    border: 1px solid var(--chip-border);
    background: var(--chip-bg);
    text-decoration: none;
    color: var(--chip-text);
}

.cardGrid {
    margin-top: var(--space-3xl);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}

.card {
    grid-column: span 6;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    padding: var(--space-2xl);
}

.card__title {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-md);
    letter-spacing: var(--letter-space-widest);
    text-transform: uppercase;
}

.venueName {
    font-weight: 700;
    letter-spacing: var(--letter-space-wide);
    text-transform: uppercase;
}

.venueAddr,
.afterText,
.hint {
    color: var(--color-text-muted);
}

.hint {
    margin-top: var(--space-md);
    font-size: var(--font-size-md);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.step {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--space-lg);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--timeline-border);
    background: var(--timeline-bg);
}

.step__time {
    font-weight: 600;
    color: var(--timeline-time-text);
}

.step__title {
    font-weight: 700;
}

.step__details {
    font-size: var(--font-size-md);
    margin-top: var(--space-2xs);
}

.rsvpPanel {
    margin-top: var(--space-3xl);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-2xl);
}

.rsvpGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.rsvpGrid label {
    display: grid;
    gap: var(--space-xs);
    font-weight: 700;
}

.rsvpGrid .full {
    grid-column: 1 / -1;
}

.footer {
    margin-top: var(--space-3xl);
    padding-top: var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
}

/* User-selected invite phrase font */

.scriptline__text {
    display: block;
    font-size: var(--font-size-scriptline);
    line-height: var(--line-height-tight);
    font-weight: 700;
}

.scriptline--sans-01 .scriptline__text {
    font-family: var(--font-sans-01);
}

.scriptline--sans-02 .scriptline__text {
    font-family: var(--font-sans-02);
}

.scriptline--serif-01 .scriptline__text {
    font-family: var(--font-serif-01);
}

.scriptline--serif-02 .scriptline__text {
    font-family: var(--font-serif-02);
}

.scriptline--script-01 .scriptline__text {
    font-family: var(--font-script-01);
}

.scriptline--script-02 .scriptline__text {
    font-family: var(--font-script-02);
}

.scriptline--script-03 .scriptline__text {
    font-family: var(--font-script-03);
}

.scriptline--script-04 .scriptline__text {
    font-family: var(--font-script-04);
}

@media (max-width: 920px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero__media {
        min-height: var(--hero-media-min-height-mobile);
    }

    .title {
        font-size: var(--font-size-title-mobile);
    }

    .card,
    .update {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .liveTracker {
        flex-direction: column;
    }

    .rsvpGrid {
        grid-template-columns: 1fr;
    }

    .scriptline__image {
        max-width: 240px;
    }
}