/* ===========================================================
   CAROUSEL + TOGGLE BAR — dark glass, model-inspired
   ===========================================================
   A contained panel: header (title + search + prev/next), then a
   snap-scrolling row of glass cards. Plus a segmented toggle bar
   for section navigation. Pure CSS look; behaviour in js/carousel.js.
   =========================================================== */

/* ---------- Segmented toggle bar (top nav) ---------- */
.toggle-bar{
  display: inline-flex; flex-wrap: wrap; gap: .25rem;
  padding: .35rem; margin: 0 auto 1.5rem; border-radius: 999px;
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,.12);
}
.toggle-btn{
  font-family: 'Barlow', sans-serif; font-size: .82rem; font-weight: 500;
  letter-spacing: .02em; color: rgba(255,255,255,.7);
  text-decoration: none; padding: .5rem 1.1rem; border-radius: 999px;
  border: none; background: transparent; cursor: pointer;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
}
.toggle-btn:hover{ color:#fff; }
.toggle-btn.is-active{
  color:#fff;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ---------- Carousel panel ---------- */
.carousel{ max-width: 1400px; margin: 0 auto 1.5rem; text-align: left; }
.carousel[hidden]{ display: none; }
.carousel-head{
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.carousel-title{
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 1.6rem; color:#fff; margin: 0; flex: 0 0 auto;
}
.carousel-search{
  flex: 1 1 220px; min-width: 160px;
  background: rgba(255,255,255,0.02);
  border: none; border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.14);
  color:#fff; font-family:'Barlow',sans-serif; font-size:.9rem;
  padding: .6rem 1.1rem;
}
.carousel-search::placeholder{ color: rgba(255,255,255,.45); }
.carousel-search:focus{ outline: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.32); }
.carousel-nav{ display: inline-flex; gap: .5rem; flex: 0 0 auto; }
.carousel-arrow{
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.02); border: none; color:#fff; font-size: 1.2rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.16);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.carousel-arrow:hover{ transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.34); }
.carousel-arrow:disabled{ opacity: .35; cursor: default; transform: none; }

/* ---------- Track + cards ---------- */
.carousel-track{
  display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: .4rem .2rem 1rem;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar{ display: none; }
.carousel-track .story-door{
  flex: 0 0 auto; width: 270px; min-height: 320px; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 1.25rem;
}
.carousel-track .story-door .door-count{ order: -1; margin: 0 0 auto; }
.carousel-track .story-door .door-label{ font-size: 1.5rem; line-height: 1.05; }
.carousel-empty{ color: rgba(255,255,255,.5); font-family:'Barlow',sans-serif; padding: 1rem .2rem; }

/* Illustrated cards — image fills the card, text reads over a dark gradient */
.story-door.has-img{ overflow: hidden; }
.story-door .door-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: .9;
}
.story-door.has-img::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.88) 100%);
}
.story-door.has-img > *{ position: relative; z-index: 2; }
.story-door.has-img:hover .door-img{ opacity: 1; transform: scale(1.03); transition: opacity .3s ease, transform .5s ease; }

@media (max-width: 600px){
  .carousel-track .story-door{ width: 78vw; min-height: 300px; }
  .carousel-title{ width: 100%; }
}

/* ---- Card polish (overrides print.css `.page-static a` leak) ----
   1) kill the underline that leaks onto card <a> links on page-static pages
   2) uniform card height so the row aligns and images are equal-sized
   3) clamp blurb to 2 lines so labels sit at a consistent height
   4) slightly larger heading                                          */
.carousel-track .story-door{
  height: 360px;
  min-height: 0;
  text-decoration: none;
}
.carousel-track .story-door .door-label{
  font-size: 1.75rem;
  text-decoration: none;
}
.carousel-track .story-door .door-blurb{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
@media (max-width: 600px){
  .carousel-track .story-door{ height: 340px; }
}