/* ============================================
   Articles Blog — module.css
   ============================================ */

/* Section */
.ls-articles {
  background: var(--ls-neutral-white);
  padding-block: clamp(var(--ls-spacing-3xl), 6vw, var(--ls-spacing-5xl));
}

/* Header — left-aligned */
.ls-articles__header {
  margin-bottom: clamp(var(--ls-spacing-xl), 5vw, var(--ls-spacing-3xl));
}

.ls-articles__title {
  font-family: var(--ls-font-title);
  font-weight: var(--ls-fw-semibold);
  font-size: clamp(var(--ls-typo-h2-mobile-size), 4vw, var(--ls-typo-h2-size));
  line-height: clamp(var(--ls-typo-h2-mobile-lh), 5vw, var(--ls-typo-h2-lh));
  color: var(--ls-secondary-dark);
}

.ls-articles__title .highlight {
  color: var(--ls-primary-dark);
}

/* Grid */
.ls-articles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ls-spacing-l);
}

@media (min-width: 769px) {
  .ls-articles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .ls-articles__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card */
.ls-articles__card {
  background: var(--ls-brand-neutral-main);
  border-radius: var(--ls-radius-s);
  overflow: hidden;
  padding: var(--ls-spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-m);
}

/* Image */
.ls-articles__img-link {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ls-radius-s);
}

.ls-articles__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ls-radius-s);
  transition: transform 0.3s ease;
}

.ls-articles__card:hover .ls-articles__img {
  transform: scale(1.03);
}

/* Content */
.ls-articles__content {
  display: flex;
  flex-direction: column;
  gap: var(--ls-spacing-s);
  flex: 1;
}

/* Tag */
.ls-articles__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--ls-font-text);
  font-size: var(--ls-typo-t8-size);
  font-weight: var(--ls-fw-medium);
  line-height: var(--ls-typo-t8-lh);
  color: var(--ls-info-dark);
  background: var(--ls-info-light);
  padding: var(--ls-spacing-xs) var(--ls-spacing-s);
  border-radius: var(--ls-radius-xs);
}

/* Card title */
.ls-articles__card-title {
  font-family: var(--ls-font-title);
  font-weight: var(--ls-fw-semibold);
  font-size: var(--ls-typo-h4-size);
  line-height: var(--ls-typo-h4-lh);
  color: var(--ls-secondary-dark);
}

.ls-articles__card-title a {
  color: inherit;
  text-decoration: none;
}

.ls-articles__card-title a:hover {
  color: var(--ls-primary-dark);
}

/* Excerpt */
.ls-articles__excerpt {
  font-family: var(--ls-font-text);
  font-size: var(--ls-typo-t4-size);
  font-weight: var(--ls-fw-regular);
  line-height: var(--ls-typo-t4-lh);
  color: var(--ls-neutral-dark);
}

/* Read more link */
.ls-articles__read-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--ls-spacing-s);
  margin-top: auto;
}

.ls-articles__read-more a {
  font-family: var(--ls-font-text);
  font-size: var(--ls-typo-t5-size);
  font-weight: var(--ls-fw-medium);
  line-height: var(--ls-typo-t5-lh);
  color: var(--ls-secondary-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--ls-secondary-dark);
}

.ls-articles__read-more a:hover {
  color: var(--ls-primary-dark);
  border-bottom-color: var(--ls-primary-dark);
}

/* CTA */
.ls-articles__cta {
  text-align: center;
  margin-top: clamp(var(--ls-spacing-xl), 4vw, var(--ls-spacing-3xl));
}

/* Scroll animation */
.ls-articles__card {
  opacity: 0;
  transform: translateY(20px);
  animation: ls-articles-fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

@keyframes ls-articles-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports not (animation-timeline: view()) {
  .ls-articles__card {
    opacity: 1;
    transform: none;
  }
}