/* ============================================================
   Blog Post Carousel
   Architecture: image (fixed px) + content (fixed px)
   Title = 2 lines fixed, Excerpt = 3 lines fixed, Read More = always bottom
   ============================================================ */

.blog-carousel-wrapper {
  width: 100%;
  position: relative;
  padding-bottom: 48px; /* room for pagination dots */
}

/* ── Slider track ── */
#blog-splide-main .splide__track {
  overflow: visible;
}

/* ── Card ── */
.blog-slide {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease;
  /* No fixed height on the card itself — image + content heights define it */
}

.blog-slide:hover {
  transform: translateY(-4px);
}

/* ── Image: always 240px, never flex-percentage ── */
.blog-slide__image {
  height: 240px;
  flex: none;          /* fixed, never grows or shrinks */
  overflow: hidden;
  position: relative;
}

.blog-slide__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.blog-slide:hover .blog-slide__image img {
  transform: scale(1.04);
}

.blog-slide__no-image {
  width: 100%;
  height: 100%;
  background: #1a1a1a;
}

/* ── Content panel: fixed 220px — deterministic, never overflows ── */
.blog-slide__content {
  height: 220px;
  flex: none;          /* fixed, never grows or shrinks */
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 20px;
  overflow: hidden;    /* hard clip — nothing can escape */
  box-sizing: border-box;
}

/*
  Title: exactly 2 lines
  font-size: 1rem, line-height: 1.35
  height = 1rem × 1.35 × 2 = 2.7rem
*/
.blog-slide__content h2 {
  flex: none;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  height: 2.7rem;      /* exactly 2 lines — never taller */
  margin: 0 0 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*
  Excerpt: exactly 3 lines
  font-size: 0.82rem, line-height: 1.5
  height = 0.82rem × 1.5 × 3 = 3.69rem
*/
.blog-slide__excerpt {
  flex: none;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  height: 3.69rem;     /* exactly 3 lines — never taller */
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Read More: solid orange pill button, always pinned to bottom */
.blog-slide__read-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: auto;
  padding: 10px 20px;
  background: #ff720d;
  border-radius: 8px;
  align-self: flex-start;  /* left-aligned, natural width */
  box-sizing: border-box;
  transition: background 0.25s ease, transform 0.2s ease;
}

.blog-slide:hover .blog-slide__read-more {
  background: #e8620a;
  color: #ffffff;
  transform: translateY(-1px);
}

.blog-slide__read-more .arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ============================================================
   Splide arrows
   ============================================================ */
#blog-splide-main .splide__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 1;
  top: calc(240px / 2);  /* centred on the image */
  transform: translateY(-50%);
  transition: background 0.25s ease, border-color 0.25s ease;
}

#blog-splide-main .splide__arrow:hover {
  background: #ff720d;
  border-color: #ff720d;
}

#blog-splide-main .splide__arrow svg {
  fill: #ffffff;
  width: 16px;
  height: 16px;
}

#blog-splide-main .splide__arrow--prev { left: -22px; }
#blog-splide-main .splide__arrow--next { right: -22px; }

/* ============================================================
   Splide pagination — hidden
   ============================================================ */
#blog-splide-main .splide__pagination {
  display: none !important;
}

/* ============================================================
   Responsive — Laptop (≤1280px)
   ============================================================ */
@media (max-width: 1280px) {
  .blog-slide__image {
    height: 210px;
  }

  #blog-splide-main .splide__arrow {
    top: calc(210px / 2);
  }
}

/* ============================================================
   Responsive — Tablet (≤1024px) — 2 per page
   ============================================================ */
@media (max-width: 1024px) {
  .blog-slide__image {
    height: 190px;
  }

  .blog-slide__content {
    height: 200px;
  }

  #blog-splide-main .splide__arrow {
    top: calc(190px / 2);
  }
}

/* ============================================================
   Responsive — Mobile (≤768px) — 1 per page
   On single-column, content can be auto height — no overflow risk
   ============================================================ */
@media (max-width: 768px) {
  .blog-slide__image {
    height: 200px;
  }

  /* Release the fixed content height — single column has no alignment constraint */
  .blog-slide__content {
    height: auto;
    padding: 16px 18px 20px;
    min-height: 160px;   /* ensures read-more always has space */
  }

  .blog-slide__content h2 {
    height: auto;        /* titles can wrap freely on mobile */
    -webkit-line-clamp: 2;
  }

  .blog-slide__excerpt {
    height: auto;        /* let excerpt breathe — no sibling alignment needed */
    -webkit-line-clamp: 3;
  }

  .blog-slide__read-more {
    margin-top: 14px;    /* predictable spacing on single-column */
    width: 100%;         /* full width on mobile only */
    align-self: stretch;
  }

  #blog-splide-main .splide__arrow--prev { left: 0; }
  #blog-splide-main .splide__arrow--next { right: 0; }
  #blog-splide-main .splide__arrow {
    top: calc(200px / 2);
  }
}