/* parish-life.css
 *
 * The Parish Life section: reports and stories from the newsletter, given a
 * place to live once Thursday's email has gone.
 *
 * Two rules shaped this stylesheet.
 *
 * First, most items will arrive with no photograph. Whoever writes the blurb
 * attaches one if they have one, and often they will not. So the list is built
 * to read as typography and let a picture be a bonus — never a slot with a
 * hole in it. Nothing here reserves space for an image.
 *
 * Second, the filter has to be obvious. It borrows the vocabulary the site
 * already uses to say "you are here": uppercase PT Sans, and a teal underline,
 * the same pair as the section headings and the current nav item.
 *
 * Everything else is site.css. No new colours, no new faces.
 */

.pl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0 0 8px;
  padding: 0 0 4px;
}
.pl-filter button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 0 8px;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
  transition: color .16s, border-color .16s;
}
.pl-filter button:hover { color: var(--blue); }
.pl-filter button[aria-pressed="true"] {
  color: var(--blue);
  border-bottom-color: var(--teal);
}
.pl-filter button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.pl-count {
  font-family: var(--body);
  font-size: .82rem;
  color: var(--soft);
  margin: 0 0 8px;
}

/* ---------- The list ---------- */
.pl-list { max-width: 62ch; }

.pl-item {
  border-top: 1px solid var(--rule);
  padding: 58px 0 0;
  margin: 58px 0 0;
  /* Contains the floated thumbnail below -- without this, a photo taller
     than the excerpt text would spill past this item's own border/margin
     and crowd the next one. */
  display: flow-root;
}
.pl-item:first-child { border-top: 0; padding-top: 0; margin-top: 34px; }
.pl-item[hidden] { display: none; }

/* A listing thumbnail is small, square and cropped to fit -- unlike the
   reading page's photo, which keeps its natural shape and size. Odd and
   even items float the photo to opposite sides so a long list reads with
   some rhythm rather than every card looking identical; most items will
   have no photo at all and are untouched by any of this. */
:root { --pl-list-thumb: 160px; }
.pl-list .pl-item .pl-thumb {
  display: block;
  width: var(--pl-list-thumb);
  aspect-ratio: 1 / 1;
  margin: 4px 0 18px;
  overflow: hidden;
  background: var(--warm);
}
.pl-list .pl-item .pl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-list .pl-item:nth-child(odd) .pl-thumb {
  float: right;
  margin-left: 26px;
}
.pl-list .pl-item:nth-child(even) .pl-thumb {
  float: left;
  margin-right: 26px;
}

.pl-meta {
  font-family: var(--body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 .8em;
}
.pl-meta .sep { color: var(--teal); padding: 0 .5em; }

.pl-item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 2.15rem);
  line-height: 1.14;
  color: var(--blue);
  margin: 0 0 .5em;
  max-width: 26ch;
  text-wrap: balance;
}
.pl-item h3 a { color: inherit; text-decoration: none; }
.pl-item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.pl-thumb { display: block; margin: 0 0 26px; }
.pl-thumb img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--warm);
}

.pl-excerpt { margin: 0 0 1.1em; }

.pl-by {
  font-family: var(--body);
  font-size: .86rem;
  color: var(--soft);
  margin: 0;
}
.pl-by a { color: var(--blue); }

.pl-empty {
  padding: 48px 0;
  color: var(--soft);
  max-width: 48ch;
}

/* ---------- A single article ---------- */
.pl-article { max-width: 62ch; }
.pl-article .pl-meta { margin-bottom: 1.4em; }
.pl-article h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.08;
  color: var(--blue);
  margin: 0 0 .5em;
  max-width: 18ch;
  text-wrap: balance;
}
.pl-standfirst {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--soft);
  margin: 0 0 1.8em;
  max-width: 42ch;
}
.pl-article .pl-body { font-size: 1.06rem; }
.pl-article .pl-body p { margin: 0 0 1.25em; }
.pl-article .pl-body p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .84;
  float: left;
  color: var(--blue);
  padding: .06em .09em 0 0;
}

/* A reading-page photo sits to the right of the text and the paragraphs
   wrap around it, rather than running full-width above the piece. This
   only touches the article view -- .pl-thumb on the listing cards (full-
   width, above the excerpt) is untouched by the extra specificity here. */
