/* Homepage (pages 17/19/21). Loads only where [satchurch_listing_feed] is used. Mobile first.
   Styles the feed sections this module renders (.satdw-home) and the video panel's links. The
   homepage Kadence rows (sathome-* classes) are styled by satchurch-pages/satpages.css.
   Colours come from the Kadence global palette, so the site light/dark switch flips everything
   with no per-mode block. Role map as on the media pages: headings p3, text p4, small accent text
   p2 (p1 is 4.4:1 on the light p7 tint), solid button p1 with p9 text (5.3:1 light, 7.6:1 dark),
   surfaces p9 base / p8 raised. The hero and the prayer panel are static (same in both modes).
   Widths and paddings match the media pages' Kadence rows: 1290px content box, 48/24px on phones,
   64/32px from 768px. Motion is transform/opacity only and switches off for reduced motion. */
.satdw-home{
  --sh-ink:var(--global-palette3);
  --sh-text:var(--global-palette4);
  --sh-accent:var(--global-palette1);
  --sh-accent-strong:var(--global-palette2);
  --sh-on-accent:var(--global-palette9);
  --sh-base:var(--global-palette9);
  --sh-raised:var(--global-palette8);
  --sh-line:color-mix(in srgb, var(--global-palette3) 14%, transparent);
  --sh-tint:color-mix(in srgb, var(--global-palette1) 8%, transparent);
  --sh-radius:20px;
  position:relative;isolation:isolate;
  background:var(--sh-base);color:var(--sh-text);padding:3rem 0
}
/* A soft glow in the accent colour, upper right on the daily word, lower left on sermon notes.
   Centred inside the section and masked at top and bottom so it fades out before either edge. */
.satdw-home::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 88% 22%, color-mix(in srgb, var(--global-palette1) 10%, transparent), transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.satdw-home--sermon-review::before{
  background:radial-gradient(60% 50% at 12% 78%, color-mix(in srgb, var(--global-palette1) 10%, transparent), transparent 70%)}

/* Doubled class: the theme's .single-content heading, paragraph and list margins win otherwise */
.satdw-home *{box-sizing:border-box}
.satdw-home.satdw-home p,.satdw-home.satdw-home h2,.satdw-home.satdw-home h3,
.satdw-home.satdw-home ol,.satdw-home.satdw-home blockquote{margin:0}
.satdw-home.satdw-home ol{list-style:none;padding:0}
.satdw-home a{text-decoration:none}
.satdw-home a:focus-visible{outline:3px solid var(--sh-accent);outline-offset:3px;border-radius:8px}
.satdw-home-inner{max-width:var(--global-content-width,1290px);margin:0 auto;padding:0 1.5rem}

/* Section head */
.satdw-home-head{max-width:720px;margin-bottom:2rem}
.satdw-home-title{color:var(--sh-ink);font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.satdw-home-intro{font-size:1.05rem;line-height:1.65}
.satdw-home.satdw-home .satdw-home-intro{margin-top:.75rem}

/* Feature card first, the earlier list under it; side by side from 960px */
.satdw-home-layout{display:grid;gap:2rem}
.satdw-home-feature{border:1px solid var(--sh-line);border-radius:var(--sh-radius);overflow:hidden;background:var(--sh-raised);
  box-shadow:0 18px 40px -32px rgba(13,9,18,.45);transition:transform .35s ease,box-shadow .35s ease}
.satdw-home-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sh-line)}
.satdw-home-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.satdw-home-feature-body{padding:1.5rem 1.25rem 1.6rem}
.satdw-home-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .9rem;color:var(--sh-accent-strong);
  font-size:.85rem;font-weight:600}
.satdw-home-byline{color:var(--sh-text);font-weight:600}
.satdw-home-feature-title{color:var(--sh-ink);font-size:clamp(1.35rem,5vw,1.9rem);font-weight:800;line-height:1.2;letter-spacing:-.015em}
.satdw-home.satdw-home .satdw-home-feature-title{margin-top:.5rem}
.satdw-home-feature-title a{color:inherit}
.satdw-home-feature-title,.satdw-home-title{text-wrap:balance}
.satdw-home-item-title{text-wrap:pretty}
.satdw-ref{white-space:nowrap}
.satdw-home-feature-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.satdw-home.satdw-home .satdw-home-verse{margin-top:1.1rem;padding:.8rem 1rem;border:0;border-left:3px solid var(--sh-accent);
  border-radius:0 12px 12px 0;background:var(--sh-tint);color:var(--sh-ink);font-size:1.02rem;font-style:italic;line-height:1.55}
