/* CaseStudyArchive (.c-csarch) — collection-driven case-study rows shared
   by /case-studies/ and /es/case-studies/. Editorial hairline-row language,
   same family as the newsroom list (resources.css § rs-item). */

.c-csarch__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: var(--space-section-sm) var(--space-inline);
}
@media (min-width: 640px) {
  .c-csarch__inner { padding-block: var(--space-section-md); }
}
@media (min-width: 1024px) {
  .c-csarch__inner { padding-inline: var(--space-inline-lg); }
}

.c-csarch__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.c-csarch__count {
  font-size: var(--fs-xs);
  color: var(--color-grey-on-white);
}

.c-csarch__items {
  margin-top: 24px;
  border-top: 1px solid var(--color-border-light);
}

.c-csarch__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 20px 8px;
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 0.25s ease;
}
@media (min-width: 768px) {
  .c-csarch__item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    padding: 24px 12px;
  }
}
.c-csarch__item:hover {
  background: color-mix(in oklab, var(--color-grey-100) 35%, transparent);
}

.c-csarch__title {
  font-size: var(--fs-xl);
  line-height: 1.375;
  color: var(--color-foreground);
  transition: color 0.2s;
  /* collection titles are full CMS headlines — clamp to the 2-line slot */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.c-csarch__item:hover .c-csarch__title { color: var(--color-blue); }

.c-csarch__line {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.c-csarch__cta {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue);
}

.c-csarch__arrow {
  display: none;
  color: var(--color-grey-300);
  transition: color 0.2s, transform 0.2s;
}
@media (min-width: 768px) {
  .c-csarch__arrow { display: block; margin-top: 5px; }
}
.c-csarch__item:hover .c-csarch__arrow {
  color: var(--color-blue);
  transform: translate(2px, -2px);
}