/* =====================================================================
   Home page: conditions carousel ("We're condition agnostic").
   Tall rounded photo cards with the condition name underneath, a peek of
   the next card at the right edge, dots and round prev/next buttons.
   Native horizontal scrolling with snap, so touch, trackpad and keyboard
   all work; conditions-carousel.js only adds the dots and buttons.
   ===================================================================== */
.cx-band{overflow-x:clip}
.cx{--cx-gap:clamp(16px,2.2vw,28px);margin-top:clamp(28px,4vw,48px)}

/* the rail runs past the right edge of the content column to the screen edge */
.cx-track{
  list-style:none;margin:0;padding:4px 0 6px;
  display:flex;gap:var(--cx-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  margin-right:calc(50% - 50vw);padding-right:max(16px,calc(50vw - 50%));
}
.cx-track::-webkit-scrollbar{display:none}
.cx-track:focus-visible{outline:2px solid var(--cyan);outline-offset:6px;border-radius:12px}

/* three cards and a peek on desktop */
.cx-card{
  flex:0 0 calc((100% - 2 * var(--cx-gap)) / 3.25);
  min-width:0;scroll-snap-align:start;
}
.cx-photo{
  display:block;aspect-ratio:3/4;border-radius:clamp(20px,2.2vw,30px);overflow:hidden;
  background:var(--bg-soft);
}
.cx-photo img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
@media (hover:hover){ .cx-card:hover .cx-photo img{transform:scale(1.035)} }
.cx-name{
  margin:clamp(14px,1.6vw,22px) 0 4px;
  font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.15;letter-spacing:-.03em;font-weight:800;
}
.cx-sub{margin:0;font-size:.95rem;color:var(--ink-muted)}
.cx-any .cx-name{color:var(--cyan-deep)}
[data-theme="dark"] .cx-any .cx-name{color:var(--cyan)}

/* dots centred, arrows to the right */
.cx-foot{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  margin-top:clamp(22px,3vw,36px);
}
.cx-dots{grid-column:2;display:flex;gap:8px;align-items:center}
.cx-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--border-strong);
  transition:width .3s var(--ease,ease),background .3s var(--ease,ease);
}
.cx-dot[aria-selected="true"]{width:26px;background:var(--cyan-deep)}
[data-theme="dark"] .cx-dot[aria-selected="true"]{background:var(--cyan)}
.cx-arrows{grid-column:3;justify-self:end;display:flex;gap:12px}
.cx-btn{
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--bg-soft);color:var(--ink);
  transition:background .2s var(--ease,ease),opacity .2s var(--ease,ease),transform .2s var(--ease,ease);
}
[data-theme="light"] .cx-btn{background:#EEF1F4}
[data-theme="dark"] .cx-btn{background:#1A1F27}
.cx-btn:hover{background:var(--cyan);color:#07090C}
.cx-btn:active{transform:scale(.95)}
.cx-btn:disabled{opacity:.4;cursor:default}
.cx-btn:disabled:hover{background:var(--bg-soft);color:var(--ink)}
[data-theme="light"] .cx-btn:disabled:hover{background:#EEF1F4}
[data-theme="dark"] .cx-btn:disabled:hover{background:#1A1F27}

@media (max-width:900px){
  .cx-card{flex-basis:calc((100% - var(--cx-gap)) / 2.2)}
}
/* phones: one card and a clear peek; swipe, dots underneath, no arrows */
@media (max-width:640px){
  .cx-card{flex-basis:78%}
  .cx-foot{grid-template-columns:1fr;justify-items:center}
  .cx-dots{grid-column:1}
  .cx-arrows{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cx-track{scroll-behavior:auto}
  .cx-photo img{transition:none}
}