/* Home offerings carousel. Uses the tokens from site.css. */
.oc{--oc-dur:7000ms;position:relative;min-width:0}
.oc-viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:var(--radius);overscroll-behavior-x:contain}
.oc-viewport::-webkit-scrollbar{display:none}
.oc-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;background:var(--cloud);color:var(--basalt);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:clamp(320px,30vw,440px)}
.oc-slide.on{background:var(--oxblood);color:var(--white)}
.oc-pic{position:relative;display:block;overflow:hidden;background:inherit}
.oc-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.oc-txt{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(26px,3.2vw,52px)}
.oc-num{font:700 clamp(56px,6vw,96px)/.8 var(--f-head);color:var(--oxblood);letter-spacing:-.02em}
.oc-slide.on .oc-num{color:var(--cloud)}
.oc-slide.on .label{color:var(--ox-200)}
.oc-title{font:500 clamp(28px,2.8vw,42px)/1.05 var(--f-head);letter-spacing:-.012em}
.oc-body{font-size:17px;line-height:1.5;color:var(--graphite);max-width:30em}
.oc-slide.on .oc-body{color:var(--ox-200)}
.oc-slide.on .textlink{color:var(--white);border-color:var(--ox-500)}
.oc-txt .textlink{align-self:flex-start;margin-top:6px}

/* Tab row: every offering name stays visible, with the controls at its right end. */
.oc-bar{display:flex;align-items:flex-start;gap:clamp(12px,2vw,28px);margin-top:14px}
.oc-tabs{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.oc-tab{position:relative;text-align:left;padding:14px 4px 4px;font:500 15px/1.2 var(--f-head);color:var(--graphite);cursor:pointer;background:none;border:0}
.oc-tab b{display:block;font:700 11px/1 var(--f-body);letter-spacing:.16em;color:var(--pewter);margin-bottom:6px}
.oc-tab::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--mist)}
.oc-tab i{position:absolute;left:0;top:0;height:3px;width:0;border-radius:3px;background:var(--oxblood)}
.oc-tab[aria-selected="true"]{color:var(--basalt)}
.oc-tab[aria-selected="true"] b{color:var(--oxblood)}
.oc-tab[aria-selected="true"] i{width:100%}
.oc.playing .oc-tab[aria-selected="true"] i{width:0;animation:oc-fill var(--oc-dur) linear forwards}
@keyframes oc-fill{to{width:100%}}
.oc-ctrls{display:flex;gap:8px;flex:none;padding-top:6px}
.oc-btn{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:var(--cloud);color:var(--basalt);font:600 16px/1 var(--f-body);cursor:pointer;border:0}
.oc-btn:hover{background:var(--ox-100);color:var(--oxblood)}
.oc-btn svg{width:16px;height:16px;fill:currentColor}
.oc-btn[hidden]{display:none}

@media (max-width:760px){
  .oc-slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
  .oc-pic{aspect-ratio:233/130}
  .oc-txt{padding:22px 22px 26px;gap:10px}
  .oc-num{font-size:48px}
  .oc-title{font-size:26px}
  .oc-body{font-size:15.5px}
  .oc-bar{align-items:center}
  .oc-tabs{grid-template-columns:repeat(4,32px);gap:8px}
  .oc-tab{height:28px;padding:0;font-size:0}
  .oc-tab b{display:none}
  .oc-tab::before,.oc-tab i{top:12px}
  .oc-ctrls{padding-top:0}
  .oc-btn{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .oc-viewport{scroll-behavior:auto}
  .oc.playing .oc-tab[aria-selected="true"] i{animation:none;width:100%}
}