.pl-article .pl-thumb {
  float: right;
  display: block;
  width: min(300px, 42%);
  margin: 4px 0 20px 28px;
}
.pl-article .pl-thumb img { width: 100%; height: auto; }
/* The byline always starts clear of the photo, even on a short piece
   with a tall image. */
.pl-signoff { clear: both; }

/* The article and its rail of other pieces, side by side once there's
   room. Below the breakpoint the rail simply falls in the DOM after the
   article -- no extra CSS needed to stack it. */
@media (min-width: 960px) {
  .pl-reading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 64px;
    align-items: start;
  }
  .pl-reading .pl-article { max-width: none; }
}

.pl-rail {
  padding-top: 12px;
}
@media (min-width: 960px) {
  .pl-rail { padding-top: 6px; border-top: none; }
}
.pl-rail h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 14px;
}
.pl-rail-filter { gap: 4px 16px; margin: 0 0 18px; }
.pl-rail-filter button { font-size: .7rem; }
.pl-rail-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.pl-rail-list li {
  border-top: 1px solid var(--rule);
  padding: 14px 0;
}
.pl-rail-list li:last-child { padding-bottom: 0; }
.pl-rail-list a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}
.pl-rail-list a:hover { color: var(--blue); }
.pl-rail-list time {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  color: var(--soft);
  margin-bottom: 3px;
}
.pl-rail-all {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 3px;
}

.pl-signoff {
  border-top: 1px solid var(--rule);
  margin: 44px 0 0;
  padding: 26px 0 0;
  font-family: var(--body);
  color: var(--soft);
  font-size: .92rem;
}
.pl-signoff strong { color: var(--ink); }

.pl-back {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  border-bottom: 2px solid var(--teal);
  padding-bottom: 4px;
}

@media (max-width: 640px) {
  .pl-item { padding-top: 44px; margin-top: 44px; }
  .pl-filter { gap: 2px 18px; }
  .pl-filter button { font-size: .72rem; letter-spacing: .08em; padding: 5px 0 7px; }
  .pl-article h1 { max-width: none; }
  .pl-standfirst { max-width: none; font-size: 1.2rem; }
  .pl-article .pl-thumb { float: none; width: 100%; margin: 0 0 22px; }
  .pl-list .pl-item:nth-child(odd) .pl-thumb,
  .pl-list .pl-item:nth-child(even) .pl-thumb {
    /* Matches the specificity of the alternating float rule above so this
       actually wins on mobile instead of silently losing to it. */
    float: none;
    width: 112px;
    margin: 0 0 14px;
  }
}

/* ============================================================
   Reading pages
   ============================================================

   Parish Life, At St. John's and Sunday Reflections exist to be read, not
   to be arrived at. They get a masthead band rather than a hero: the logo,
   the nav, the title and the standfirst all sit on one field of blue, and
   the writing starts about 230px higher than it would under a full hero.

   The arrival pages — Worship, Music, Give, Welcome — keep their
   photographs. This is a rule about kinds of page, not an exception for
   one page.

   One measure governs the column, defined in rem rather than ch: ch is
   relative to each element's own font-size, so a 0.8rem count line and an
   18px paragraph centre at different widths and their left edges drift.  */

:root { --pl-measure: 35rem; }

.subhero-reading {
  min-height: 320px;
  padding-top: 150px;              /* clearance for the overlaid masthead */
  background-color: var(--blue);   /* the ground while the photograph loads */
  background-image: url(/assets/parish-life.jpg);
  background-position: 50% 34%;    /* steeple clear at the top, reflection below */
}

/* The photograph is cropped so the church sits at about 70% across, leaving the
   water and the far trees under the title. The scrim is weighted left to match:
   dark enough under the type to read, clearing before it reaches the steeple,
   with a second pass down from the top for the nav. */
.subhero-reading::after {
  display: block;
  background:
    linear-gradient(100deg,
      rgba(0,32,62,.78) 0%, rgba(0,32,62,.58) 34%,
      rgba(0,32,62,.20) 62%, rgba(0,32,62,0) 84%),
    linear-gradient(to bottom,
      rgba(0,32,62,.58) 0%, rgba(0,32,62,.18) 30%, rgba(0,32,62,0) 56%);
}

