@media (max-width: 900px) {
  .block-ifa-exhibition-list { padding: 56px 24px !important; }
  .block-ifa-exhibition-list .exhibition-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) { .block-ifa-exhibition-list .exhibition-grid { grid-template-columns: 1fr !important; } }

/* ── Adaptation for Via Crispi ───────────────────────────────────────
   TIFA's private tokens, bridged onto this brand. Block-scoped; the
   inline styles in render.php resolve through these because they are
   var() references, not literals. */
.block-ifa-exhibition-list {
  --ifa-dark:         var(--color-fg);
  --ifa-mid:          var(--color-fg-muted);
  --ifa-off:          var(--color-surface);
  --ifa-white:        var(--color-bg);
  --ifa-rule:         var(--color-border);
  --ifa-accent:       var(--color-accent-soft);
  --ifa-accent-light: var(--color-accent);
  --ifa-font-title:   var(--font-display);
}
.block-ifa-exhibition-list { padding: var(--space-section-y) var(--space-section-x) !important; }

/* Design system §8 — uppercase is for eyebrows and buttons only, and
   the display face sits at 600. Set inline by the block, so overriding
   requires !important. */
.block-ifa-exhibition-list .exhibition-card h3 {
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.25 !important;
}

/* Date line ships at 10px, below the 12px eyebrow floor in design
   system §3. Set inline, hence !important. */
.block-ifa-exhibition-list .exhibition-card a > div:first-child { font-size: 12px !important; }
.block-ifa-exhibition-list h2 { text-transform: none !important; }

/* ── Editor: let a click reach the card photograph ───────────────────
   The card's <a> is z-index 2 over the image and, because the card is
   a flex column justified to the end, it covers the lower part of the
   picture. Measured before the fix: 10 of 25 sample points reached
   the image — the top of a card worked, the bottom did not, which is
   worse than a clean failure because it looks intermittent.

   The <a>'s position and z-index are inline styles, but its
   pointer-events are not, so this rule wins without !important. */
body.cms-edit .block-ifa-exhibition-list .exhibition-card > a { pointer-events: none; }
body.cms-edit .block-ifa-exhibition-list .exhibition-card > a [data-field],
body.cms-edit .block-ifa-exhibition-list .exhibition-card > a [class*="cms-"] { pointer-events: auto; }