/* ==========================================================================
   Aidem Testimonial Carousel
   Dedicated widget stylesheet extracted from deferred-widgets.css.
   ========================================================================== */

/* ─── Aidem Testimonial Carousel v0.1.0 ─────────────────────────────────── */



.atc-wrap {

  --atc-width:      28em;

  --atc-height:     20em;

  --atc-move:       2.2em;

  --atc-arrow-gap:  5em;

  --atc-blur:       12px;

  --atc-p7:         hsl(223, 90%, 70%);

  --atc-s8:         hsl(178, 90%, 80%);

  --atc-dot-active: hsl(223, 90%, 60%);
  --atc-quote-y: 0px;
  --atc-quote-logo-gap: 15px;
  --atc-author-y: 0px;
  --atc-org-y: 0px;
  --atc-bg-y: 0px;
  --atc-hud-y: 0px;
  --atc-stack-y: 0px;

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.5em;

}



/* Carousel viewport — sized to contain both offset cards */

.atc-carousel {

  position: relative;

  width:  calc(var(--atc-width)  + var(--atc-move) * 2);

  height: calc(var(--atc-height) + var(--atc-move) * 2);
  touch-action: pan-y;
  cursor: grab;
  transform: translateY(var(--atc-stack-y, 0px));

}

.atc-wrap--dragging .atc-carousel {
  cursor: grabbing;
}



/* Each slide fills the carousel; GSAP positions off-screen when inactive */

.atc-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}

.atc-slide--active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



/* .cards origin sits at the carousel centre so both offset cards fit */

.atc-slide .cards {

  position: absolute;

  top:  50%;

  left: 50%;

}



/* Shared card base */

.atc-slide .card {

  border-radius: 1em;

  box-shadow:    0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);

  position:      absolute;

  width:         var(--atc-width);

  height:        var(--atc-height);

  transform:     translate(-50%, -50%);

}



/* Back (coloured) card — bottom-left offset, same translate as glass card */

.atc-card-bg {

  top:      var(--atc-move);

  left:     calc(var(--atc-move) * -1);

  overflow: hidden; /* clip decorative symbols to card boundary */

  transform: translate(-50%, calc(-50% + var(--atc-bg-y, 0px)));

}



/* ── Decorative blurred symbols on the coloured back card ────────────── */

.atc-deco {

  position:       absolute;

  display:        block;

  pointer-events: none;

  user-select:    none;

  color:          color-mix(in srgb, var(--atc-accent) 50%, white);

  opacity:        0.35;

  filter:         blur(6px);

  overflow:       visible;

}

.atc-deco--sm {

  opacity: 0.40;

  filter:  blur(5px);

}



/* Pulse: CSS animation so it never conflicts with the translate transform */

@keyframes atc-bg-pulse {

  0%, 100% { transform: translate(-50%, calc(-50% + var(--atc-bg-y, 0px))) scale(1); }

  50%       { transform: translate(-50%, calc(-50% + var(--atc-bg-y, 0px))) scale(var(--atc-ps, 1.02)); }

}



.atc-wrap[data-pulse="1"] .atc-card-bg {

  animation: atc-bg-pulse var(--atc-pd, 4s) ease-in-out infinite;

}



/* Glass front card */

.atc-slide .card--glass {

  backdrop-filter: blur(var(--atc-blur));

  -webkit-backdrop-filter: blur(var(--atc-blur));

  background-image: linear-gradient(90deg, hsla(0,0%,100%,.20), hsla(0,0%,100%,.05));

  top:  calc(var(--atc-move) * -1);

  left: var(--atc-move);

}



.atc-slide .card--glass::before,

.atc-slide .card--glass::after {

  border-radius: inherit;

  content: "";

  display: block;

  position: absolute;

  inset: 0;

}



/* Top-left glint — white edge highlight */

.atc-slide .card--glass::before {

  border: 1px solid hsl(0, 0%, 100%);

  mask-image: linear-gradient(135deg, hsl(0,0%,100%), hsla(0,0%,100%,0) 50%);

  -webkit-mask-image: linear-gradient(135deg, hsl(0,0%,100%), hsla(0,0%,100%,0) 50%);

}



/* Bottom-right accent edge — uses per-slide --atc-accent colour */

.atc-slide .card--glass::after {

  border: 1px solid var(--atc-accent, var(--atc-dot-active));

  mask-image: linear-gradient(135deg, hsla(0,0%,100%,0) 50%, hsl(0,0%,100%));

  -webkit-mask-image: linear-gradient(135deg, hsla(0,0%,100%,0) 50%, hsl(0,0%,100%));

}



/* ── Card content — layout only; child elements own text paint ─── */

.atc-slide .card__content {

  color:     var(--atc-s8);

  display:   flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items:     flex-start;
  column-gap: var(--atc-quote-logo-gap, 15px);

  padding:  1.5em 1.75em 1.5em 1.75em;

  position: relative;

  height:   100%;

  z-index:  1;

  box-sizing: border-box;

}

.atc-slide .card__content::before {
  content: "“";
  position: absolute;
  top: 0.08em;
  left: 0.18em;
  z-index: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7.5em;
  line-height: 1;
  font-weight: 700;
  color: rgba(255,255,255,0.12);
  pointer-events: none;
  user-select: none;
}

