/**
 * The homepage News and Opportunities band.
 *
 * Built to sit among what is already on that page rather than next to it. The
 * homepage is Elementor over the Hello theme, and everything on it that holds
 * content is a white card with an eight pixel radius and one soft blue grey
 * shadow, with square red buttons. So this is a white card too.
 *
 *   card        #ffffff, radius 8px, shadow rgba(39,57,101,.1) 0 4px 15px 4px
 *   brand red   #830606
 *   body text   #333333
 *   headings    Poppins, already loaded by the theme
 *
 * The picture takes the left of the card and the words sit on white beside
 * it. The first version put white text over the picture, which reads well
 * against a dark photograph and disappears entirely against a pale one. Since
 * whoever posts an opportunity chooses the picture, the layout cannot depend
 * on what that picture looks like.
 *
 * The band is a fixed shape with the slides laid side by side inside it and
 * the whole row moved by a transform. Transform rather than left, because a
 * transform is the one thing a browser can move without redrawing the page
 * around it, which is what keeps this smooth on a cheap phone.
 *
 * Everything is scoped to .adroit-oslider so the theme and Elementor cannot
 * be touched by any of it.
 */

.adroit-oslider {
	--s-brand: #830606;
	--s-brand-deep: #6f0b0b;
	--s-ink: #333333;
	--s-ink-strong: #1a1a1a;
	--s-faint: #6b7076;
	--s-rule: #e6e8ec;
	--s-card: 0 4px 15px 4px rgba(39, 57, 101, .1);
	--s-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--s-news: #35566e;
	--s-scholarships: #1b6349;
	--s-jobs: #8a5d00;
	--s-competitions: #6b2d6b;
	--s-other: #55504f;

	--s-height: 340px;

	position: relative;
	color: var(--s-ink);
	font-size: 16px;
	line-height: 1.55;
}

.adroit-oslider *, .adroit-oslider *::before, .adroit-oslider *::after { box-sizing: border-box; }

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

.adroit-oslider-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
	margin: 0 0 .9rem;
}
.adroit-oslider-heading {
	margin: 0;
	font-family: var(--s-head); font-weight: 700; font-size: 1.5rem;
	color: var(--s-ink-strong);
}
.adroit-oslider-more {
	font-family: var(--s-head); font-size: .88rem; font-weight: 600;
	color: var(--s-brand) !important; text-decoration: none !important;
	border-bottom: 1px solid currentColor;
}
.adroit-oslider-more:hover { color: var(--s-brand-deep) !important; }

/* --------------------------------------------------------------- frame -- */

.adroit-oslider-frame {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--s-card);
	touch-action: pan-y;
}

.adroit-oslider-track {
	display: flex;
	/*
	 * No transition until the script has set the first position, otherwise
	 * the whole row visibly slides in from nowhere on load.
	 */
	will-change: transform;
}
.adroit-oslider-track.is-live { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.adroit-oslider-track.is-dragging { transition: none; }

/* --------------------------------------------------------------- slide -- */

.adroit-oslide {
	flex: 0 0 100%;
	min-width: 100%;
	display: flex;
	/*
	 * A set height, not a minimum. With no height of its own the card takes
	 * whatever the picture wants, and the pictures people post here are phone
	 * photographs in portrait, so one of them turns the card into a nine
	 * hundred pixel tower with the words stranded at the top.
	 */
	height: var(--s-height);
	background: #fff;
	overflow: hidden;
}

.adroit-oslide-media {
	position: relative;
	flex: 0 0 44%;
	height: 100%;
	overflow: hidden;
	background: var(--s-other);
	display: block;
}

/*
 * Pinned to its panel rather than left to its own proportions, so a portrait
 * phone photograph fills the panel instead of deciding how tall the card is.
 *
 * Written through three class names on purpose. Themes and their plugins all
 * ship a blanket img { height: auto } to stop stretched pictures, and on this
 * site one of those was winning against a single class selector, which is how
 * a 340 pixel panel ended up with a 544 pixel picture in it. This selector
 * outranks them without resorting to !important.
 */
.adroit-oslider .adroit-oslide .adroit-oslide-photo {
	position: absolute; inset: 0;
	display: block;
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
}

/* A slide with no picture draws its own panel in the section's colour. */
.adroit-oslide--drawn[data-section="news"] .adroit-oslide-media { background: var(--s-news); }
.adroit-oslide--drawn[data-section="scholarships"] .adroit-oslide-media { background: var(--s-scholarships); }
.adroit-oslide--drawn[data-section="jobs"] .adroit-oslide-media { background: var(--s-jobs); }
.adroit-oslide--drawn[data-section="competitions"] .adroit-oslide-media { background: var(--s-competitions); }

.adroit-oslide-drawn {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
	font-family: var(--s-head); font-weight: 700; font-size: 1.15rem;
	text-align: center; color: rgba(255,255,255,.92);
	background-image:
		radial-gradient(circle at 76% 24%, rgba(255,255,255,.14), transparent 58%),
		linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 14px);
}

/* ---------------------------------------------------------------- body -- */

.adroit-oslide-body {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	padding: 1.5rem 1.7rem;
	display: flex; flex-direction: column; justify-content: center;
}

