/*
 * RahkarTheme — rahkar/testimonials (frontend).
 *
 * Scroll-snap rail of testimonial cards. Same rail mechanics as
 * blocks/products-slider (arrows picked server-side, logical properties for
 * RTL), but its own card visuals built on theme.json tokens.
 *
 * Item width:  flex-basis = (100% - gap × (N - 1)) / N
 *   desktop N = --rtm-cols, mobile N = --rtm-mob (fractional → peek affordance)
 */

.wp-block-rahkar-testimonials {
	--rtm-cols:   4;
	--rtm-mob:    1.2;
	--rtm-gap:    16px;
	--rtm-radius: 16px;
	--rtm-edge:   16px;
	margin-block: 0;
}

/* Wrapper for the hook-injected section (placed above the footer on the front
   page). Gives it a full-bleed surface band + a width-constrained inner. */
.rtm-section {
	background: var(--wp--preset--color--surface, #f7f7f8);
	padding-block: var(--wp--preset--spacing--50, 3rem);
}
.rtm-section__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 24px);
}

/* ─── Heading ──────────────────────────────────────────────────────── */
.rtm-heading {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--2xl, 1.875rem);
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--contrast, #0f1115);
}

/* ─── Frame / track ────────────────────────────────────────────────── */
.rtm-frame { position: relative; }

.rtm-track {
	display: flex;
	gap: var(--rtm-gap);
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline-start: var(--rtm-edge);
	padding-inline: var(--rtm-edge);
	margin-inline: calc(var(--rtm-edge) * -1);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.rtm-track::-webkit-scrollbar { display: none; }

.rtm-track > * {
	flex: 0 0 calc((100% - var(--rtm-gap) * (var(--rtm-cols) - 1)) / var(--rtm-cols));
	min-width: 0;
	scroll-snap-align: start;
}

/* ─── Card ─────────────────────────────────────────────────────────── */
.rtm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--rtm-radius);
	box-shadow: var(--wp--preset--shadow--sm, 0 2px 6px rgba(15,17,21,0.08));
	overflow: hidden;
}

.rtm-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rtm-card__face {
	flex: 0 0 auto;
	display: block; /* kills the inline baseline gap so the ring stays even */
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--muted, #eceef1);
}
.rtm-card__face--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--wp--preset--color--primary, #0a66c2);
}

.rtm-card__id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.rtm-card__name {
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #0f1115);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rtm-card__insta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #5b6271);
	text-decoration: none;
}
.rtm-card__insta:hover { color: var(--wp--preset--color--primary, #0a66c2); }
.rtm-card__loc {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #5b6271);
}

/* Decorative oversized quote mark, pinned to the inline-end top corner. */
.rtm-card__quote {
	position: absolute;
	inset-inline-end: 14px;
	top: 2px;
	font-size: 3.2rem;
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--wp--preset--color--muted, #eceef1);
	pointer-events: none;
	user-select: none;
}

.rtm-card__text {
	margin: 0;
	color: var(--wp--preset--color--text, #1a1d23);
	line-height: 1.8;
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	/* Clamp to keep cards even; full text shows in the modal. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rtm-card__foot { margin-top: auto; }

/* ─── Avatar + Instagram-story ring ────────────────────────────────────
   When the testimonial has media, the avatar becomes a button with a
   gradient ring (Instagram story look) and opens the modal gallery on click.
   Without media it's a plain, non-interactive avatar. */
.rtm-card__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	position: relative;
	/* <button> doesn't inherit font by default — force it so the count badge
	   renders in Vazirmatn like the rest of the card, not the UA button font. */
	font-family: inherit;
}
.rtm-card__avatar--ring {
	cursor: pointer;
	border-radius: 50%;
}
/* The gradient ring: a 2.5px conic/linear gradient frame with a white gap
   between the ring and the photo — exactly the Instagram story affordance. */
.rtm-card__avatar--ring .rtm-card__ring {
	display: inline-block;
	padding: 2.5px;
	border-radius: 50%;
	background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.rtm-card__avatar--ring .rtm-card__face {
	border: 2px solid var(--wp--preset--color--base, #fff);
}
.rtm-card__avatar--ring:hover .rtm-card__ring { filter: brightness(1.05); }
.rtm-card__avatar--ring:active { transform: scale(0.97); }
.rtm-card__avatar--ring:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 3px;
}
/* Count badge for multi-item galleries (e.g. several photos). */
.rtm-card__avatar-badge {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
	font-family: var(--wp--preset--font-family--vazirmatn, inherit);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	border: 2px solid var(--wp--preset--color--base, #fff);
}

/* ─── Submit tile (trailing) ───────────────────────────────────────── */
.rtm-submit-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	min-height: 200px;
	border: 1.5px dashed var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--rtm-radius);
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--wp--preset--color--primary, #0a66c2);
	font-family: inherit;
	cursor: pointer;
	padding: 18px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.rtm-submit-tile:hover {
	background: var(--wp--preset--color--muted, #eceef1);
	border-color: var(--wp--preset--color--primary, #0a66c2);
}
.rtm-submit-tile:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 2px;
}
.rtm-submit-tile__circle {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--base, #fff);
	border: 1.5px solid currentColor;
}
.rtm-submit-tile__label { font-weight: 800; }
.rtm-submit-tile__hint {
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--text-muted, #5b6271);
}

/* ─── Arrows (same model as products-slider) ───────────────────────── */
.rtm-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	color: var(--wp--preset--color--contrast, #0f1115);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index: 2;
	padding: 0;
	transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.rtm-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.rtm-arrow:active { transform: translateY(-50%) scale(0.95); }
.rtm-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 2px;
}
.rtm-arrow[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.rtm-arrow--prev { inset-inline-start: -8px; }
.rtm-arrow--next { inset-inline-end:   -8px; }

/* ─── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 782px) {
	.rtm-heading { font-size: var(--wp--preset--font-size--xl, 1.5rem); margin-bottom: 14px; }
	.rtm-track > * {
		flex: 0 0 calc((100% - var(--rtm-gap) * (var(--rtm-mob) - 1)) / var(--rtm-mob));
	}
	.rtm-arrow { width: 36px; height: 36px; }
	.rtm-arrow--prev { inset-inline-start: 2px; }
	.rtm-arrow--next { inset-inline-end:   2px; }
}
@media (max-width: 419px) {
	.rtm-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rtm-track { scroll-behavior: auto; }
}