/* =============================================================================
   CONTENT CAROUSEL — Yuma educational posts. One viewer + a rail of post
   covers; pick a post, swipe its slides. Tokens only. window.buildCarousels.
============================================================================= */

.fo-cz-mount { margin-top: var(--space-6); padding-top: var(--space-6);
               border-top: var(--border-width) dashed var(--color-border-inverse);
               display: flex; flex-direction: column; gap: var(--space-5); }
.cz-head { display: flex; flex-direction: column; gap: var(--space-2); }
.cz-head__kicker { font-family: var(--font-script); transform: rotate(-3deg); font-size: var(--fs-title-l);
                   color: var(--color-accent); align-self: flex-start; line-height: 1.1; white-space: nowrap; padding-bottom: var(--space-2); }
.cz-head__lead { margin: 0; color: var(--color-text-inverse); opacity: .76; font-size: var(--fs-lead); }

.cz1 { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: var(--space-7); align-items: start; }
.cz1__stage { display: flex; align-items: center; gap: var(--space-3); }
.cz1__viewer { position: relative; flex: 1 1 auto; min-width: 0; max-width: 360px; aspect-ratio: 4 / 5; border-radius: var(--radius-md);
               overflow: hidden; border: var(--border-width) solid var(--color-border-inverse); background: #000; touch-action: pan-y; user-select: none; }
.cz1__track { display: flex; height: 100%; transition: transform .32s cubic-bezier(.2,.7,.3,1); }
.cz1__slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.cz1__nav { flex: none; width: var(--space-7); height: var(--space-7);
            border-radius: var(--radius-pill); border: none; background: var(--color-accent);
            color: var(--color-ink); font-size: var(--fs-title-m); line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center; transition: background .14s ease, transform .14s ease; }
.cz1__nav:hover { background: var(--color-accent-strong); }
.cz1__nav:active { transform: scale(.92); }
.cz1__dots { position: absolute; bottom: var(--space-3); left: 0; right: 0; display: flex; justify-content: center; gap: var(--space-1); }
.cz1__dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--color-text-inverse) 45%, transparent); }
.cz1__dot.on { background: var(--color-accent); }
.cz1__count { position: absolute; top: var(--space-3); right: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-caption);
              font-weight: 700; color: var(--color-text-inverse); background: color-mix(in srgb, var(--color-ink) 55%, transparent);
              padding: 2px var(--space-2); border-radius: var(--radius-pill); }
.cz1__rail { display: flex; flex-wrap: wrap; gap: var(--space-2); align-content: flex-start; }
.cz1__cov { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
            background: none; width: var(--space-9); aspect-ratio: 4 / 5; transition: border-color .15s ease; }
.cz1__cov img, .cz1__cov video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz1__cov.on { border-color: var(--color-accent); }
.cz1__covtag { position: absolute; top: 3px; left: 3px; font-family: var(--font-sans); font-size: 9px; font-weight: 700;
               letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink); background: var(--color-accent);
               padding: 1px 5px; border-radius: var(--radius-pill); pointer-events: none; }

@container (max-width: 760px) {
  .cz1 { grid-template-columns: 1fr; }
  .cz1__stage { justify-content: center; }
}