/*
 * Alf Theme — CSR: Areas of Strategic Focus
 * Figma node: 1449:2384 (desktop) / 1459:3389 + 1459:3392 (mobile)
 *
 * Accordion grid of category cards (3 per row desktop, 1 per row mobile).
 * Clicking a card reveals its own short description and, if it has child
 * entries, a shared detail panel directly below the row containing it —
 * only one card is ever expanded at a time.
 *
 * Loaded only on the CSR page template.
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION  (vertical rhythm comes from the shared .alf-section class)
   ═══════════════════════════════════════════════════════════════════ */
.csr-focus__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ── Header ───────────────────────────────────────────────────────── */
.csr-focus__header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: var(--header-max-width, 896px);
  text-align: center;
  margin-inline: auto;
}

.csr-focus__title {
  font-size: var(--font-size-h2, 36px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: normal;
  color: var(--color-dark);
  margin: 0;
}

.csr-focus__subtitle {
  font-size: var(--font-size-h4, 20px);
  font-weight: var(--font-weight-regular, 400);
  line-height: normal;
  color: var(--color-dark);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   GRID  (rows of 3 desktop, chunked in PHP so the detail panel can sit
   directly below the row containing the active card)
   ═══════════════════════════════════════════════════════════════════ */
.csr-focus__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.csr-focus__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Cards size to their own content — a taller expanded card must not
     stretch its closed row-mates to match its height. */
  align-items: start;
  gap: 20px;
  width: 100%;
}

/* Each card's panel is its own DOM sibling immediately after that card
   (so mobile can show it right below its own card in source order).
   On desktop, force the 3 cards into columns 1-3 regardless of how many
   panels are interleaved, and push whichever panel is visible after all
   three so it spans the full row width below the group. */
.csr-focus__row > .csr-focus__card:nth-of-type(1) {
  order: 1;
}

.csr-focus__row > .csr-focus__card:nth-of-type(2) {
  order: 2;
}

.csr-focus__row > .csr-focus__card:nth-of-type(3) {
  order: 3;
}

.csr-focus__row > .csr-focus__panel {
  order: 4;
  grid-column: 1 / -1;
}

/* ── Card (button) ────────────────────────────────────────────────── */
.csr-focus__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px 12px;
  background: var(--color-beige);
  border: none;
  border-radius: 16px;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.csr-focus__card:hover,
.csr-focus__card:focus-visible {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.csr-focus__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Image + heading + chevron group — centered as a unit, independent of
   the full-width, left-aligned description below it. */
.csr-focus__card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.csr-focus__card-media {
  position: relative;
  width: 100%;
  height: 191px;
  border-radius: 16px;
  overflow: hidden;
}

.csr-focus__card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csr-focus__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(37, 37, 37, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
}

.csr-focus__card-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.csr-focus__card-heading {
  font-size: var(--font-size-h3, 24px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: normal;
  color: var(--color-dark);
  margin: 0;
}

.csr-focus__card-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  /* Source SVG is stroke="#F8FAF0" for use on dark heroes — force black
     here since cards sit on the light beige background. */
  filter: brightness(0);
  transition: transform 0.2s ease;
}

.csr-focus__card[aria-expanded="true"] .csr-focus__card-chevron {
  transform: rotate(180deg);
}

.csr-focus__card-desc {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: normal;
  color: var(--color-dark);
  margin: 0;
  text-align: left;
}

.csr-focus__card-desc[hidden] {
  display: none;
}

/* ── Reveal transition (progressive enhancement) ─────────────────────
   Fades/slides the description and detail panel in as they un-hide.
   Browsers without transition-behavior:allow-discrete support just get
   today's instant show/hide — no regression either way. */
.csr-focus__card-desc,
.csr-focus__panel {
  transition: opacity 0.25s ease, transform 0.25s ease, display 0.25s allow-discrete;
  opacity: 1;
  transform: translateY(0);
}

.csr-focus__card-desc[hidden],
.csr-focus__panel[hidden] {
  opacity: 0;
  transform: translateY(-6px);
}

@starting-style {
  .csr-focus__card-desc:not([hidden]),
  .csr-focus__panel:not([hidden]) {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DETAIL PANEL  (shared per row — shows the active card's children)
   ═══════════════════════════════════════════════════════════════════ */
.csr-focus__panel {
  display: flex;
  flex-direction: column;
  background: var(--color-beige);
  border-radius: 16px;
  width: 100%;
}

/* [hidden] and .csr-focus__panel are equal specificity (0,1,0) — without
   this rule the later `display: flex` above wins the tie and the panel
   stays visible regardless of the hidden attribute. */
.csr-focus__panel[hidden] {
  display: none;
}

.csr-focus__child {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 16px;
  width: 100%;
}

.csr-focus__child-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
}

.csr-focus__child-badge {
  font-size: 12px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary);
  margin: 0;
}

.csr-focus__child-title {
  font-size: var(--font-size-h3, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-dark);
  margin: 0;
}

.csr-focus__child-date {
  font-size: 16px;
  font-style: italic;
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-dark);
  margin: 0;
}

.csr-focus__child-desc {
  font-size: 16px;
  font-weight: var(--font-weight-light, 300);
  color: var(--color-darker);
  margin: 0;
}

.csr-focus__child-stats {
  max-width: 448px;
  padding: 12px 16px;
  background: var(--color-beige);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
}

.csr-focus__child-stats ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.csr-focus__child-stats li {
  font-size: 16px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-dark);
}

.csr-focus__child-media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 280px;
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
}

.csr-focus__child-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csr-focus__child-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(37, 37, 37, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
}

.csr-focus__child-divider {
  height: 1px;
  width: 100%;
  background: var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — single column, cards + panels stack
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .csr-focus__title {
    font-size: 32px;
  }

  .csr-focus__subtitle {
    font-weight: var(--font-weight-light, 300);
  }

  .csr-focus__row {
    grid-template-columns: 1fr;
  }

  /* Single column — let each panel fall back to its natural DOM position
     (right after its own card) instead of the desktop grouping above. */
  .csr-focus__row > .csr-focus__card:nth-of-type(1),
  .csr-focus__row > .csr-focus__card:nth-of-type(2),
  .csr-focus__row > .csr-focus__card:nth-of-type(3),
  .csr-focus__row > .csr-focus__panel {
    order: 0;
  }

  .csr-focus__row > .csr-focus__panel {
    grid-column: auto;
  }

  .csr-focus__child {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .csr-focus__child-text {
    padding: 32px 0 0;
  }

  .csr-focus__child-media {
    order: -1;
    width: 100%;
    height: 189px;
    min-height: 0;
  }
}