/* The module pages (site/songs.html … site/church-site.html, written by scripts/whats-new-site.mjs from
   content/site/modules.json; docs/website-2.md §4, "A page per module"). The containers, buttons, the .mono eyebrow,
   the Everything page's lines (.ft-list) and its closing band (.ft-end) are styles.css's; this file is only the
   module page's own layout: the hero, three pictures, three points, what's in it beside the questions, what's new,
   and the rest of PraisePad. Light only, like the rest of the site. */

/* The hero: the Everything page's measure, with a breadcrumb above the eyebrow. */
.mo-hero {
  padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
}
.mo-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.mo-crumbs li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--line-strong);
}
/* 44 px tall to tap on a phone, without looking like buttons. */
.mo-crumbs a,
.mo-crumbs span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mo-crumbs a {
  color: var(--muted);
}
.mo-crumbs a:hover {
  color: var(--ink);
}
.mo-crumbs [aria-current] {
  color: var(--ink);
  font-weight: 600;
}
.mo-hero h1 {
  margin: 12px 0 0;
  max-width: 20ch;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.mo-hero .lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}
.mo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.mo-note {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 15px;
  color: var(--muted);
}
.mo-learn {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.mo-learn li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}
.mo-learn a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-text);
}
.mo-learn span {
  color: var(--muted);
}

/* The pictures: one frame shape for all (a picture from its top, as the app frames a taller one), the first twice as
   wide when there are three; a phone's picture whole on a panel. Two at 820 px with the first across both, one on a
   phone. */
.mo-pics {
  display: grid;
  gap: 14px;
  align-items: start;
}
.mo-pics-3 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.mo-pics-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mo-fig {
  margin: 0;
}
.mo-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(18, 20, 24, 0.08);
}
.mo-frame img,
.mo-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.mo-frame .wn-loop-still {
  position: absolute;
  inset: 0;
}
.mo-tall .mo-frame,
.mo-wide .mo-frame {
  background: var(--sidebar);
}
.mo-tall .mo-frame img,
.mo-wide .mo-frame img {
  object-fit: contain;
  object-position: center;
}
.mo-tall .mo-frame img {
  padding: 12px 0;
}
/* A laptop with three: the three frames one height (mock-04), the first twice as wide, so it doesn't stand twice as
   tall and the captions start on one line. The height comes from the row's own width (a container query unit): the
   small frames a little wider than tall, the first about 2.2 to 1, each picture from its top as above. A browser
   without the unit keeps each frame's 16:10. */
@media (min-width: 901px) {
  .mo-pics-3 {
    container-type: inline-size;
  }
  .mo-pics-3 .mo-frame {
    aspect-ratio: auto;
    height: calc((100cqw - 28px) / 4 * 0.9);
  }
}
.mo-fig figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* Three points, each a short heading and a paragraph. */
.mo-pitch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
.mo-point h2 {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.mo-point p {
  /* A comfortable line where the three stack (an iPad held upright): about 65 characters. In em, not ch: Geist's
     0 is wide, and 65ch came to 85 characters a line. */
  max-width: 36em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* What's in it and the questions: the mock's two boxes, one above the other at full width, so the help's dozen lines
   take two columns (as on the Everything page) and the four questions sit two by two. */
.mo-detail {
  padding: clamp(36px, 5vw, 56px) 0 0;
}
.mo-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mo-box {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.mo-box h2,
.mo-new h2,
.mo-others h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mo-list {
  gap: 8px;
}
.mo-list a {
  padding: 12px 14px;
  border-radius: 12px;
}
.mo-all {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
}
.mo-all a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-text);
}
.mo-qs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
}
.mo-q {
  padding: 16px 0 6px;
  border-top: 1px solid var(--line);
}
.mo-q h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}
.mo-q p {
  max-width: 36em;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.mo-q .mo-src {
  margin-top: 4px;
  font-size: 14px;
}
.mo-src a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-text);
}
.mo-ask {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* New lately: What's new's entries for this module, newest first. */
.mo-new {
  padding: clamp(36px, 5vw, 56px) 0 0;
}
.mo-new-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mo-new-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.mo-new-list a:hover span:last-child {
  color: var(--accent-text);
}
.mo-day {
  flex: none;
  width: 52px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The rest of PraisePad: the other seven pages and Everything, four across. */
.mo-others {
  padding: clamp(36px, 5vw, 56px) 0 var(--section);
}
.mo-others-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mo-others-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.16s ease;
}
.mo-others-list a:hover {
  border-color: var(--accent);
}
.mo-others-list b {
  font-size: 16px;
  font-weight: 600;
}
.mo-others-list span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .mo-others-list a {
    transition: none;
  }
}

/* Lead the band on the Songs page sits in the stage section's dark band, as it did on the homepage. */
.stage-section + .mo-detail {
  padding-top: clamp(36px, 5vw, 56px);
}

@media (max-width: 1000px) {
  .mo-others-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .mo-pics-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mo-pics-3 .mo-fig:first-child {
    grid-column: 1 / -1;
  }
  .mo-pitch,
  .mo-qs {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .mo-pics-3,
  .mo-pics-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .mo-new-list,
  .mo-others-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mo-actions .btn {
    flex: 1 1 auto;
  }
  /* A phone reads the help's titles; each opens its article with the rest. */
  .mo-list span {
    display: none;
  }
  /* Each course's link with its line close under it, the line in even halves (no word left alone), and a little
     room between the courses. */
  .mo-learn {
    flex-direction: column;
    gap: 8px;
  }
  .mo-learn li {
    flex-direction: column;
    align-items: flex-start;
  }
  .mo-learn span {
    margin-top: -6px;
    line-height: 1.45;
    text-wrap: balance;
  }
}