.itinerary__card-col2 {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-size: 1.45rem;
    line-height: 2.2rem;
}

@media (min-width: 992px) {
    .itinerary__card-col2 {
        font-size: 1.5rem;
        line-height: 2.3rem;
    }
}

.itinerary__card-note {
    padding: 28px 23px 24px;
}

.itinerary__card-note-text {
    margin-top: 0;
    font-size: 1.35rem;
    line-height: 2rem;
}

/* "Right now mode" banner: black card, white text. By default it behaves like a
   normal element inside the itinerary grid (constrained width, rounded). Only
   once it PINS to the top of the viewport does it break out to full-bleed
   (.is-stuck, toggled in main.js). On desktop it stays inside its column. */
.itinerary__live-note {
    position: sticky;
    top: 50px; /* clears the 50px mobile nav */
    z-index: 6;
    margin-top: 20px;
    /* Grid element by default — no full-bleed. */
    width: auto;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--nino-radius-lg);
    padding: 15px 20px 16px;
    border-top: none;
    background: #000000;
    color: #ffffff;
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.65);
    transition:
        margin 0.22s ease,
        border-radius 0.22s ease,
        padding 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

/* Pinned → keep rounded corners + edge bleed on mobile. Stays position:sticky so it
   only pins once the element itself reaches the viewport top (JS toggles
   .is-stuck). Bleed uses negative margins only — never width:100vw. */
@media (max-width: 767.98px) {
    /* Sticky only works while its parent spans the full list height. */
    .itinerary__content {
        display: block;
        align-self: stretch;
    }

    .itinerary__live-note {
        position: -webkit-sticky;
        position: sticky;
        top: 50px;
    }

    .itinerary__live-note.is-stuck {
        border-radius: var(--nino-radius-lg);
        margin-left: calc(-1 * var(--bleed-l, 0px));
        margin-right: calc(-1 * var(--bleed-r, 0px));
        padding-left: calc(20px + var(--bleed-l, 0px));
        padding-right: calc(20px + var(--bleed-r, 0px));
        border-top: 1px solid rgba(255, 255, 255, 0.26);
        box-shadow: none;
    }

    /* Sticky shows "Watch wedding video" — hide the duplicate nav label. */
    html.is-itinerary-live-stuck .nav-rsvp {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
}

/* Legacy divider removed from markup — pinned state uses border-top instead. */
.itinerary__live-note-divider {
    display: none;
}

.itinerary__live-note-text {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 2.1rem;
    color: #ffffff;
}

.itinerary__live-note-text strong {
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.js-itinerary-live-clock {
    font-weight: 700;
}

.itinerary__live-note-cta {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 20px 10px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-family: 'Lato', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.itinerary__live-note-cta:hover {
    background: rgba(255, 255, 255, 0.88);
}

.itinerary__live-note-cta[hidden] {
    display: none;
}

.itinerary__item-details {
    font-family: 'Lato', sans-serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 2.4rem;
}

.itinerary__item-details a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.itinerary__item--dark .itinerary__item-details a {
    color: #ffffff;
}

/* Stacked layout: time on its own row, then title, then details */
.itinerary__item {
    padding-left: 25px;
    padding-right: 25px;
}

.itinerary__item-text {
    display: block;
    max-width: 52rem;
}

.itinerary__item-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-family: 'Lato', sans-serif;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.itinerary__time-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

/* Relative countdown/"ago" label — stays legible even when the time pill fades
   on a past item, so guests can still read how long ago it wrapped. */
.itinerary__time-rel {
    font-family: 'Lato', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    opacity: 0.6;
}

.itinerary__time-rel:empty {
    display: none;
}

.itinerary__item.is-current .itinerary__time-rel {
    opacity: 0.85;
}

.itinerary__time {
    position: static;
    display: inline-block;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-bottom: 0;
    padding: 6px 12px 7px;
    background-color: #000000;
    font-family: 'Lato', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    text-align: left;
    white-space: normal;
}

@media (min-width: 992px) {
    .itinerary__item {
        padding-left: 40px;
        padding-right: 40px;
    }

    .itinerary__item-title {
        font-size: 1.65rem;
    }
}

.itinerary__item.is-current {
    background-color: rgba(255, 255, 255, 0.14);
}

.itinerary__item.is-current .itinerary__time {
    background-color: #ffffff;
    color: #000000;
}

.itinerary__item.is-past .itinerary__item-title,
.itinerary__item.is-past .itinerary__item-details {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.42;
}

.itinerary__item.is-past .itinerary__time {
    opacity: 0.15;
    text-decoration: none;
}

.itinerary__item.is-past .itinerary__time-rel {
    opacity: 0.5;
}

/* Marriage moment: "going to be married" until it passes, then the crossed-out
   "now married!" appears in its place. */
.itinerary__title-married {
    display: none;
}

.itinerary__item.is-past .itinerary__title-upcoming {
    display: none;
}

.itinerary__item.is-past .itinerary__title-married {
    display: inline;
}

.itinerary__item--dark.is-past .itinerary__item-title,
.itinerary__item--dark.is-past .itinerary__item-details {
    opacity: 0.38;
}

.itinerary__item--dark.is-current {
    background-color: rgba(255, 255, 255, 0.08);
}

.itinerary__list-past {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.itinerary__list-past[hidden] {
    display: none;
}

.itinerary__list-past-heading {
    margin: 0 0 18px;
    padding-left: 25px;
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.6rem;
    text-transform: uppercase;
    opacity: 0.55;
}

@media (min-width: 992px) {
    .itinerary__list-past-heading {
        padding-left: 40px;
    }
}

.itinerary__list-past .itinerary__item--dark {
    background-color: transparent;
    color: inherit;
}

.itinerary__list-past .itinerary__item--dark a {
    color: inherit;
}

@media (min-width: 768px) {
    /* The flex row stretches the left column to match the (taller) itinerary
       list. The sticky wrapper must inherit that full height, otherwise the
       white card's sticky range ends the instant the wrapper does and it never
       follows the scroll. */
    .itinerary__location {
        align-self: stretch;
    }

    .itinerary__location-sticky {
        display: block;
        height: 100%;
    }

    /* Only the white card is sticky (the photo scrolls away above it). Drop the
       top margin so it tracks flush from the offset instead of sitting low and
       top-heavy. */
    .itinerary__card.is-visible {
        position: sticky;
        top: 62px;
        margin-top: 0;
        z-index: 2;
        overflow: hidden;
    }

    /* Desktop: stay within the column (no full-bleed) and pin at the same
       offset as the sticky card so they line up. */
    .itinerary__live-note {
        top: 62px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 992px) {
    .itinerary__card.is-visible {
        top: 82px;
    }

    .itinerary__live-note {
        top: 82px;
    }
}