/* LGA Notice Board & Academic Calendar — frontend. Everything is scoped to .lga-nb */

.lga-nb {
	--lga-primary: #0F766E;
	--lga-primary-rgb: 15, 118, 110;
	--lga-deep: #086B50;
	--lga-gold: #D4AF37;
	--lga-gold-rgb: 212, 175, 55;
	--lga-card-bg: #FFFFFF;
	--lga-border: #E5E7EB;
	--lga-bg: #F8FAFC;
	--lga-text: #172033;
	--lga-muted: #6B7280;
	--lga-danger: #B42318;
	--lga-radius: 16px;
	--lga-gap: 16px;
	--lga-fs: 16px;
	--lga-shadow: 0 6px 24px rgba(23, 32, 51, 0.10);
	--lga-shadow-hover: 0 14px 34px rgba(23, 32, 51, 0.16);
	--lga-font: inherit;
	--lga-font-head: inherit;

	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(18px, 3.5vw, 44px) clamp(12px, 2.5vw, 24px);
	background: var(--lga-bg);
	color: var(--lga-text);
	font-family: var(--lga-font);
	font-size: var(--lga-fs);
	line-height: 1.55;
	border-radius: var(--lga-radius);
	text-align: left;
}

.lga-nb *,
.lga-nb *::before,
.lga-nb *::after { box-sizing: border-box; }

.lga-nb [hidden] { display: none !important; }

.lga-nb .lga-nb-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.lga-nb .lga-nb-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ---------------------------------------------------------------- Header */
.lga-nb .lga-nb-header {
	text-align: center;
	max-width: 780px;
	margin: 0 auto clamp(22px, 4vw, 38px);
}
.lga-nb .lga-nb-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(var(--lga-primary-rgb), 0.12);
	border: 1px solid rgba(var(--lga-primary-rgb), 0.28);
	color: var(--lga-deep);
	font-size: 0.78em; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase;
}
.lga-nb .lga-nb-main-heading {
	margin: 14px 0 10px;
	font-family: var(--lga-font-head);
	font-size: clamp(1.7em, 1em + 2.4vw, 2.6em);
	font-weight: 800; line-height: 1.15;
	color: var(--lga-text);
	letter-spacing: -0.01em;
	text-transform: none;
}
.lga-nb .lga-nb-subtitle {
	margin: 0 auto;
	color: var(--lga-muted);
	font-size: 1.06em;
	max-width: 640px;
}

/* ---------------------------------------------------------------- Layout */
.lga-nb .lga-nb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}
@media (min-width: 992px) {
	.lga-nb .lga-nb-layout { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 30px; }
	.lga-nb .lga-nb-layout > .lga-nb-cal { position: sticky; top: 24px; }
}
@media (max-width: 991px) {
	.lga-nb.lga-nb--mobile-calendar-first .lga-nb-layout > .lga-nb-cal { order: -1; }
}

/* ----------------------------------------------------------------- Board */
.lga-nb .lga-nb-board,
.lga-nb .lga-nb-cal {
	background: var(--lga-card-bg);
	border: 1px solid var(--lga-border);
	border-radius: var(--lga-radius);
	box-shadow: var(--lga-shadow);
	overflow: hidden;
}
.lga-nb .lga-nb-bar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 16px 20px;
	background: linear-gradient(135deg, var(--lga-primary), var(--lga-deep));
	color: #fff;
}
.lga-nb .lga-nb-bar__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.16);
}
.lga-nb .lga-nb-bar__title {
	margin: 0; flex: 1 1 auto;
	font-family: var(--lga-font-head);
	font-size: 1.25em; font-weight: 700;
	color: #fff; line-height: 1.2; text-transform: none;
}
.lga-nb .lga-nb-live {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 0.78em; font-weight: 600;
}
.lga-nb .lga-nb-live__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--lga-gold);
}
.lga-nb.lga-nb--anim .lga-nb-live__dot { animation: lga-nb-pulse 1.8s ease-in-out infinite; }
@keyframes lga-nb-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--lga-gold-rgb), 0.7); }
	70%  { box-shadow: 0 0 0 8px rgba(var(--lga-gold-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--lga-gold-rgb), 0); }
}

.lga-nb .lga-nb-board__body { padding: 18px; background: var(--lga-bg); }

