/**
 * کارت‌های بلاگ مثل صفحهٔ اصلی (blog-section-box / blog-box) — برای لندینگ‌های dog / cat / bird
 */

.blog-section-box.petboom-landing-blog-strip {
  cursor: grab;
}

.blog-section-box.petboom-landing-blog-strip:active {
  cursor: grabbing;
}

.blog-section-box {
  display: flex;
  gap: 20px;
  padding-bottom: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* نوار پیشرفت اسکرول (مثل صفحهٔ اصل petboom-final) */
.petboom-landing-blog-strip + .custom-scroller-indicator-js {
  width: 65px;
  height: 5px;
  background-color: #d9d9d9;
  border-radius: 10px;
  margin: 14px auto 0;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.petboom-landing-blog-strip + .custom-scroller-indicator-js .scroll-thumb {
  height: 100%;
  background-color: var(--primary, #0066ff);
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: grab;
}

.petboom-landing-blog-strip + .custom-scroller-indicator-js .scroll-thumb.dragging {
  cursor: grabbing;
}

.blog-box {
  max-width: 271px;
  width: 271px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  flex: 0 0 271px;
  flex-shrink: 0;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.blog-box > a {
  text-decoration: none;
  display: block;
  color: inherit;
}

.blog-box .con {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-box-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.blog-box-image img {
  width: 271px;
  height: 174px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.blog-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
  margin-top: 12px;
}

.blog-box .con .blog-text {
  margin-top: 12px !important;
}

.blog-text h3 {
  font-size: 14px !important;
  color: #424242;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: initial;
  line-height: 1.5;
}

.blog-date {
  font-size: 12px;
  color: #888;
  display: flex;
  gap: 8px;
  margin: initial;
  align-items: center;
  justify-content: flex-start;
}

.blog-date svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Prevent generic section svg fill rules from painting calendar icon solid */
.petboom-landing-blog-strip .blog-date svg,
.petboom-landing-blog-strip .blog-date svg * {
  fill: none !important;
}

.blog-date time {
  font-size: 13px;
  font-weight: 400;
  color: #6e7a86;
  line-height: 20px;
}

@media (max-width: 767px) {
  .blog-section-box {
    scroll-behavior: auto;
  }

  .blog-box {
    min-width: 260px;
    flex: 0 0 min(280px, 85vw);
    width: min(280px, 85vw);
    max-width: min(280px, 85vw);
  }

  .blog-box-image img {
    width: 100%;
    height: auto;
    min-height: 160px;
    aspect-ratio: 271 / 174;
  }
}

/* template-centers: نوار بلاگ داخل .section-items (قبلاً grid کارت قدیمی بود) */
.pet-box.section-type-three .section-items.petboom-centers-petbox-strip-wrap {
  display: block;
  width: 100%;
}

/* veterinarian-dispatch: نوار بلاگ داخل .section-items */
.mag-section.mgb-def .section-items.petboom-dispatch-mag-strip-wrap {
  display: block;
  width: 100%;
}

/* Desktop only: match home `blog-view-all` style on diet templates */
@media (min-width: 768px) {
  .mag-section-cta > .container.mxw-def,
  .mag-section-bird-cta > .container.mxw-def,
  .mag-section-cat-cta > .container.mxw-def {
    position: relative;
  }

  .mag-section-cta .see-all-cta,
  .mag-section-bird-cta .see-all-cta,
  .mag-section-cat-cta .see-all-cta {
    position: absolute;
    top: 36px;
    left: 20px;
    width: auto;
    margin: 0;
    z-index: 2;
  }

  .mag-section-cta .see-all-cta a,
  .mag-section-bird-cta .see-all-cta a,
  .mag-section-cat-cta .see-all-cta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #0066ff;
    font-size: 14px;
    font-weight: 400;
    border: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    line-height: 1.4;
  }

  .mag-section-cta .see-all-cta a svg,
  .mag-section-bird-cta .see-all-cta a svg,
  .mag-section-cat-cta .see-all-cta a svg {
    width: 20px;
    height: 20px;
    fill: #0066ff;
    vertical-align: middle;
  }
}