/*
 * Alumni testimonials.
 *
 * The values here are the ones the Alumni page already paints - same card, same gold rail that
 * grows on hover, same ringed avatar, same underlined section heading - lifted so the shortcode
 * reproduces that section rather than approximating it.
 *
 * Class names are prefixed rather than reusing the page's own `.card` / `.avatar` / `.grid`:
 * those are generic enough to collide with a theme or with Bootstrap wherever this shortcode
 * gets pasted, and the block has to survive being dropped on any page.
 */
.wlsm-tm {
	/*
	 * The whole palette, so a theme can retint the block by redefining these rather than
	 * overriding rules one by one. The -rgb pairs exist because the same two colours are used at
	 * a dozen different alphas in shadows and tints, and rgba() needs the channels separately.
	 * The defaults are the navy-and-gold the site's own testimonial blocks already use.
	 */
	--wlsm-tm-nav: #0d2149;
	--wlsm-tm-nav-rgb: 13, 33, 73;
	--wlsm-tm-gold: #e8b04b;
	--wlsm-tm-gold-rgb: 232, 176, 75;
	--wlsm-tm-gold-dark: #c98f2e;
	--wlsm-tm-ink: #1f2937;
	--wlsm-tm-muted: #5b6b7f;
	--wlsm-tm-line: #e3e9f2;
	--wlsm-tm-role: #b8860b;
	--wlsm-tm-card: #fff;
	--wlsm-tm-avatar-bg: #eef2f7;

	/* Suvichar card. */
	--wlsm-tm-sv-card-2: #f6f9ff;
	--wlsm-tm-sv-line: #e3e9f4;
	--wlsm-tm-sv-text: #16294c;
	--wlsm-tm-sv-by: #8a6d2a;

	padding: clamp(34px, 5vw, 62px) 0;
	color: var(--wlsm-tm-ink);
	font-family: inherit;
}

/*
 * Side gutter for the grid.
 *
 * The block is often dropped straight into a full-bleed container - on the Alumni page the
 * surrounding stylesheet's .container resolves to max-width:100%, so the outer cards were
 * starting at x=-5 on a 1280px screen, i.e. just past the edge. This gives the grid its own
 * breathing room instead of relying on whatever wraps it.
 *
 * Not applied to the slider: that one is already inset by its own layout, and padding it further
 * would leave it visibly narrower than the heading band sitting above it on the home page.
 */
.wlsm-tm:not(.wlsm-tm--slider) {
	/*
	 * The floor is deliberately small. A phone-width page usually already has a gutter of its
	 * own - the Alumni page gives 25px - so a large floor would just narrow the cards twice over,
	 * and Hindi text at 300px wide does not have room to spare. It stays non-zero so the block
	 * still never touches the edge on a page that provides nothing.
	 */
	padding-left: clamp(4px, 1.5vw, 20px);
	padding-right: clamp(4px, 1.5vw, 20px);
}

/* ---------- section heading ---------- */

.wlsm-tm .wlsm-tm__title {
	position: relative;
	margin: 0 0 14px;
	padding-bottom: 14px;
	color: var(--wlsm-tm-nav);
	font-size: clamp(1.4rem, 2.8vw, 2rem);
	font-weight: 700;
	text-align: center;
}

.wlsm-tm .wlsm-tm__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 62px;
	height: 3px;
	border-radius: 3px;
	background: var(--wlsm-tm-gold);
}

.wlsm-tm .wlsm-tm__subtitle {
	margin: 0 0 clamp(22px, 3vw, 34px);
	color: var(--wlsm-tm-muted);
	font-size: .98rem;
	text-align: center;
}

/* ---------- cards ---------- */

.wlsm-tm .wlsm-tm__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
}

.wlsm-tm .wlsm-tm__card {
	position: relative;
	overflow: hidden;
	padding: 26px 24px 24px;
	border: 1px solid var(--wlsm-tm-line);
	border-radius: 16px;
	background: var(--wlsm-tm-card);
	box-shadow: 0 6px 18px rgba(var(--wlsm-tm-nav-rgb), .06);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* The gold rail sits short and grows to full height on hover. */
.wlsm-tm .wlsm-tm__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--wlsm-tm-gold), rgba(var(--wlsm-tm-gold-rgb), .25));
	transform: scaleY(.35);
	transform-origin: top;
	transition: transform .28s ease;
}

.wlsm-tm .wlsm-tm__card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--wlsm-tm-gold-rgb), .55);
	box-shadow: 0 16px 34px rgba(var(--wlsm-tm-nav-rgb), .14);
}

.wlsm-tm .wlsm-tm__card:hover::before {
	transform: scaleY(1);
}

.wlsm-tm .wlsm-tm__quote {
	position: absolute;
	top: 16px;
	right: 18px;
	color: rgba(var(--wlsm-tm-gold-rgb), .45);
	font-size: 1.4rem;
}

