/* EADA jury grid.
   Header rhythm comes from .billboard + .kicker + h2 + .copy in
   shared/styles.css. Only the grid + card visuals are scoped here.
   Fonts: `font-family: inherit` keeps names in the site's own font
   (ADS: Arial) rather than borrowing --font-title, which falls back
   to Georgia serif here and would stick out. */

.block-eada-jury-grid .kicker { margin-bottom: 22px; }
.block-eada-jury-grid h2      { margin: 0 0 24px; }
.block-eada-jury-grid .copy   { margin: 0 0 48px; max-width: 720px; }

.block-eada-jury-grid .jury-grid {
  display: grid;
  grid-template-columns: repeat(var(--jury-cols, 4), 1fr);
  gap: 40px 28px;
  align-items: start;
}

.block-eada-jury-grid .jury-card    { margin: 0; }
.block-eada-jury-grid .jury-link    { display: block; text-decoration: none; color: inherit; }

.block-eada-jury-grid .jury-photo {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.block-eada-jury-grid .jury-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.block-eada-jury-grid .jury-card:hover .jury-photo img { transform: scale(1.04); }

.block-eada-jury-grid .jury-photo-empty {
  /* width/height 100% so the placeholder fills its .jury-photo parent
     regardless of `position`. editor.css forces `position:relative` on
     every div[data-field-image] with higher specificity than a block's
     own rule, which collapsed inset:0 → 0-height and killed clickability
     on the empty state. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 24px),
    var(--bg);
  background-size: 24px 24px, 100% 100%;
  cursor: pointer;
}

.block-eada-jury-grid .jury-name {
  margin: 0 0 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1.15;
}
.block-eada-jury-grid .jury-role {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 8px;
}
.block-eada-jury-grid .jury-country {
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.block-eada-jury-grid .cms-list-item-add { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .block-eada-jury-grid .jury-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 520px) {
  .block-eada-jury-grid .jury-grid { grid-template-columns: 1fr; }
}

/* Edit mode: the whole card is wrapped in <a class="jury-link" href="#">
   so the URL pill can attach. But that anchor was swallowing clicks on
   the image placeholder, name, role and country and stopping their
   editor handlers from firing. Making the anchor itself click-through
   in edit mode restores the inline editing UX; children get their own
   pointer-events back so they stay interactive. Public site: unaffected. */
body.cms-edit .block-eada-jury-grid .jury-link       { pointer-events: none; }
body.cms-edit .block-eada-jury-grid .jury-link > *   { pointer-events: auto; }