/* blocks/two-col.css
   Block: Two Column — image one side, rich text the other.
   Rewind Club - loaded in order by functions.php. */

.rc-2col{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4.5vw,60px); align-items:center;
}

/* Column split */
.rc-2col--text{grid-template-columns:0.85fr 1.15fr}
.rc-2col--media{grid-template-columns:1.15fr 0.85fr}

/* Vertical alignment */
.rc-2col--align-start{align-items:start}
.rc-2col--align-stretch{align-items:stretch}

/* Image side. Source order is media first, so only "right" needs swapping —
   that keeps the picture above the text once the columns stack on mobile. */
.rc-2col--media-right .rc-2col__media{order:2}
.rc-2col--media-right .rc-2col__text{order:1}

.rc-2col__media{margin:0}

.rc-2col__img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius); border:1.5px solid var(--line);
  box-shadow:8px 8px 0 var(--kraft-2); background:var(--card-2);
}

/* Crops */
.rc-2col--square .rc-2col__img{aspect-ratio:1/1; height:auto; object-fit:cover}
.rc-2col--portrait .rc-2col__img{aspect-ratio:3/4; height:auto; object-fit:cover}
.rc-2col--landscape .rc-2col__img{aspect-ratio:4/3; height:auto; object-fit:cover}
.rc-2col--align-stretch .rc-2col__img{height:100%; object-fit:cover}

.rc-2col__placeholder{
  display:grid; place-items:center; min-height:220px; text-align:center;
  padding:20px; color:var(--ink-3); font-size:14px;
  border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--card-2);
}

.rc-2col__text > :first-child{margin-top:0}
.rc-2col__text h2{font-size:clamp(25px,3.4vw,38px); line-height:1.13; margin:6px 0 14px}
.rc-2col__text .wysiwyg{color:var(--ink-2)}
.rc-2col__text .wysiwyg > :last-child{margin-bottom:0}
.rc-2col__text .rc-cta{margin-top:22px}