/* 05 Mock campaigns (playground.js): a card per campaign, and a cue on to "Let's talk" */

.ch-play { background: radial-gradient(100% 80% at 80% 10%, #2a0b0d 0%, var(--black) 60%); color: var(--cream); }
.ch-play .kicker { color: #e2484f; }
.play-head { position: absolute; top: 13vh; left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px); }
.play-head .title { font-size: clamp(48px, 7vw, 112px); margin-top: 14px; }
.play-head p { margin-top: 16px; max-width: 460px; font: 400 16px/1.6 var(--sans); color: color-mix(in srgb, var(--cream) 70%, transparent); }

.campaigns { position: absolute; left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px); bottom: 21vh;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 36px); }
.campaign {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: end;
  padding: 14px; border-radius: 22px; background: #171212; border: 1px solid #2a2020;
  transform: translateY(50px); opacity: 0;
  transition: transform 1s var(--ease) var(--d, 0s), opacity .8s ease var(--d, 0s), border-color .3s, background .3s;
}
.ch-play.is-active .campaign { transform: none; opacity: 1; }
.campaign:hover, .campaign:focus-visible { border-color: var(--red); background: #1c1414; }
.campaign-cover { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #000; }
.campaign-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.campaign:hover .campaign-cover img { transform: scale(1.05); }
.campaign-text { display: block; padding: 4px 6px 6px 0; }
.campaign-brand { display: block; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.campaign-title { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 2.6vw, 42px); line-height: 1; margin: 10px 0; }
.campaign-idea { display: block; font: 400 14px/1.5 var(--sans); color: color-mix(in srgb, var(--cream) 72%, transparent); }
.campaign-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.campaign-tags span { font: 500 11px/1 var(--sans); padding: 6px 9px; border-radius: 999px; border: 1px solid #3a2c2c; color: var(--cream); }
.campaign-open { display: block; margin-top: 16px; font: 500 13px/1 var(--sans); color: var(--cream); }
.campaign-open::after { content: " →"; color: #e2484f; transition: margin .3s; }
.campaign:hover .campaign-open::after { margin-left: 4px; }

/* the cue at the bottom: on to "Let's talk" */
.play-next { position: absolute; left: 50%; bottom: 4vh; transform: translate(-50%, 8px); text-align: center; white-space: nowrap;
  opacity: 0; transition: opacity .6s ease, transform .8s var(--ease); pointer-events: none; }
.ch-play.is-active .play-next { opacity: 1; transform: translate(-50%, 0); transition-delay: .8s; }
.play-next strong { display: block; font: italic 400 clamp(22px, 2vw, 30px)/1.1 var(--serif); color: var(--cream); }
.play-next span { display: block; margin-top: 8px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.play-next span::after { content: ""; display: block; width: 1px; height: 26px; margin: 10px auto 0; background: currentColor;
  transform-origin: top; animation: hint-line 1.8s var(--ease) infinite; }

@media (max-width: 900px) {
  .play-head { top: 11vh; left: 16px; right: 16px; }
  .play-head p { font-size: 14px; }
  .campaigns { left: 16px; right: 16px; top: 40vh; bottom: auto; grid-template-columns: 1fr; gap: 12px; }
  .campaign { grid-template-columns: 1fr 1.15fr; padding: 10px; gap: 14px; align-items: center; }
  .campaign-idea, .campaign-tags { display: none; }
  .campaign-title { font-size: 26px; margin: 8px 0; }
  .campaign-open { margin-top: 8px; }
  .play-next { bottom: 3vh; }
}