/* ── Card block (acf/xc-card) — front end AND editor ──────────────────────────
   A PRIVATE .xcpb-* namespace, kept distinct from the front-end article cards
   (.xcp-card* in public.css) so the two never collide — that collision was forcing
   an aspect-ratio crop + gray background on the block in view mode.

   Responsive orientation via a container query on the block's own wrapper: image
   LEFT when the card is wide, ABOVE when narrow. Images always keep their natural
   aspect ratio (never cropped).                                                   */

.xcpb-card { container-type: inline-size; display: block; }
/* Square image corners (also in the editor preview, where body.xcp isn't present). */
.xcpb-card img, .xcpb-media, .xcpb-gallery, .xcpb-gallery-slide, .xcpb-media--row { border-radius: 0 !important; }

/* Kicker at the top of the card (direct child of .xcpb-card, above the image). */
.xcpb-card > .xcpb-kicker { display: block; margin: 0 0 8px; }

.xcpb-inner { display: flex; flex-direction: column; gap: 10px; height: 100%; }

/* Media wrapper is a block with no line-box, so the linked <img> can't leave the
   inline baseline gap that read as extra space / a clipped bottom edge. */
.xcpb-media { display: block; margin: 0; line-height: 0; font-size: 0; overflow: hidden; border-radius: 6px; }
.xcpb-media img { width: 100%; height: auto; display: block; }   /* natural aspect — never cropped */

/* Multiple images — side by side (equal, each keeping aspect) … */
.xcpb-media--row { display: flex; gap: 8px; align-items: flex-start; overflow: visible; border-radius: 0; }
.xcpb-media--row img { flex: 1 1 0; min-width: 0; width: auto; height: auto; border-radius: 6px; }

/* … or a gallery: one image at a time with prev/next steppers. The viewport is
   unconstrained — each slide is full width at its natural aspect ratio. "Gallery"
   is manual; "Auto-scroll" adds automatic stepping (foot.php JS). */
.xcpb-gallery { position: relative; overflow: hidden; border-radius: 6px; }
.xcpb-gallery-viewport {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.xcpb-gallery-viewport::-webkit-scrollbar { display: none; }
.xcpb-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.xcpb-gallery-slide img { width: 100%; height: auto; display: block; border-radius: 6px; }
.xcpb-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: .55; transition: opacity .15s, background .15s;
}
.xcpb-gallery:hover .xcpb-gallery-nav { opacity: 1; }
.xcpb-gallery-nav:hover { background: rgba(0, 0, 0, .7); }
.xcpb-gallery-prev { left: 8px; }
.xcpb-gallery-next { right: 8px; }

.xcpb-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.xcpb-kicker {
  font-family: var(--xcp-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--xc-accent); text-decoration: none;
}
.xcpb-kicker:hover { color: var(--xc-accent-hover); }
/* Descendant selectors (.xcpb-inner …) so these beat the .xcp-entry h2/h3/p rules
   in public.css, which are more specific than a lone class and would otherwise add
   heading margins / sizes on the front end (but not in the editor). */
.xcpb-inner .xcpb-title { font-family: var(--xcp-serif); font-size: 20px; line-height: 1.18; margin: 0; color: var(--xc-text); }
.xcpb-inner .xcpb-title a { color: var(--xc-text); text-decoration: none; }
.xcpb-inner .xcpb-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.xcpb-inner .xcpb-excerpt { font-size: 15px; line-height: 1.5; color: var(--xc-text-muted); margin: 0; }

.xcpb-meta {
  display: flex; align-items: center; gap: 12px; margin-top: 1px;
  font-family: var(--xcp-sans); font-size: 12.5px; color: var(--xc-text-faint);
}
.xcpb-more { color: var(--xc-accent); font-weight: 600; text-decoration: none; letter-spacing: .01em; }
.xcpb-more:hover { text-decoration: underline; }

.xcpb-placeholder {
  border: 1px dashed var(--xc-border); border-radius: 6px; padding: 22px;
  color: var(--xc-text-faint); font-family: var(--xcp-sans); font-size: 13px; text-align: center;
}

/* Image position (Left / Top / Right). "Top" is the stacked default; Left and Right
   place the image beside the text at ALL widths, including narrow columns. */
.xcpb-card--img-left  .xcpb-inner { flex-direction: row;         align-items: flex-start; gap: 18px; }
.xcpb-card--img-right .xcpb-inner { flex-direction: row-reverse; align-items: flex-start; gap: 18px; }
.xcpb-card--img-left  .xcpb-media,
.xcpb-card--img-right .xcpb-media { flex: 0 0 42%; align-self: flex-start; }
.xcpb-card--img-left  .xcpb-text,
.xcpb-card--img-right .xcpb-text  { flex: 1 1 auto; }