/* Silk Threads blog cards - extracted from the homepage Style & Inspiration section.
   Global element resets removed so this is safe to load on any page. */
.blog-section{
  padding: 52px 0 60px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  cursor: pointer;
}
.blog-inner{
  max-width: 100%;
  padding: 0 48px;
}
/* HEADER */
.blog-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
}
.blog-eyebrow{
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 6px;
}
.blog-title{
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 400;
  color: #111;
  line-height: 1;
}
.blog-head-right{
  display: flex;
  align-items: center;     /* vertical center arrows + link */
  gap: 12px;
  flex-wrap: nowrap;        /* FIX: never let arrows drop to a new line */
  justify-content: flex-end;
  margin-bottom: 0;         /* FIX: removed the 4px offset that misaligned it */
}
.blog-viewall{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #111;
  border-bottom: 1px solid #111;
  padding-bottom: 2px;
  transition: opacity .2s;
  white-space: nowrap;
  line-height: 1;
}
.blog-viewall:hover{ opacity:.5; }
/* ARROWS — solid black buttons, white chevron, NO hover effects, always visible */
.blog-arrow{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111 !important;
  border: 1px solid #111 !important;
  cursor: pointer;
  flex: 0 0 32px;           /* fixed box, never shrinks */
  transition: opacity .2s;
  padding: 0;
  line-height: 0;
}
/* Chevron drawn with pure CSS borders (no SVG) so no theme rule can hide it.
   White on black, shown permanently. */
.blog-arrow .chev{
  display: block;
  width: 7px;
  height: 7px;
  border-top: 1.7px solid #fff !important;
  border-right: 1.7px solid #fff !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  pointer-events: none;
}
.blog-prev .chev{ transform: translateX(1px) rotate(-135deg); }
/* points left  */
.blog-next .chev{ transform: translateX(-1px) rotate(45deg); }
/* points right */
/* disabled end-state: just dim the whole button, still black */
.blog-arrow.gone{
  opacity: .3;
  pointer-events: none;
}
/* SLIDER */
.blog-hs{ position: relative; }
.blog-port{ overflow: hidden; width: 100%; }
.blog-track{
  display: flex;
  gap: 20px;
  transition: transform .44s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
/* CARD */
.blog-card{
  flex: 0 0 calc(33.333% - 14px);
  width: calc(33.333% - 14px);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.blog-img{
  position: relative;
  width: 100%;
  padding-bottom: 68%;
  overflow: hidden;
  background: #e8e2d8;
  flex-shrink: 0;
}
.blog-img img{
  position: absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .55s ease;
}
.blog-card:hover .blog-img img{ transform: scale(1.05); }
.blog-tag{
  position: absolute;
  top: 14px;
  left: 14px;
  background: #111;
  color: #fff;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 10px;
  z-index: 2;
}
.blog-img-line{
  height: 2px;
  background: #111;
  width: 0;
  transition: width .4s ease;
  flex-shrink: 0;
}
.blog-card:hover .blog-img-line{ width: 100%; }
.blog-content{
  padding: 18px 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.blog-meta-cat{
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #111;
}
.blog-meta-dot{
  width:3px;height:3px;background:#999;border-radius:50%;flex-shrink:0;
}
.blog-meta-date{
  font-size: 8px;
  letter-spacing: 1px;
  color: #666;
  text-transform: uppercase;
}
.blog-headline{
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  margin-bottom: 10px;
  transition: opacity .2s;
}
.blog-card:hover .blog-headline{ opacity: .72; }
.blog-excerpt{
  font-size: 11.5px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 14px;
  flex: 1;
}
.blog-readmore{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #111;
  border-bottom: 1px solid #111;
  padding-bottom: 1px;
  align-self: flex-start;
  transition: opacity .2s, transform .2s;
}
.blog-card:hover .blog-readmore{ opacity: .72; }
.blog-readmore svg{ transition: transform .2s; }
.blog-readmore svg path{ stroke: currentColor !important; fill: none !important; }
.blog-card:hover .blog-readmore svg{ transform: translateX(3px); }
.blog-dots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 28px;
}
.blog-dot{
  width: 6px;height: 6px;border-radius: 50%;
  background: #ddd;border: none;cursor: pointer;padding: 0;
  transition: background .2s, transform .2s;
}
.blog-dot.active{ background: #111; transform: scale(1.3); }
/* TABLET */
@media(max-width:1100px){
  .blog-inner{ padding:0 32px; }
  .blog-title{ font-size:28px; }
  .blog-card{ flex: 0 0 calc(50% - 10px); width: calc(50% - 10px); }
}
/* MOBILE */
@media(max-width:600px){
  .blog-inner{ padding:0 16px; }
  .blog-track{ gap: 12px; }
  .blog-head{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .blog-head-right{ width: 100%; justify-content: flex-start; gap: 10px; }
  .blog-title{ font-size:26px; }
  .blog-arrow{ display: none !important; }
  .blog-card{ flex: 0 0 82%; width: 82%; }
  .blog-port{ overflow: visible; }
  .blog-hs{ overflow: hidden; }
  .blog-dots{ gap: 6px; margin-top: 22px; }
  .blog-dot{ width: 6px; height: 6px; }
}

/* Grid layout (blog archive + related posts) reusing the same card design */
.silk-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px;align-items:start}
.silk-blog-grid .blog-card{flex:0 0 auto;width:100%}
@media(max-width:1100px){.silk-blog-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px}.silk-blog-grid .blog-card{width:100%}}
@media(max-width:600px){.silk-blog-grid{grid-template-columns:1fr;gap:32px}.silk-blog-grid .blog-card{width:100%}}