/* ==========================================================================
   Aidem Fullwidth Horizontal Cards
   Dedicated widget stylesheet extracted from deferred-widgets.css.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════

   FULLWIDTH HORIZONTAL CARDS  —  .afhc-*   (v0.7 — fully responsive)

   Colours: scoped <style> CSS vars per breakpoint (output by widget render())

   Layout:  Elementor responsive controls + selectors (override defaults here)

   Typo:    Group_Control_Typography selectors (override defaults here)

   ═══════════════════════════════════════════════════════════════════════════ */



/* ── Wrapper — CSS var defaults (overridden by widget <style> block) ─────── */

.afhc-wrap {

  --afhc-bg:          #ebf5fc;

  --afhc-sh-light:    #ffffff;

  --afhc-sh-dark:     #ceced1;

  --afhc-num-color:   rgba(0,0,0,0.05);

  --afhc-num-size:    9rem;

  --afhc-img-size:    110px;

  --afhc-title-color: #777;

  --afhc-text-color:  #777;

  --afhc-btn-bg:      #8C5FF5;

  --afhc-btn-color:   #fff;

  display: block;

  width:   100%;

  padding: 40px 0;

}



/* ── Grid — gap overridden by Elementor responsive selector ──────────────── */

/* .afhc-grid is the fixed-width VIEWPORT (overflow hidden); the cards
   live in .afhc-track, each one full-width (see the Responsive defaults
   section below), so only one card is ever visible at a time — a
   full-width slide deck. JS translates .afhc-track horizontally in sync
   with vertical scroll (GSAP ScrollTrigger pin + eased scrub) so each
   next card slides fully in from the right and covers the previous
   one, storytelling-sequence style. If the JS runtime isn't ready (or
   there's only one card), .afhc-track still lays the cards out
   left-to-right, so this degrades gracefully to a plain row rather
   than breaking. */
.afhc-grid {

  display:  block;

  overflow: hidden;

  padding:  40px 20px;

}

.afhc-track {

  display:     flex;

  flex-wrap:   nowrap;

  align-items: flex-start;

  gap:         30px;

  will-change: transform;

}



/* ── Card — width/height overridden by Elementor responsive selector ─────── */