.subhero-reading h1 {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  max-width: var(--pl-measure);
  /* Left-aligned to the logo's edge, not centred in the wrap (27 Aug 2026).
     One left edge for the whole page — logo, title, standfirst, filter chips
     and every headline. It also sits the title in the darkest part of the
     overlay, which is built left-heavy, so the contrast improves rather than
     just the geometry. */
  margin-left: 0; margin-right: 0;
  text-shadow: 0 2px 18px rgba(0,20,40,.55);
}
.pl-lede {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.4;
  color: #eaf1f8;
  margin: .5em 0 0;
  max-width: var(--pl-measure);
  text-shadow: 0 1px 14px rgba(0,20,40,.6);
}

/* Narrow screens crop hard from the sides, so pull toward the church and let
   the scrim carry more of the legibility. */
@media (max-width: 800px) {
  .subhero-reading { background-position: 72% 46%; }
  .subhero-reading::after {
    background:
      linear-gradient(to bottom,
        rgba(0,32,62,.62) 0%, rgba(0,32,62,.42) 40%, rgba(0,32,62,.52) 100%);
  }
}

main > section:first-child { padding-top: 26px; }

/* The filter and the count share a line, and everything in the column
   shares one left edge — the same edge as the logo and the masthead title.
   Moving the title alone would have given the page two left edges. */
.pl-bar, .pl-list { max-width: var(--pl-measure); margin-left: 0; margin-right: 0; }

/* Two columns from 900px up.
   Below that it stays a single column: two columns of readable text do not fit
   on a phone, and forcing them would break the measure the whole page is built
   around.

   The measure still governs — each column lands at roughly 500px, close to the
   35rem the single column uses, so the line length a reader actually gets barely
   changes. What changes is how much of the page they can see at once, which is
   the point: a growing archive stops being an endless scroll.

   `align-items: start` matters. Without it, grid stretches every item in a row
   to the height of the tallest, so a two-line blurb beside a photographed item
   would sit in a cell with a large empty space under it and the separators
   would stop lining up with the text. */
@media (min-width: 900px) {
  .pl-bar, .pl-list { max-width: none; }
  .pl-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    align-items: start;
  }
  /* In one column only the first item sits flush to the top. In two, the first
     TWO do — otherwise the right-hand column starts with a stray rule above it. */
  .pl-item:first-child { border-top: 1px solid var(--rule); padding-top: 34px; margin-top: 34px; }
  .pl-item:nth-child(-n+2) { border-top: 0; padding-top: 0; margin-top: 34px; }
  /* The empty-state message is a single line and should not be trapped in one
     half of the grid. */
  .pl-empty { grid-column: 1 / -1; }

  /* Below 900px (a single column) the thumbnail just alternates card by card
     for rhythm -- see the base rule above. Once the grid is two columns wide,
     that stops making sense on its own terms and this takes over instead:
     each photo points to the outer edge of its own column (left column ->
     image left, right column -> image right) and the text wraps toward the
     gutter in the middle, so the two columns read as a mirrored pair rather
     than a coincidence of odd/even. Odd items fall in the left column and
     even items in the right, since the grid fills left-to-right, row by row. */
  .pl-list .pl-item:nth-child(odd) .pl-thumb {
    float: left;
    margin: 4px 26px 18px 0;
  }
  .pl-list .pl-item:nth-child(even) .pl-thumb {
    float: right;
    margin: 4px 0 18px 26px;
  }
}
.pl-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.pl-filter { margin: 0; }
.pl-count { margin: 0; white-space: nowrap; }

/* ============================================================
   The folded footer
   ============================================================

   On a reading page the four-column footer outweighed the article. Folded,
   it is one row: the disclosure, the diocese line, the icons — no stack and
   no rule, because until it opens there is nothing above it to divide.

   Safe here specifically because the address and telephone are already in
   the top bar of every page, so this hides links, not contact details.  */

.cols[hidden] { display: none; }   /* display:grid otherwise beats [hidden] */

footer:has(.cols[hidden]) { padding: 14px 0; }
footer:has(.cols[hidden]) .footbar { margin-top: 0; padding-top: 0; border-top: 0; }
.footbar { gap: 10px 22px; }

.foot-toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; opacity: .8; padding: 6px 0;
  order: -1;
}
.foot-toggle:hover { opacity: 1; }
.foot-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.foot-toggle .chev { display: inline-block; margin-left: 6px; transition: transform .18s; }
.foot-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .foot-toggle .chev { transition: none; } }

/* A 54px footer no longer fills the screen on a short page, so hold the
   content area open to the viewport and let the footer sit under it. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }