/* ==========================================================================
   CNL Events widget
   Every brand decision lives in the token block below. Change colors, fonts,
   radii, and column width there; you should not need to touch anything
   further down.
   ========================================================================== */

.cnl-events {
  /* --- Brand tokens ------------------------------------------------------ */
  --cnl-navy: #2c3659;
  --cnl-red: #9f3c39;
  --cnl-cream: #fdfbe9;

  /* Deep red used for the offset block behind the tile. */
  --cnl-red-dark: #531d1b;

  /* Card surface: a cream tile designed to sit on a CNL navy section. Set that
     background on the Squarespace section itself - the widget styles the tiles,
     not the band behind them. */
  --cnl-card: var(--cnl-cream);
  --cnl-card-ink: var(--cnl-navy);
  --cnl-card-muted: rgba(44, 54, 89, 0.68);
  --cnl-media-bg: #e9e5cd;

  /* Both faces are already served by the Squarespace page: ff-tisa-web-pro via
     the site's Typekit kit, Domine via Squarespace's own font CDN. They are
     referenced here, never re-imported, so the widget adds no font requests
     and cannot conflict with the site's loader. Off cnliberalism.org the
     stacks fall back to Georgia. */
  --cnl-font-display: "ff-tisa-web-pro", Georgia, "Times New Roman", serif;
  --cnl-font-meta: "Domine", Georgia, "Times New Roman", serif;
  --cnl-font-body: inherit; /* inherits the Squarespace body face by default */

  /* Domine is loaded at 600 and 700 only. Asking for 400 would make the
     browser synthesise a lighter face; 600 is the real one. */
  --cnl-weight-meta: 600;

  --cnl-radius: 14px;
  --cnl-radius-media: 10px;
  --cnl-radius-badge: 8px;
  --cnl-gap: 1.5rem;

  /* Narrowest a card may get before the grid drops a column. Raise for fewer,
     wider cards; lower for more, narrower ones. */
  --cnl-col-min: 260px;

  /* Luma covers are square (chapter logos), so the media box is square too:
     the image fills it exactly, with no letterboxing and nothing cropped.
     Widen this (e.g. 4 / 3) if covers ever become photographic. */
  --cnl-media-aspect: 1 / 1;
  --cnl-media-fit: cover;

  --cnl-card-border: 2.5px solid var(--cnl-red);

  /* Date badge and chapter chip. Navy so they read against the cream tile. */
  --cnl-badge-bg: var(--cnl-navy);
  --cnl-badge-ink: var(--cnl-cream);

  /* Offset block, carried over from the CNL emails. */
  --cnl-shadow: 4px 4px 0 0 var(--cnl-red-dark);
  --cnl-shadow-hover: 7px 7px 0 0 var(--cnl-red-dark);

  /* Fill for events with no cover image. Tokenised because a gradient tuned
     for a dark tile turns muddy on a light one. */
  --cnl-placeholder: linear-gradient(135deg, #f2eed6, #e2dcc0 55%, rgba(159, 60, 57, 0.22));

  /* Empty and error states sit on the section background, not on a tile, so
     these are light to read against the navy band. */
  --cnl-message-ink: rgba(253, 251, 233, 0.72);
  --cnl-message-border: rgba(253, 251, 233, 0.3);

  /* --- Base -------------------------------------------------------------- */
  font-family: var(--cnl-font-body);
  color: var(--cnl-navy);
  /* Site themes often set casing and tracking globally. Reset here so the
     widget looks the same wherever it is embedded; the few places that do
     want uppercase re-declare it below. */
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
  display: grid;
  /* min() keeps a card from ever being wider than its container, so the grid
     collapses to one column in a narrow Squarespace column, not just on a
     narrow viewport. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cnl-col-min)), 1fr));
  gap: var(--cnl-gap);
  margin: 0;
  padding: 0;
}

.cnl-events *,
.cnl-events *::before,
.cnl-events *::after {
  box-sizing: border-box;
}

/* --- Event card ---------------------------------------------------------- */

.cnl-event {
  display: flex;
  flex-direction: column;
  background: var(--cnl-card);
  border: var(--cnl-card-border);
  border-radius: var(--cnl-radius);
  padding: 0.7rem;
  text-decoration: none;
  color: var(--cnl-card-ink);
  box-shadow: var(--cnl-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.cnl-event:hover,
.cnl-event:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--cnl-shadow-hover);
}

.cnl-event:focus-visible {
  outline: 3px solid var(--cnl-red);
  outline-offset: 3px;
}

/* Media --------------------------------------------------------------------
   A fixed aspect box keeps every card the same height regardless of how tall
   the source image is. */

.cnl-event__media {
  position: relative;
  aspect-ratio: var(--cnl-media-aspect);
  border-radius: var(--cnl-radius-media);
  overflow: hidden;
  background: var(--cnl-media-bg);
}

.cnl-event__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--cnl-media-fit);
}

