/* ============================================================
   Prayer for the Month, and the Prayer Team meeting below it
   (prayer-care.html)
   The words of the prayer, beside the player and the month's picture beneath
   it. On narrow screens the player and picture come first, so play is pressed
   before the words are read.
   ============================================================ */

/* White, with a little warmth behind the words. It meets the tan meeting band
   below with a clean edge, white / tan / white like the rest of the site. */
.prayer-month {
  background:
    radial-gradient(ellipse 60% 45% at 15% 8%, rgba(201, 149, 42, 0.08), transparent 70%),
    var(--color-white);
}

.prayer-month__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-16);
  align-items: start;
}

/* ── The player, above the picture ────────────────────────── */
/* Maple red into burnt orange, the colours of the picture. Every text colour
   here holds 4.5:1 or better against the stretch of gradient it sits on. */
.prayer-month__player {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  row-gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 196, 120, 0.18), transparent 55%),
    linear-gradient(135deg, #7c2d12 0%, #9a3412 50%, #b45309 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.prayer-month__listen-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fcd9a0;
}

.prayer-month__audio {
  display: block;
  width: 100%;
}

.prayer-month__download {
  justify-self: start;
  font-size: var(--text-sm);
  white-space: nowrap;
  color: #ffe2b3;
  text-decoration: underline;
}

.prayer-month__download span {
  color: rgba(255, 255, 255, 0.85);
}

/* ── The picture ──────────────────────────────────────────── */
.prayer-month__art {
  margin: 0;
}

.prayer-month__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

/* Side by side, the player and picture end level with the last line of the
   prayer, however long the month's prayer is. The media column is a size
   container: it adds no height of its own, so the row is exactly as tall as
   the words, and it stretches to that height. 100cqh is then the words'
   height; less the player and the gap, that is the height left for the
   picture, and its shape (--art-w / --art-h, set in the page) turns that into
   a width. The player takes the same width, so the two stand as one block,
   flush with the right edge. The player has a fixed height so the sum is
   known. A browser without container queries ignores all this and shows the
   picture at the column's full width, as before. */
@media (min-width: 960px) {
  .prayer-month__media {
    --pm-player-h: 10rem;
    --pm-fit: calc((100cqh - var(--pm-player-h) - var(--space-6)) * var(--art-w) / var(--art-h));
    container-type: size;
    align-self: stretch;
  }

  .prayer-month__player,
  .prayer-month__art {
    width: min(100%, var(--pm-fit));
    margin-left: auto;
  }

  .prayer-month__player {
    height: var(--pm-player-h);
  }
}

/* ── The words ────────────────────────────────────────────── */
/* Line-height 1 puts the tops of the letters at the top of the box, level
   with the top edge of the player beside them. Side by side only: on a narrow
   screen the eyebrow can wrap, and two lines at line-height 1 collide. */
@media (min-width: 960px) {
  .prayer-month__words > .eyebrow {
    line-height: 1;
    margin-bottom: var(--space-4);
  }
}

.prayer-month__title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--color-indigo);
  margin: 0;
}

.prayer-month__by {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold-dark);
}

.prayer-text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: 1.7;
  color: var(--color-text);
}

.prayer-text p {
  margin: 0 0 var(--space-5);
}

.prayer-text__intro {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-muted);
}

.prayer-text__line {
  display: block;
}

/* "I am safe. I am protected." — the heart of it. */
.prayer-text__stanza--affirm {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-indigo);
}

.prayer-text .prayer-text__amen {
  margin: var(--space-6) 0 0;
  font-style: italic;
  font-weight: 600;
  color: var(--color-gold-dark);
}

/* ── Narrower screens: player, picture, then the words ────── */
@media (max-width: 959px) {
  .prayer-month__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }

  /* The picture is tall, so it and its player are held narrower than the
     column, the player keeping the picture's width. */
  .prayer-month__media {
    order: -1;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .prayer-month__art img {
    border-radius: var(--radius-lg);
  }

  .prayer-text {
    font-size: var(--text-lg);
  }

  .prayer-text__stanza--affirm {
    font-size: var(--text-xl);
  }
}

/* ============================================================
   Prayer Team meeting: the tan (section--cream) band between the
   white prayer section and the white Request Prayer section, with a
   white card on it, like the Sunday cards on new-here.html.
   ============================================================ */
.prayer-meeting__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-16);
  align-items: center;
}

.prayer-meeting .prayer-meeting__title {
  margin: 0;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  color: var(--color-indigo);
}

.prayer-meeting .prayer-meeting__text {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text);
}

.prayer-meeting .prayer-meeting__welcome {
  display: inline-block;
  margin: var(--space-6) 0 0;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-indigo);
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-full);
}

/* ── How to join ──────────────────────────────────────────── */
.prayer-meeting__card {
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.prayer-meeting__when {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* The date wears the prayer player's fall colours, tying the two together. */
.prayer-meeting__date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #7c2d12 0%, #9a3412 50%, #b45309 100%);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
}

.prayer-meeting__date span {
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fcd9a0;
}

.prayer-meeting .prayer-meeting__when p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.prayer-meeting .prayer-meeting__when strong {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-indigo);
}

.prayer-meeting__join {
  width: 100%;
  justify-content: center;
}

.prayer-meeting__codes {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

.prayer-meeting__codes div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.prayer-meeting__codes div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.prayer-meeting__codes dt {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.prayer-meeting__codes dd {
  margin: 0;
  color: var(--color-text);
}

/* Indigo, not the site's gold link colour: gold on white is under 4.5:1. */
.prayer-meeting__codes dd a {
  font-weight: 600;
  color: var(--color-indigo);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}

.prayer-meeting__codes dd a:hover,
.prayer-meeting__codes dd a:focus-visible {
  color: var(--color-gold-dark);
}

/* Read off the screen and typed into Zoom, so set in a mono face with the
   digits spaced: a 7 that reads as a 1 costs someone the meeting. The same
   rule as the class Zoom cards on jesus-teachings.html. */
.prayer-meeting__code {
  padding: 0.15rem 0.5rem;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--color-text);
  background: var(--color-cream-dark);
  border-radius: 4px;
}

.prayer-meeting .prayer-meeting__note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 959px) {
  .prayer-meeting__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
}

@media (max-width: 600px) {
  .prayer-meeting__card {
    padding: var(--space-6);
  }
}