/*
 * recipe-content.css — the composable content layer. Shared item cards (.apb-item--image/testimonial/
 * logo/feature) that drop into ANY container (marquee/coverflow reuse recipe-animated.css scaffold;
 * carousel = native scroll-snap slider; grid = static). Neutral tokens with safe fallbacks.
 */
.apb-content .apb-content-head{max-width:62ch;margin:0 auto clamp(24px,4vh,48px);text-align:center}
.apb-content .apb-content-head h2{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;margin:0}
.apb-content .apb-content-head .apb-rx-eyebrow{margin:0 0 8px}

/* text item cards must not get the coverflow image-overlay gradient */
.apb-content .apb-anim-card::after{content:none}

/* item fills its fixed motion box (marquee cell / coverflow card) */
.apb-content .apb-anim-mq-cell,.apb-content .apb-anim-card{position:relative}
.apb-content .apb-anim-mq-cell > .apb-item,.apb-content .apb-anim-card > .apb-item{position:absolute;inset:0}

/* ---- image ---- */
.apb-item--image{margin:0;width:100%;height:100%;border-radius:var(--apb-rx-radius,14px);overflow:hidden;background:rgba(0,0,0,.05)}
.apb-item--image .apb-item-media{display:block;width:100%;height:100%}
.apb-item--image img{width:100%;height:100%;object-fit:cover}
.apb-item--image .apb-item-cap{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;font-weight:600;font-size:14px;text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* ---- testimonial ---- */
.apb-item--testimonial{margin:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:16px;overflow:hidden;
  padding:24px;border:1px solid var(--apb-rx-line,rgba(100,116,139,.16));border-radius:var(--apb-rx-radius,14px);background:var(--apb-rx-surface,#fff)}
.apb-item--testimonial .apb-item-quote{margin:0;font-size:clamp(15px,1.6vw,19px);line-height:1.5;font-weight:500}
.apb-item--testimonial .apb-item-cite{display:flex;align-items:center;gap:12px;font-style:normal}
.apb-item--testimonial .apb-item-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:rgba(0,0,0,.05)}
.apb-item--testimonial .apb-item-avatar img{width:100%;height:100%;object-fit:cover}
.apb-item--testimonial .apb-item-who{display:flex;flex-direction:column;min-width:0}
.apb-item--testimonial .apb-item-name{font-weight:700}
.apb-item--testimonial .apb-item-role{font-size:13px;color:var(--apb-rx-dim,#64748b)}

/* ---- logo ---- */
.apb-item--logo{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px}
.apb-item--logo .apb-item-logo{max-width:100%;max-height:56px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.apb-item--logo:hover .apb-item-logo{filter:none;opacity:1}
.apb-item--logo .apb-item-logoname{font-size:12px;color:var(--apb-rx-dim,#64748b)}

/* ---- feature ---- */
.apb-item--feature{margin:0;height:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  padding:24px;border:1px solid var(--apb-rx-line,rgba(100,116,139,.16));border-radius:var(--apb-rx-radius,14px);background:var(--apb-rx-surface,#fff)}
.apb-item--feature .apb-item-icon{width:40px;height:40px;border-radius:11px;background:rgba(100,116,139,.1);display:flex;align-items:center;justify-content:center;color:var(--apb-rx-accent-text,var(--apb-rx-accent,#4f46e5))}
.apb-item--feature .apb-item-icon svg{width:22px;height:22px}
.apb-item--feature .apb-item-title{margin:0;font-size:18px}
.apb-item--feature .apb-item-text{margin:0;font-size:14px;color:var(--apb-rx-dim,#64748b);line-height:1.5}

/* ---- GRID ---- */
.apb-content--grid .apb-content-grid{display:grid;grid-template-columns:repeat(var(--apb-content-cols,3),1fr);gap:18px}
@media(max-width:760px){.apb-content--grid .apb-content-grid{grid-template-columns:1fr}}
.apb-content--grid .apb-content-cell{position:relative}
.apb-content--grid.apb-content--image .apb-item{position:absolute;inset:0}
.apb-content--grid.apb-content--image .apb-content-cell{aspect-ratio:4/3}

/* ---- CAROUSEL (native [data-apb-slider] scroll-snap) ---- */
.apb-content--carousel .apb-rx-slider{position:relative}
.apb-content--carousel .apb-rx-slider-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px}
.apb-content--carousel .apb-rx-slider-track::-webkit-scrollbar{display:none}
.apb-content--carousel .apb-rx-slide{flex:0 0 clamp(260px,32vw,360px);scroll-snap-align:center;position:relative}
.apb-content--carousel.apb-content--image .apb-rx-slide{aspect-ratio:4/3}
.apb-content--carousel.apb-content--image .apb-rx-slide > .apb-item{position:absolute;inset:0}
.apb-content--carousel .apb-rx-slider-arrow{position:absolute;top:38%;width:42px;height:42px;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:#fff;cursor:pointer;z-index:2;font-size:17px;line-height:1}
.apb-content--carousel .apb-rx-slider-arrow--prev{left:-8px}
.apb-content--carousel .apb-rx-slider-arrow--next{right:-8px}
.apb-content--carousel .apb-rx-slider-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.apb-content--carousel .apb-rx-slider-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(100,116,139,.3);cursor:pointer;transition:width .25s,background .25s}
.apb-content--carousel .apb-rx-slider-dot[aria-current="true"]{background:var(--apb-rx-accent,#4f46e5);width:22px;border-radius:4px}

/* NOTE: marquee & coverflow content sections carry the ANIMATED-engine container class (.apb-anim--marquee /
   .apb-anim--coverflow) + .apb-content — NOT a .apb-content--marquee/coverflow class (those don't exist).
   Carousel & grid DO use .apb-content--carousel/grid. Scope motion-box rules on .apb-content.apb-anim--*. */
/* give the motion box a SOLID surface so overlapping 3D coverflow cards / adjacent marquee cells never bleed */
.apb-content.apb-anim--marquee .apb-anim-mq-cell,.apb-content.apb-anim--coverflow .apb-anim-card{overflow:hidden;background:var(--apb-rx-surface,#fff)}
/* clamp long quotes in fixed motion boxes so they fade/ellipsis instead of hard-clipping */
.apb-content.apb-anim--marquee .apb-item--testimonial .apb-item-quote,
.apb-content.apb-anim--coverflow .apb-item--testimonial .apb-item-quote{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* coverflow cards are TALL (image 3/4 aspect): center a short testimonial as a group so quote+cite sit in the
   middle instead of the cite hugging (and clipping against) the rounded bottom edge */
.apb-content.apb-anim--coverflow .apb-item--testimonial{justify-content:center;gap:20px}
/* recipe-animated.css absolutely-positions ANY figcaption in a coverflow card to bottom:14px with white text
   (for photo captions). A testimonial's cite IS a figcaption, so that rule yanks the avatar/name to the clipped
   bottom edge and whitens it. Reset it back to normal flow inside content cards. */
.apb-content.apb-anim--coverflow .apb-anim-card .apb-item-cite{position:static;left:auto;right:auto;bottom:auto;color:inherit;text-shadow:none}
/* push the prev/next controls clear of the tall content coverflow cards */
.apb-content.apb-anim--coverflow .apb-anim-ctrl{margin-top:90px}

/* CAROUSEL & GRID are FLOW layouts (not fixed-aspect motion boxes): text cards must size to their content and
   NEVER clip. overflow:hidden + height:100% above are only correct inside the marquee/coverflow fixed boxes. */
.apb-content--carousel .apb-rx-slide{display:flex}
.apb-content--carousel .apb-rx-slide > .apb-item--testimonial,.apb-content--carousel .apb-rx-slide > .apb-item--feature,
.apb-content--grid .apb-content-cell > .apb-item--testimonial,.apb-content--grid .apb-content-cell > .apb-item--feature{overflow:visible;height:auto;min-height:200px}