/* cs-resources-cards — blog/resources section: header + 4 article cards.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.8rem = 18px.
   Selectors are doubled-up where they must survive BB Global Styles. */

/* Strip BB's default row padding / module margins around the section. */
.fl-row-content-wrap:has(.cs-resources-cards) {
  padding-block: 0;
}
.fl-module-content:has(.cs-resources-cards) {
  margin-block: 0;
}

.cs-resources-cards {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: var(--cs-space-2xl);
  /* Was the Figma full-bleed white band — client asked for the section to
     sit on the page background instead (Berty, 2026-09-15). Only used on
     the homepage. */
  background: transparent;
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
}

.cs-resources-cards__inner {
  position: relative;
  z-index: 1;
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
}

/* ---------- Header ---------- */
.cs-resources-cards__header {
  text-align: center;
  margin-bottom: var(--cs-space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-space-xs);
}

.cs-resources-cards__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 2rem; /* 20px */
  line-height: 1.212;
  color: var(--cs-blue);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.cs-resources-cards__eyebrow-line {
  display: inline-block;
  width: 4.9rem;
  height: 2px;
  background: currentColor;
}

/* Doubled-up so it survives BB Global Styles' h2/h2 span rules. */
.cs-resources-cards .cs-resources-cards__heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 2vw + 1.8rem, 4rem); /* 28px → 40px */
  font-style: normal;
  color: var(--cs-ink); /* don't inherit the Customizer's #683326 global h2 color */
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  text-wrap: balance;
}

.cs-resources-cards .cs-resources-cards__heading-main {
  color: var(--cs-ink);
}

.cs-resources-cards .cs-resources-cards__heading-accent {
  color: var(--cs-blue-dark);
}

.cs-resources-cards__subtitle {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.5rem; /* 15px */
  line-height: 1.5;
  color: var(--cs-blue-dark);
}

/* ---------- Cards grid ---------- */
.cs-resources-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cs-space-md);
}

.cs-resources-cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* --cs-blue-card, not --cs-blue: this surface carries a 16px byline, and on
     --cs-blue nothing in the palette reaches 4.5:1 (ink 4.18, white 3.90). */
  background: var(--cs-blue-card);
  border-radius: 3.7rem; /* 37px */
  padding: 2.6rem;
  min-height: 52.6rem; /* 526px per Figma */
  text-align: center;
}

.cs-resources-cards__card-photo {
  width: 100%;
  border-radius: 4.9rem; /* 49px */
  overflow: hidden;
}

.cs-resources-cards__card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 258 / 290;
  object-fit: cover;
}

/* Title — underlined white link, centered in the space below the photo.
   Doubled-up (+ :link/:visited) so BB Global Styles can't repaint it. */
.cs-resources-cards .cs-resources-cards__card-title {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 2rem; /* 20px */
  font-style: normal;
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-white);
  padding-block: var(--cs-space-sm);
}

.cs-resources-cards .cs-resources-cards__card-title a,
.cs-resources-cards .cs-resources-cards__card-title a:link,
.cs-resources-cards .cs-resources-cards__card-title a:visited {
  color: var(--cs-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 200ms ease;
}

.cs-resources-cards .cs-resources-cards__card-title a:hover,
.cs-resources-cards .cs-resources-cards__card-title a:focus-visible {
  color: var(--cs-white);
  opacity: 0.85;
}

.cs-resources-cards__card-meta {
  margin: 0;
  align-self: center;
  text-align: center;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.8rem; /* 18px — was 14px, under the site-wide body-copy floor */
  line-height: 1.5;
  /* White on --cs-blue-card is 5.60:1. This was ink, which looked muddy and
     only reached 4.18:1 — the ceiling for dark text on the old --cs-blue fill.
     The fix was the background, not the text colour; see --cs-blue-card. */
  color: var(--cs-white);
  /* Was uppercase. At the old 14px "CORNELIUS SHEEHAN · APR 9, 2025" fitted the
     card on one line; at 16px it wraps and leaves "2025" stranded on its own in
     three of the four cards. Sentence case is narrow enough to stay on one line
     and is easier to read at byline size. */
  text-transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cs-resources-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cs-resources-cards__card {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .cs-resources-cards {
    padding-block: var(--cs-space-section-sm);
  }
  .cs-resources-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
    margin-inline: auto;
  }
}