/* ---------------------------------------------------
   Home page (Oct 2026). Loaded after style.css and hubs.css.

   The page is wrapped in <div class="hub home">, so it uses the hub system:
   same section headings, rows, "see more" links and buttons as the hubs.
   This file only holds what's special about the home page:

     1. Podcast box      navy, the tagline on one line + two buttons
     2. Most Recent      Cloud band: newest post big, the next 3 beside it
     3. Filters          "What Do You Need Today?" buttons
     4. Ask a Question   Cloud block with the navy button
     5. Store            workbook covers, like the books on the hubs
     6. Healing Hubs     three across
     7. Poems            opening lines, three across
     8. Reflections      bigger photo cards, four across
--------------------------------------------------- */

/* ---- 1. podcast box ---- */
.intro-box {
  background: var(--navy); color: #fff;
  box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax);   /* color runs edge to edge */
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 36px 0;
}
.intro-label { display: block; font-size: 13px; font-weight: 600; color: var(--light); margin-bottom: 10px; }
.intro-box h1 { font-size: clamp(28px, 3.1vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }   /* one line on a computer */
.intro-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hub .intro-btns .btn { background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; padding: 11px 18px; }
.hub .intro-btns .btn:hover { background: var(--cloud); }
.hub .intro-btns .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.hub .intro-btns .btn.ghost:hover { background: rgba(255,255,255,.1); }

/* ---- 2. Most Recent: Cloud band ---- */
.home .hero.front { padding: 40px 0 48px; margin-top: -1px; }   /* -1px hides a hairline seam under the navy box */
.front > .shelf-head { margin-bottom: 20px; border-bottom-color: rgba(7,8,79,.15); }
.front-grid { display: grid; gap: 36px; }
.lead { display: block; }
.lead-img { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #fff; margin-bottom: 14px; }
.lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin-top: 4px; }   /* phone */
.lead p { font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 10px;   /* phone: same size as the other rows */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lead p.verse { white-space: pre-line; }
.lead:hover h2 { color: var(--blue); }
/* type and date sit under the excerpt in the Most Recent box */
.front .kicker { display: block; margin: 10px 0 0; }
.lead-img { margin-bottom: 16px; }
.front .row-cards .card { align-items: flex-start; padding: 18px 0; border-bottom-color: rgba(7,8,79,.12); }
.front .row-cards .card:first-child { padding-top: 0; }
.home .front .row-cards .card-img { flex-basis: 112px; width: 112px; height: 112px; background: #fff; }
.front .row-cards .card h3 { font-size: 16px; line-height: 1.35; }
.front .row-cards .card p { margin-top: 6px; line-height: 1.55; }
.front .row-cards .card .kicker { margin-top: 8px; }

/* short excerpt under a title (Most Recent side posts, Healing Hubs) */
.home .row-cards .card p { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 4px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.home .row-cards .card p.verse { white-space: pre-line; }

/* ---- 3. filters ---- */
.home .chips { justify-content: flex-start; margin: 16px 0 6px; }
.home .chips button { border-radius: 4px; background: #fff; padding: 8px 14px; border-color: rgba(7,8,79,.18); }
.home .chips button:hover { border-color: var(--navy); }
.home .chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.shelf-head a.all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* search box (More to Explore). Searches every post's title and excerpt. */
.home-search { position: relative; margin: 18px 0 0; }
.home-search input { width: 100%; font: inherit; font-size: 16px; color: var(--navy);
  padding: 12px 14px 12px 44px; border: 1px solid rgba(7,8,79,.18); border-radius: 4px; background: #fff;
  -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.home-search input::placeholder { color: rgba(7,8,79,.45); }
.home-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,155,195,.18); }
.home-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.home .chips { margin-top: 12px; }
.result-count { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.result-count[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* list rows: the episode rows from the hubs, plus who wrote it */
.home .shelf-list .item .by { display: block; font-size: 13px; font-weight: 600; opacity: 1; color: var(--navy); margin-top: 8px; }   /* author: navy so it doesn't blend into the excerpt */
.home .shelf-list .item p.verse { white-space: pre-line; }

/* ---- 4. Ask a Question ---- */
.ask-block { margin-top: 64px; padding: 32px; border-radius: 6px; background: var(--cloud);
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ask-block h2 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.ask-block p { font-size: 14px; color: var(--blue); margin-top: 6px; }
.hub .ask-block .btn { font-size: 15px; font-weight: 600; padding: 12px 22px; }
.hub .ask-block .btn:hover { background: var(--blue); }

/* ---- 5. store ---- */
.prods { display: grid; }
.prod { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.prod img { width: 64px; aspect-ratio: 1500 / 1942; object-fit: cover; border-radius: 3px; border: 1px solid var(--rule-soft); }
.prod h3 { font-size: 16px; font-weight: 500; line-height: 1.35; }
.prod p { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.prod:hover h3 { color: var(--blue); }

/* ---- 8. bigger photo cards ---- */
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin-top: 16px; }
.pick { display: block; }
.pick-img { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--cloud); margin-bottom: 10px; }
.pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick h3 { font-size: 16px; font-weight: 500; line-height: 1.35; }
.pick:hover h3 { color: var(--blue); }

/* ---- computer ---- */
@media (min-width: 861px) {
  .intro-box { padding: 44px 0; }
  .front-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: start; }
  .lead-img { aspect-ratio: 16 / 10; }
  .lead h2 { font-size: 28px; line-height: 1.2; }
  .lead p { font-size: 15px; }
  .home .front .row-cards { grid-template-columns: 1fr; }           /* side posts stack in one column */
  .home .front .row-cards .card:last-child:nth-child(odd) { grid-column: auto; }
  .ask-block { flex-direction: row; justify-content: space-between; align-items: center; padding: 40px 44px; }
  /* any number of workbooks without an empty slot: 1-3 share one row edge to edge,
     4 go two across, 5+ three across (same idea as the books on the hubs) */
  .prods { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 32px; }
  .prods:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prods:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .row-hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .row-hubs .card:last-child:nth-child(odd) { grid-column: auto; }
  .home .shelf-row.row-verse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}