/* ==========================================================================
   Aquatics Calendar — styled for the Maldives Aquatics theme.
   Colours come from Settings (--aqc-deep / --aqc-mid / --aqc-accent-wave);
   fonts are inherited from the theme. Override any --aqc-* variable to restyle.
   ========================================================================== */
.aqc {
	--aqc-deep: #054b6b;
	--aqc-mid: #0f81a6;
	--aqc-accent-wave: #17c8df;
	--aqc-ink: #0b2a3c;
	--aqc-muted: #5b7284;
	--aqc-line: #e2eaf0;
	--aqc-surface: #ffffff;
	--aqc-soft: #f1f6f9;
	--aqc-live: #e5484d;
	--aqc-radius: 18px;
	--aqc-control-h: 44px;
	color: var(--aqc-ink);
	font-size: 16px;
	line-height: 1.45;
	word-spacing: normal;
	letter-spacing: normal;
	max-width: 1200px;
	margin: 0 auto;
}
.aqc *, .aqc *::before, .aqc *::after { box-sizing: border-box; }
.aqc :where(h2, h3, h4, p) { margin: 0; padding: 0; }

/* ---------- Header band ---------- */
.aqc__hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--aqc-radius);
	padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 44px) 88px;
	color: #fff;
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--aqc-accent-wave) 32%, transparent) 0%, transparent 55%),
		linear-gradient(135deg, var(--aqc-deep) 0%, var(--aqc-deep) 35%, var(--aqc-mid) 100%);
	box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--aqc-deep) 75%, transparent);
	isolation: isolate;
}
/* ripple rings, like the theme's page headers */
.aqc__hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -120px;
	top: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 46px, rgba(255, 255, 255, .09) 47px 48px);
	pointer-events: none;
}
.aqc__hero-inner { position: relative; }
.aqc__eyebrow {
	margin-bottom: .45rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aqc-accent-wave);
}
.aqc__title {
	margin-bottom: 1.4rem;
	font-size: clamp(1.9rem, 4.2vw, 2.9rem);
	font-weight: 800;
	line-height: 1.08;
	color: #fff;
}
.aqc__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 84px;
	z-index: -1;
	pointer-events: none;
}
.aqc__wave-back { fill: rgba(255, 255, 255, .06); }
.aqc__wave-front { fill: rgba(255, 255, 255, .09); }
.aqc__wave-line { fill: none; stroke: var(--aqc-accent-wave); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .9; }

/* ---------- Filters ---------- */
.aqc__filters {
	padding: 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.aqc__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	align-items: end;
}
.aqc__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.aqc__field > span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}
.aqc__field select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: var(--aqc-control-h);
	margin: 0;
	padding: 0 2.4rem 0 .95rem;
	border: 0;
	border-radius: 12px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23054b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .95rem center;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	color: var(--aqc-ink);
	cursor: pointer;
}
.aqc__actions { display: flex; gap: 8px; align-items: center; }