/* Tools */
.lga-nb .lga-nb-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.lga-nb .lga-nb-search {
	position: relative; display: flex; align-items: center; margin: 0;
}
.lga-nb .lga-nb-search .lga-nb-icon {
	position: absolute; left: 14px; color: var(--lga-muted); pointer-events: none;
}
.lga-nb .lga-nb-search__input {
	width: 100%; min-height: 46px; margin: 0;
	padding: 10px 14px 10px 42px;
	border: 1px solid var(--lga-border);
	border-radius: calc(var(--lga-radius) * 0.7);
	background: var(--lga-card-bg);
	color: var(--lga-text);
	font: inherit; font-size: 0.95em;
	box-shadow: none;
	-webkit-appearance: none; appearance: none;
}
.lga-nb .lga-nb-search__input:focus {
	outline: none;
	border-color: var(--lga-primary);
	box-shadow: 0 0 0 3px rgba(var(--lga-primary-rgb), 0.2);
}
.lga-nb .lga-nb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lga-nb .lga-nb-chip {
	min-height: 40px; margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--lga-border);
	border-radius: 999px;
	background: var(--lga-card-bg);
	color: var(--lga-text);
	font: inherit; font-size: 0.86em; font-weight: 600; line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.lga-nb .lga-nb-chip:hover { border-color: var(--lga-primary); color: var(--lga-primary); }