.afhc-card {

  position:      relative;

  flex:          0 0 auto;

  width:         350px;

  height:        480px;

  background:    var(--afhc-bg);

  border-radius: 15px;

  border:        1px solid rgba(255,255,255,0.70);

  border-color:  color-mix(in srgb, var(--afhc-sh-light, #ffffff) 82%, transparent);

  box-shadow:    16px 18px 34px rgba(0,0,0,0.22),

                -12px -12px 28px rgba(255,255,255,0.78),

                 inset 2px 2px 4px rgba(255,255,255,0.86),

                 inset -2px -2px 5px rgba(0,0,0,0.06);

  will-change:   transform, opacity;

}



/* ── Inner — absolute inset, flex center ────────────────────────────────── */

.afhc-inner {

  position:        absolute;

  top:             20px;

  left:            20px;

  right:           20px;

  bottom:          20px;

  background:      var(--afhc-bg);

  box-shadow:      inset 8px 8px 18px rgba(0,0,0,0.075),

                   inset -8px -8px 18px rgba(255,255,255,0.90),

                   0 12px 24px rgba(0,0,0,0.055);

  border-radius:   19px;

  display:         flex;

  flex-direction:  row;

  align-items:     flex-start;

  gap:             40px;

  overflow:        visible;

  padding:         40px 44px;

}



/* ── Left column — image circle, then the number watermark below it ─────── */

.afhc-left-col {

  position:       relative;

  flex:           0 0 auto;

  width:          var(--afhc-img-size, 110px);

  display:        flex;

  flex-direction: column;

  align-items:    center;

}



/* ── Image circle — size overridden by Elementor responsive; nudge via margin ─ */

.afhc-img-area {

  position:        relative;

  flex:            0 0 auto;

  width:           var(--afhc-img-size, 110px);

  height:          var(--afhc-img-size, 110px);

  border-radius:   50%;

  background:      var(--afhc-bg);

  box-shadow:      -5px -5px 11px rgba(255,255,255,0.92),

                    6px  7px  14px rgba(0,0,0,0.16),

                    inset 1px 1px 2px rgba(255,255,255,0.80);

  display:         flex;

  align-items:     center;

  justify-content: center;

  z-index:         2;

}



.afhc-img-inner {

  width:         calc(100% - 12px);

  height:        calc(100% - 12px);

  border-radius: 50%;

  overflow:      hidden;

}



.afhc-img-inner img {

  width:         100%;

  height:        100%;

  object-fit:    cover;

  border-radius: 50%;

  display:       block;

}



/* ── Number watermark — sits below the image, in the left column ─────────── */

.afhc-num {

  position:       relative;

  font-size:      var(--afhc-num-size, 9rem);

  font-weight:    900;

  line-height:    1;

  color:          var(--afhc-num-color) !important;

  pointer-events: none;

  user-select:    none;

  text-align:     center;

  margin:         0;

  z-index:        0;

}



/* ── Right column — title top-aligned with the image, text block below ──── */

.afhc-right-col {

  flex:           1 1 auto;

  min-width:      0;

  display:        flex;

  flex-direction: column;

  text-align:     left;

}



/* ── Title — font-size/weight overridden by Group_Control_Typography ─────── */

.afhc-title {

  position:    relative;

  z-index:     1;

  font-size:   1.8em;

  font-weight: 700;

  line-height: 1.15;

  text-align:  left;

  color:       var(--afhc-title-color) !important;

  margin:      0 !important;

  display:     block !important;

}



/* ── Body — description + button, left-justified beneath the title ──────── */

.afhc-body {

  width:       100%;

  text-align:  left;

  margin-top:  16px;

}



/* ── Body text ────────────────────────────────────────────────────────────── */

.afhc-text {

  font-size:   1em;

  font-weight: 300;

  line-height: 1.6;

  color:       var(--afhc-text-color) !important;

  margin:      0 !important;

  display:     block !important;

}



/* ── Button — neumorphic profile-card style ──────────────────────────────── */

.afhc-btn {

  position:        relative;

  display:         inline-block !important;

  padding:         12px 28px !important;

  background:      var(--afhc-btn-bg) !important;

  background-color: var(--afhc-btn-bg) !important;

  background-image: linear-gradient(145deg, var(--afhc-btn-bg), var(--afhc-btn-bg)) !important;

  background-image: linear-gradient(145deg, color-mix(in srgb, var(--afhc-btn-bg) 88%, #ffffff), color-mix(in srgb, var(--afhc-btn-bg) 86%, #000000)) !important;

  margin-top:      15px !important;

  border-radius:   50px !important;

  color:           var(--afhc-btn-color) !important;

  text-decoration: none !important;

  font-weight:     400;

  font-size:       1em;

  border:          none !important;

  cursor:          pointer;

  box-shadow:      -4px -4px 10px rgba(255,255,255,0.76),

                    6px  7px 14px rgba(0,0,0,0.22),

                    inset 1px 1px 2px rgba(255,255,255,0.34),

                    inset -2px -2px 4px rgba(0,0,0,0.18) !important;

}



/* ── Responsive defaults ─────────────────────────────────────────────────── */

/* Full-width slide deck, at every breakpoint: each card fills almost
   the whole grid width, so scrolling advances one full “slide” at a
   time (JS handles the pin + slide-in-from-the-right transition).
   Width is set in vw (viewport-relative), NOT a percentage — .afhc-card
   has no in-flow content of its own (.afhc-inner, holding everything
   visible, is absolutely positioned), so it has no natural size to
   fall back on. A percentage width has nothing definite to resolve
   against in that situation and collapses the whole chain to ~0; vw is
   always resolvable against the real viewport, so it doesn’t have that
   problem. max-width caps it at this site’s actual (boxed) container
   width so it doesn’t overshoot on very wide monitors. !important
   guards against any per-instance Card Width value set in the
   Elementor Style tab. Card height is left alone so it keeps whatever
   fixed height the Style controls set. */
.afhc-card {
  flex: 0 0 auto !important;
}

@media (min-width: 1025px) {

  .afhc-card {
    width: 95vw !important;
    max-width: 1360px !important;
    min-width: 900px !important;
  }

}

@media (max-width: 1024px) {

  .afhc-grid { padding: 20px 24px 32px !important; }

  .afhc-track { gap: 18px; }

  .afhc-card {
    width: 92vw !important;
    max-width: 900px !important;
    min-width: 0 !important;
  }

}

@media (max-width: 736px) {

  .afhc-card {
    width: 92vw !important;
    max-width: 480px !important;
  }

  .afhc-grid { padding: 20px 16px 32px !important; }

  .afhc-track { gap: 14px; }

}