/* Shared practice-surface CTA grid */
.work-list--surface-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.surface-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.surface-card__action {
  margin-top: auto !important;
  padding-top: 0.9rem;
  font-weight: 600;
}

.surface-card__action a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.surface-related-link {
  margin-top: 1.25rem;
}

.flagship-section .section-head {
  margin-bottom: 1.75rem;
}

.flagship-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/*
 * The flagship cards deliberately use aligned content bands on desktop.
 * The two projects have different names and copy lengths, so free-flowing
 * flex content makes one card visually drift below the other. These bands
 * keep identity, description, evidence and action aligned without forcing
 * the wording to be artificially equal in length.
 */
.flagship-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-height: 100%;
  padding: clamp(1.35rem, 3vw, 2rem);
}

.flagship-card__identity {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 9rem;
  margin-bottom: 1rem;
}

.flagship-card__identity > div {
  display: grid;
  grid-template-rows: 3.4rem minmax(4.6rem, auto);
  align-content: start;
  min-width: 0;
}

.flagship-card__identity .card-kicker {
  min-height: 3.4rem;
  margin: 0;
}

.flagship-card__identity h3 {
  min-height: 4.6rem;
  margin-top: 0;
  margin-bottom: 0;
}

.flagship-card__icon {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  border-radius: 1rem;
}

.flagship-card > p:not(.flagship-card__evidence):not(.surface-card__action) {
  min-height: 11rem;
  margin-top: 0;
}

.flagship-card__evidence {
  min-height: 5.5rem;
  margin-top: 0;
  padding-top: 1rem;
  font-size: 0.94rem;
  opacity: 0.86;
}

.flagship-card .surface-card__action {
  align-self: end;
  margin-top: 0 !important;
  padding-top: 1rem;
}

.flagship-boundary {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, rgba(18, 59, 103, 0.18));
  font-size: 0.96rem;
}

.capability-bridge .focus-grid,
.professional-application .focus-grid {
  margin-bottom: 1.5rem;
}

.portfolio-bridge {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  border-left: 3px solid currentColor;
}

.portfolio-bridge > :first-child {
  margin-top: 0;
}

.portfolio-bridge > :last-child {
  margin-bottom: 0;
}

.supporting-grid .surface-card--research {
  border-style: dashed;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.problem-card {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--border, rgba(18, 59, 103, 0.18));
  border-radius: 0.9rem;
}

.problem-card h3 {
  margin-top: 0;
  margin-bottom: 0.45rem;
}

.problem-card p {
  margin-bottom: 0;
}

.problem-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .work-list--surface-grid,
  .flagship-grid,
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .problem-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .flagship-card {
    display: flex;
    flex-direction: column;
  }

  .flagship-card__identity {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    align-items: center;
    min-height: 0;
  }

  .flagship-card__identity > div {
    display: block;
  }

  .flagship-card__identity .card-kicker,
  .flagship-card__identity h3,
  .flagship-card > p:not(.flagship-card__evidence):not(.surface-card__action),
  .flagship-card__evidence {
    min-height: 0;
  }

  .flagship-card__identity .card-kicker {
    margin-top: 0;
  }

  .flagship-card__icon {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 0.85rem;
  }

  .flagship-card__evidence {
    margin-top: 1rem;
    padding-top: 0;
  }

  .flagship-card .surface-card__action {
    margin-top: auto !important;
  }
}