/**
 * Two Column Story Component
 * Left: eyebrow + heading (with inline accent) + body.
 * Right: label/value project-details table (project_detail_row children).
 *
 * Accent resolution: --dh-accent (set via field_accent_color on the node)
 * falls back to the brand secondary (purple).
 */

.doghouse-two-column-story {
  --tcs-accent: var(--dh-accent, var(--site-color-secondary));
  border: 1px solid var(--site-color-border);
  border-radius: var(--site-radius-lg);
  max-width: calc(var(--site-container-max-width) - 4rem);
  margin: var(--site-space-xl) auto;
  padding: clamp(var(--site-space-xl), 4vw, var(--site-space-3xl));
}

.doghouse-two-column-story__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-space-xl);
  align-items: start;
}

@media (min-width: 768px) {
  .doghouse-two-column-story__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(var(--site-space-xl), 5vw, var(--site-space-3xl));
  }

  .doghouse-two-column-story--single-column .doghouse-two-column-story__inner {
    grid-template-columns: 1fr;
  }
}

/* ---- Left column ---- */

.doghouse-two-column-story__content {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-md);
  min-width: 0;
}

/* Eyebrow font styles live in .dh-section-eyebrow (base.css). */

/* Heading typography lives in .dh-section-heading (base.css). */

.doghouse-two-column-story__heading-accent {
  color: var(--tcs-accent);
}

.doghouse-two-column-story__body {
  font-size: var(--site-body-font-size);
  line-height: var(--site-body-line-height);
  color: var(--site-color-text-body);
  max-width: 60ch;
}

.doghouse-two-column-story--single-column .doghouse-two-column-story__body {
  max-width: none;
}

.doghouse-two-column-story__body p {
  margin: 0 0 var(--site-space-base) 0;
}

.doghouse-two-column-story__body p:last-child {
  margin-bottom: 0;
}

.doghouse-two-column-story__actions {
  margin-top: var(--site-space-md);
}

/* ---- Right column: project details table ---- */

.doghouse-two-column-story__details {
  border: 1px solid var(--site-color-border);
  border-radius: var(--site-radius-base);
  padding: 0 var(--site-space-md);
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
}

/* Drupal's field wrapper passes through so rows share the details grid. */
.doghouse-two-column-story__details > div {
  display: contents;
}

/* Each row wrapper spans both columns and uses subgrid so every label/value
   pair lines up against the same column edges across all rows. The divider
   sits on the wrapper so :last-child reliably removes only the final one. */
.doghouse-two-column-story__details > div > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  gap: var(--site-space-base);
  padding: var(--site-space-base) 0;
  border-bottom: 1px solid var(--site-color-border);
}

.doghouse-two-column-story__details > div > div:last-child {
  border-bottom: none;
}