/* "The Message" on the Watch page (videos.php + assets/messages.js, includes/messages.php). Laid out with the Home tab's own
   rows, rails and cards (assets/videos.css); this file only adds the brand band on Home, the tab's header, the "See all"
   back arrow and the message details in the Home player's "Now playing" area.
   Colours: only the Brand Style Guide tokens (--brand-*, with the guide's defaults as fallbacks).
   Mobbin: Vimeo Staff Picks (a featured band in the channel), Headspace "Featured" rows, Magnific episode library. */
.msg-band,.msg,.vl-now{--m-primary:var(--brand-primary,#241236);--m-violet:var(--brand-primary-2,#542675);--m-deep:var(--brand-dark,#170a24);
  --m-gold:var(--brand-accent,#d9b24c);--m-gold-hi:var(--brand-accent-light,#ead59d);--m-gold-ink:var(--brand-accent-ink,#876e2f)}
.msg-band svg,.msg svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.msg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--m-gold-ink)}
.msg-eyebrow svg{width:16px;height:16px}
.msg-scripture{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--m-violet)}
.msg-scripture svg{width:14px;height:14px}

/* Home tab: the band (a Home-style row on the brand colours) */
.msg-band{margin:0 0 40px;padding:24px 24px 18px;border-radius:24px;color:#fff;
  background:radial-gradient(520px 240px at 92% -20%,color-mix(in srgb,var(--m-gold) 26%,transparent),transparent 70%),linear-gradient(120deg,var(--m-deep),var(--m-primary) 55%,var(--m-violet))}
.msg-band .msg-eyebrow{color:var(--m-gold)}
.msg-band-head{align-items:flex-end;margin-bottom:16px}
.msg-band-head h2{margin:6px 0 0;font-family:inherit;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;text-transform:none;color:#fff}
.msg-band-all{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:color-mix(in srgb,#fff 12%,transparent);border:1px solid color-mix(in srgb,#fff 26%,transparent);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s}
.msg-band-all:hover{background:color-mix(in srgb,#fff 22%,transparent);color:#fff}
.msg-band-all svg{transition:transform .2s}
.msg-band-all:hover svg{transform:translateX(3px)}
.msg-band .vl-card-btn{color:#fff}
.msg-band .vl-card-text small{color:color-mix(in srgb,#fff 72%,transparent)}
.msg-band .msg-scripture{color:var(--m-gold-hi)}
.msg-band .vl-card.is-playing .vl-thumb{box-shadow:0 0 0 3px var(--m-gold)}
.msg-band .vl-rail{scrollbar-color:color-mix(in srgb,#fff 35%,transparent) transparent}

/* The Message tab */
.msg-head{max-width:720px;margin:6px 0 10px}
.msg-head h2{margin:8px 0 0;font-family:inherit;font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--brand-text,#1d1a21)}
.msg-head p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--brand-muted,#6a686c)}
.msg [data-msg-rows][hidden],.msg-all[hidden],.msg .vl-card[hidden]{display:none}
.msg-all{margin-top:18px}
.msg-all .vl-browse-head h2{display:flex;align-items:center;gap:8px}
.msg-back{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--brand-line,#e4e3e6)}
.msg-back svg{width:18px;height:18px;transform:rotate(180deg)}
.msg-back:hover{text-decoration:none;background:var(--brand-surface,#f5f4f6)}

/* Home player's "Now playing" when a message is playing (assets/videos.js) */
.vl-now-kicker{display:block;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--m-gold-ink)}
.vl-now-kicker+h2{margin-top:4px}
.vl-scripture{font-weight:700;color:var(--m-violet)}

@media(max-width:600px){
  .msg-band{margin:0 -20px 32px;padding:22px 20px 14px;border-radius:0}
  .msg-band-head{align-items:flex-start;flex-direction:column;gap:12px}
}