/* cards.css — shared by web_events.php (live preview) and display.php (public).
   Editing it here updates both places at once. */

/* Thin brand-tinted scrollbar for the public events page (display.php), which
   loads only this stylesheet. Mirrors app.css so the look is identical system-
   wide; literal colors are used since the --ktuu tokens aren't present here. */
html { scrollbar-width: thin; scrollbar-color: #b9c5d6 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #b9c5d6;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #1e4d8b; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* The intro box and the card grid share the same centered max-width so their
   left and right edges line up. Width = (cols cards + the gaps between them),
   from the same vars the grid uses. */
.ev-intro,
.ev-cards{
  max-width:calc(var(--cols, 3) * var(--card-size, 300px) + (var(--cols, 3) - 1) * var(--gap, 22px));
  margin-inline:auto;
}

/* Page introduction: a rounded, shadowed box matching the cards. Its colour is
   user-set via --intro-bg (defaults to white). */
.ev-intro{
  margin-bottom:30px;
  padding:22px 26px;
  background:var(--intro-bg, #fff);
  border:1px solid #e3e0d8;
  border-radius:14px;
  box-shadow:0 12px 30px -22px rgba(22,36,59,.55);
}

/* Responsive grid of cards (all values set inline on the container):
   • --card-size  the width each card aims for; the grid fits as many of that
                  width as the container allows and wraps the rest. Because the
                  track minimum is min(--card-size, 100%), the grid collapses to
                  a SINGLE column on any screen narrower than one card — so it's
                  mobile-safe with no width-specific breakpoints.
   • --cols       caps how many columns appear on a wide screen, via a centered
                  max-width (cols cards + the gaps between them).
   • --gap        space between cards. */
.ev-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(var(--card-size, 300px), 100%), 1fr));
  gap:var(--gap, 22px);
}
.ev-cards > *{ min-width:0; }
/* A forced row break spans the whole row so the cards after it start fresh. */
.ev-cards > .ev-row-break{
  grid-column:1 / -1;
  height:0;
  margin:0;
  padding:0;
  border:0;
}

.ev-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e3e0d8;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(22,36,59,.55);
  transition:transform .22s ease, box-shadow .22s ease;
}
/* Lift the card off the page on hover. */
.ev-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 44px -24px rgba(22,36,59,.55);
}
.ev-card a.ev-img{ display:block; line-height:0; }
.ev-card img{
  width:100%;
  display:block;
  aspect-ratio:1 / 1;
  object-fit:contain;
  /* the letterbox area behind a contain-fit image; user-set via --card-bg */
  background:var(--card-bg, #f3f1ec);
}
.ev-card-body{ padding:16px 16px 20px; text-align:center; }
.ev-card-body h3{ margin:0 0 12px; font-size:18px; line-height:1.3; color:#16243b; }
.ev-card-body h3 a{ color:inherit; text-decoration:none; }
.ev-card-body h3 a:hover{ text-decoration:underline; }

.ev-pdf-link{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:9px;
  background:#1f4ea3; color:#fff; text-decoration:none;
  font-weight:600; font-size:14px;
}
.ev-pdf-link:hover{ filter:brightness(1.08); }