.lga-nb .lga-nb-chip.is-active,
.lga-nb .lga-nb-chip.is-active:hover { background: var(--lga-primary); border-color: var(--lga-primary); color: #fff; }
.lga-nb .lga-nb-chip:focus-visible,
.lga-nb .lga-nb-btn:focus-visible { outline: 3px solid var(--lga-gold); outline-offset: 2px; }

/* Notice list */
.lga-nb .lga-nb-notices { display: grid; gap: var(--lga-gap); grid-template-columns: minmax(0, 1fr); transition: opacity 0.2s; }
.lga-nb .lga-nb-board.is-loading .lga-nb-notices { opacity: 0.55; }
.lga-nb .lga-nb-board--grid .lga-nb-notices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.lga-nb .lga-nb-more { text-align: center; margin-top: 18px; }
.lga-nb .lga-nb-more:empty { display: none; }

/* Card */
.lga-nb .lga-nb-card {
	display: flex; flex-direction: column;
	background: var(--lga-card-bg);
	border: 1px solid var(--lga-border);
	border-radius: calc(var(--lga-radius) - 2px);
	box-shadow: var(--lga-shadow);
	overflow: hidden;
	min-width: 0;
}
.lga-nb.lga-nb--hover .lga-nb-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lga-nb.lga-nb--hover .lga-nb-card:hover { transform: translateY(-3px); box-shadow: var(--lga-shadow-hover); }

.lga-nb .lga-nb-card__bar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
	min-height: 8px;
	padding: 9px 16px;
	background: linear-gradient(90deg, var(--lga-primary), var(--lga-deep));
	color: #fff;
}
.lga-nb .lga-nb-cat,
.lga-nb .lga-nb-prio {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 0.72em; font-weight: 700; line-height: 1.5;
	letter-spacing: 0.06em; text-transform: uppercase;
}
.lga-nb .lga-nb-cat { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.lga-nb .lga-nb-cat--gold { background: var(--lga-gold); border-color: var(--lga-gold); color: #172033; }
.lga-nb .lga-nb-prio--important { background: var(--lga-gold); color: #172033; }
.lga-nb .lga-nb-prio--urgent { background: var(--lga-danger); color: #fff; }
.lga-nb .lga-nb-card:not(:has(.lga-nb-cat)):not(:has(.lga-nb-prio)) .lga-nb-card__bar { padding: 3px 0; }

.lga-nb .lga-nb-card__body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.lga-nb .lga-nb-card__img { margin: -2px -2px 0; border-radius: calc(var(--lga-radius) * 0.6); overflow: hidden; aspect-ratio: 16 / 7; background: var(--lga-bg); }
.lga-nb .lga-nb-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.lga-nb .lga-nb-card__main { display: flex; gap: 14px; align-items: flex-start; }
.lga-nb .lga-nb-card__text { min-width: 0; flex: 1 1 auto; }

.lga-nb .lga-nb-date {
	flex: none; width: 58px;
	border-radius: 12px; overflow: hidden;
	border: 1px solid var(--lga-border);
	background: var(--lga-card-bg);
	text-align: center;
	box-shadow: 0 2px 6px rgba(23, 32, 51, 0.08);
}
.lga-nb .lga-nb-date__m {
	display: block; padding: 3px 0;
	background: var(--lga-primary); color: #fff;
	font-size: 0.7em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
}
.lga-nb .lga-nb-date__d { display: block; padding: 4px 0 6px; font-size: 1.5em; font-weight: 800; line-height: 1.1; color: var(--lga-text); }

.lga-nb .lga-nb-card__title {
	margin: 0 0 4px;
	font-family: var(--lga-font-head);
	font-size: 1.1em; font-weight: 700; line-height: 1.3;
	color: var(--lga-text); text-transform: none; letter-spacing: normal;
	overflow-wrap: anywhere;
}
.lga-nb .lga-nb-meta { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.8em; color: var(--lga-muted); }
.lga-nb .lga-nb-card__excerpt { margin: 0; font-size: 0.95em; color: var(--lga-text); opacity: 0.88; overflow-wrap: anywhere; }

/* PDF row */
.lga-nb .lga-nb-pdf {
	display: flex; flex-direction: column; gap: 10px;
	padding: 12px;
	border-radius: calc(var(--lga-radius) * 0.7);
	background: rgba(var(--lga-primary-rgb), 0.06);
	border: 1px dashed rgba(var(--lga-primary-rgb), 0.35);
}
.lga-nb .lga-nb-pdf__file { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.86em; min-width: 0; color: var(--lga-text); }
.lga-nb .lga-nb-pdf__file .lga-nb-icon { color: var(--lga-primary); }
.lga-nb .lga-nb-pdf__name { overflow-wrap: anywhere; font-weight: 600; }
.lga-nb .lga-nb-pdf__size { color: var(--lga-muted); white-space: nowrap; }
.lga-nb .lga-nb-pdf__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.lga-nb .lga-nb-pdf__note {
	display: flex; align-items: center; gap: 8px; margin: 0;
	font-size: 0.88em; color: var(--lga-muted);
}
.lga-nb .lga-nb-cal__cta > .lga-nb-pdf__note { padding: 10px 12px; border-radius: 12px; background: rgba(var(--lga-primary-rgb), 0.06); }

/* Buttons */
.lga-nb .lga-nb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; margin: 0;
	padding: 10px 18px;
	border: 2px solid transparent;
	border-radius: calc(var(--lga-radius) * 0.7);
	font: inherit; font-size: 0.92em; font-weight: 700; line-height: 1.2;
	text-decoration: none; text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.lga-nb .lga-nb-btn--primary,
.lga-nb a.lga-nb-btn--primary,
.lga-nb a.lga-nb-btn--primary:visited { background: var(--lga-primary); border-color: var(--lga-primary); color: #fff; }
.lga-nb .lga-nb-btn--primary:hover,
.lga-nb a.lga-nb-btn--primary:hover { background: var(--lga-deep); border-color: var(--lga-deep); color: #fff; text-decoration: none; }
.lga-nb .lga-nb-btn--ghost,
.lga-nb a.lga-nb-btn--ghost,
.lga-nb a.lga-nb-btn--ghost:visited { background: transparent; border-color: var(--lga-primary); color: var(--lga-primary); }
.lga-nb .lga-nb-btn--ghost:hover,
.lga-nb a.lga-nb-btn--ghost:hover { background: rgba(var(--lga-primary-rgb), 0.1); color: var(--lga-deep); text-decoration: none; }
.lga-nb .lga-nb-btn--link { min-height: 40px; padding: 6px 2px; background: transparent; border: 0; color: var(--lga-primary); }
.lga-nb .lga-nb-btn--link:hover { color: var(--lga-deep); }
.lga-nb .lga-nb-btn--link .lga-nb-icon { transition: transform 0.2s; }
.lga-nb .lga-nb-btn--link[aria-expanded="true"] .lga-nb-icon { transform: rotate(180deg); }
.lga-nb .lga-nb-btn--block { display: flex; width: 100%; min-height: 52px; font-size: 1em; }

.lga-nb .lga-nb-card__actions { margin-top: -4px; }
.lga-nb .lga-nb-full {
	padding-top: 12px; border-top: 1px solid var(--lga-border);
	font-size: 0.95em; overflow-wrap: anywhere;
}
.lga-nb .lga-nb-full > :first-child { margin-top: 0; }
.lga-nb .lga-nb-full > :last-child { margin-bottom: 0; }
.lga-nb .lga-nb-full img { max-width: 100%; height: auto; }
.lga-nb .lga-nb-full a { color: var(--lga-primary); }

/* Empty state */
.lga-nb .lga-nb-empty {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	padding: 36px 16px; text-align: center;
	background: var(--lga-card-bg);
	border: 1px dashed var(--lga-border);
	border-radius: calc(var(--lga-radius) - 2px);
	color: var(--lga-muted);
}
.lga-nb .lga-nb-empty .lga-nb-icon { color: var(--lga-primary); }
.lga-nb .lga-nb-empty__text { margin: 0; }

/* -------------------------------------------------------------- Calendar */
.lga-nb .lga-nb-cal__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--lga-primary), var(--lga-deep)); overflow: hidden; }
.lga-nb .lga-nb-cal__img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.lga-nb .lga-nb-cal__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); }
.lga-nb .lga-nb-cal__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 40, 33, 0.45), rgba(8, 40, 33, 0) 55%); pointer-events: none; }
.lga-nb .lga-nb-year {
	position: absolute; top: 14px; left: 14px; z-index: 1;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border-radius: 999px;
	background: var(--lga-gold); color: #172033;
	font-size: 0.86em; font-weight: 800; letter-spacing: 0.02em;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.lga-nb .lga-nb-cal__body { padding: 22px; }
.lga-nb .lga-nb-cal__title {
	margin: 0 0 8px;
	font-family: var(--lga-font-head);
	font-size: 1.35em; font-weight: 800; line-height: 1.25;
	color: var(--lga-text); text-transform: none;
}
.lga-nb .lga-nb-cal__desc { margin: 0 0 18px; color: var(--lga-muted); font-size: 0.97em; }

.lga-nb .lga-nb-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.lga-nb .lga-nb-feature {
	display: flex; align-items: center; gap: 12px; margin: 0;
	padding: 12px;
	border-radius: calc(var(--lga-radius) * 0.75);
	background: rgba(var(--lga-primary-rgb), 0.06);
	border: 1px solid rgba(var(--lga-primary-rgb), 0.18);
	min-width: 0; list-style: none;
}
.lga-nb .lga-nb-feature::marker { content: none; }
.lga-nb .lga-nb-feature__icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 12px;
	background: var(--lga-primary); color: #fff;
}
.lga-nb .lga-nb-feature__text { display: flex; flex-direction: column; min-width: 0; }
.lga-nb .lga-nb-feature__value { font-size: 1.05em; font-weight: 800; line-height: 1.2; color: var(--lga-text); overflow-wrap: anywhere; }
.lga-nb .lga-nb-feature__label { font-size: 0.82em; color: var(--lga-muted); line-height: 1.3; overflow-wrap: anywhere; }

