/* Coming up (16 Oct 2026): coming-up.html's full posts and the homepage strip at the foot of the prayer banner
   (js/coming-up.js, data/coming-up.json). */

/* ---------- coming-up.html ---------- */

/* "Back to home": above the heading, and again after the posts. */
.page-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--emerald);
    text-decoration: none;
}

.page-back-link:hover {
    color: var(--emerald-deep);
}

.page-back-link svg {
    transition: transform var(--duration-fast) ease;
}

.page-back-link:hover svg {
    transform: translateX(-3px);
}

.page-back-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.coming-up-back {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.coming-up-list {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.coming-up-post {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-top: 2px solid var(--gold);
    background: var(--ivory);
    box-shadow: var(--shadow-soft);
    scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.coming-up-post:focus {
    outline: none;
}

.coming-up-post:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

.coming-up-poster {
    display: block;
    background: #073b30;
}

.coming-up-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.coming-up-kind {
    margin: 0 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-muted);
}

.coming-up-body h2 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 400;
    line-height: 1.12;
    color: var(--emerald-deep);
}

.coming-up-when {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--emerald-deep);
}

.coming-up-place {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--charcoal);
}

.coming-up-body p {
    max-width: 62ch;
    margin: 0 0 0.85rem;
    line-height: 1.65;
    color: var(--slate);
}

.coming-up-body .coming-up-when,
.coming-up-body .coming-up-place {
    color: var(--emerald-deep);
}

.coming-up-details {
    display: grid;
    gap: 0;
    margin: 1.25rem 0;
    border-top: 1px solid rgba(196, 169, 98, 0.45);
}

.coming-up-details > div {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(196, 169, 98, 0.45);
}

.coming-up-details dt {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-muted);
}

.coming-up-details dd {
    margin: 0;
    color: var(--charcoal);
}

.coming-up-body .btn {
    margin-top: 0.5rem;
}

.coming-up-empty {
    padding: 2rem;
    border-top: 2px solid var(--gold);
    background: var(--ivory);
    box-shadow: var(--shadow-soft);
}

.coming-up-empty h2 {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--emerald-deep);
}

@media (max-width: 760px) {
    .coming-up-post {
        grid-template-columns: minmax(0, 1fr);
    }

    .coming-up-poster {
        max-width: 420px;
    }

    .coming-up-details > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }
}

/* ---------- Strip: every current item, one at a time, at the foot of the prayer banner ----------
   js/coming-up.js renderStrip. Items share one grid cell, so the strip keeps its longest item's height and the page
   never jumps; the active one (.is-active) fades in. Each item is a link to its full post. With several items,
   one dot per item, then a pause button set apart by a thin rule.
   Laptops: one line, "COMING UP | title • when  See details ... dots | pause".
   Phones: two lines, the "Coming up" label as a block on the left, the controls stacked on the right. */
.prayer-coming-up {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(212, 190, 122, 0.32);
    color: var(--ivory);
}

.prayer-coming-up .cu-eyebrow {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--gold-bright);
}

/* One label per item ("Coming up", "Notice", "Help needed", "Important"), stacked in one cell so the tag keeps the
   width of its longest label and the words beside it never shift; the active one shows. */
.prayer-coming-up .cu-eyebrow {
    display: grid;
    justify-items: center;
    align-items: center;
}

.prayer-coming-up .cu-label {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    visibility: hidden;
}

.prayer-coming-up .cu-label.is-active {
    visibility: visible;
}

.prayer-coming-up .cu-label-icon {
    flex: 0 0 auto;
}

.prayer-coming-up .cu-stack {
    display: grid;
    min-width: 0;
}

.prayer-coming-up .cu-item {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.prayer-coming-up .cu-item.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
}

.prayer-coming-up .cu-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.2;
}

.prayer-coming-up .cu-when {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.9rem;
    white-space: nowrap;
    color: rgba(255, 254, 249, 0.85);
}

.prayer-coming-up .cu-when::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

/* The link button: only on items that go somewhere, so a plain notice reads as plain. "See details" on laptops,
   "Details" on phones. */
.prayer-coming-up .cu-more-short {
    display: none;
}

.prayer-coming-up .cu-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 10px;
    border-radius: 999px;
    background: var(--gold-bright);
    color: var(--emerald-deep);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background-color var(--duration-fast) ease;
}

.prayer-coming-up .cu-more svg {
    transition: transform var(--duration-fast) ease;
}

.prayer-coming-up a.cu-item:hover .cu-more svg,
.prayer-coming-up a.cu-item:focus-visible .cu-more svg {
    transform: translateX(2px);
}

/* Only items that go somewhere react to the pointer. */
.prayer-coming-up a.cu-item:hover .cu-title {
    color: var(--gold-bright);
}

.prayer-coming-up .cu-item:focus-visible,
.prayer-coming-up .cu-dot:focus-visible,
.prayer-coming-up .cu-pause:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.prayer-coming-up .cu-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--gold-bright);
}

.prayer-coming-up .cu-dots {
    display: flex;
}

.prayer-coming-up .cu-dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.prayer-coming-up .cu-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    transition: background-color var(--duration-fast) ease;
}

.prayer-coming-up .cu-dot[aria-pressed="true"]::before {
    background: currentColor;
}

