/**
 * Aval Pardakht Testimonials — front-end stylesheet.
 *
 * Three layers, and the order matters:
 *
 *   1. BASE      the layout the supplied design assumes but does not declare —
 *                flex on the slide, widths, the avatar frame. No !important, so
 *                layer 3 always wins.
 *   2. CONTROLS  arrows, dots and the two messages. The supplied design styles
 *                the cards and nothing else, so these are ours.
 *   3. DESIGN    the supplied carousel design, verbatim.
 *   4. FALLBACK  what the section looks like before, or without, JavaScript.
 *                Last on purpose: layer 3 is !important throughout, so nothing
 *                earlier in the file could override it.
 *
 * Everything is scoped under `.testimonial`, which is the class the supplied
 * design is written against.
 */

/* ================================================================
   1. BASE — what the design assumes
   ================================================================ */

/*
 * The design moves the attribution below the quotation with `order: 2`, and
 * centres the avatar column with `flex-direction: column`. Both are flex
 * properties on children of elements that were never told to be flex
 * containers, so without these two rules `order` is inert — the name sits above
 * the quotation — and the avatar column lays out as a row.
 */
.testimonial .glide-comments .glide__slide {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
}

.testimonial .glide-comments .glide__slide > div:first-child > div {
	display: flex;
	align-items: center;
}

.testimonial .glide-comments .glide__slides {
	list-style: none;
	margin: 0;
	padding: 0;
	/*
	 * Load-bearing, not cosmetic. The script positions the row by reading each
	 * slide's `offsetLeft`, which is relative to its `offsetParent` — and this
	 * is what pins that parent to the row.
	 *
	 * Without it the parent is whichever ancestor happens to qualify, and that
	 * changes underfoot: the row also carries a transform, and Chrome resolves
	 * `offsetParent` through the containing-block chain, so the row qualifies
	 * only once a transform has actually been set on it. The first measurement
	 * would then be relative to the frame and every later one relative to the
	 * row — two origins, one frame's padding apart.
	 *
	 * `z-index` stays `auto`, so this creates no stacking context and the
	 * design's z-index values on the slides are untouched.
	 */
	position: relative;
	/*
	 * The row is moved, not the slides. Each slide carries its own transform for
	 * the scale-and-fade, so putting the travel on the row keeps the two from
	 * fighting over one property.
	 *
	 * `translate3d` rather than `translateX`: the compositor keeps a 3D
	 * transform off the main thread, and this row is up to eleven blurred cards
	 * wide.
	 */
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
	will-change: transform;
}

/*
 * Room for what the cards do outside their own box. The centre card is scaled
 * to 1.08 and carries an 80px shadow, and the track clips its overflow — with
 * no padding here the shadow is sliced off flat along the top and bottom edges.
 * The design declares this for mobile and not for desktop; this is the desktop
 * half.
 *
 * Less at the bottom than the top, because the arrows and dots sit down there
 * and already hold the shadow clear of the edge.
 */
.testimonial .glide-comments {
	padding-block: 42px 18px;
}

.testimonial .avtm-glide {
	/* The design's own centring, restated without !important so a page builder
	   column can still constrain the section. */
	box-sizing: border-box;
}

/* The two spans the design colours: the name, then the line under it. They need
   a parent of their own — see the note in class-avtm-shortcode.php. */
.testimonial .glide-comments .avtm-id {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.testimonial .glide-comments .avtm-id span {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1.8;
}

.testimonial .glide-comments .avtm-id span:last-child {
	font-size: 13px;
}

/* --- Avatar ------------------------------------------------------ */

.testimonial .glide-comments .avtm-avatar {
	position: relative;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
}

.testimonial .glide-comments .avtm-avatar img {
	/* Stated here because the design sizes the frame — border and padding — and
	   not the box. Without an explicit size the image renders at its intrinsic
	   144px and blows the card apart. `border-box` so the 3px border and 2px
	   padding come out of the 72px rather than adding to it. */
	box-sizing: border-box;
	display: block;
	width: 72px;
	height: 72px;
}

/*
 * The initials, shown only when there is no usable image.
 *
 * Most of these avatars are Gravatar URLs, and Gravatar is not reliably
 * reachable from Iran — which is where the visitors this page is written for
 * are. A broken-image glyph inside a testimonial card is worse than no image,
 * so every card carries a letter underneath and the script uncovers it when the
 * image fails to load.
 *
 * A `<b>` rather than a `<span>`: the design colours `span:last-child` as the
 * secondary line, and a span here would be exactly that and would silently pick
 * up the wrong colour.
 */
.testimonial .glide-comments .avtm-initials {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 3px solid rgba(44, 177, 169, 0.75);
	background: rgba(44, 177, 169, 0.12);
	color: #0f766e;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	/* The name next to it is the accessible label; the letters are decoration,
	   and are marked aria-hidden in the markup to match. */
	user-select: none;
}

.testimonial .glide-comments .avtm-avatar.is-empty .avtm-initials,
.testimonial .glide-comments .avtm-avatar.has-failed .avtm-initials {
	display: flex;
}

.testimonial .glide-comments .avtm-avatar.has-failed img {
	display: none;
}

/* ================================================================
   2. CONTROLS — arrows, dots, messages
   ================================================================ */

.testimonial .avtm-title {
	margin: 0 0 8px;
	text-align: center;
}

.testimonial .avtm-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-block-start: 6px;
	/* Above the cards' stacking contexts: the centre slide sits at z-index 6. */
	position: relative;
	z-index: 8;
}