.wlsm-tm .wlsm-tm__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	padding-right: 30px;
}

.wlsm-tm .wlsm-tm__avatar {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 3px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--wlsm-tm-gold), var(--wlsm-tm-gold-dark));
	box-shadow: 0 8px 18px rgba(var(--wlsm-tm-gold-rgb), .3);
}

.wlsm-tm .wlsm-tm__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wlsm-tm-avatar-bg);
}

.wlsm-tm .wlsm-tm__name {
	color: var(--wlsm-tm-nav);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
}

.wlsm-tm .wlsm-tm__role {
	margin-top: 2px;
	color: var(--wlsm-tm-role);
	font-size: .88rem;
	font-weight: 600;
}

.wlsm-tm .wlsm-tm__text {
	margin: 0;
	color: var(--wlsm-tm-muted);
	font-size: .94rem;
	line-height: 1.75;
}

@media (max-width: 620px) {
	.wlsm-tm .wlsm-tm__grid {
		grid-template-columns: 1fr;
	}

	.wlsm-tm .wlsm-tm__card {
		padding: 22px 18px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wlsm-tm .wlsm-tm__card,
	.wlsm-tm .wlsm-tm__card::before {
		transition: none;
	}

	.wlsm-tm .wlsm-tm__card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Slider layout.

   Same cards, moved into a track. Before the script runs - and if it never
   runs - the viewport is a plain horizontal scroller, so the testimonials
   stay readable rather than being clipped to the first card.
   ========================================================================== */

.wlsm-tm--slider .wlsm-tm__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.wlsm-tm--slider.is-ready .wlsm-tm__viewport {
	overflow: hidden;
}

.wlsm-tm--slider .wlsm-tm__track {
	display: flex;
	align-items: stretch;
	gap: 15px;
	will-change: transform;
}

.wlsm-tm--slider .wlsm-tm__slide {
	display: flex;
	flex: 0 0 100%;
	max-width: 100%;
}

/* The card carries the shadow, so the track needs room for it not to be clipped. */
.wlsm-tm--slider .wlsm-tm__card {
	width: 100%;
	margin: 6px 0 18px;
}

/* Lifting a card inside a hidden-overflow viewport just clips it against the edge. */
.wlsm-tm--slider .wlsm-tm__card:hover {
	transform: none;
}

/* ---------- slider controls (optional, per the module's settings) ---------- */

.wlsm-tm__nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 4px;
}

.wlsm-tm .wlsm-tm__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--wlsm-tm-line);
	border-radius: 50%;
	background: var(--wlsm-tm-card);
	color: var(--wlsm-tm-nav);
	font-size: .9rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(var(--wlsm-tm-nav-rgb), .08);
	transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.wlsm-tm .wlsm-tm__arrow:hover,
.wlsm-tm .wlsm-tm__arrow:focus-visible {
	border-color: var(--wlsm-tm-gold);
	color: var(--wlsm-tm-role);
	box-shadow: 0 6px 16px rgba(var(--wlsm-tm-gold-rgb), .28);
}

.wlsm-tm__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.wlsm-tm .wlsm-tm__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--wlsm-tm-nav-rgb), .2);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.wlsm-tm .wlsm-tm__dot:hover {
	background: rgba(var(--wlsm-tm-nav-rgb), .4);
}

.wlsm-tm .wlsm-tm__dot.is-active {
	background: var(--wlsm-tm-gold);
	transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
	.wlsm-tm .wlsm-tm__arrow,
	.wlsm-tm .wlsm-tm__dot {
		transition: none;
	}
}

/* ==========================================================================
   Suvichar - a quotation rather than a person's testimonial.

   Values lifted from the सुविचार block already on the home page (the mu-plugin
   suvichar-modern.php that restyles it), so the shortcode reproduces that card
   rather than approximating it: the same 18px radius, the same two-stop white
   gradient, the same 54x3 gold rule, the same oversized gold quotation mark
   bleeding off the top-left, and the same brown-gold byline.

   Not replicated: that block is pulled up 26px so it overlaps the heading band
   above it. That is a property of where it sits on the home page, not of the
   card, so a shortcode dropped anywhere else must not assume a band is there.
   ========================================================================== */

/*
 * The section's own vertical padding is trimmed right back for this variant. The quotation card
 * already carries 40px above the rule and 34px below the byline, so the usual 62px on top of that
 * is simply a gap - and where the block is tucked up under a heading band, as it is on the home
 * page, that gap undoes the tuck.
 */
.wlsm-tm--suvichar {
	padding-top: clamp(8px, 1vw, 14px);
	padding-bottom: clamp(20px, 2.5vw, 34px);
}

