/* Aidem Cards Stacking / Horizontal widget
   Shared frame/vignette/number/title/description/button rules once, then
   motion-specific blocks distinguished by a [data-motion] attribute on the
   widget's own root element (.csh-pin-stack for Stacked, .afhc-wrap.csh-wrap
   for Horizontal).

   Stacked motion reuses the Pinned Stack Cards widget's own proven layout
   values (breakpoints at 1024px/768px/736px, matching the rest of the
   site's pinned widgets - see pinned-stack-cards-widget.css).

   Horizontal motion's OUTER structure (.afhc-wrap/.afhc-grid/.afhc-card/
   .afhc-inner/.afhc-title/.afhc-body/.afhc-watermark/.afhc-num/
   .afhc-round-btn/.afhc-img-area/.afhc-img-bg) is the exact class contract
   fullwidth-horizontal-cards-widget.js reads (unmodified) - every rule
   below that targets those classes is layered ON TOP of
   fullwidth-horizontal-cards-widget.css's own rules (also enqueued for
   Horizontal-motion instances), using the extra "csh-*" class every such
   element also carries so this stylesheet's rules win on specificity
   regardless of load order, WITHOUT needing to edit that other file. This
   is what re-anatomises the Horizontal card's INSIDES to the Pinned Stack
   Cards look (image with bottom vignette, title+description overlaid near
   the bottom of the image, big number, round badge button) instead of that
   widget's own original wide-image/normal-flow layout. */



/* ══════════════════════════════ SHARED ══════════════════════════════ */

.csh-pin-stack,
.afhc-wrap.csh-wrap {
  position: relative;
}

/* ── Frame (gradient border) ─────────────────────────────────────────────
   Stacked: .csh-visual IS the frame (padding creates the border reveal).
   Horizontal: .afhc-card is the frame (unchanged technique from that
   widget, just re-pointed at this widget's own gradient colour vars so the
   Frame Gradient Start/End style controls actually apply here too). */
