/* ==========================================================================
   Home page — user comments ("از زبان همراهان ما").
   A short, editorial strip: one frosted white card at a time (picture and
   name on top, the quote below), thin previous/next arrows, an "01 / 05"
   counter and a plain text link to write your own. A very faint butterfly in
   the corner ties it to the rest of the site. Slides are built by
   assets/js/pages/testimonials.js.
   ========================================================================== */

.testimonials {
  position: relative;
  overflow: hidden;
  /* Much tighter than a regular .section — the content is one small card. */
  padding: clamp(36px, 5vw, 52px) 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(171, 218, 235, .30), transparent 45%),
    radial-gradient(circle at 85% 50%, rgba(220, 205, 238, .25), transparent 45%),
    #f8fafb;
}

/* The site's butterfly as a barely-there signature, not a decoration. */
.testimonials::before {
  content: "";
  position: absolute;
  top: 18px;
  left: max(18px, calc(50% - 520px));
  width: 150px;
  height: 125px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='%23075A7A'%3E%3Cpath d='M118,58 C90,14 34,2 12,28 C-4,50 6,86 42,94 C74,101 108,84 118,58 Z'/%3E%3Cpath d='M122,58 C150,14 206,2 228,28 C244,50 234,86 198,94 C166,101 132,84 122,58 Z'/%3E%3Cpath d='M118,66 C98,104 60,132 36,124 C16,117 14,92 38,82 C64,71 100,68 118,66 Z'/%3E%3Cpath d='M122,66 C142,104 180,132 204,124 C224,117 226,92 202,82 C176,71 140,68 122,66 Z'/%3E%3Cpath d='M120,50 C115,72 115,105 120,132 C125,105 125,72 120,50 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .1;
  transform: rotate(-14deg);
  pointer-events: none;
}
.testimonials .container {
  position: relative;
}

.testimonials .section-head {
  margin-bottom: 1.1em;
}
.testimonials .section-head h2 {
  margin-bottom: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
}

.testimonial-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 700px;
  margin-inline: auto;
}

/* Every slide sits in the same grid cell, so the stage is always as tall
   as the longest comment and nothing jumps when the slide changes. */
.testimonial-stage {
  flex: 1;
  min-width: 0;
  max-width: 580px;
  display: grid;
}

.testimonial {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 150px;
  padding: 22px 26px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 12px 34px rgba(35, 75, 104, .09),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.testimonial.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 5px 14px rgba(35, 75, 104, .14);
}
/* No picture chosen: the first letter of the name on a soft gradient. */
.testimonial-avatar.is-initial {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-blue), var(--c-lavender));
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
}

.testimonial-name {
  color: #075A7A;
  font-size: .88rem;
  font-weight: 700;
}

.testimonial-text {
  margin: 0;
  color: var(--c-text);
  font-size: 1.05rem;
  line-height: 1.95;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.testimonial-text::before { content: "«"; opacity: .55; }
.testimonial-text::after  { content: "»"; opacity: .55; }

.testimonial-remove button {
  padding: 0;
  border: 0;
  background: none;
  color: #c0392b;
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
  text-decoration: underline;
}

.testimonial-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(7, 90, 122, .18);
  border-radius: 50%;
  background: transparent;
  color: #075A7A;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.testimonial-arrow:hover {
  background: rgba(255, 255, 255, .8);
  border-color: rgba(7, 90, 122, .35);
}
.testimonial-arrow:focus-visible {
  outline: 2px solid #1684a4;
  outline-offset: 2px;
}

/* Counter on one side, "write yours" link on the other, lined up with
   the card's edges; the link sits alone in the centre with one comment. */
.testimonial-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 580px;
  margin: .9em auto 0;
  padding-inline: 6px;
}
.testimonial-foot.has-counter {
  justify-content: space-between;
}

.testimonial-counter {
  color: var(--c-text-soft);
  font-size: .78rem;
  letter-spacing: .14em;
  direction: ltr;
}

.testimonial-cta {
  color: #075A7A;
  font-size: .86rem;
  text-decoration: none;
  transition: color .2s ease;
}
.testimonial-cta:hover {
  color: #9ccfe8; /* pale baby blue */
}

@media (max-width: 560px) {
  .testimonials::before { width: 96px; height: 80px; top: 10px; }
  .testimonial-carousel { gap: 8px; }
  .testimonial { padding: 18px 18px; min-height: 0; }
  .testimonial-text { font-size: .98rem; }
  .testimonial-arrow { width: 32px; height: 32px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial,
  .testimonial.is-active { transition: none; transform: none; }
  .testimonial-arrow,
  .testimonial-cta { transition: none; }
}