.wlsm-tm--suvichar .wlsm-tm__card--suvichar {
	position: relative;
	overflow: hidden;
	max-width: 900px;
	margin: 0 auto;
	/*
	 * Every slide is as tall as the longest quotation, so that the page does not jump each time
	 * the slider moves. Centring the contents means a short quote sits in the middle of that
	 * height rather than hugging the top with the space left dangling beneath it.
	 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px clamp(22px, 4vw, 56px) 34px;
	border: 1px solid var(--wlsm-tm-sv-line);
	border-radius: 18px;
	background: linear-gradient(160deg, var(--wlsm-tm-card) 0%, var(--wlsm-tm-sv-card-2) 100%);
	box-shadow: 0 18px 44px rgba(var(--wlsm-tm-nav-rgb), .14), 0 2px 6px rgba(var(--wlsm-tm-nav-rgb), .05);
	text-align: center;
}

/*
 * The alumni card draws its gold rail with ::before. Rather than override that rule property by
 * property - and its :hover partner - the rail is switched off outright and the quotation mark
 * uses the free pseudo-element.
 */
.wlsm-tm--suvichar .wlsm-tm__card--suvichar::before {
	content: none;
}

/* The quotation mark sits behind the words, bleeding off the top-left corner. */
.wlsm-tm--suvichar .wlsm-tm__card--suvichar::after {
	content: "\201C";
	position: absolute;
	top: -26px;
	left: 18px;
	z-index: 0;
	color: var(--wlsm-tm-gold);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 150px;
	line-height: 1;
	opacity: .22;
	pointer-events: none;
}

.wlsm-tm--suvichar .wlsm-tm__rule {
	position: relative;
	z-index: 1;
	display: block;
	width: 54px;
	height: 3px;
	margin: 0 auto 18px;
	border-radius: 3px;
	background: var(--wlsm-tm-gold);
}

.wlsm-tm--suvichar .wlsm-tm__text {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--wlsm-tm-sv-text);
	font-size: clamp(16px, 1.7vw, 21px);
	font-weight: 600;
	line-height: 1.75;
}

.wlsm-tm--suvichar .wlsm-tm__by {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 14px;
	color: var(--wlsm-tm-sv-by);
	font-size: clamp(12.5px, 1.15vw, 14.5px);
	font-weight: 700;
	letter-spacing: .08em;
}

.wlsm-tm--suvichar .wlsm-tm__by::before {
	content: "— ";
	opacity: .7;
}

/* A quotation card carries no shadow of its own to lift, and no rail to grow. */
.wlsm-tm--suvichar .wlsm-tm__card--suvichar:hover {
	transform: none;
	border-color: var(--wlsm-tm-sv-line);
	box-shadow: 0 18px 44px rgba(var(--wlsm-tm-nav-rgb), .14), 0 2px 6px rgba(var(--wlsm-tm-nav-rgb), .05);
}

@media (max-width: 620px) {
	.wlsm-tm--suvichar .wlsm-tm__card--suvichar::after {
		top: -18px;
		font-size: 110px;
	}
}

/* ---------- public submission form ---------- */

/*
 * Painted from the same custom properties as the cards above, so a theme that has retinted the
 * block - the Prime child theme rewrites all fifteen to maroon - gets a matching form without
 * touching anything here.
 */

.wlsm-tm--form .wlsm-tm__form {
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(20px, 3.2vw, 38px);
	border: 1px solid var(--wlsm-tm-line);
	border-radius: 14px;
	background: var(--wlsm-tm-card);
	box-shadow: 0 10px 30px rgba(var(--wlsm-tm-nav-rgb), .07);
}

.wlsm-tm--form .wlsm-tm__form-head {
	max-width: 860px;
	margin: 0 auto 22px;
	text-align: center;
}

/*
 * The honeypot has to be genuinely off-screen rather than display:none - some bots skip fields
 * their layout engine reports as hidden, and the point is that this one gets filled in.
 */
.wlsm-tm--form .wlsm-tm__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wlsm-tm--form .wlsm-tm__form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.wlsm-tm--form .wlsm-tm__field--full {
	grid-column: 1 / -1;
}

.wlsm-tm--form .wlsm-tm__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wlsm-tm--form .wlsm-tm__label {
	margin-bottom: 7px;
	color: var(--wlsm-tm-nav);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
}

.wlsm-tm--form .wlsm-tm__req {
	color: #c0392b;
}

.wlsm-tm--form .wlsm-tm__hint {
	color: var(--wlsm-tm-muted);
	font-weight: 400;
	font-size: 12.5px;
}

.wlsm-tm--form .wlsm-tm__form input[type="text"],
.wlsm-tm--form .wlsm-tm__form input[type="email"],
.wlsm-tm--form .wlsm-tm__form input[type="tel"],
.wlsm-tm--form .wlsm-tm__form textarea {
	width: 100%;
	max-width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--wlsm-tm-line);
	border-radius: 9px;
	background: #fff;
	color: var(--wlsm-tm-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.55;
	transition: border-color .18s ease, box-shadow .18s ease;
	/* Without this a theme's global box-sizing:content-box pushes the field past the column. */
	box-sizing: border-box;
}