.csh-visual {
  position: relative;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  background-image: linear-gradient(146.44deg, var(--csh-frame-g1, #202020) 10.94%, var(--csh-frame-g2, #101010) 47.57%) !important;
  border: none !important;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
}

.afhc-card.csh-card {
  background-color: transparent;
  background-image: linear-gradient(146.44deg, var(--csh-frame-g1, #202020) 10.94%, var(--csh-frame-g2, #101010) 47.57%);
}

/* ── Image area — one shared look: fills its frame edge-to-edge (unlike
   the Fullwidth Horizontal Cards widget's original 55%-max-width, centred
   image), so Number/Title/Description/Button can overlay on top of it,
   exactly like the Pinned Stack Cards widget's anatomy. ──────────────────── */
.csh-visual-bg {
  position: absolute;
  inset: 20px;
  border-radius: 14px !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Horizontal's .afhc-img-area is normally a centred, size-constrained flex
   item — reset it to a full-fill absolute layer inside .afhc-inner (which
   is already position:absolute, inset 20px — see
   fullwidth-horizontal-cards-widget.css), so the image fills the whole
   card frame the same way Stacked's .csh-visual-bg does. */
.afhc-img-area.csh-visual {
  position: absolute;
  inset: 0;
  max-width: none;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  flex: none;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}

.afhc-img-bg.csh-visual-bg {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* ── Vignette — a real, optional element (Style ▸ Frame & Image ▸ Image
   Bottom Vignette), sitting above the image and below Number/Title/
   Description/Button. Opacity is driven entirely by the Vignette Strength
   style control; the element is only output at all when the toggle is on
   (see render()). ──────────────────────────────────────────────────────── */
.csh-visual-vignette {
  position: absolute;
  inset: 20px;
  border-radius: 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
  z-index: 1;
}

.afhc-img-area.csh-visual .csh-visual-vignette {
  inset: 0;
  border-radius: 0;
}

/* ── Vignette shapes (Style ▸ Frame & Image ▸ Vignette Style) ─────────────
   The base .csh-visual-vignette rule above IS the "Bottom" shape and stays
   the fallback for any card saved before this control existed (no
   data-vignette-shape attribute at all, or the attribute missing). Every
   shape below only swaps the background image/colour — geometry (inset,
   border-radius, the horizontal full-bleed override just above, and the
   responsive inset overrides further down this file) is shared by all of
   them, so they stay correct at every breakpoint automatically. Overall
   strength is still just the element's opacity, driven by the Vignette
   Intensity % control (see render()/register_style_frame_controls()). ── */
.csh-visual-vignette[data-vignette-shape="top"] {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0) 60%);
}

.csh-visual-vignette[data-vignette-shape="top_bottom"] {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 35%);
}

.csh-visual-vignette[data-vignette-shape="full"] {
  background: rgba(0, 0, 0, 0.55);
}

.csh-visual-vignette[data-vignette-shape="oval"] {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}

.csh-visual-vignette[data-vignette-shape="rectangle"] {
  background: transparent;
  box-shadow: inset 0 0 70px 34px rgba(0, 0, 0, 0.7);
  border-radius: 0 !important;
}

/* ── Number ───────────────────────────────────────────────────────────────
   Default look: solid, bold, legible number (NOT the very-faint background
   watermark the Fullwidth Horizontal Cards widget originally used) — the
   Custom Position style controls (Style ▸ Number) can move it anywhere. */
.csh-number,
.afhc-num.csh-number {
  display: block;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.csh-number {
  font-size: clamp(60px, 8vw, 140px);
}

.afhc-num.csh-number {
  font-size: clamp(40px, 8vw, 90px);
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}

/* ── Title + Description — always position:absolute, overlaid near the
   bottom of the image (both motions), matching the Pinned Stack Cards
   widget's default look. Custom Position sliders (Style ▸ Title / ▸
   Description) just override the offsets below — position itself never
   needs setting again by those controls. ──────────────────────────────── */
.csh-title,
.afhc-title.csh-title {
  position: absolute;
  z-index: 2;
  margin: 0 0 8px !important;
  color: #ffffff;
}

.csh-desc,
.afhc-body.csh-desc {
  position: absolute;
  z-index: 2;
}

.csh-desc-text,
.afhc-text.csh-desc-text {
  color: #ffffff !important;
  margin: 0 !important;
  display: block !important;
}

/* Stacked: Title/Description sit inside .csh-title-wrap, which itself is
   the positioned box (matches the Pinned Stack Cards widget's single
   .aidem-stack-visual-title block exactly) — .csh-title/.csh-desc inside
   it are plain in-flow text, not independently absolute, UNLESS their own
   Custom Position switch is on (handled by the shared rule above already
   applying position:absolute — .csh-title-wrap itself stays a normal
   block so the two can still stack vertically by default). */
.csh-title-wrap {
  position: absolute;
  left: 60px;
  bottom: 120px;
  right: 60px;
  z-index: 2;
  color: #ffffff;
}

.csh-title-wrap .csh-title,
.csh-title-wrap .csh-desc {
  position: static;
}

/* Horizontal default overlay position (no Custom Position override) —
   scaled to the smaller card box. */
.afhc-title.csh-title {
  left: 24px;
  right: 24px;
  bottom: 92px;
  text-align: left;
  font-size: 1.3em;
}

.afhc-body.csh-desc {
  left: 24px;
  right: 24px;
  bottom: 24px;
}

.afhc-text.csh-desc-text {
  font-size: 0.85em;
  line-height: 1.4;
}

/* ── Button (round rotating badge) — ported from the Fullwidth Horizontal
   Cards widget's .afhc-round-btn. Always position:absolute by default in
   both motions; Custom Position sliders (Style ▸ Button) just override
   the offsets. ──────────────────────────────────────────────────────────── */
.csh-round-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.csh-round-btn .rs-lettering-text {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.csh-round-btn .rs-lettering-text span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ffffff;
}

.csh-round-btn.text-anim-yes .rs-lettering-text {
  animation: csh-round-btn-spin var(--csh-btn-spin-duration, 30s) infinite linear;
}

.csh-inner-link:hover .csh-round-btn.text-anim-pause-yes .rs-lettering-text {
  animation-play-state: paused;
}

@keyframes csh-round-btn-spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(359deg); }
}

/* Pin mechanics support (Stacked motion) — same generic rules as the
   Pinned Stack Cards widget, needed by any ".gsap-fixed-yes" instance. */
.gsap-pin-off { min-height: 10vh; }
.gsap-fixed .pin-spacer > *,
.gsap-fixed-yes .pin-spacer > * { transition: unset !important; }



/* ══════════════════════════════ STACKED ══════════════════════════════ */

.csh-pin-stack .csh-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 40px;
  min-height: 100svh;
  padding: 40px 60px;
  background: #0a0a0a;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  will-change: transform;
  backface-visibility: hidden;
  position: relative;
}

.csh-pin-stack .csh-visual {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 60vh;
  max-height: 82vh;
  padding: 20px !important;
  display: block;
}

@media (max-width: 1024px) {
  .csh-pin-stack .csh-card {
    display: block !important;
    position: relative;
    padding: 30px 24px;
    min-height: 100svh;
    max-width: 100%;
  }
  .csh-pin-stack .csh-number {
    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 3;
    font-size: clamp(40px, 10vw, 90px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
  }
  .csh-pin-stack .csh-visual {
    width: 100%;
    min-height: 62vh;
    max-height: 85vh;
    border-radius: 16px !important;
    padding: 12px !important;
  }
  .csh-pin-stack .csh-visual-bg,
  .csh-pin-stack .csh-visual-vignette { inset: 12px; border-radius: 10px !important; }
  .csh-pin-stack .csh-title-wrap { left: 36px; right: 36px; bottom: 96px; }
  .csh-pin-stack .csh-card.aidem-stack-card-last .csh-visual { min-height: 85vh; }
}

@media (max-width: 768px) {
  .csh-pin-stack .csh-number {
    top: 24px;
    left: 24px;
    font-size: clamp(40px, 14vw, 70px);
  }
  .csh-pin-stack .csh-visual {
    min-height: 60vh;
    max-height: 83vh;
    border-radius: 16px !important;
    padding: 10px !important;
  }
  .csh-pin-stack .csh-visual-bg,
  .csh-pin-stack .csh-visual-vignette { inset: 10px; border-radius: 8px !important; }
  .csh-pin-stack .csh-title-wrap { left: 30px; right: 30px; bottom: 86px; }
  .csh-pin-stack .csh-card.aidem-stack-card-last .csh-visual { min-height: 83vh; }
}

@media (max-width: 736px) {
  .csh-pin-stack .csh-card { padding: 24px 20px; }
  .csh-pin-stack .csh-number {
    top: 18px;
    left: 18px;
    font-size: clamp(36px, 15vw, 60px);
  }
  .csh-pin-stack .csh-visual {
    min-height: 58vh;
    max-height: 80vh;
    padding: 8px !important;
  }
  .csh-pin-stack .csh-visual-bg,
  .csh-pin-stack .csh-visual-vignette { inset: 8px; }
  .csh-pin-stack .csh-title-wrap { left: 22px; right: 22px; bottom: 76px; }
  .csh-pin-stack .csh-round-btn { top: 14px; right: 14px; width: 84px; height: 84px; }
  .csh-pin-stack .csh-card.aidem-stack-card-last .csh-visual { min-height: 80vh; }
}



/* ═════════════════════════════ HORIZONTAL ═════════════════════════════ */

/* .afhc-card/.afhc-inner sizing itself stays entirely driven by the
   widget's own Style ▸ Horizontal: Card Size controls (card width/height)
   and fullwidth-horizontal-cards-widget.css's own responsive defaults —
   nothing to override here beyond the anatomy re-skin above. */

.afhc-wrap.csh-wrap .afhc-inner {
  padding: 0;
}

@media (max-width: 736px) {
  .afhc-wrap.csh-wrap .csh-round-btn {
    width: 84px;
    height: 84px;
  }
  .afhc-wrap.csh-wrap .afhc-title.csh-title {
    bottom: 78px;
    font-size: 1.1em;
  }
  .afhc-wrap.csh-wrap .afhc-body.csh-desc {
    bottom: 18px;
  }
}