/* =====================================================================
   Swiper prev/next button chrome — CUHK 2026 style guide.
   Ported from base.css (NOT components.css — same "check base.css too"
   lesson as .icon-row, see AUDIT_CHECKLIST.md). Shared across every
   pattern that uses a Swiper carousel (Card List 1, Card List 2, and any
   future one) — the button positioning/sizing is identical everywhere,
   only the arrow icon color variant (--dark/--white) differs per pattern
   background.

   Also carries one general (non-button) Swiper fix, despite the
   filename — kept here rather than a new file since this is already
   the one CSS module loaded exactly when a pattern needs Swiper (see
   cuhk_patterns_needing_swiper() in cuhk-patterns.php):

   CORRECTION (found 2026-07-04, explicit user instruction: "each item
   height of card list 1 should stay the same"): Swiper's own bundled
   CSS sets `.swiper-slide{height:100%}`. Since `.swiper`/`.swiper-
   wrapper` never have an explicit (non-auto) height of their own in
   this project (they size to fit their tallest slide), that 100%
   can't actually resolve against anything, so — counterintuitively —
   it does NOT fall back to flexbox's `align-items:stretch` equalizing
   the slides either: stretch only activates when an item's cross-size
   *computes to the literal keyword* `auto`, and an explicit (if
   unresolvable) `100%` disables it. Net effect: every slide quietly
   sized to its own content instead of the tallest one, so cards with
   less text ended up visibly shorter — confirmed by forcing
   `height:auto` directly in the browser first, which immediately
   equalized every slide to the tallest one's height with no other
   change needed. Overriding the specified value to `auto` here (not
   just relying on source order — Swiper's bundled CSS already loses on
   source order since this file depends on it, so this override exists
   to change the VALUE from 100% to auto, not to win a specificity/order
   fight) restores real flex stretch. */
.swiper-slide {
	height: auto;
	align-self: stretch;
}

.swiper-button-prev,
.swiper-button-next {
	width: 35px;
	height: 35px;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0;
}
.swiper-button-prev {
	left: -10px;
}
.swiper-button-next {
	right: -10px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
	content: "";
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.swiper-button-prev::after {
	background-image: url("../cuhk-patterns/assets/img/swiper_left_dark.svg");
}
.swiper-button-next::after {
	background-image: url("../cuhk-patterns/assets/img/swiper_right_dark.svg");
}
.swiper-button-prev--white::after {
	background-image: url("../cuhk-patterns/assets/img/swiper_left_white.svg");
}
.swiper-button-next--white::after {
	background-image: url("../cuhk-patterns/assets/img/swiper_right_white.svg");
}
.swiper-button-prev--dark::after {
	background-image: url("../cuhk-patterns/assets/img/swiper_left_dark.svg");
}
.swiper-button-next--dark::after {
	background-image: url("../cuhk-patterns/assets/img/swiper_right_dark.svg");
}

@media (min-width: 64rem) { /* 1024px */
	.swiper-button-prev,
	.swiper-button-next {
		width: 45px;
		height: 45px;
	}
	.swiper-button-prev {
		left: -30px;
	}
	.swiper-button-next {
		right: -30px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.swiper-button-prev,
	.swiper-button-next {
		width: 60px;
		height: 60px;
	}
	.swiper-button-prev {
		left: -40px;
	}
	.swiper-button-next {
		right: -40px;
	}
}