/* A single photo row; all original businesses remain accessible without JavaScript. */
#usecases { overflow:hidden; padding-bottom:64px; }
#usecases .bc-header { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
#usecases .bc-header .s-title { margin-bottom:0; }
#usecases .bc-intro { margin:20px 0 0; font-size:16px; line-height:1.6; color:var(--muted); }
#usecases .bc-controls { display:none; align-items:center; gap:10px; padding-bottom:4px; flex-shrink:0; }
#usecases.bc-ready .bc-controls { display:flex; }
#usecases .bc-controls button, #usecases .bc-close { min-height:44px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--white); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:13px; }
#usecases .bc-toggle { padding:10px 16px; }
#usecases .bc-arrow { width:44px; padding:0; }
#usecases button svg { width:18px; height:18px; display:block; stroke-width:1.7; }
#usecases [hidden] { display:none !important; }
#usecases .bc-hint { color:var(--muted); font-size:12px; line-height:1.6; margin:24px auto 16px; }
#usecases .bc-viewport { overflow-x:auto; scrollbar-width:thin; padding:2px 0 12px; }
#usecases.bc-ready .bc-viewport { overflow:hidden; touch-action:pan-y; cursor:grab; }
#usecases .bc-track { display:flex; gap:18px; width:max-content; padding:0 max(24px,calc((100vw - 1180px)/2)); }
#usecases.bc-ready .bc-track { will-change:transform; }
#usecases .bc-card { width:320px; flex:0 0 320px; border:1px solid var(--border); border-radius:16px; background:var(--card); overflow:hidden; display:flex; flex-direction:column; }
#usecases .bc-photo { width:100%; height:200px; object-fit:cover; object-position:center 25%; display:block; pointer-events:none; user-select:none; }
#usecases .bc-copy { padding:20px; display:flex; flex-direction:column; flex:1; }
#usecases .bc-copy h3 { font-size:18px; font-weight:700; line-height:1.35; letter-spacing:-.25px; margin:0 0 10px; }
#usecases .bc-summary { font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 20px; }
#usecases .bc-details { display:none; align-items:center; gap:8px; align-self:flex-start; min-height:44px; margin-top:auto; padding:8px 0; border:0; background:transparent; color:var(--orange); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
#usecases.bc-ready .bc-details { display:flex; }
#usecases.bc-ready .bc-fallback { display:none; }
#usecases .bc-fallback summary { cursor:pointer; color:var(--orange); padding:12px 0; }
#usecases .bc-full { font-size:14px; line-height:1.6; color:var(--muted); }
#usecases .bc-details svg { width:16px; height:16px; }
#usecases button:focus-visible, #usecases .bc-viewport:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
#usecases .bc-card:focus-within { border-color:var(--orange); }
#usecases .bc-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#usecases .bc-dialog { padding:0; width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); margin:auto; border:1px solid var(--border); border-radius:20px; background:var(--card); color:var(--white); overflow:auto; box-shadow:0 24px 80px rgba(0,0,0,.4); }
#usecases .bc-dialog::backdrop { background:rgba(0,0,0,.75); }
#usecases .bc-dialog-top { display:flex; justify-content:flex-end; padding:12px; }
#usecases .bc-close { padding:8px 14px; }
#usecases .bc-detail-photo { display:block; width:100%; height:240px; object-fit:cover; object-position:center 25%; }
#usecases .bc-detail-copy { padding:24px; }
#usecases .bc-detail-copy h3 { margin:0 0 14px; font-size:24px; line-height:1.3; }
#usecases .bc-detail-text { margin:0; color:var(--muted); font-size:15px; line-height:1.75; }
#usecases:where([data-theme="light"] *) .bc-details { color:var(--orange-ink); }
@media(max-width:900px) {
  #usecases .bc-header { display:block; }
  #usecases .bc-controls { margin-top:24px; }
}
@media(max-width:600px) {
  #usecases { padding-bottom:44px; }
  #usecases .bc-card { width:280px; flex-basis:280px; }
  #usecases .bc-photo { height:175px; }
  #usecases .bc-track { padding-inline:20px; gap:14px; }
  #usecases .bc-copy { padding:18px; }
  #usecases .bc-intro { font-size:15px; }
  #usecases .bc-hint { margin-top:16px; }
  #usecases .bc-detail-photo { height:180px; }
  #usecases .bc-detail-copy { padding:20px; }
}