/* UL reset (kills UA padding + bullets) */
.blog-grid{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* LI reset */
.blog-grid > li,
.blog-grid__item{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Wrapper behaves like the “catalog card” wrapper */
.blog-grid__link{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  align-items: flex-start;
  text-align: right;
  text-decoration: none;

  border-bottom: 1px solid color(GTF54C);
  color: color(F02CEE);
}

/* Ensure nothing inherits center alignment */
.blog-grid__link,
.blog-grid__title,
.blog-grid__date{
  text-align: right;
}

/* Stable image height to stop “all over the place” cards */
.blog-grid__img,
.blog-grid__img--placeholder{
  width: 100%;
  display: block;

  height: 400px;
  min-height: 400px;

  object-fit: cover;
  object-position: center center;

  margin-bottom: var(--space-4xs);

  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.blog-grid__img--placeholder{
  background: rgba(0,0,0,0.06);
}

/* Title like catalog */
.blog-grid__title{
  font-weight: 300;
  margin: 0;
  width: 100%;
  margin-bottom: var(--space-2xs);
}

/* Date style you wanted */
.blog-grid__date{
  font-weight: 300;
  font-size: var(--text-s);
  line-height: 1.3;
  width: 100%;
}

/* =========================================================
   RESET TEXT COLOR INSIDE BLOG GRID LINKS
   (match Oxygen catalog behavior)
========================================================= */

.blog-grid__link .blog-grid__title,
.blog-grid__link .blog-grid__date{
  color: var(--text-body);
}

.blog-grid__link .blog-grid__excerpt{
  color: var(--text-body);
}

/* Keep link color ONLY where intended (image hover, etc.) */
.blog-grid__link:hover{
  color: inherit;
}

.blog-grid__img{
  will-change: transform;
}

.blog-grid__link:hover .blog-grid__img,
.blog-grid__link:focus-visible .blog-grid__img{
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

@media (min-width: 1120px) {
.blog-grid--page-1 > li:first-child .blog-grid__title{
  max-width: 50%;
  margin-inline-end: auto; /* RTL-safe */
}
}

/* ================= BLOG GRID PAGINATION ================= */

.blog-grid__pagination{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

/* remove bullets + force horizontal row */
.blog-grid__pagination-list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
}

/* defensive: no bullets anywhere */
.blog-grid__pagination-item{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* link styling */
.blog-grid__pagination-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;

  text-decoration: none;
  color: var(--text-body);

  border: 1px solid var(--bg-body);

  font-weight: 300;
}

/* current page */
.blog-grid__pagination-link.is-current{
  background: rgba(0,0,0,0.05);
  cursor: default;
}

/* hover parity with catalog */
.blog-grid__pagination-link:not(.is-current):hover{
  background: rgba(0,0,0,0.03);
}

/* WCAG: visible focus indicator */
.blog-grid__pagination-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ===== Chevron arrows (drawn with ::before, not text glyphs) ===== */

.blog-grid__pagination-arrow{
  position: relative;
}

/* draw a clean chevron */
.blog-grid__pagination-arrow::before{
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  display: block;
}

/* prev: points left */
.blog-grid__pagination-arrow.is-prev::before{
  transform: rotate(-135deg);
}

/* next: points right */
.blog-grid__pagination-arrow.is-next::before{
  transform: rotate(45deg);
}

/* =========================================================
   RTL FIX: flip pagination arrow directions
========================================================= */

[dir="rtl"] .blog-grid__pagination-arrow.is-prev::before{
  transform: rotate(45deg); /* points RIGHT */
}

[dir="rtl"] .blog-grid__pagination-arrow.is-next::before{
  transform: rotate(-135deg); /* points LEFT */
}

/* ================= EMPTY STATE ================= */

.blog-grid__empty{
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;

  text-align: center;
  padding: 24px 0;
  font: inherit;
}