.atc-slide .card__title,
.atc-slide .card__logo,
.atc-slide .card__author,
.atc-slide .card__url {
  position: relative;
  z-index: 1;
}



.atc-slide .card__title {

  font-family: Caladea, Georgia, serif;

  font-size:   1.1em;

  font-weight: 700;

  line-height: 1.3;

  flex: 1 1 0;

  min-width: 0;
  color: var(--atc-s8);
  transform: translateY(var(--atc-quote-y, 0px));

}



.atc-slide .card__logo {

  display:     flex;

  align-items: flex-start;

  justify-content: flex-end;

  flex:        0 0 auto;

  width:       auto;

}

.atc-slide .card__logo img {

  width:         48px;

  height:        48px;

  max-width:     none;

  aspect-ratio:  1 / 1;

  border-radius: 50%;

  object-fit:    cover;

  display:       block;

  flex-shrink:   0;

  box-shadow:    0 2px 8px rgba(0,0,0,0.25);

}



.atc-slide .card__author {

  font-size:   0.8em;

  font-weight: 600;

  align-self:  flex-end;

  width: 100%;

  margin-top:  auto;
  color: var(--atc-p7);
  transform: translateY(var(--atc-author-y, 0px));

}



.atc-slide .card__url {

  font-size: 0.7em;

  margin:    0;

  width:     100%;
  color: var(--atc-p7);
  transform: translateY(var(--atc-org-y, 0px));

}



/* ── Navigation dots ─────────────────────────────────────────────────── */

.atc-dots {

  display:         flex;

  gap:             0.5em;

  justify-content: center;

}

.atc-hud {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: -0.55em;
  transform: translateY(var(--atc-hud-y, 0px));
  pointer-events: none;
  user-select: none;
}

.atc-hud__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.4ch;
  padding: 0.72rem 0.98rem 0.68rem;
  border: 1px solid color-mix(in srgb, #bfff20 44%, rgba(255,255,255,0.08));
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(191,255,32,0.065), rgba(8,10,12,0.92)),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  color: #d7ff3d;
  box-shadow:
    0 0 0 1px rgba(191,255,32,0.16),
    0 12px 28px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.02);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: clamp(11px, 0.84vw, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(191,255,32,0.32);
  white-space: nowrap;
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
}

.atc-hud__label::before {
  content: "<";
  margin-right: 0.5em;
  opacity: 1;
}

.atc-hud__label::after {
  content: ">";
  margin-left: 0.5em;
  opacity: 1;
}

.atc-hud__label--swipe {
  display: none;
}

@media (pointer: coarse) {
  .atc-hud__label--drag {
    display: none;
  }

  .atc-hud__label--swipe {
    display: inline-flex;
  }
}



.atc-dot {

  width:         0.55em;

  height:        0.55em;

  border-radius: 50%;

  background:    hsla(0, 0%, 100%, 0.3);

  cursor:        pointer;

  transition:    background 0.3s ease, transform 0.3s ease;

  padding:       0;

  border:        none;

  flex-shrink:   0;

}



.atc-dot--active {

  background: var(--atc-dot-active, hsl(223, 90%, 60%));

  transform:  scale(1.5);

}



/* ── Navigation arrows ───────────────────────────────────────────────── */

.atc-arrows {

  position:        absolute;

  top:             50%;

  left:            50%;

  transform:       translate(-50%, -50%);

  width:           calc(var(--atc-width) + var(--atc-move) * 4 + var(--atc-arrow-gap, 5em));

  display:         flex;

  justify-content: space-between;

  align-items:     center;

  pointer-events:  none;

}



.atc-arrow {

  width:           2.2em;

  height:          2.2em;

  border-radius:   50%;

  background:      hsla(0, 0%, 100%, 0.15);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  border:          1px solid hsla(0, 0%, 100%, 0.3);

  color:           hsl(0, 0%, 100%);

  font-size:       1em;

  line-height:     1;

  cursor:          pointer;

  pointer-events:  auto;

  display:         flex;

  align-items:     center;

  justify-content: center;

  flex-shrink:     0;

  transition:      background 0.2s ease, border-color 0.2s ease;

}



.atc-arrow:hover {

  background:   hsla(0, 0%, 100%, 0.28);

  border-color: hsla(0, 0%, 100%, 0.5);

}

/* ── Testimonial responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .atc-wrap {
    --atc-width:  22em;
    --atc-height: 22em;
    --atc-move:   1.6em;
    font-size:    0.92em;
  }
}

@media (max-width: 767px) {
  .atc-wrap {
    --atc-width:  18em;
    --atc-height: 24em;
    --atc-move:   1.2em;
    font-size:    0.85em;
  }

  .atc-slide .card__content {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.9em;
    padding-left: 1.1em;
    padding-right: 1.1em;
  }

  .atc-slide .card__logo {
    order: 1;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .atc-slide .card__title {
    order: 2;
    width: 100%;
    flex: 0 0 auto;
    text-align: left;
  }

  .atc-slide .card__author {
    order: 3;
    width: 100%;
    margin-top: 0;
    align-self: stretch;
  }

  .atc-slide .card__url {
    order: 4;
    width: 100%;
  }
}