/* ====== COMMENTARY SECTION ====== */

/*
  CMS INTEGRATION NOTES (for future reference)
  =============================================

  LAYOUT ARCHITECTURE:
  The two-column layout uses explicit <div class="commentary-col"> wrappers
  rather than CSS Grid with auto-placement. This was deliberate — CSS Grid
  with items assigned to columns via grid-column created uneven vertical gaps
  because items in the same implicit row are height-linked. CSS columns was
  also tried but fills top-to-bottom in the left column first, causing
  imbalanced layouts when content changes.

  The current flex approach means each column is an independent flow context.
  Topics stack naturally within their column with consistent margin-bottom
  spacing, regardless of what's happening in the other column.

  COLUMN ASSIGNMENT:
  When converting to a CMS (e.g. Astro collections), topics need to be
  assigned to left or right columns. The current assignments are:
    Left:  Features, Opinion
    Right: Policy and Analysis, Commentary, Published Research, Original Video

  The CMS template should group topics into two arrays and render them into
  separate .commentary-col containers. Do NOT render all topics flat and try
  to assign columns via CSS classes — that leads back to the implicit row
  problem described above.

  TOPIC STRUCTURE:
  Each .commentary-topic has:
    - .commentary-topic__title (h3, blue rule above via border-top)
    - .commentary-topic__thumb (optional — Features, Policy, Commentary have images)
    - .commentary-topic__list > .commentary-topic__item (articles)
      - .commentary-topic__link wrapping:
        - .commentary-topic__article-title (Helvetica Bold, dark navy #242348)
        - .commentary-topic__source (Work Sans, faded opacity 0.45)

  TYPOGRAPHY:
  Topic headings use the display font (inherited Neue Haas Grotesk).
  Article titles explicitly use bold weight + #242348 dark navy.
  Source text switches to var(--font-body) which is Work Sans.

  ATMOSPHERE SECTION:
  The .about-atmosphere section below the commentary content uses a blue
  background (#1436BC) with the SpiningBoxes.gif at object-fit: cover,
  plus a ::after overlay at 15% blue opacity — matching the Squarespace
  reference where the GIF is transparent and sits on a coloured cell.
  Height matches the index page video section at 45vh.
*/

#about-commentary {
  background-color: var(--grey-200);
  color: var(--color-black);
}

.commentary-inner {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) var(--site-gutter) clamp(4rem, 7vw, 8rem);
}

.commentary-heading {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-blue);
  margin: 0 0 clamp(2rem, 3vw, 3rem);
}

/* ---- 2-column flex layout ---- */
/* Each column is a separate container so topics stack independently
   with consistent spacing — no implicit grid-row alignment issues */

.commentary-grid {
  display: flex;
  gap: clamp(4rem, 7vw, 8rem);
  align-items: flex-start;
}

.commentary-col {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Topic block ---- */

.commentary-topic {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.commentary-topic:last-child {
  margin-bottom: 0;
}

/* Blue rule above each topic title */
.commentary-topic__title {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-blue);
  margin: 0 0 0.6em;
  padding-top: 0.6em;
  border-top: 2.5px solid var(--color-blue);
}

.commentary-topic__thumb {
  margin-bottom: 1.2em;
}

.commentary-topic__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Article list ---- */

.commentary-topic__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.commentary-topic__item {
  padding: 1em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.commentary-topic__item:first-child {
  padding-top: 0;
}

.commentary-topic__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.commentary-topic__link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: color 0.2s;
}

.commentary-topic__link:hover {
  color: var(--color-blue);
}

.commentary-topic__link:hover .commentary-topic__article-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Article title: Helvetica Bold, dark navy */
.commentary-topic__article-title {
  display: block;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-navy);
}

/* Source: Work Sans, lighter */
.commentary-topic__source {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 400;
  opacity: 0.45;
  margin-top: 0.3em;
  line-height: 1.4;
}

/* ====== SPINNING BOXES ATMOSPHERE ====== */

.about-atmosphere {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-blue);
  height: 45vh;
  position: relative;
}

.about-atmosphere__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tinted overlay matching the Squarespace reference (blue @ 15% opacity) */
.about-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-blue);
  opacity: 0.15;
  pointer-events: none;
}

/* ====== RESPONSIVE ====== */

@media (max-width: 768px) {
  .commentary-grid {
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 4rem);
  }
}