/* Homepage (index.html, formerly wide.html): Goodmake, Subber and Codecademy as one full-width card each, showing the featured mockup
   from their case study's home.html (Option A) on that card's own ground. Loads after grid3.css.
   The card keeps a fixed shape (padding in % of its width), so one poster fits every width. The poster
   (img/<slug>/wide.jpg) is the whole card; once the live stage has loaded over it, the poster fades out. */
.wide-card { display: block; aspect-ratio: auto; padding: 6.1% 4.75% 0; background: var(--wbg); }
.wide-card::before { content: ''; position: absolute; inset: 0; background-image: var(--wpat); background-size: var(--wpat-size);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent); }
.wide-card .card-poster { z-index: 1; transition: opacity .6s ease; }
.wide-card:has(iframe.is-live) .card-poster { opacity: 0; }
.wide-art { position: relative; z-index: 2; aspect-ratio: var(--ar); transition: transform .8s var(--ease-out); }
a.wide-card:hover .wide-art { transform: translateY(-8px) scale(1.01); }

/* Each card's ground, as on its home.html */
.wide-card.gm {
  --wbg: radial-gradient(60% 70% at 0% 0%, #E6DDFF 0%, transparent 70%), radial-gradient(50% 60% at 100% 0%, #D4F1E2 0%, transparent 70%),
         radial-gradient(60% 60% at 30% 100%, #FDE3D2 0%, transparent 70%), radial-gradient(50% 60% at 100% 100%, #DCE7FB 0%, transparent 70%), #F7F5F2;
  --wpat: linear-gradient(rgba(30, 28, 26, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 28, 26, .05) 1px, transparent 1px);
  --wpat-size: 32px 32px; --ar: 1600 / 880;
}
.wide-card.sb {
  --wbg: radial-gradient(70% 80% at 50% 0%, #6E1628 0%, #2A0A13 55%, #0E0709 100%);
  --wpat: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); --wpat-size: 22px 22px; --ar: 1600 / 900;
}
.wide-card.cc {
  --wbg: radial-gradient(70% 80% at 50% 0%, #2A13A8 0%, #12124A 55%, #07081A 100%);
  --wpat: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); --wpat-size: 22px 22px; --ar: 1600 / 860;
}