/*
 * Article Catalog
 * -----------------------------------------------------------------------------
 * Card grid for the /articles Views page.
 *
 * The View uses the "Unformatted list" format, NOT the Views "Grid" format, so
 * the column count lives here in CSS rather than in the View configuration.
 * That is what makes the two toggles below possible without touching Drupal.
 *
 * TO EXPERIMENT: change either toggle, then recompile:
 *     sass components/article-catalog.scss components/article-catalog.css
 * -----------------------------------------------------------------------------
 */
.article-catalog {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 75rem;
  margin: 3rem auto;
  padding: 0 clamp(1rem, 0.444rem + 1.778vw, 2rem);
  list-style: none;
}

.article-card {
  position: relative;
  display: flex;
  background-color: #FFFFFF;
  border: 1px solid #D5C4A1;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(31, 31, 31, 0.06);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.article-card:hover, .article-card:focus-within {
  box-shadow: 0 6px 18px rgba(31, 31, 31, 0.12);
  transform: translateY(-2px);
}

.article-card__media {
  flex-shrink: 0;
}
.article-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 0.25rem;
}

.article-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.article-card__heading {
  color: #0C434A;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1.188rem, 1.049rem + 0.444vw, 1.438rem);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.article-card__heading a {
  color: inherit;
  text-decoration: none;
}
.article-card__heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.article-card__heading a:hover, .article-card__heading a:focus {
  color: #2A6E73;
  text-decoration: underline;
}

.article-card__teaser {
  color: #424242;
  font-family: "Source Sans 3", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
.article-card__teaser p {
  margin: 0 0 0.5rem;
}
.article-card__teaser p:last-child {
  margin-bottom: 0;
}

.article-card {
  flex-direction: column;
  padding: 1.5rem;
}

.article-card__media {
  width: 100%;
  max-width: 450px;
  margin: 0 auto 1.5rem;
}

@media (max-width: 700px) {
  .article-catalog {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 500px) {
  .article-catalog {
    margin: 2rem auto;
  }
  .article-card {
    padding: 1rem;
  }
  .article-card__media {
    max-width: 400px;
    margin-bottom: 1rem;
  }
  .article-card__heading {
    font-size: 25px;
    margin-bottom: 0.5rem;
  }
}

/*# sourceMappingURL=article-catalog.css.map */