/* Tejori — blog listing (.bi intro, .lh hero, .bl row of cards).
   .bi__soc, .lh and .tg are shared with the article pages. */

/* ---------- intro ---------- */

.bi {
  padding: 3.125vw 5.208vw 4.167vw;
}

.bi__h {
  margin: 0 0 1.667vw;
  font-size: 2.5vw;
  font-weight: 700;
  color: #000;
}

.bi__c {
  font-size: 1.458vw;
  line-height: 150%;
  color: #000;
}

.bi__c p {
  margin: 0;
}

.bi__sig {
  max-width: 8.854vw;
  margin-top: 2.604vw;
  font-family: var(--ff-script);
  font-size: 1.94vw;
  line-height: 1.94vw;
  color: var(--c-ink);
}

/* the row is pulled back up so it sits beside the signature */
.bi__soc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.667vw;
  margin-top: -2.24vw;
  line-height: 1;
}

/* inline, so each icon keeps the text line's own box — same as the original */
.bi__soc svg {
  display: inline;
  width: auto;
  max-width: 1.927vw;
  transition: .3s;
}

.bi__soc a:hover svg {
  opacity: .6;
}

/* ---------- hero (listing + article pages) ---------- */

.lh {
  overflow: hidden;
  background: #fff;
}

.lh__p {
  padding-inline: 5.208vw;
}

.lh__lbl {
  margin: 1.302vw 0 2.865vw;
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 2.083vw;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
}

.lh__w {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.lh__c {
  flex: 1 1 0;
}

.lh__d {
  max-width: 28.646vw;
  margin: 0 0 2.16vw;
  padding-right: .781vw;
  font-size: 1.146vw;
  line-height: 1.563vw;
  letter-spacing: 0;
  color: #333;
}

.lh__btn {
  position: relative;
  display: block;
  max-width: 10.417vw;
  margin-bottom: 3.125vw;
  padding: .365vw .521vw;
  font-size: 1.042vw;
  font-weight: 700;
  letter-spacing: .052vw;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--c-green);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

/* black wipes across from the left on hover */
.lh__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 0;
  background: #000;
  transition: width .4s;
}

.lh__btn:hover::before {
  width: 100%;
}

.lh__btn__in {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .925vw;
  letter-spacing: 0;
}

.lh__btn svg {
  width: 2.187vw;
  height: 1.458vw;
}

.lh__img {
  width: 61.51vw;
  box-shadow: 0 .781vw 2.083vw rgba(0, 0, 0, .12);
}

.lh__img img {
  display: block;
  width: 100%;
  height: 38.646vw;
  object-fit: cover;
}

.lh__tags {
  position: absolute;
  top: 3.125vw;
  left: 0;
  display: flex;
  flex-direction: column;
  row-gap: .521vw;
}

/* one line only — a long tagline is cut, never wrapped */
.tg {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: max-content;
  margin: 0;
  padding: .469vw 1.094vw .469vw 0;
  font-size: 2.763vw;
  line-height: 1;
  letter-spacing: .414vw;
  text-transform: uppercase;
  color: #000;
  background: #fff;
}

.tg--b {
  font-weight: 600;
}

@media (min-width: 768px) {
  .lh__tags {
    max-width: 43.563vw;
  }
}

/* ---------- card row ---------- */

.bl {
  max-width: 89.583vw;
  margin-inline: auto;
  padding: 3.125vw 0;
}

.bl__h {
  margin: 0 0 2.865vw;
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 2.083vw;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
}

/* the slides carry their own side padding, so the row hangs over both edges
   and the cards still line up with the section */
.bl__c {
  position: relative;
  margin-inline: -1.927vw;
}

/* white fade over the right edge, hinting there is more to scroll */
.bl__c::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 6.25vw;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
}

