/* Punt Zero · Home · Casos d'estudi
   ─────────────────────────────────────────────────────────────────
   Full-bleed row of three tiles. Each tile borrows the palette and the
   signature visual of its own case page:
     SIDBRINT  · night + lilac dots travelling to Spain (cas-sidbrint)
     AYUDOC    · deep blue + a PDF scanned by the three lenses (cas-ayudoc)
     m4Social  · ink + the social cloud and the tech grid (cas-m4social)
   Animations live in home-casos.js and only run while a tile is on screen. */

/* Part of "02 · Què fem": no head of its own, just a label. */
.pz-cases {
  background: var(--pz-bone);
  padding: clamp(16px, 2vw, 32px) 0 0;
}
.pz-cases__head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.pz-cases__head .pz-kicker { margin: 0; font-weight: inherit; }

/* Two shared rows (visual / info) so the separator sits at the same
   height in all three tiles whatever the length of each text. */
.pz-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(clamp(380px, 56vh, 560px), 1fr) auto;
  gap: 0;
}

/* ── Tile ───────────────────────────────────────────────────────── */
.pz-case {
  --c-bg: #111;
  --c-fg: #F3F0EA;
  --c-mute: rgba(243, 240, 234, .62);
  --c-acc: var(--pz-yellow);
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  background: var(--c-bg);
  color: var(--c-fg);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.pz-case + .pz-case { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
.pz-case--sb { --c-bg: #160E1B; --c-acc: #F2C14E; --c-line: #C28BF8; }
.pz-case--ay { --c-bg: #002340; --c-acc: #5DD8A8; --c-line: #5DD8A8; }
.pz-case--m4 { --c-bg: #0E1116; --c-acc: #3ED96A; --c-line: #3ED96A; }

.pz-case__vis {
  position: relative;
  min-height: 320px;
}
.pz-case__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pz-case__over {
  position: absolute;
  margin: 0;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mute);
  pointer-events: none;
}
.pz-case__over--tl { top: clamp(24px, 3vw, 40px); left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); }

/* Big live figure, bottom-left of the visual */
.pz-case__count {
  position: absolute;
  left: clamp(24px, 3vw, 40px);
  bottom: 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.pz-case__count strong {
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--c-acc);
  font-variant-numeric: tabular-nums;
}
.pz-case__count > span {
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.pz-case__count b { color: var(--c-fg); font-weight: 500; }

/* ── Info block ─────────────────────────────────────────────────── */
.pz-case__info {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  padding-top: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
/* A hairline in the case colour fills the top edge on hover. */
.pz-case__info::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--c-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--pz-ease);
}
.pz-case__meta {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.pz-case__t {
  margin: 0;
  font-family: var(--pz-font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: .95;
  letter-spacing: -0.045em;
}
.pz-case__t em { font-style: normal; color: var(--c-acc); }
.pz-case__b {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--c-mute);
  max-width: 40ch;
}
.pz-case__foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.pz-case__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 44%;
  object-fit: contain;
  object-position: right bottom;
  opacity: .9;
  transition: opacity 300ms ease;
}
.pz-case__logo--sb { height: 44px; border-radius: 2px; }
.pz-case__logo--m4 { height: 22px; }
.pz-case__logo--white { filter: brightness(0) invert(1); opacity: .82; }
.pz-case:hover .pz-case__logo { opacity: 1; }
.pz-case__cta {
  white-space: nowrap;
  font-family: var(--pz-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-fg);
}
.pz-case__arrow { display: inline-block; transition: transform 300ms var(--pz-ease); }

.pz-case:hover .pz-case__info::before,
.pz-case:focus-visible .pz-case__info::before { transform: scaleX(1); }
.pz-case:hover .pz-case__arrow,
.pz-case:focus-visible .pz-case__arrow { transform: translateX(8px); }
.pz-case:focus-visible { outline: 2px solid var(--c-acc); outline-offset: -4px; }

/* ── AYUDOC · the document ─────────────────────────────────────── */
.pz-case--ay .pz-case__vis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px) 24px;
  background: radial-gradient(70% 60% at 50% 40%, rgba(0, 95, 136, .55), transparent 75%);
}
.pz-ay-doc {
  width: min(78%, 280px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35));
}
.pz-ay-page { transition: transform 900ms var(--pz-ease), opacity 600ms ease; }
.pz-ay-page.is-out { transform: translateY(14px); opacity: 0; }
.pz-ay-sheet { fill: #FBFAF8; }
.pz-ay-fold  { fill: #D8DEE4; }
.pz-ay-brand { fill: #003865; }
.pz-ay-h     { fill: #1C2329; }
.pz-ay-l     { fill: #9AA6B2; }
.pz-ay-l--faint { fill: #DCE2E7; }
.pz-ay-img   { fill: #E3ECF1; }
.pz-ay-mtn   { fill: #B8C8D3; }
.pz-ay-sun   { fill: #F5D06A; }

.pz-ay-mark { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 260ms ease, transform 420ms var(--pz-ease); transform: scale(.94); }
.pz-ay-mark.is-on { opacity: 1; transform: none; }
.pz-ay-mark text { font-family: var(--pz-font-mono); font-size: 8px; font-weight: 500; text-anchor: middle; fill: #fff; }
.pz-ay-mark--acc rect { fill: rgba(242, 140, 0, .14); stroke: #F28C00; stroke-width: 1.2; }
.pz-ay-mark--acc path { fill: none; stroke: #F28C00; stroke-width: 1.6; }
.pz-ay-mark--acc circle { fill: #F28C00; }
.pz-ay-mark--lang rect { fill: rgba(163, 23, 90, .22); stroke: #A3175A; stroke-width: 1.2; }
.pz-ay-mark--img > rect:first-child { fill: none; stroke: #0E6E70; stroke-width: 1.6; stroke-dasharray: 4 3; }
.pz-ay-mark--img .pz-ay-tag { fill: #0E6E70; }

.pz-ay-lens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.pz-ay-lens__i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-family: var(--pz-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
  transition: border-color 300ms ease, color 300ms ease;
}
.pz-ay-lens__i i { width: 8px; height: 8px; border-radius: 50%; background: var(--lens); }
.pz-ay-lens__i b {
  min-width: 1.4em;
  text-align: right;
  font-weight: 500;
  color: var(--c-fg);
  font-variant-numeric: tabular-nums;
}
.pz-ay-lens__i--acc  { --lens: #F28C00; }
.pz-ay-lens__i--lang { --lens: #F58CC0; }
.pz-ay-lens__i--img  { --lens: #5DD8C4; }
.pz-ay-lens__i.is-hit { border-color: var(--lens); color: var(--c-fg); }

/* ── m4Social · 2017–2021 ──────────────────────────────────────── */
.pz-m4-dash { margin: 0 0.08em; color: var(--c-fg); opacity: .5; font-weight: 400; }
.pz-m4-years { display: flex; gap: 4px; width: min(220px, 60%); margin: 4px 0 2px; }
.pz-m4-years i {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, .14);
  transition: background-color 400ms ease;
}
.pz-m4-years i.is-on { background: var(--c-acc); }

/* ── m4Social · legend ─────────────────────────────────────────── */
.pz-m4-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pz-m4-legend li { display: inline-flex; align-items: center; gap: 8px; }
.pz-m4-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: #3ED96A; }
.pz-m4-legend__sq  { width: 7px; height: 7px; background: #959FAB; }

/* ── Responsive ─────────────────────────────────────────────────── */
@supports not (grid-template-rows: subgrid) {
  .pz-case { display: flex; flex-direction: column; }
  .pz-case__vis { flex: 1 1 auto; }
  .pz-case__info { min-height: 290px; }
}
@media (max-width: 1100px) {
  .pz-case__b { font-size: 15px; }
}
@media (max-width: 900px) {
  .pz-cases__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .pz-case { display: flex; flex-direction: column; grid-row: auto; }
  .pz-case__info { min-height: 0; }
  .pz-case__vis { min-height: 380px; }
  .pz-case + .pz-case { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
}
@media (max-width: 560px) {
  .pz-case__vis { min-height: 340px; }
  .pz-case__meta { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-case__info::before, .pz-case__arrow, .pz-ay-mark, .pz-ay-page { transition: none; }
}