/* ==========================================================================
   Cybelle Zambrini Decor — Post Slider Carousel
   Shared component used on: index.html, blog.html and every /blog/*.html post.
   Visual language: Smart Slider 3 "Post Carousel" template, adapted to the
   site's gold/cream editorial design system (Playfair Display + Jost).
   ========================================================================== */

.czd-carousel-section{position:relative;background:#FDFAF6}
.czd-carousel-wrap{position:relative;max-width:1200px;margin:0 auto;padding:0 56px}

.czd-carousel-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 12px;
  margin:0 -4px;
  scrollbar-width:none;
}
.czd-carousel-track::-webkit-scrollbar{display:none}

.czd-carousel-card{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 48px)/3);
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#F5EFE6;
  border:1px solid rgba(126,100,49,0.2);
  border-radius:2px;
  overflow:hidden;
  text-decoration:none;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1);
}
.czd-carousel-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px -16px rgba(201,169,110,.4)}

.czd-carousel-card-img{aspect-ratio:4/3;overflow:hidden;display:block}
.czd-carousel-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.czd-carousel-card:hover .czd-carousel-card-img img{transform:scale(1.06)}

.czd-carousel-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.czd-carousel-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.czd-carousel-cat{font-family:'Jost',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#7E6431;border:1px solid rgba(126,100,49,0.4);padding:4px 8px;border-radius:2px}
.czd-carousel-date{font-family:'Jost',sans-serif;font-size:.7rem;color:#6F5A40}
.czd-carousel-title{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:400;line-height:1.35;color:#2D2016;margin-bottom:10px}
.czd-carousel-card:hover .czd-carousel-title{color:#7E6431}
.czd-carousel-excerpt{font-family:'Jost',sans-serif;font-size:.85rem;font-weight:300;color:rgba(28,20,16,0.6);line-height:1.6;margin-bottom:16px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.czd-carousel-cta{font-family:'Jost',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#7E6431;display:inline-flex;align-items:center;gap:8px}
.czd-carousel-cta svg{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.czd-carousel-card:hover .czd-carousel-cta svg{transform:translateX(4px)}

/* Arrows */
.czd-carousel-arrow{
  position:absolute;top:38%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:9999px;
  background:#FDFAF6;border:1px solid rgba(126,100,49,0.45);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;transition:background .25s ease,border-color .25s ease,opacity .25s ease;
}
.czd-carousel-arrow:hover{background:#7E6431;border-color:#7E6431}
.czd-carousel-arrow:hover svg{stroke:#FDFAF6}
.czd-carousel-arrow svg{stroke:#7E6431;transition:stroke .25s ease}
.czd-carousel-arrow[disabled]{opacity:.3;cursor:default;pointer-events:none}
.czd-carousel-prev{left:0}
.czd-carousel-next{right:0}

/* Bullets */
.czd-carousel-bullets{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:28px}
.czd-carousel-bullet{
  width:28px;height:28px;border-radius:9999px;border:1px solid rgba(126,100,49,0.35);
  background:transparent;color:#6F5A40;font-family:'Jost',sans-serif;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s ease;
}
.czd-carousel-bullet.is-active{background:#7E6431;border-color:#7E6431;color:#FDFAF6}
.czd-carousel-bullet:hover:not(.is-active){border-color:#7E6431;color:#7E6431}

@media(max-width:1023px){
  .czd-carousel-card{flex:0 0 calc((100% - 24px)/2)}
}
@media(max-width:639px){
  .czd-carousel-wrap{padding:0 44px}
  .czd-carousel-card{flex:0 0 100%}
  .czd-carousel-arrow{width:38px;height:38px;top:34%}
}
@media(prefers-reduced-motion:reduce){
  .czd-carousel-track{scroll-behavior:auto}
  .czd-carousel-card,.czd-carousel-card-img img{transition:none!important}
}