/* The pause button: a plain symbol, set apart from the dots by a thin rule so it is not read as another dot. */
.prayer-coming-up .cu-pause {
    position: relative;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.prayer-coming-up .cu-pause::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: -5px;
    width: 1px;
    background: currentColor;
    opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
    .prayer-coming-up .cu-item,
    .prayer-coming-up .cu-item.is-active {
        transition: none;
    }
}

/* ---------- Strip colourings (?strip=, .strip-* set by js/coming-up.js) ----------
   gold (the default): a solid gold band along the foot of the prayer banner, emerald type (the prayer banner
   loses its bottom padding so the band meets the hero). tag: a solid gold "Coming up" label on the green.
   green: the strip's own styles above, gold lettering on the green. */
.prayer-coming-up.strip-tag .cu-eyebrow {
    padding: 5px 9px 4px;
    background: var(--gold-bright);
    color: var(--emerald-deep);
}

.prayer-banner.has-gold-strip {
    padding-bottom: 0;
}

.prayer-coming-up.strip-gold {
    margin: 14px calc(50% - 50vw) 0;
    padding: 6px calc(50vw - 50%);
    border-top: 1px solid #b89a4f;
    background: linear-gradient(180deg, #ddc583 0%, var(--gold) 100%);
    color: var(--emerald-deep);
}

.prayer-coming-up.strip-gold .cu-eyebrow {
    padding: 5px 9px 4px;
    background: var(--emerald-deep);
    color: var(--gold-bright);
}

.prayer-coming-up.strip-gold .cu-title,
.prayer-coming-up.strip-gold .cu-controls {
    color: var(--emerald-deep);
}

.prayer-coming-up.strip-gold .cu-more {
    background: var(--emerald-deep);
    color: var(--ivory);
}

.prayer-coming-up.strip-gold a.cu-item:hover .cu-more {
    background: var(--emerald);
}

.prayer-coming-up.strip-gold .cu-when {
    font-weight: 600;
    color: #1f3a33;
}

.prayer-coming-up.strip-gold a.cu-item:hover .cu-title {
    color: var(--emerald);
}

/* Important: a deep red band in place of the gold, ivory type, an ivory tag with a warning mark. While anything
   Important is current the strip shows only Important items (js/coming-up.js). */
.prayer-coming-up.strip-important {
    margin: 14px calc(50% - 50vw) 0;
    padding: 6px calc(50vw - 50%);
    border-top: 1px solid #5c1712;
    background: linear-gradient(180deg, #93302a 0%, #74201b 100%);
    color: var(--ivory);
}

.prayer-coming-up.strip-important .cu-eyebrow {
    padding: 5px 9px 4px;
    background: var(--ivory);
    color: #74201b;
}

.prayer-coming-up.strip-important .cu-title,
.prayer-coming-up.strip-important .cu-controls {
    color: var(--ivory);
}

.prayer-coming-up.strip-important .cu-more {
    background: var(--ivory);
    color: #74201b;
}

.prayer-coming-up.strip-important .cu-when {
    font-weight: 600;
    color: rgba(255, 254, 249, 0.9);
}

.prayer-coming-up.strip-important a.cu-item:hover .cu-title {
    color: #ffe3b8;
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
    .prayer-coming-up {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 12px;
        margin-top: 10px;
        padding-top: 8px;
    }

    .prayer-coming-up.strip-gold,
    .prayer-coming-up.strip-important {
        margin-top: 12px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* "Coming / up" on two short lines, as a block. */
    .prayer-coming-up .cu-eyebrow {
        width: min-content;
        font-size: 9px;
        letter-spacing: 0.15em;
        text-align: center;
    }

    .prayer-coming-up.strip-gold .cu-eyebrow,
    .prayer-coming-up.strip-tag .cu-eyebrow,
    .prayer-coming-up.strip-important .cu-eyebrow {
        padding: 5px 6px;
    }

    .prayer-coming-up .cu-item {
        display: block;
        align-self: center;
    }

    .prayer-coming-up .cu-title {
        display: block;
        font-size: 0.97rem;
        line-height: 1.15;
    }

    .prayer-coming-up .cu-when {
        display: block;
        margin-top: 1px;
        font-size: 0.76rem;
        line-height: 1.3;
        white-space: normal;
    }

    .prayer-coming-up .cu-when::before {
        display: none;
    }

    /* The link button follows the second line's words; "See details" shortens to "Details". */
    .prayer-coming-up .cu-more {
        margin-left: 6px;
        padding: 1px 6px 1px 8px;
        font-size: 0.7rem;
        vertical-align: 1px;
    }

    .prayer-coming-up .cu-more-long {
        display: none;
    }

    .prayer-coming-up .cu-more-short {
        display: inline;
    }

    .prayer-coming-up .cu-when-text + .cu-more {
        margin-left: 6px;
    }

    .prayer-coming-up .cu-when > .cu-more:first-child {
        margin-left: 0;
    }

    .prayer-coming-up .cu-controls {
        flex-direction: column;
        margin-right: -4px;
    }

    .prayer-coming-up .cu-dot {
        width: 18px;
        height: 19px;
    }

    .prayer-coming-up .cu-pause {
        height: 19px;
        margin: 2px 0 0;
    }

    .prayer-coming-up .cu-pause::before {
        top: -2px;
        bottom: auto;
        left: 6px;
        right: 6px;
        width: auto;
        height: 1px;
    }
}