/* Buttons share the sport-tab sizing so both rows match. */
.aqc__btn {
	flex: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: .4em;
	min-height: var(--aqc-control-h);
	padding: 0 1.15rem;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .15s, background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.aqc__filters .aqc__btn { background: var(--aqc-accent-wave); color: var(--aqc-deep); box-shadow: 0 8px 20px -10px var(--aqc-accent-wave); }
.aqc__filters .aqc__btn:hover { transform: translateY(-1px); background: #fff; }
.aqc__filters .aqc__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.aqc__filters .aqc__btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.aqc :focus-visible { outline: 3px solid var(--aqc-accent-wave); outline-offset: 2px; }

/* ---------- Sport tabs: floating bar over the wave ---------- */
.aqc__tabs-wrap {
	position: relative;
	z-index: 2;
	margin: -30px clamp(10px, 3vw, 28px) 0;
	padding: 6px;
	border-radius: 999px;
	background: var(--aqc-surface);
	box-shadow: 0 14px 34px -18px rgba(5, 40, 60, .45), 0 1px 0 var(--aqc-line);
}
.aqc__tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
	padding: 0 12px 0 2px;
}
.aqc__tabs::-webkit-scrollbar { display: none; }
.aqc__tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: var(--aqc-control-h);
	padding: 0 1.15rem;
	border-radius: 999px;
	color: var(--aqc-ink);
	font-size: .92rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.aqc__tab:hover { background: var(--aqc-soft); color: var(--aqc-deep); }
.aqc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aqc-sport, var(--aqc-mid)); flex: none; }
.aqc__tab.is-active {
	background: linear-gradient(135deg, var(--aqc-deep), var(--aqc-mid));
	color: #fff;
	box-shadow: 0 8px 18px -10px var(--aqc-deep);
}
.aqc__tab.is-active .aqc__dot { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqc-sport, #fff) 70%, transparent); }

.aqc__summary {
	margin: 22px 6px 6px;
	color: var(--aqc-muted);
	font-size: .88rem;
	font-weight: 600;
	min-height: 1.3em;
}

/* ---------- List ---------- */
.aqc__list { display: grid; gap: 12px; transition: opacity .2s; }
.aqc.is-loading .aqc__list { opacity: .45; pointer-events: none; }
.aqc__month {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 6px 2px;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aqc-deep);
}
.aqc__month::after {
	content: "";
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--aqc-accent-wave), transparent);
	opacity: .6;
}
.aqc__month:first-child { margin-top: 4px; }

.aqc__empty {
	padding: 48px 20px;
	text-align: center;
	color: var(--aqc-muted);
	background: var(--aqc-surface);
	border: 1px dashed var(--aqc-line);
	border-radius: var(--aqc-radius);
}
.aqc__empty::before {
	content: "";
	display: block;
	width: 64px;
	height: 20px;
	margin: 0 auto 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 20'%3E%3Cpath d='M2 10c7.5-8 15-8 22.5 0s15 8 22.5 0 10-5 15-3' fill='none' stroke='%2317c8df' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Card ---------- */
.aqc__card {
	position: relative;
	display: grid;
	grid-template-columns: 88px auto 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 14px 18px 14px 14px;
	overflow: hidden;
	background: var(--aqc-surface);
	border: 1px solid var(--aqc-line);
	border-radius: 16px;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.aqc__card:not(:has(.aqc__img)) { grid-template-columns: 88px 1fr auto; }
.aqc__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--aqc-accent, var(--aqc-mid));
}
.aqc__card:hover {
	transform: translateY(-2px);
	border-color: transparent;
	box-shadow: 0 18px 36px -22px rgba(5, 40, 60, .45);
}