.wlsm-tm--form .wlsm-tm__form textarea {
	resize: vertical;
	min-height: 140px;
}

.wlsm-tm--form .wlsm-tm__form input[type="text"]:focus,
.wlsm-tm--form .wlsm-tm__form input[type="email"]:focus,
.wlsm-tm--form .wlsm-tm__form input[type="tel"]:focus,
.wlsm-tm--form .wlsm-tm__form textarea:focus {
	outline: none;
	border-color: var(--wlsm-tm-gold);
	box-shadow: 0 0 0 3px rgba(var(--wlsm-tm-gold-rgb), .22);
}

.wlsm-tm--form .wlsm-tm__form .is-invalid {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

.wlsm-tm--form .wlsm-tm__form input[type="file"] {
	padding: 9px 0;
	color: var(--wlsm-tm-muted);
	font-size: 14px;
}

.wlsm-tm--form .wlsm-tm__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.wlsm-tm--form .wlsm-tm__choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wlsm-tm-ink);
	font-size: 15px;
	cursor: pointer;
}

.wlsm-tm--form .wlsm-tm__count {
	align-self: flex-end;
	margin-top: 6px;
	color: var(--wlsm-tm-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* Only while the message is too short to send - silent once it is long enough. */
.wlsm-tm--form .wlsm-tm__count.is-short {
	color: #c0392b;
}

.wlsm-tm--form .wlsm-tm__error {
	display: none;
	margin-top: 6px;
	color: #c0392b;
	font-size: 13px;
	line-height: 1.4;
}

.wlsm-tm--form .wlsm-tm__error.is-shown {
	display: block;
}

.wlsm-tm--form .wlsm-tm__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--wlsm-tm-muted);
	font-size: 14px;
	line-height: 1.55;
	cursor: pointer;
}

.wlsm-tm--form .wlsm-tm__consent input {
	/* Nudged down onto the first line of the label rather than the top of the box. */
	margin-top: 4px;
	flex: 0 0 auto;
}

.wlsm-tm--form .wlsm-tm__form-foot {
	margin-top: 24px;
	text-align: center;
}

.wlsm-tm--form .wlsm-tm__submit {
	min-width: 210px;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wlsm-tm-gold), var(--wlsm-tm-gold-dark));
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
	box-shadow: 0 8px 20px rgba(var(--wlsm-tm-gold-rgb), .32);
}

.wlsm-tm--form .wlsm-tm__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(var(--wlsm-tm-gold-rgb), .4);
}

.wlsm-tm--form .wlsm-tm__submit:disabled {
	opacity: .62;
	cursor: default;
	transform: none;
}

.wlsm-tm--form .wlsm-tm__message {
	display: none;
	margin-top: 18px;
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.55;
	text-align: center;
}

.wlsm-tm--form .wlsm-tm__message.is-shown {
	display: block;
}

.wlsm-tm--form .wlsm-tm__message-ok {
	border: 1px solid #b7dfc4;
	background: #eaf7ef;
	color: #1d6b39;
}

.wlsm-tm--form .wlsm-tm__message-error {
	border: 1px solid #f0c2bc;
	background: #fdeeec;
	color: #a2342a;
}

/* ---------- language selector ---------- */

/*
 * Set apart from the rest of the form: what is chosen here changes what the other fields will
 * accept, so it reads as a decision rather than as the first of several questions.
 */
.wlsm-tm--form .wlsm-tm__field--lang {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--wlsm-tm-line);
}

.wlsm-tm--form .wlsm-tm__select {
	width: auto;
	min-width: 190px;
	max-width: 100%;
	padding: 10px 38px 10px 13px;
	border: 1px solid var(--wlsm-tm-line);
	border-radius: 9px;
	background-color: #fff;
	/* Inline chevron - no image request, and it inherits nothing from the theme's select styling. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6b7f' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 11px;
	color: var(--wlsm-tm-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.55;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.wlsm-tm--form .wlsm-tm__select:focus {
	outline: none;
	border-color: var(--wlsm-tm-gold);
	box-shadow: 0 0 0 3px rgba(var(--wlsm-tm-gold-rgb), .22);
}

.wlsm-tm--form .wlsm-tm__field--lang .wlsm-tm__hint {
	margin-top: 7px;
	font-size: 13px;
}

@media (max-width: 640px) {
	.wlsm-tm--form .wlsm-tm__select {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.wlsm-tm--form .wlsm-tm__form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wlsm-tm--form .wlsm-tm__submit {
		width: 100%;
	}
}