/* =========================================================
   HairX — article index page
   ========================================================= */

.hx-articles__hero{
  background:linear-gradient(135deg,var(--hx-white) 0%,#f7f3ed 55%,var(--hx-paper) 100%);
  padding:clamp(64px,9vw,112px) 0 clamp(48px,7vw,80px);
  position:relative;overflow:hidden;
}
.hx-articles__hero h1{
  font-size:clamp(2.8rem,6vw,5.4rem);margin:0 0 20px;max-width:16ch;
}
.hx-articles__lead{
  max-width:600px;font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:rgba(79,78,63,.74);margin:0;
}

.hx-articles__body{padding:clamp(48px,7vw,86px) 0 clamp(64px,9vw,110px)}
.hx-articles__block + .hx-articles__block{margin-top:clamp(56px,8vw,96px)}

.hx-articles__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:18px;margin-bottom:30px;border-bottom:1px solid var(--hx-line);
}
.hx-articles__head h2{
  font-size:clamp(1.6rem,2.6vw,2.3rem);margin:0;letter-spacing:-.03em;
}
.hx-articles__count{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--hx-olive);font-weight:700;white-space:nowrap;
}
.hx-articles__note{
  margin:-14px 0 26px;font-size:.92rem;color:rgba(79,78,63,.62);max-width:520px;
}

/* ---------- published list ---------- */
.hx-articles__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}

.hx-article__link{
  display:block;padding:26px 30px;
  background:#fff;border:1px solid var(--hx-line);border-radius:var(--hx-radius-sm);
  text-decoration:none;
  transition:transform .35s var(--hx-ease),box-shadow .35s var(--hx-ease),border-color .35s;
}
.hx-article__link:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(79,78,63,.09);
  border-color:rgba(111,112,87,.35);
}
.hx-article__meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(79,78,63,.55);margin-bottom:12px;
}
.hx-article__cat{
  background:var(--hx-paper);color:var(--hx-ink);
  padding:4px 11px;border-radius:999px;font-weight:650;letter-spacing:.05em;
}
.hx-article__title{
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.24;letter-spacing:-.02em;
  margin:0 0 10px;color:var(--hx-ink);
}
.hx-article__link:hover .hx-article__title{color:var(--hx-olive)}
.hx-article__excerpt{
  margin:0;color:rgba(79,78,63,.72);font-size:.97rem;line-height:1.6;max-width:70ch;
}
.hx-article__reviewer{
  display:inline-block;margin-top:14px;font-size:.78rem;
  color:var(--hx-olive);font-weight:600;
}
.hx-article__reviewer::before{content:"✓ ";opacity:.7}

/* ---------- upcoming ---------- */
.hx-articles__block--upcoming{
  background:var(--hx-soft);border:1px solid var(--hx-line);
  border-radius:var(--hx-radius);padding:clamp(28px,4vw,44px);
}
.hx-articles__block--upcoming .hx-articles__head{border-bottom-color:rgba(79,78,63,.14)}
.hx-articles__upcoming{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hx-articles__upcoming li{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(79,78,63,.09);
}
.hx-articles__upcoming li:last-child{border-bottom:0}
.hx-articles__upcoming time{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--hx-olive);font-weight:700;
}
.hx-articles__upcoming span{color:rgba(79,78,63,.78);line-height:1.45}

.hx-articles__empty{color:rgba(79,78,63,.6);padding:40px 0}

/* ---------- RTL ---------- */
html[dir="rtl"] .hx-articles__upcoming li{grid-template-columns:78px minmax(0,1fr)}
html[dir="rtl"] .hx-article__reviewer::before{content:"✓ "}

@media (max-width:640px){
  .hx-article__link{padding:20px 20px}
  .hx-articles__head{flex-direction:column;align-items:flex-start;gap:6px}
  .hx-articles__upcoming li{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .hx-articles__block--upcoming{padding:22px 18px;border-radius:20px}
}