/* ─────────────────────────────────────────────
   IN ACTIE — workshop photos
   Mosaic: 1 big feature + 2 stacked side cards.
   LEGO-brick framing: thick border, colored
   drop-shadow, studs on top, "tape" detail.
─────────────────────────────────────────────  */
.action {
  padding:24px 0 88px;
  position:relative;
}

/* ─── Header ─── */
.action-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.action-head-left {
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:640px;
  min-width:0;
}
.action-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ink);
  padding:6px 12px 6px 8px;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  border-radius:7px;
  box-shadow: 0 2px 0 var(--ink);
  align-self:flex-start;
}
.action-eyebrow-dot {
  width:9px; height:9px;
  border-radius:50%;
  background:var(--orange);
  border:1.5px solid var(--ink);
}
.action-head h2 {
  font-family:var(--font-display);
  font-size:clamp(24px, 4.5vw, 48px);
  font-weight:400;
  line-height:1;
  letter-spacing:-1px;
  color:var(--ink);
  text-transform:uppercase;
}
.action-head h2 em {
  font-style:normal;
  color:var(--orange-d);
  position:relative;
  display:inline-block;
}
.action-head h2 em::after {
  content:'';
  position:absolute;
  left:-0.05em; right:-0.05em; bottom:0.32em;
  height:0.32em;
  background:var(--yellow);
  border-radius:0.07em;
  z-index:-1;
  transform:rotate(-1.5deg);
}
.action-head p {
  font-family:var(--font-ui);
  font-size:15px;
  color:var(--gray-1);
  line-height:1.55;
  max-width:520px;
}
/* "Meer op Instagram" link */
.action-head-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:10px;
  box-shadow: 0 3px 0 var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--ink);
  transition:transform .15s, box-shadow .15s, background .2s;
  flex-shrink:0;
  margin-bottom:4px;
}
.action-head-link:hover {
  background:var(--yellow);
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.action-head-link-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
}
.action-head-link-arrow svg { width:13px; height:13px }

/* ─── Grid: mosaic ─── */
.action-grid {
  display:grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:24px 26px;
}
.action-card-feature { grid-row: 1 / span 2 }

/* ─── Cards ─── */
.action-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  isolation:isolate;
}
.action-card-feature { transform:rotate(-.6deg) }
.action-card-2       { transform:rotate(.8deg) }
.action-card-3       { transform:rotate(-1.1deg) }
.action-card:hover   { transform:rotate(0) translateY(-3px) }

/* Frame */
.action-card-frame {
  position:relative;
  overflow:hidden;
  background:var(--bg-warm);
  border:2px solid var(--ink);
  border-radius:14px;
  transition:box-shadow .25s;
  flex:1;
  min-height:0;
}
.action-card-feature .action-card-frame {
  aspect-ratio: 4 / 3;
  box-shadow: 0 8px 0 var(--orange);
}
.action-card-side .action-card-frame {
  aspect-ratio: 16 / 11;
}
.action-card-2 .action-card-frame { box-shadow: 0 6px 0 var(--yellow) }
.action-card-3 .action-card-frame { box-shadow: 0 6px 0 var(--red) }
.action-card-feature:hover .action-card-frame { box-shadow: 0 10px 0 var(--orange) }
.action-card-2:hover .action-card-frame       { box-shadow: 0 8px 0 var(--yellow) }
.action-card-3:hover .action-card-frame       { box-shadow: 0 8px 0 var(--red) }

.action-card-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.action-card:hover .action-card-frame img { transform:scale(1.04) }

/* Studs on top of frame */
.action-card-studs {
  position:absolute;
  top:-9px;
  left:22px;
  display:flex;
  gap:10px;
  z-index:5;
}
.action-card-studs .stud {
  width:14px; height:14px;
}
.action-card-feature .action-card-studs .stud { width:16px; height:16px }

/* "Tape" piece on feature card — fun sticker detail */
.action-card-tape {
  position:absolute;
  top:-10px;
  right:32px;
  width:62px;
  height:18px;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  transform:rotate(8deg);
  box-shadow: 0 2px 0 var(--ink);
  z-index:6;
  opacity:.92;
}
.action-card-tape::before,
.action-card-tape::after {
  content:'';
  position:absolute;
  top:50%;
  width:4px; height:4px;
  background:var(--ink);
  border-radius:50%;
  transform:translateY(-50%);
}
.action-card-tape::before { left:8px }
.action-card-tape::after  { right:8px }

/* Caption / meta strip — type tag left, big client logo right */
.action-card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:4px 6px 0;
  flex-wrap:nowrap;
}

/* Client logo chip — sized to make logo content visible despite
   square 500x500 PNGs that have ~25% padding baked in. Image is scaled
   up inside an overflow-hidden chip so the brand mark fills it. */
.action-card-client {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:64px;
  width:160px;
  padding:6px 14px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:10px;
  box-shadow: 0 3px 0 var(--ink);
  flex-shrink:0;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.action-card-client img {
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
  transform:scale(1.5);
  transform-origin:center;
}
.action-card:hover .action-card-client {
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.action-card-feature .action-card-client {
  height:80px;
  width:200px;
  padding:8px 18px;
}
.action-card-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px 8px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:7px;
  box-shadow: 0 2px 0 var(--ink);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--ink);
  flex-shrink:0;
}
.action-card-eyebrow .stud {
  width:10px;
  height:10px;
  flex-shrink:0;
}
.action-card-feature .action-card-eyebrow { font-size:11px; padding:7px 14px 7px 9px }

/* ─── Responsive ─── */
@media (max-width:1024px) {
  .action-head { flex-direction:column; align-items:flex-start; gap:20px }
  .action-grid {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:20px;
  }
  .action-card-feature {
    grid-row:auto;
    grid-column:1 / -1;
  }
  .action-card-feature .action-card-frame { aspect-ratio: 16 / 9 }
}
@media (max-width:640px) {
  .action { padding:8px 0 56px }
  .action-head { margin-bottom:26px; gap:14px }
  .action-grid { grid-template-columns:1fr; gap:20px }
  .action-card-feature, .action-card-2, .action-card-3 {
    transform:rotate(0);
    grid-column:auto;
  }
  .action-card-feature .action-card-frame {
    aspect-ratio: 4 / 3;
    box-shadow: 0 5px 0 var(--orange);
  }
  .action-card-side .action-card-frame {
    aspect-ratio: 4 / 3;
  }
  .action-card-2 .action-card-frame { box-shadow: 0 5px 0 var(--yellow) }
  .action-card-3 .action-card-frame { box-shadow: 0 5px 0 var(--red) }
  .action-card-feature:hover .action-card-frame { box-shadow: 0 6px 0 var(--orange) }
  .action-card-2:hover .action-card-frame { box-shadow: 0 6px 0 var(--yellow) }
  .action-card-3:hover .action-card-frame { box-shadow: 0 6px 0 var(--red) }
  .action-card-studs { left:14px; top:-7px; gap:7px }
  .action-card-studs .stud { width:11px; height:11px }
  .action-card-feature .action-card-studs .stud { width:13px; height:13px }
  .action-card-tape { width:48px; height:14px; top:-7px; right:18px }
  .action-card-eyebrow { font-size:9px; padding:5px 10px 5px 7px }
  .action-card-feature .action-card-eyebrow { font-size:9.5px; padding:5px 11px 5px 7px }
  .action-card-client { height:56px; width:140px; padding:5px 12px }
  .action-card-feature .action-card-client { height:64px; width:160px; padding:6px 14px }
}