.testimonial .avtm-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(44, 177, 169, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: #0f766e;
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.testimonial .avtm-arrow:hover {
	background: #fff;
	border-color: rgba(44, 177, 169, 0.75);
}

.testimonial .avtm-arrow:focus-visible {
	outline: 2px solid #0f766e;
	outline-offset: 2px;
}

.testimonial .avtm-arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

/*
 * One glyph for both arrows, flipped rather than duplicated — and flipped again
 * in an RTL page, where "previous" points the other way. A literal arrow
 * character inside a translated label points backwards in one of the two
 * directions, always.
 */
.testimonial .avtm-arrow svg {
	transform: scaleX(var(--avtm-flip, 1));
}

.testimonial .avtm-arrow--next svg {
	--avtm-flip: -1;
}

[dir="rtl"] .testimonial .avtm-arrow svg {
	--avtm-flip: -1;
}

[dir="rtl"] .testimonial .avtm-arrow--next svg {
	--avtm-flip: 1;
}

.testimonial .avtm-bullets {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
}

/*
 * The hit area is 24px; the dot inside it is 8px. A dot you have to aim at is
 * a control that only works with a mouse and a steady hand.
 */
.testimonial .avtm-bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.testimonial .avtm-bullet > span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(30, 45, 55, 0.22);
	transition: background 0.15s ease, transform 0.15s ease;
}

.testimonial .avtm-bullet:hover > span {
	background: rgba(44, 177, 169, 0.6);
}

.testimonial .avtm-bullet:focus-visible {
	outline: 2px solid #0f766e;
	outline-offset: 0;
	border-radius: 999px;
}

.testimonial .avtm-bullet.is-current > span {
	background: #2cb1a9;
	transform: scale(1.5);
}

/* The live region that announces the position to a screen reader. Moved out of
   sight rather than hidden: `display: none` is not announced. */
.testimonial .avtm-sr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Administrators only — see Avtm_Shortcode::unavailable(). */
.avtm-notice {
	margin: 16px auto;
	max-width: 1120px;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid rgba(248, 186, 95, 0.55);
	background: rgba(248, 186, 95, 0.12);
	color: #54595f;
	font-size: 14px;
	line-height: 1.9;
}

.avtm-notice em {
	display: block;
	margin-block-start: 4px;
	font-size: 12.5px;
	opacity: 0.75;
}

/* While a pointer drag is in progress the row must follow the finger exactly,
   so the easing is off and text selection is suppressed. */
.testimonial .glide-comments.is-dragging .glide__slides {
	transition: none;
}

.testimonial .glide-comments.is-dragging,
.testimonial .glide-comments.is-dragging * {
	user-select: none;
}

.testimonial .glide-comments .glide__track {
	/* Vertical panning stays with the page: a carousel that swallows a downward
	   swipe traps the reader inside it. */
	touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
	.testimonial .glide-comments .glide__slides,
	.testimonial .glide-comments .glide__slide,
	.testimonial .avtm-arrow,
	.testimonial .avtm-bullet > span {
		transition: none !important;
	}
}

/* ================================================================
   3. DESIGN — supplied carousel design, verbatim
   ================================================================ */

