/* =========================================================
   v0.1.91 Blog layout / featured image / sidebar widgets
========================================================= */
.hair-blog-page{
  padding:72px 0 100px;
  background:linear-gradient(180deg,#fff 0%,#fbfefd 100%);
}
.hair-blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:54px;
  align-items:start;
}
.hair-blog-main{
  max-width:none;
  min-width:0;
}
.hair-blog-header{
  margin-bottom:30px;
}
.hair-blog-header h1{
  margin:14px 0 0;
  color:var(--text);
  font-size:38px;
  line-height:1.55;
  letter-spacing:.02em;
}
.hair-blog-meta,
.hair-blog-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  color:var(--muted);
  font-size:13px;
}
.hair-blog-meta__categories a,
.hair-blog-card__meta a{
  color:var(--mint-dark);
}
.hair-blog-featured{
  margin:0 0 42px;
  overflow:hidden;
  border-radius:14px;
  background:var(--mint-pale);
  box-shadow:0 10px 28px rgba(38,95,81,.08);
}
.hair-blog-featured img{
  width:100%;
  height:auto;
}
.hair-blog-content{
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--text);
  font-size:16px;
  line-height:2.05;
}
.hair-blog-content p{
  margin:0 0 1.6em;
}
.hair-blog-content a{
  color:var(--mint-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.hair-blog-content ul,
.hair-blog-content ol{
  margin:0 0 1.8em;
  padding-left:1.6em;
}
.hair-blog-tags{
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--muted);
}
.hair-blog-tags a{
  display:inline-block;
  margin:4px 5px 4px 0;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--mint-dark);
  background:#fff;
}

