/* =====================================================================
   Pilgrimage dates — the destination-side Sacred Time section.

   Scoped entirely under .er-pdates so it can load beside place-v1,
   church-hybrid-v1 and marian-shrine-v1 without reaching into any of
   them. Uses only the canonical --er-* tokens.

   NOTE ON UNITS: the root font-size on this site is 10px, not 16px, so
   rem does not mean what it usually means here. Every size below is px
   or a token, matching place-v1.css and the rest of the destination CSS.

   The brief was a premium travel-publication planning module rather than
   an events widget, so: no calendar glyphs, no badges, no liturgical
   colour fields, no accordions. The date is metadata above the title,
   the dividers are hairlines, and the only coloured mark on the page is
   a single clay rule on the leading occasion.
   ===================================================================== */

.er-pdates {
    background-color: var(--er-paper);
    color: var(--er-ink);
    font-family: var(--er-sans);
    padding: 56px 0;
}

.er-pdates__inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1240px;
    padding: 0 20px;
    width: 100%;
}

/* ------------------------------------------------------------- heading */

.er-pdates__head {
    border-top: 1px solid var(--er-rule);
    padding-top: 24px;
}

.er-pdates__eyebrow {
    color: var(--er-ink-3);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.er-pdates__title {
    color: var(--er-ink);
    font-family: var(--er-serif);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin: 0;
}

.er-pdates__standfirst {
    color: var(--er-ink-3);
    font-size: 16px;
    line-height: 1.6;
    margin: 12px 0 0;
    max-width: 54ch;
}

/* ------------------------------------------------------------ the list */

.er-pdates__list {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
}

.er-pdates__item {
    border-top: 1px solid var(--er-rule-soft);
    padding: 28px 0 4px;
}

.er-pdates__item:first-child {
    border-top: 0;
    padding-top: 4px;
}

/* The one accent in the module: the leading occasion carries a short clay
   rule, so scanning finds the primary date without a badge or a pill. */
.er-pdates__item--lead .er-pdates__when::before {
    background-color: var(--er-clay);
    content: "";
    display: block;
    height: 2px;
    margin-bottom: 16px;
    width: 40px;
}

/* -------------------------------------------------- date as metadata */

.er-pdates__when {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 10px;
}

.er-pdates__date {
    color: var(--er-ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.er-pdates__countdown {
    color: var(--er-ink-4);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.er-pdates__name {
    color: var(--er-ink);
    font-family: var(--er-serif);
    font-size: clamp(21px, 2.1vw, 27px);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    max-width: 30ch;
}

.er-pdates__meta {
    color: var(--er-ink-4);
    font-size: 13px;
    letter-spacing: 0.03em;
    margin: 8px 0 0;
}

/* --------------------------------------------- why go / what changes */

.er-pdates__block {
    margin-top: 22px;
}

.er-pdates__label {
    color: var(--er-ink-3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.er-pdates__prose {
    color: var(--er-ink-2);
    font-size: 16px;
    line-height: 1.68;
    margin: 0;
    max-width: 62ch;
}

/* What changes is a scan list, not prose: short enum-derived phrases a reader
   should take in at a glance. It was set as hairline-divided full-width rows,
   which read as a table of contents and pushed the occasion body long.

   Marker plus spacing rather than dividers, deliberately. A border-bottom
   rhythm cannot survive the two-column variant below: `li:last-child` only
   clears the final item, so column one would end on a dangling rule with
   nothing under it. */
.er-pdates__changes {
    list-style: none;
    margin: 0;
    max-width: 62ch;
    padding: 0;
}

.er-pdates__changes li {
    color: var(--er-ink-2);
    font-size: 15px;
    line-height: 1.45;
    padding: 5px 0 5px 18px;
    position: relative;
}

/* A short monochrome dash, not a bullet or a pill. The one coloured mark in
   this module is the clay rule on the leading occasion; a second accent here
   would compete with it for the same glance. */
.er-pdates__changes li::before {
    background-color: var(--er-ink-4);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 0.72em;
    width: 8px;
}

/* The honest note. Italic serif rather than a warning colour: it is a
   judgement offered to the reader, not an alert. */
.er-pdates__caveat {
    border-left: 2px solid var(--er-rule-hair);
    color: var(--er-ink-3);
    font-family: var(--er-serif);
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
    margin: 22px 0 0;
    max-width: 56ch;
    padding-left: 16px;
}

/* ----------------------------------------- current-year, kept separate */

.er-pdates__current {
    background-color: var(--er-ivory);
    border: 1px solid var(--er-rule-soft);
    margin-top: 22px;
    max-width: 62ch;
    padding: 18px 20px;
}

.er-pdates__current-title {
    color: var(--er-ink);
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 6px;
}

/* One custodian footnote for the whole section, set apart by a hairline so it
   reads as a note rather than as part of the last occasion. */
.er-pdates__check {
    border-top: 1px solid var(--er-rule-soft);
    color: var(--er-ink-3);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    max-width: 62ch;
    padding-top: 20px;
}

.er-pdates__source {
    color: var(--er-clay-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.er-pdates__current .er-pdates__source {
    display: inline-block;
    font-size: 15px;
    margin-top: 10px;
}

.er-pdates__source:hover,
.er-pdates__source:focus-visible {
    color: var(--er-ink);
}

/* Focus must be visible on a paper background, and must not be the only
   thing distinguishing the link — the underline above is always there. */
.er-pdates__source:focus-visible {
    outline: 2px solid var(--er-clay-deep);
    outline-offset: 3px;
}

.er-pdates__external {
    display: inline-block;
    font-size: 0.85em;
    margin-left: 4px;
}

/* --------------------------------------------------------- breakpoints */

@media (min-width: 768px) {
    .er-pdates {
        padding: 72px 0;
    }

    .er-pdates__inner {
        padding: 0 32px;
    }

    .er-pdates__item {
        padding: 36px 0 8px;
    }

    /* Two columns only once the list is long enough to be worth splitting.
       The modifier is added in PHP at four items or more, so a two-item list
       stays a single column instead of becoming a two-item grid with a hole
       in it. The wider cap is required: 62ch halved is too narrow to hold
       "Transport and road changes" on one line. */
    .er-pdates__changes--split {
        column-gap: 40px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 76ch;
    }
}

/* From here the module becomes two columns: the date rail sits beside the
   occasion rather than above it, which is what makes it scan like a
   planning table rather than a feed. */
@media (min-width: 1024px) {
    .er-pdates__item {
        display: grid;
        grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
        column-gap: 48px;
    }

    /* Exactly two grid children: the rail and the body. An earlier version put
       every element of the occasion directly in the grid, which made row one as
       tall as the three-line rail and opened a gap under the occasion title.
       `grid-row: 1 / -1` does not fix that, because -1 is the last line of the
       *explicit* grid and these rows are implicit. Wrapping the body is the
       structural fix, and it leaves the CSS with nothing to reason about. */
    .er-pdates__when {
        align-self: start;
        display: block;
        margin: 0;
        position: sticky;
        top: 24px;
    }

    .er-pdates__date {
        display: block;
    }

    .er-pdates__countdown {
        display: block;
        margin-top: 6px;
    }


}

@media (prefers-reduced-motion: reduce) {
    .er-pdates__when {
        position: static;
    }
}