/* 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__c p + p {
  margin-top: 1.042vw;
}

.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%;
  /* the whole photo, at its own shape (client report: it was cut). It used to be a fixed
     38.646vw tall with object-fit: cover, which trimmed any photo that wasn't exactly that
     shape — the top and bottom here, the sides on phones. */
  height: auto;
}

.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);
}

/* The whole card opens the post (client request), not just "Read More": the link's
   click area is stretched over the card, so there is still one link per card for
   keyboards and screen readers. Hovering anywhere on the card lights up "Read More". */
.bl .bc {
  position: relative;
  cursor: pointer;
}

.bl .bc__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bl .bc:hover .bc__more {
  color: var(--c-green);
}

.bl .bc:hover .bc__more 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__c p + p {
    margin-top: 3.409vw;
  }

  .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.864vw;
    line-height: 150%;
  }

  .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;
  }

  /* inset by the same gutter as the heading and text around it (client report — the
     photo ran edge to edge while everything else sat 4.545vw in, so the card looked
     misaligned) */
  .lh__img {
    position: relative;
    width: auto;
    margin-inline: 4.545vw;
  }

  /* .lh__img img {
    height: 75.682vw;
  } — fixed phone height cut the photo's sides; it now keeps its own shape (see above) */

  .lh__tags {
    top: auto;
    bottom: 4.545vw;
    left: 3.409vw;
    max-width: calc(100% - 6.818vw);
  }

  .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;
  }
}

/* ---------- "The Tejori Edit" masthead ----------
   Client request, after a "The Fashion Edit" masthead: a small "The", the name large in the
   site's sans (Afacad), and "Edit" just as large in a serif (Playfair Display, linked from
   Google Fonts in storefront/blog/index.blade.php), stacked and left-aligned. Declared after
   the 768px rule above so it wins at every width. */

.bi__mast {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2.604vw;
  font-size: inherit;
  line-height: 1;
  color: #1f1f1f;
}

.bi__the {
  margin-left: .26vw;
  font-family: var(--ff);
  font-size: 1.563vw;
  font-weight: 600;
  line-height: 1.2;
}

.bi__name {
  font-family: var(--ff);
  font-size: 6.25vw;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.02em;
}

.bi__edit {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 6.25vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
}

@media (max-width: 768px) {
  .bi__mast {
    margin-bottom: 7.955vw;
    line-height: 1;
  }

  .bi__the {
    margin-left: .909vw;
    font-size: 4.545vw;
  }

  .bi__name,
  .bi__edit {
    font-size: 15.909vw;
  }
}

/* the green logo in place of the typed "Tejori" (client request) — sized to sit like the
   word did, between the small "The" and the serif "Edit" */
.bi__logo {
  display: block;
  width: auto;
  height: 5.208vw;
  margin: .521vw 0 .26vw;
}

@media (max-width: 768px) {
  .bi__logo {
    height: 13.636vw;
    margin: 1.364vw 0 .909vw;
  }
}

/* "The" and "Edit" in the About page's script (client request — "like About": .ab__sub in
   about.css, Allura in the brand green). "The" at About's size above the logo; "Edit" a
   little larger below it. Replaces the Afacad "The" and Playfair "Edit" above. */
.bi__the,
.bi__edit {
  font-family: var(--ff-script);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--c-green);
}

.bi__the {
  margin: 0;
  font-size: 2.659vw;
  line-height: 1;
}

.bi__edit {
  margin-top: -.26vw;
  font-size: 4.167vw;
  line-height: 1;
}

@media (max-width: 768px) {
  .bi__the {
    margin-left: 0;
    font-size: 8.701vw;
  }

  .bi__edit {
    font-size: 12.5vw;
  }
}

/* ---------- "In the press" ----------
   Client request: links to outside coverage, under the blog list. The section and heading
   are .bl/.bl__h and the link is .bc__more, so only the cards are new. */
.bp__g {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5vw;
}

.bp__i {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.083vw;
  background: var(--c-cream);
  border-left: .26vw solid var(--c-green);
}

.bp__o {
  margin: 0 0 .781vw;
  font-size: .938vw;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-green);
}

.bp__t {
  margin: 0;
  font-size: 1.563vw;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

.bp__i .bc__more {
  margin-top: auto;
  padding-top: 1.302vw;
}

.bp__i .bc__date + .bc__more {
  padding-top: 0;
}

@media (max-width: 767px) {
  .bp__g {
    grid-template-columns: 1fr;
    gap: 4.545vw;
  }

  .bp__i {
    padding: 5.682vw;
    border-left-width: 1.136vw;
  }

  .bp__o {
    margin-bottom: 2.273vw;
    font-size: 3.182vw;
  }

  .bp__t {
    font-size: 4.773vw;
  }

  .bp__i .bc__more {
    padding-top: 4.545vw;
  }
}