/* Main carousel wrapper */
.testimonial .glide-comments {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Track */
.testimonial .glide-comments .glide__track {
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Slides row */
.testimonial .glide-comments .glide__slides {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Base slide */
.testimonial .glide-comments .glide__slide {
  height: 260px !important;
  min-height: 260px !important;
  padding: 30px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.46) !important;
  border: none !important;
  box-shadow: 0 18px 50px rgba(20, 80, 90, 0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  opacity: 0.22 !important;
  transform: scale(0.82) !important;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: none;
  box-sizing: border-box !important;
}

/* Desktop: active and neighboring slides */
.testimonial .glide-comments .glide__slide--active {
  height: 260px !important;
  min-height: 260px !important;
  opacity: 0.28 !important;
  transform: scale(0.84) !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.46) !important;
  box-shadow: 0 18px 50px rgba(20, 80, 90, 0.06) !important;
  pointer-events: auto;
}

.testimonial .glide-comments .glide__slide:has(+ .glide__slide--active) {
  height: 260px !important;
  min-height: 260px !important;
  opacity: 0.22 !important;
  transform: scale(0.82) !important;
  z-index: 1 !important;
  background: rgba(255, 255, 255, 0.46) !important;
  box-shadow: 0 18px 50px rgba(20, 80, 90, 0.06) !important;
}

.testimonial .glide-comments .glide__slide--active + .glide__slide {
  height: 360px !important;
  min-height: 360px !important;
  opacity: 1 !important;
  transform: scale(1.08) !important;
  z-index: 6 !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 25px 80px rgba(44, 177, 169, 0.22) !important;
  pointer-events: auto;
  border: none !important;
  margin: 30px ;
}

/* Remove quote from all non-center cards */
.testimonial .glide-comments .glide__slide::before,
.testimonial .glide-comments .glide__slide:has(+ .glide__slide--active)::before {
  content: none !important;
}

/* Quote only on desktop visual center */
.testimonial .glide-comments .glide__slide--active + .glide__slide::before {
  content: "”" !important;
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 76px;
  line-height: 1;
  color: rgba(44, 177, 169, 0.55);
  font-family: serif;
  pointer-events: none;
}

/* Move profile/header below comment text */
.testimonial .glide-comments .glide__slide > div:first-child {
  margin: 0 !important;
  order: 2;
}

.testimonial .glide-comments .glide__slide > div:first-child > div {
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 22px 0 0 !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: center !important;
}

/* Avatar */
.testimonial .glide-comments .glide__slide img {
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 3px solid rgba(44, 177, 169, 0.75) !important;
  padding: 2px !important;
  background: #fff !important;
}

/* Text */
.testimonial .glide-comments .glide__slide p {
  margin-top: 0 !important;
  text-align: center !important;
  line-height: 2.1 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: rgba(30, 45, 55, 0.72) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

/* Name and role */
.testimonial .glide-comments .glide__slide span:first-child {
  color: #0f766e !important;
  font-weight: 700 !important;
}
.testimonial .glide-comments .glide__slide span:last-child {
  color: rgba(30, 45, 55, 0.75) !important;
}

/* Background glow */
.testimonial .glide-comments::before {
  content: "";
  position: absolute;
  inset: -80px -120px;
  background:
    radial-gradient(circle at 50% 25%, rgba(44, 177, 169, 0.18), transparent 38%),
    radial-gradient(circle at 30% 55%, rgba(26, 167, 255, 0.10), transparent 32%);
  pointer-events: none;
  z-index: -1;
}

/* ================================
   Mobile
================================ */
@media (max-width: 768px) {
  .testimonial .glide-comments {
    max-width: 100% !important;
    width: 100% !important;
    padding: 32px 16px 52px !important;
    overflow: hidden !important;
  }

  .testimonial .glide-comments .glide__slide,
  .testimonial .glide-comments .glide__slide--active,
  .testimonial .glide-comments .glide__slide:has(+ .glide__slide--active),
  .testimonial .glide-comments .glide__slide--active + .glide__slide {
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    padding: 28px 24px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 2 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 60px rgba(44, 177, 169, 0.18) !important;
    pointer-events: auto !important;
    border: none !important;
  }

  .testimonial .glide-comments .glide__slide::before {
    content: "”" !important;
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: 54px;
    line-height: 1;
    color: rgba(44, 177, 169, 0.50);
    font-family: serif;
    pointer-events: none;
  }

  .testimonial .glide-comments .glide__slide > div:first-child > div {
    margin: 22px 0 0 !important;
    gap: 8px !important;
  }

  .testimonial .glide-comments .glide__slide p {
    font-size: 15px !important;
    line-height: 2 !important;
    color: rgba(20, 35, 45, 0.95) !important;
    -webkit-line-clamp: 4 !important;
  }

  .testimonial .glide-comments .glide__slide span:first-child {
    font-size: 17px !important;
  }

  .testimonial .glide-comments .glide__slide span:last-child {
    font-size: 13px !important;
  }
}

/* ================================================================
   4. FALLBACK — before, and without, JavaScript
   ================================================================

   The script adds `is-ready` once it has measured the track and placed the
   slides. Until then — and forever, on a visit where the script never arrives —
   the design above would render every card at 22% opacity, scaled down, in a
   row eleven cards wide with its overflow clipped: a strip of illegible
   ghosts with no way to move them.

   So the pre-ready state is a plain readable column instead. It has to be
   !important and it has to be last in the file, because layer 3 is !important
   throughout and one extra class is the only way to outrank it.
   ================================================================ */

.testimonial .glide-comments:not(.is-ready) {
	overflow: visible !important;
	padding-block: 8px !important;
}

.testimonial .glide-comments:not(.is-ready) .glide__track {
	overflow: visible !important;
}

.testimonial .glide-comments:not(.is-ready) .glide__slides {
	flex-direction: column !important;
	gap: 16px !important;
	transition: none !important;
}

.testimonial .glide-comments:not(.is-ready) .glide__slide,
.testimonial .glide-comments:not(.is-ready) .glide__slide--active,
.testimonial .glide-comments:not(.is-ready) .glide__slide--active + .glide__slide {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	background: rgba(255, 255, 255, 0.82) !important;
}

/* No clamp without a carousel: the whole point of the fallback is that the
   comments are readable, and four lines of a cut sentence are not. */
.testimonial .glide-comments:not(.is-ready) .glide__slide p {
	display: block !important;
	-webkit-line-clamp: none !important;
	overflow: visible !important;
}

/* Controls that cannot control anything yet. */
.testimonial .glide-comments:not(.is-ready) .avtm-controls {
	display: none !important;
}