.lga-nb .lga-nb-dates__title { margin: 0 0 8px; font-family: var(--lga-font-head); font-size: 1em; font-weight: 700; color: var(--lga-text); text-transform: none; }
.lga-nb .lga-nb-dates { margin: 0 0 20px; padding: 0; list-style: none; border: 1px solid var(--lga-border); border-radius: calc(var(--lga-radius) * 0.7); overflow: hidden; }
.lga-nb .lga-nb-dates li { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 10px 14px; font-size: 0.92em; list-style: none; }
.lga-nb .lga-nb-dates li + li { border-top: 1px solid var(--lga-border); }
.lga-nb .lga-nb-dates__when { font-weight: 700; color: var(--lga-deep); min-width: 7.5em; }
.lga-nb .lga-nb-dates__what { color: var(--lga-text); }

.lga-nb .lga-nb-cal__file { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 10px 2px 0; font-size: 0.84em; color: var(--lga-muted); }
.lga-nb .lga-nb-cal__file a { color: var(--lga-primary); font-weight: 600; text-decoration: underline; }
.lga-nb .lga-nb-cal__fileinfo { overflow-wrap: anywhere; }

/* ------------------------------------------------------ Hide toggles */
.lga-nb.lga-nb--hide-cat .lga-nb-cat,
.lga-nb.lga-nb--hide-prio .lga-nb-prio,
.lga-nb.lga-nb--hide-date .lga-nb-date,
.lga-nb.lga-nb--hide-date .lga-nb-meta,
.lga-nb.lga-nb--hide-pdf .lga-nb-pdf { display: none; }

/* ------------------------------------------------------- Entrance motion */
.lga-nb.lga-nb--js.lga-nb--anim .lga-nb-card:not(.is-in),
.lga-nb.lga-nb--js.lga-nb--anim .lga-nb-reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }
.lga-nb.lga-nb--js.lga-nb--anim .lga-nb-card,
.lga-nb.lga-nb--js.lga-nb--anim .lga-nb-reveal { transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease; }

/* ----------------------------------------------------------- Responsive */
@media (max-width: 600px) {
	.lga-nb .lga-nb-bar { padding: 14px 16px; }
	.lga-nb .lga-nb-board__body { padding: 12px; }
	.lga-nb .lga-nb-card__body { padding: 14px; }
	.lga-nb .lga-nb-cal__body { padding: 16px; }
	.lga-nb .lga-nb-date { width: 52px; }
	.lga-nb .lga-nb-pdf__buttons .lga-nb-btn { flex: 1 1 100%; }
	.lga-nb .lga-nb-features { grid-template-columns: 1fr; }
	.lga-nb.lga-nb--compact .lga-nb-card__img { display: none; }
	.lga-nb.lga-nb--compact .lga-nb-card__excerpt {
		display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	}
	.lga-nb.lga-nb--compact .lga-nb-card__body { gap: 10px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.lga-nb *, .lga-nb *::before, .lga-nb *::after { animation: none !important; transition: none !important; }
	.lga-nb.lga-nb--js.lga-nb--anim .lga-nb-card:not(.is-in),
	.lga-nb.lga-nb--js.lga-nb--anim .lga-nb-reveal:not(.is-in) { opacity: 1; transform: none; }
}