.satdw-home-excerpt{font-size:1rem;line-height:1.65}
.satdw-home.satdw-home .satdw-home-excerpt{margin-top:1rem}
.satdw-home-button{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;margin-top:1.25rem;padding:.55rem 1.15rem;
  border-radius:999px;background:var(--sh-accent);color:var(--sh-on-accent);font-size:.95rem;font-weight:700;
  transition:background .2s ease}
.satdw-home .satdw-home-button:hover,.satdw-home .satdw-home-button:focus-visible{background:var(--sh-accent-strong);color:var(--sh-on-accent)}
.satdw-home-button svg{transition:transform .2s ease}
.satdw-home-button:hover svg{transform:translateX(3px)}

/* Earlier entries: rounded rows that light up on hover */
.satdw-home-earlier-title{padding-bottom:.85rem;border-bottom:1px solid var(--sh-line);color:var(--sh-ink);
  font-family:inherit;font-size:.95rem;font-weight:700;line-height:1.4}
.satdw-home-list li{border-bottom:1px solid var(--sh-line)}
.satdw-home-item{display:grid;gap:1rem;align-items:center;margin:.35rem -.75rem;padding:.75rem;border-radius:14px;color:var(--sh-ink);
  transition:background .2s ease}
.satdw-home-item:hover{background:var(--sh-tint)}
.satdw-home-item.has-thumbnail{grid-template-columns:112px minmax(0,1fr)}
.satdw-home-item img{display:block;width:112px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.satdw-home-item-text{display:grid;gap:.3rem}
.satdw-home-item-date{color:var(--sh-accent-strong);font-size:.8rem;font-weight:600}
.satdw-home-item-title{font-size:1rem;font-weight:700;line-height:1.35}
.satdw-home-all{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;margin-top:.75rem;color:var(--sh-accent-strong);
  font-weight:700}
.satdw-home .satdw-home-all,.sathome-panel .satmedia-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* The video link matches the feed links: same size, and its text arrow sits outside the underline.
   satmedia makes the link a flex box, which passes the underline to the arrow; as an inline-block
   link with an inline-block arrow, the arrow is an atomic box and keeps no underline. */
.sathome-panel .satmedia-link{display:inline-block;padding:.65rem 0;border-bottom:0;font-size:inherit}
.sathome-panel .satmedia-link::after{display:inline-block;margin-left:.45rem}
.satdw-home-all svg{transition:transform .2s ease}
.satdw-home .satdw-home-all:hover{color:var(--sh-ink)}
.satdw-home-all:hover svg{transform:translateX(3px)}

@media (min-width:600px){
  .satdw-home-feature-body{padding:2rem 2.25rem 2.25rem}
}
@media (min-width:768px){
  .satdw-home{padding:4rem 0}
  .satdw-home-inner{padding:0 2rem}
}
@media (min-width:960px){
  .satdw-home-layout{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:3rem;align-items:start}
}
@media (hover:hover){
  .satdw-home-feature:hover{transform:translateY(-4px);box-shadow:0 28px 52px -30px rgba(13,9,18,.55)}
  .satdw-home-feature:hover .satdw-home-media img{transform:scale(1.04)}
}
/* Cards rise into place as they scroll in (browsers with scroll-driven animations; others show them as is) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .satdw-home-feature,.satdw-home-list li,.sathome-panel .satmedia-card{
      animation:sathome-rise linear both;animation-timeline:view();animation-range:entry 0% cover 15%}
  }
}
@keyframes sathome-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  .satdw-home *{transition:none !important}
  .satdw-home-feature:hover,.satdw-home-feature:hover .satdw-home-media img,
  .satdw-home-button:hover svg,.satdw-home-all:hover svg{transform:none}
}
