/* Blog index uses a wider content container than the global 1200 page-width:
   Shopify constrains the heading + grid to a 1310px column (65px gutter each
   side at 1440), giving 305px cards. Widen only the blog section's page-width
   wrapper (:has scopes it to this section; global page-width unchanged, R-33). */
.page-width:has(> .bloglist__main) {
  max-width: 1550px;
  padding-left: 65px;
  padding-right: 65px;
}

@media (max-width: 959px) {
  .page-width:has(> .bloglist__main) {
    max-width: 100%;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }
}

.blog-breadcrumb {
  align-items: center;
  color: rgba(var(--color-text));
  display: inline-flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.blog-breadcrumb-separator {
  margin: 0 10px;
}

.blogslist__title {
  margin-bottom: 60px;
}

/* Blog index <h1> carries the .title4 class (30px), which out-specifies the
   h1 tag scale. Re-assert the reference page-header scale scoped to this
   heading (specificity beats the bare .title4 class rule): 26px up to 1023,
   42px from 1024, constant 1.333 line-height. Include letter-spacing (R-15). */
h1.blogslist__title.title4 {
  font-size: var(--ref-blog-title);
  line-height: 1.333;
  letter-spacing: normal;
  text-align: center;
}

.blogslist__list .simple-blog__image-box,
.blogslist__list .simple-blog__image {
  border-radius: 0;
}
.blogslist__list .simple-blog {
  background: transparent;
}

@media (max-width: 959px) {
  .blogslist__title {
    margin-bottom: 30px;
  }
}

.blogslist__list {
  display: grid;
  column-gap: 22px;
  row-gap: 50px;
  grid-template-columns: 1fr 1fr;
}

.blogslist__list .blogslist__item {
  grid-column: span 2;
}

@media (max-width: 959px) {
  .blogslist__list .blogslist__item {
    grid-column: span 2 !important;
  }
}

.blogslist__list--grid .blogslist__item {
  grid-column: span 1;
}

@media (min-width: 960px) {
  .blogslist__list--grid {
    grid-template-columns: repeat(var(--blog-list-columns, 2), 1fr);
  }
}

@media (min-width: 990px) {
  .blogslist__list.blogslist__list--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 30px;
  }
}

@media (max-width: 959px) {
  .blogslist__list.blogslist__list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 30px;
  }
  .blogslist__list.blogslist__list--grid .blogslist__item {
    grid-column: span 1 !important;
  }
}

.blog-item-grid-list .blogslist__item {
  grid-column: span 2;
}

.blog-item-grid-list .blogslist__item:nth-child(3n - 1),
.blog-item-grid-list .blogslist__item:nth-child(3n) {
  grid-column: span 1;
}

/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */

/* ===== R37 — blog index parity vs Shopify reference (@1920 content 1420/x250,
   @1440 1310/x65 via the 1550 max-width above). Card = image → title(20/500 brown,
   LEFT) → excerpt(2-line grey) → Read more(underlined, LEFT). No author/tag meta.
   Breadcrumb sits BELOW the "News" heading, centred, with a "›" divider. ===== */

/* Heading → breadcrumb → grid rhythm (ref: heading mb ~8, breadcrumb mb ~60). */
.page-width:has(> .bloglist__main) > .blogslist__title {
  margin-bottom: 8px;
}
.page-width:has(> .bloglist__main) > .breadcrumb.blog-crumb {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 0 60px;
}
.breadcrumb.blog-crumb .breadcrumb__divider {
  margin: 0 8px;
  opacity: 1;
  font-size: 0;
}
.breadcrumb.blog-crumb .breadcrumb__divider::after {
  content: "\203A"; /* › */
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
}

/* Card content: left-aligned (ref), even though the global blog-card setting is
   "center". Scope to the blog index so no other blog-card usage is affected. */
.blogslist__list .simple-blog__main,
.blogslist__list .simple-blog__main.simple-blog__main--center {
  text-align: left;
}
.blogslist__list .simple-blog__main.simple-blog__main--center .simple-blog__extra-info {
  justify-content: flex-start;
}

/* The blog index DOES carry the author/tag eyebrow on the reference
   ("ANGELIC ORGANICS KRISTIAN FRANKLIN" above each card title); the earlier
   "reference shows no author/tag meta" note was wrong. The data is present
   here too (author "Angelic Organics"), so it stays visible. It is hidden only
   inside article related lists, where the reference really has no eyebrow. */

/* Excerpt: 2 lines, grey, clamped (ref shows a 2-line summary). */
.blogslist__list .simple-blog__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
}

/* "Read more" underlined at rest (ref), not only on hover. */
.blogslist__list .simple-blog__readmore::after {
  width: 100%;
}