.aqc__date {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	margin-left: 4px;
	padding: 6px;
	overflow: hidden;
	border-radius: 14px;
	color: #fff;
	text-align: center;
	background: linear-gradient(160deg, var(--aqc-deep), var(--aqc-mid));
}
.aqc__date::after { /* mini wave in the date tile */
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -6px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18' preserveAspectRatio='none'%3E%3Cpath d='M0 8c12-7 25-7 37 0s25 7 37 0 18-5 26-3v13H0z' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.aqc__days { position: relative; font-size: 1.35rem; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.aqc__mon { position: relative; margin-top: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.aqc__img { width: 88px; height: 88px; object-fit: contain; border-radius: 12px; background: var(--aqc-soft); }

.aqc__body { min-width: 0; display: grid; gap: 4px; }
.aqc__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aqc-muted); }
.aqc__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--aqc-accent-wave) 16%, transparent);
	color: var(--aqc-deep);
}
.aqc__card--live .aqc__status { background: color-mix(in srgb, var(--aqc-live) 14%, transparent); color: var(--aqc-live); }
.aqc__card--live .aqc__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: aqc-pulse 1.4s infinite; }
.aqc__card--past .aqc__status { background: var(--aqc-soft); color: var(--aqc-muted); }
.aqc__name { font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--aqc-ink); }
.aqc__name a { color: inherit; text-decoration: none; }
.aqc__name a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.aqc__name a:hover { color: var(--aqc-mid); }
.aqc__where, .aqc__when { font-size: .9rem; color: var(--aqc-muted); }
.aqc__noc {
	display: inline-block;
	margin-right: .45rem;
	padding: 1px 7px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--aqc-deep) 9%, transparent);
	color: var(--aqc-deep);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	vertical-align: 1px;
}
.aqc__sports { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.aqc__sport {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	color: var(--aqc-sport);
	background: color-mix(in srgb, var(--aqc-sport) 12%, transparent);
}
.aqc__go {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--aqc-soft);
	color: var(--aqc-mid);
	font-size: 1.1rem;
	font-weight: 700;
	transition: background-color .18s, color .18s, transform .18s;
}
.aqc__card:hover .aqc__go { background: var(--aqc-mid); color: #fff; transform: translateX(3px); }

.aqc__card--past .aqc__date { background: linear-gradient(160deg, #7f97a6, #9fb4c1); }
.aqc__card--past .aqc__name { color: #3b5566; }

/* ---------- Show more ---------- */
.aqc__more-wrap { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.aqc__more {
	min-width: 210px;
	background: var(--aqc-surface);
	color: var(--aqc-mid);
	border-color: var(--aqc-mid);
}
.aqc__more:hover { background: var(--aqc-mid); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--aqc-mid); }

/* ---------- Loading feedback ---------- */
.aqc__spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -.15em;
	animation: aqc-spin .7s linear infinite;
}
.aqc__more.is-busy { pointer-events: none; opacity: .9; }
.aqc__more-error { width: 100%; text-align: center; margin: 0 0 .6rem; color: var(--aqc-live); font-size: .9rem; }
.aqc__skeleton { pointer-events: none; }
.aqc__skeleton::before { background: var(--aqc-line); }
.aqc__skeleton .aqc__date { background: var(--aqc-soft); }
.aqc__skeleton .aqc__date::after { display: none; }
.aqc__skeleton .aqc__body span {
	display: block;
	height: .8rem;
	margin: .3rem 0;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--aqc-soft) 25%, var(--aqc-line) 50%, var(--aqc-soft) 75%);
	background-size: 200% 100%;
	animation: aqc-shimmer 1.2s linear infinite;
}
.aqc__skeleton .aqc__body span:nth-child(1) { width: 25%; }
.aqc__skeleton .aqc__body span:nth-child(2) { width: 65%; height: 1rem; }
.aqc__skeleton .aqc__body span:nth-child(3) { width: 40%; }
.aqc__card--new { animation: aqc-fade-in .35s ease-out both; }

@keyframes aqc-pulse { 50% { opacity: .3; } }
@keyframes aqc-spin { to { transform: rotate(360deg); } }
@keyframes aqc-shimmer { to { background-position: -200% 0; } }
@keyframes aqc-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
	.aqc__hero { padding-bottom: 68px; border-radius: 16px; }
	.aqc__hero::before { width: 360px; height: 360px; right: -140px; top: -140px; }
	.aqc__fields { grid-template-columns: 1fr 1fr; }
	.aqc__fields > .aqc__field:first-child { grid-column: 1 / -1; }
	.aqc__actions { grid-column: 1 / -1; }
	.aqc__actions .aqc__btn { flex: 1; }
	.aqc__tabs-wrap { margin: -28px 8px 0; }
	.aqc__card, .aqc__card:not(:has(.aqc__img)) { grid-template-columns: 66px 1fr; gap: 12px; padding: 12px 12px 12px 10px; }
	.aqc__img, .aqc__go { display: none; }
	.aqc__date { min-height: 70px; border-radius: 12px; }
	.aqc__days { font-size: 1.05rem; }
	.aqc__name { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aqc__card, .aqc__list, .aqc__go, .aqc__btn { transition: none; }
	.aqc__card:hover, .aqc__btn:hover { transform: none; }
	.aqc__card--live .aqc__status::before, .aqc__card--new, .aqc__skeleton .aqc__body span { animation: none; }
	.aqc__spinner { animation-duration: 1.5s; }
}