.bl__row {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bl__row::-webkit-scrollbar {
  display: none;
}

.bl__t {
  display: flex;
}

/* --sw is set in site.js so a slide is a whole number of pixels wide */
.bl__s {
  flex: 0 0 var(--sw, 25%);
  padding-inline: 1.927vw;
}

.bc__top {
  position: relative;
  height: 30.7rem;
}

.bc__top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bc__tags {
  position: absolute;
  bottom: 1.146vw;
  left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .26vw;
  width: calc(100% - 1.354vw);
}

.bc__tg {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: max-content;
  padding: 0 .521vw;
  font-size: 1.153vw;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .173vw;
  text-transform: uppercase;
  color: #000;
  background: #fff;
}

.bc__tg--b {
  font-weight: 600;
}

.bc__date {
  margin: 0;
  padding-block: 1.302vw;
  font-size: .854vw;
  font-weight: 600;
  line-height: 1;
  color: #000;
}

.bc__more {
  display: flex;
  align-items: center;
  gap: .729vw;
  font-size: 1.042vw;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: #000;
}

/* the arrow keeps its own 7x13 size — the original's rule for it never matched */
.bc__more:hover {
  color: var(--c-green);
}

.bc__more:hover svg path {
  stroke: var(--c-green);
}

@media (max-width: 989px) {
  .bc__top {
    height: 21.9rem;
  }
}

/* the intro was written against 768, everything else against 767 */
@media (max-width: 768px) {
  .bi {
    padding: 9.091vw 4.545vw;
  }

  .bi__h {
    margin-bottom: 6.364vw;
    font-size: 7.273vw;
    line-height: 5.227vw;
  }

  .bi__c {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .bi__sig {
    max-width: 29.545vw;
    margin-top: 6.364vw;
    font-size: 6.348vw;
    line-height: 6.348vw;
  }

  .bi__soc {
    justify-content: flex-end;
    gap: 5.455vw;
    margin-top: -11.364vw;
  }

  .bi__soc svg {
    max-width: 6.818vw;
  }
}

@media (max-width: 767px) {
  .lh__p {
    padding-inline: 0;
  }

  .lh__lbl {
    margin: 0 0 4.545vw;
    padding-inline: 4.545vw;
    font-size: 8.182vw;
    line-height: 5.227vw;
  }

  .lh__w {
    flex-wrap: wrap;
  }

  .lh__c {
    order: 1;
    padding: 6.818vw 4.545vw;
  }

  .lh__d {
    max-width: 100%;
    margin-bottom: 6.818vw;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .lh__btn {
    max-width: 100%;
    margin-bottom: 0;
    padding: 2vw;
    font-size: 4vw;
  }

  .lh__btn__in {
    justify-content: center;
    gap: 4vw;
  }

  .lh__btn svg {
    width: 8.759vw;
    height: 6.58vw;
  }

  .lh__img {
    position: relative;
    width: 100%;
  }

  .lh__img img {
    height: 75.682vw;
  }

  .lh__tags {
    top: auto;
    bottom: 5vw;
    left: 5vw;
  }

  .tg {
    padding: 1.023vw 3.409vw 1.023vw 1.818vw;
    font-size: 5vw;
    letter-spacing: .7vw;
  }

  .bl {
    max-width: 100%;
    padding: 4.545vw 4.545vw 9.091vw;
  }

  .bl__h {
    margin-bottom: 9.091vw;
    font-size: 8.182vw;
    line-height: 5.227vw;
  }

  .bl__c::after {
    width: 27.273vw;
  }

  .bl__s {
    flex-basis: var(--sw, 100%);
  }

  .bc__top {
    height: 71.023vw;
  }

  .bc__tags {
    bottom: 5vw;
    width: calc(100% - 4.545vw);
  }

  .bc__tg {
    font-size: 5vw;
    letter-spacing: .7vw;
  }

  .bc__date {
    padding-block: 5.682vw;
    font-size: 3.728vw;
    line-height: 3.636vw;
  }

  .bc__more {
    gap: 2.273vw;
    font-size: 4.545vw;
  }
}