/* Sidebar */
.hair-blog-sidebar{
  position:sticky;
  top:108px;
  display:grid;
  gap:22px;
}
.hair-blog-widget{
  padding:24px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 26px rgba(37,93,79,.055);
}
.hair-blog-widget__title{
  margin:0 0 18px;
  padding:0 0 10px;
  border-bottom:1px solid var(--border);
  color:var(--mint-dark);
  font-size:20px;
  line-height:1.5;
}
.hair-blog-widget ul{
  list-style:none;
  margin:0;
  padding:0;
}
.hair-blog-widget li{
  margin:0;
  border-bottom:1px solid #edf3f1;
}
.hair-blog-widget li:last-child{border-bottom:0}
.hair-blog-widget li a{
  display:inline-block;
  padding:10px 0;
  color:var(--text);
}
.hair-blog-widget li a:hover{color:var(--mint-dark)}
.hair-blog-widget__categories .children{
  padding-left:14px;
}
.hair-blog-widget__recent{
  display:grid;
  gap:14px;
}
.hair-blog-widget__recent-item{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  align-items:center;
}
.hair-blog-widget__recent-thumb{
  display:block;
  overflow:hidden;
  aspect-ratio:1/1;
  border-radius:8px;
  background:var(--mint-pale);
}
.hair-blog-widget__recent-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hair-blog-widget__recent-placeholder{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--mint-pale),#fff);
}
.hair-blog-widget__recent-copy{
  min-width:0;
}
.hair-blog-widget__recent-title{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:var(--text);
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:14px;
  line-height:1.6;
}
.hair-blog-widget__recent-copy time{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
}
.hair-blog-widget--cta{
  border-color:rgba(60,165,139,.35);
  background:linear-gradient(150deg,var(--mint-pale),#fff);
  text-align:center;
}
.hair-blog-widget__cta-small{
  margin:0 0 7px;
  color:var(--mint-dark);
  font-size:12px;
}
.hair-blog-widget__cta-title{
  margin:0 0 18px;
  color:var(--text);
  font-size:22px;
  line-height:1.6;
}
.hair-blog-widget__cta-actions{
  display:grid;
  gap:9px;
}
.hair-blog-widget__cta-line,
.hair-blog-widget__cta-web{
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:700;
}
.hair-blog-widget__cta-line{
  background:#06c755;
  color:#fff;
}
.hair-blog-widget__cta-web{
  border:1px solid var(--mint-dark);
  background:#fff;
  color:var(--mint-dark);
}

/* Blog / category list */
.hair-blog-archive-header{
  margin:0 0 46px;
  text-align:center;
}
.hair-blog-archive-header__eyebrow{
  margin:0 0 10px;
  color:var(--mint-dark);
  font-size:14px;
  letter-spacing:.12em;
}
.hair-blog-archive-header h1{
  margin:0;
  font-size:42px;
}
.hair-blog-archive-header__description{
  margin:14px auto 0;
  max-width:700px;
  color:var(--text-sub);
}
.hair-blog-list{
  display:grid;
  gap:26px;
  min-width:0;
}
.hair-blog-card{
  display:grid;
  grid-template-columns:260px 1fr;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 28px rgba(37,93,79,.05);
}
.hair-blog-card__thumb{
  display:block;
  min-height:190px;
  background:var(--mint-pale);
}
.hair-blog-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hair-blog-card__placeholder{
  display:flex;
  width:100%;
  height:100%;
  min-height:190px;
  align-items:center;
  justify-content:center;
  color:var(--mint-dark);
  font-family:"Noto Serif JP","Yu Mincho",serif;
  background:linear-gradient(135deg,var(--mint-pale),#fff);
}
.hair-blog-card__body{
  padding:25px 28px;
}
.hair-blog-card h2{
  margin:10px 0 10px;
  font-size:23px;
  line-height:1.55;
}
.hair-blog-card__excerpt{
  color:var(--text-sub);
  font-size:14px;
  line-height:1.8;
}
.hair-blog-card__excerpt p{margin:0}
.hair-blog-card__more{
  display:inline-block;
  margin-top:14px;
  color:var(--mint-dark);
  font-weight:700;
  font-size:13px;
}
.hair-blog-pagination{
  margin-top:18px;
}
.hair-blog-pagination .nav-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.hair-blog-pagination .page-numbers{
  display:grid;
  min-width:38px;
  height:38px;
  padding:0 9px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
}
.hair-blog-pagination .current{
  border-color:var(--mint-dark);
  background:var(--mint-dark);
  color:#fff;
}

@media(max-width:980px){
  .hair-blog-layout{
    grid-template-columns:minmax(0,1fr) 260px;
    gap:34px;
  }
  .hair-blog-card{
    grid-template-columns:220px 1fr;
  }
}

@media(max-width:767px){
  .hair-blog-page{
    padding:38px 0 74px;
  }
  .hair-blog-layout{
    display:block;
  }
  .hair-blog-header{
    margin-bottom:22px;
  }
  .hair-blog-header h1{
    margin-top:10px;
    font-size:28px;
    line-height:1.55;
  }
  .hair-blog-meta,
  .hair-blog-card__meta{
    font-size:11px;
  }
  .hair-blog-featured{
    margin-bottom:30px;
    border-radius:10px;
  }
  .hair-blog-content{
    font-size:14px;
    line-height:2;
  }
  .hair-blog-sidebar{
    position:static;
    margin-top:52px;
    gap:18px;
  }
  .hair-blog-widget{
    padding:20px;
  }
  .hair-blog-widget__title{
    font-size:18px;
  }
  .hair-blog-archive-header{
    margin-bottom:30px;
  }
  .hair-blog-archive-header h1{
    font-size:32px;
  }
  .hair-blog-list{
    gap:20px;
  }
  .hair-blog-card{
    display:block;
  }
  .hair-blog-card__thumb{
    aspect-ratio:16/9;
    min-height:0;
  }
  .hair-blog-card__placeholder{
    min-height:0;
    aspect-ratio:16/9;
  }
  .hair-blog-card__body{
    padding:20px;
  }
  .hair-blog-card h2{
    font-size:20px;
  }
}