.adroit-oslide-tags {
	display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
	margin: 0 0 .5rem;
}
.adroit-oslide-kind, .adroit-oslide-flag {
	display: inline-block;
	padding: .2rem .6rem;
	font-family: var(--s-head); font-size: .72rem; font-weight: 600;
	letter-spacing: .02em;
	border-radius: 999px;
}
.adroit-oslide-kind { background: #f4f5f7; color: var(--s-faint); }
.adroit-oslide--drawn[data-section="news"] .adroit-oslide-kind,
.adroit-oslide[data-section="news"] .adroit-oslide-kind { color: var(--s-news); }
.adroit-oslide[data-section="scholarships"] .adroit-oslide-kind { color: var(--s-scholarships); }
.adroit-oslide[data-section="jobs"] .adroit-oslide-kind { color: var(--s-jobs); }
.adroit-oslide[data-section="competitions"] .adroit-oslide-kind { color: var(--s-competitions); }

.adroit-oslide-flag { background: #f1f2f4; color: var(--s-faint); }
.adroit-oslide-flag--closing { background: #fdf3df; color: #8a5d00; }

.adroit-oslide-title {
	margin: 0 0 .3rem;
	font-family: var(--s-head); font-weight: 700;
	font-size: clamp(1.15rem, 1.9vw, 1.55rem);
	line-height: 1.25;
}
.adroit-oslide-title a {
	color: var(--s-ink-strong) !important; text-decoration: none !important;
}
.adroit-oslide-title a:hover { color: var(--s-brand) !important; }

.adroit-oslide-meta {
	margin: 0 0 .5rem;
	font-size: .84rem; color: var(--s-faint);
}

/*
 * Clamped rather than trimmed to a word count alone, so a long title and a
 * long summary together can never push the card taller than its neighbours
 * and make the band jump as it moves.
 */
.adroit-oslide-summary {
	margin: 0 0 1rem;
	font-size: .93rem; color: var(--s-ink);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
	overflow: hidden;
}

.adroit-oslide-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.adroit-oslide-read, .adroit-oslide-apply {
	display: inline-block;
	padding: .55rem 1.15rem;
	font-family: var(--s-head); font-size: .85rem; font-weight: 600;
	border-radius: 2px; text-decoration: none !important;
	transition: background .14s, color .14s, border-color .14s;
}
.adroit-oslide-read { background: var(--s-brand); color: #fff !important; border: 1px solid var(--s-brand); }
.adroit-oslide-read:hover { background: var(--s-brand-deep); border-color: var(--s-brand-deep); color: #fff !important; }
.adroit-oslide-apply {
	background: #fff; color: var(--s-brand) !important;
	border: 1px solid var(--s-rule);
}
.adroit-oslide-apply:hover { border-color: var(--s-brand); background: #fdf6f6; }

.adroit-oslider :focus-visible { outline: 2px solid var(--s-brand); outline-offset: 2px; }

/* ------------------------------------------------------------- arrows -- */

.adroit-oslider-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 3;
	width: 36px; height: 36px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem; line-height: 1;
	color: #fff; background: rgba(131, 6, 6, .85);
	border: 0; border-radius: 50%;
	cursor: pointer;
	transition: background .14s;
}
.adroit-oslider-arrow:hover { background: var(--s-brand); }
.adroit-oslider-arrow svg { width: 15px; height: 15px; display: block; }
.adroit-oslider-arrow--back { left: .6rem; }

/*
 * The forward arrow sits on the picture too rather than out on the white,
 * where it would land in the middle of a sentence. Both of them stay over the
 * media panel, which is the one part of the card with nothing to read in it.
 */
.adroit-oslider-arrow--on { left: calc(44% - 2.85rem); }
.adroit-oslider-arrow[hidden] { display: none; }

/* ------------------------------------------------------- dots and pause -- */

.adroit-oslider-bar {
	display: flex; align-items: center; justify-content: center;
	gap: .8rem;
	margin: .85rem 0 0;
}
.adroit-oslider-dots { display: flex; gap: .35rem; }
.adroit-oslider-dot {
	width: 8px; height: 8px; padding: 0;
	background: #d7d9de;
	border: 0; border-radius: 50%; cursor: pointer;
	transition: background .14s, transform .14s;
}
.adroit-oslider-dot:hover { background: #b6b9c0; }
.adroit-oslider-dot.is-on { background: var(--s-brand); transform: scale(1.3); }

.adroit-oslider-pause {
	padding: .15rem .55rem;
	font-family: var(--s-head); font-size: .7rem; font-weight: 600;
	color: var(--s-faint); background: transparent;
	border: 1px solid var(--s-rule); border-radius: 999px;
	cursor: pointer;
}
.adroit-oslider-pause:hover { color: var(--s-brand); border-color: var(--s-brand); }

/* --------------------------------------------------------------- phone -- */

@media (max-width: 782px) {
	.adroit-oslide { flex-direction: column; height: auto; }
	.adroit-oslide-media { flex: 0 0 auto; height: 180px; width: 100%; }
	.adroit-oslide-body { padding: 1.15rem 1.15rem 1.35rem; }
	.adroit-oslide-summary { -webkit-line-clamp: 2; }
	.adroit-oslide-title { font-size: 1.15rem; }

	/* Both arrows back onto the picture, which is now the top strip. */
	.adroit-oslider-arrow { top: 85px; width: 32px; height: 32px; font-size: 1.2rem; }
	.adroit-oslider-arrow--back { left: .5rem; }
	.adroit-oslider-arrow--on { left: auto; right: .5rem; }
}

/*
 * Somebody who has asked their machine to stop things moving gets a band that
 * does not move on its own and does not slide when they press an arrow. They
 * still get every slide, and every control still works.
 */
@media (prefers-reduced-motion: reduce) {
	.adroit-oslider-track.is-live { transition: none; }
}