/* Cloudberry Garden — home hero carousel */
.cb-carousel { position: relative; margin: 0 0 26px; border-radius: 26px; outline: 0; }
.cb-carousel:focus-visible { box-shadow: 0 0 0 3px rgba(155,127,201,.35); }
.cb-carousel__viewport { overflow: hidden; border-radius: 26px; }
.cb-carousel__track { display: flex; transition: transform .7s cubic-bezier(.22,.8,.24,1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .cb-carousel__track { transition: none; } }
.cb-slide { position: relative; flex: 0 0 100%; min-width: 0; min-height: clamp(360px, 38vw, 440px); display: flex; align-items: center; }
.cb-slide--welcome .cb-hero { width: 100%; padding: 26px clamp(12px, 3vw, 40px) 54px; }

/* story slides */
.cb-slide--story { --slide-shade: color-mix(in oklab, var(--slide-tint, #1d1628) 38%, #1a1326); color: #fff; background: var(--slide-shade); overflow: hidden; border-radius: 26px; }
.cb-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.03); }
.cb-slide__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, color-mix(in srgb, var(--slide-shade) 94%, transparent) 0%, color-mix(in srgb, var(--slide-shade) 78%, transparent) 46%, color-mix(in srgb, var(--slide-shade) 10%, transparent) 82%),
  linear-gradient(0deg, rgba(0,0,0,.35), transparent 45%); }
.cb-slide__inner { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.4fr .6fr; gap: 28px; align-items: center; padding: 34px clamp(18px, 4vw, 56px) 58px; }
.cb-slide__eyebrow { margin: 0 0 10px; font: 600 13px/1.4 var(--ff-note); letter-spacing: .06em; color: #F6C9DC; }
.cb-slide__chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.cb-slide__chip { padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); font: 700 11.5px/1.5 var(--ff-note); color: #fff; backdrop-filter: blur(6px); }
.cb-slide__title { margin: 0 0 6px; font: 600 clamp(2rem, 4.2vw, 3.3rem)/1.06 var(--ff-heading); }
.cb-slide__title a { color: #fff; text-decoration: none; text-shadow: 0 6px 24px rgba(0,0,0,.35); }
.cb-slide__author { margin: 0 0 14px; font: italic 400 15px var(--ff-heading); color: rgba(255,255,255,.82); }
.cb-slide__blurb { margin: 0 0 22px; max-width: 560px; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-slide--story .cb-slide__ghost { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4) !important; backdrop-filter: blur(6px); }
.cb-slide--story .cb-slide__ghost:hover { background: rgba(255,255,255,.24) !important; }
.cb-slide__cover { justify-self: center; display: block; width: min(210px, 100%); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 28px 50px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.18); transform: rotate(2deg); transition: transform .3s; }
.cb-slide__cover:hover { transform: rotate(0) translateY(-3px); }
.cb-slide__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* controls */
.cb-carousel__arrow { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; border: 1px solid var(--cb-border, #ECDFF4); background: rgba(255,255,255,.88); color: var(--cb-accent, #7E63B4); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(94,74,134,.6); backdrop-filter: blur(6px); transition: .2s; opacity: 0; }
.cb-carousel:hover .cb-carousel__arrow, .cb-carousel:focus-within .cb-carousel__arrow { opacity: 1; }
.cb-carousel__arrow:hover { background: #fff; transform: scale(1.06); }
.cb-carousel__arrow--prev { left: 14px; } .cb-carousel__arrow--next { right: 14px; }
.cb-carousel__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.cb-carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(155,127,201,.35); cursor: pointer; transition: width .3s, background .3s; }
.cb-carousel__dot.is-active { width: 26px; background: linear-gradient(135deg, #AE8DDC, #8C6AC2); }
.cb-carousel__dot:focus-visible { outline: 2px solid #9B7FC9; outline-offset: 2px; }
:root:not([data-mode=light]) .cb-carousel__arrow { background: rgba(42,33,64,.85); border-color: #41365A; color: #E2D2F5; }

@media (max-width: 767px) {
  .cb-carousel__arrow { display: none; }
  .cb-slide { min-height: 0; }
  .cb-slide__inner { grid-template-columns: 1fr; text-align: center; padding: 26px 18px 52px; }
  .cb-slide__cover { order: -1; width: 128px; }
  .cb-slide__chips, .cb-slide--story .cb-hero__actions { justify-content: center; }
  .cb-slide__blurb { margin-inline: auto; }
  .cb-slide__shade { background: linear-gradient(0deg, color-mix(in srgb, var(--slide-shade) 96%, transparent) 36%, color-mix(in srgb, var(--slide-shade) 62%, transparent)); }
}
.cb-carousel__arrow { display: grid; place-items: center; padding: 0 0 3px !important; min-height: 0 !important; font-family: system-ui, sans-serif; }
.cb-slide__title { margin-top: 0 !important; padding: 0 !important; }
.cb-slide__chips + .cb-slide__title { margin-top: 4px !important; }
@media (max-width: 767px) { .cb-carousel__arrow { display: none; } }