/* blocks/split-cta.css
   Blocks: Split, and the Call-to-action band.
   Rewind Club - loaded in order by functions.php. */

/* --- Split: text beside a picture --- */.rc-split .eyebrow{margin-bottom:.8em}

.rc-split h2{margin:0 0 14px}

.rc-split p{color:var(--ink-2)}

/* Drawn item, at whatever size the shortcode asks for. */
.rc-illus{margin-inline:auto; width:100%}

.rc-illus svg{width:100%; height:auto; display:block}

/* --- Call-to-action band --- */
.rc-cta-band{
  background:var(--mulberry); color:var(--mulberry-ink);
  border-radius:24px; padding:clamp(32px,5vw,60px); text-align:center;
}

.rc-cta-band > *{margin-block:0}

.rc-cta-band .eyebrow{color:var(--mulberry-ink); opacity:.7; margin-bottom:14px}

.rc-cta-band h2{margin:0 0 14px; color:var(--mulberry-ink)}

.rc-cta-band p{max-width:52ch; margin-inline:auto; opacity:.9}

/* --- Inner page opener --- */
.rc-pagehead{padding-block:clamp(36px,5vw,62px) 0}

.rc-pagehead > *{margin-block:0}

.rc-pagehead h1{margin:10px 0 0}

.rc-pagehead .rc-lede{margin-top:18px}

@media (max-width:900px){
  .wp-block-columns.rc-split{gap:32px}
}

so a few base rules here carry the same design without the
   .wp-block-* selectors the pattern versions rely on.
   ============================================================ */
/* Accent phrase inside a headline — the{curly brace}

 syntax. */
mark.rc-accent{background:none; color:var(--mulberry); padding:0}

/* Textarea fields come through wpautop, so kill the stray paragraph margins. */
.rc-lede p{margin:0}

.rc-lede p + p{margin-top:.7em}

/* --- hero --- */
.rc-hero__grid--acf{display:grid; grid-template-columns:1.02fr 1fr; gap:52px; align-items:center}

.rc-hero__grid--acf .rc-lede{margin-top:18px}

.rc-hero__grid--acf .rc-cta{margin-top:28px}

/* --- split --- */
.rc-split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}

.rc-split--flip .rc-split__text{order:2}

.rc-split--flip .rc-split__media{order:1}

.rc-split__text > p{color:var(--ink-2)}

.rc-split__text > p:last-of-type{margin-bottom:0}

.rc-split__text h2{margin:0 0 14px}

.rc-split__text .eyebrow{margin-bottom:.8em}

.rc-split .rc-cta{margin-top:24px}

.rc-split__media{min-width:0}

.rc-split__img{width:100%; height:auto; border-radius:22px; display:block}

.rc-split__media .rc-illus{max-width:360px}

/* --- divider spacing --- */
.rc-stripes--small{margin:clamp(22px,3vw,32px) 0}

.rc-stripes--medium{margin:clamp(40px,6vw,64px) 0}

.rc-stripes--large{margin:clamp(64px,9vw,104px) 0}

/* --- cta band: the PHP version uses .btn, the pattern uses a block button --- */
.rc-cta-band .btn{
  background:var(--butter); border-color:#33291F; color:#33291F; box-shadow:4px 4px 0 #33291F;
}

.rc-cta-band .btn:hover{background:var(--butter); color:#33291F; box-shadow:6px 6px 0 #33291F}

/* --- quote with a real photo --- */
.rc-quote__av img{width:92px; height:92px; object-fit:cover; display:block}

@media (max-width:900px){
  .rc-hero__grid--acf,
  .rc-split{grid-template-columns:1fr; gap:34px}

.rc-split--flip .rc-split__text,
.rc-split--flip .rc-split__media{order:0}
}