/* Shown when an event has no cover image, or the image fails to load. */
.cnl-event__media--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cnl-placeholder);
}

/* Chapter chip, floated over the top-left of the image. Shares the badge
   tokens with the date so the two corners always match. */
.cnl-event__chip {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 1;
  /* Leave room for the date badge opposite. */
  max-width: calc(100% - 4.4rem);
  padding: 0.3rem 0.45rem;
  background: var(--cnl-badge-bg);
  color: var(--cnl-badge-ink);
  border-radius: var(--cnl-radius-badge);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  font-family: var(--cnl-font-meta);
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
  /* Long names ("Democratic Republic of the Congo New Liberals") would
     otherwise swallow the artwork. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date badge, floated over the top-right of the image. */
.cnl-event__date {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.32rem 0.5rem 0.38rem;
  background: var(--cnl-badge-bg);
  color: var(--cnl-badge-ink);
  border-radius: var(--cnl-radius-badge);
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cnl-event__month {
  font-family: var(--cnl-font-meta);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cnl-event__day {
  font-family: var(--cnl-font-meta);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
}

/* Body --------------------------------------------------------------------- */

.cnl-event__body {
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem 0.4rem 0.4rem;
  min-width: 0;
}

.cnl-event__title {
  font-family: var(--cnl-font-display);
  font-size: 1.02rem;
  line-height: 1.32;
  font-weight: 700;
  /* Squarespace themes commonly uppercase and letterspace every heading, and
     an h3 rule in the theme outranks anything inherited from .cnl-events.
     Event names are read as sentences, so they stay as written. */
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
  margin: 0;
  color: var(--cnl-card-ink);
  overflow-wrap: anywhere;
}

.cnl-event__meta {
  display: grid;
  gap: 0.15rem;
  font-family: var(--cnl-font-meta);
  font-weight: var(--cnl-weight-meta);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--cnl-card-muted);
  margin: 0;
}

/* --- States -------------------------------------------------------------- */

.cnl-events__message {
  grid-column: 1 / -1;
  border: 2px dashed var(--cnl-message-border);
  border-radius: var(--cnl-radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--cnl-message-ink);
}

.cnl-events__message a {
  color: var(--cnl-navy);
}

.cnl-skeleton {
  height: 15rem;
  border-radius: var(--cnl-radius);
  background: linear-gradient(
    90deg,
    rgba(44, 54, 89, 0.07) 25%,
    rgba(44, 54, 89, 0.14) 37%,
    rgba(44, 54, 89, 0.07) 63%
  );
  background-size: 400% 100%;
  animation: cnl-shimmer 1.3s ease-in-out infinite;
}

@keyframes cnl-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cnl-skeleton { animation: none; }
  .cnl-event { transition: none; }
  .cnl-event:hover,
  .cnl-event:focus-visible { transform: none; }
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 540px) {
  .cnl-events {
    --cnl-gap: 1.1rem;
  }
}