/**
 * DNS School Events & Recent News - frontend styles.
 * Colours are driven by CSS variables printed inline by the plugin.
 */

:root {
	--dns-primary: #0B2B63;
	--dns-accent: #EF3340;
	--dns-yellow: #FFC928;
	--dns-bg: #F5FAFF;
	--dns-white: #FFFFFF;
	--dns-text: #243552;
	--dns-muted: #6F7C90;
	--dns-radius: 20px;
	--dns-radius-sm: 14px;
	--dns-shadow: 0 6px 18px rgba(11, 43, 99, 0.07);
	--dns-shadow-lg: 0 14px 34px rgba(11, 43, 99, 0.14);
	--dns-border: 1px solid rgba(11, 43, 99, 0.08);
}

/* ---------------------------------------------------------------
   Full bleed background.

   The element keeps its normal width and position. Only the painted
   background is pushed out to both viewport edges using a wide box
   shadow that is then clipped vertically. Because no width, margin
   or viewport unit is involved, this can never create a horizontal
   scrollbar and never triggers a resize/measure loop.
--------------------------------------------------------------- */
.dns-sen-fullbleed {
	position: relative;
}

@supports (clip-path: inset(0 -100vmax)) {
	.dns-sen-fullbleed {
		box-shadow: 0 0 0 100vmax var(--dns-bg);
		clip-path: inset(0 -100vmax);
	}
}

.dns-sen-standalone-bg {
	background: var(--dns-bg);
	padding: 48px 20px;
}

/* ---------------------------------------------------------------
   Theme header clearance for plugin generated pages.
   No negative margins and no absolute positioning are used, so the
   theme header keeps its own stacking context and stays readable.
--------------------------------------------------------------- */
.dns-sen-page {
	position: relative;
	z-index: 1;
	padding-top: var(--dns-header-offset, 40px);
}

/* The theme banner already sits under the header and supplies its own
   spacing, so no extra clearance is added on top of it. */
.dns-sen-page--has-banner {
	--dns-header-offset: 0px;
}

/* ---------------------------------------------------------------
   Base
--------------------------------------------------------------- */
.dns-sen {
	box-sizing: border-box;
	color: var(--dns-text);
	font-family: inherit;
	line-height: 1.6;
}

.dns-sen *,
.dns-sen *::before,
.dns-sen *::after {
	box-sizing: border-box;
}

.dns-sen-section {
	position: relative;
	overflow: hidden;
	background: var(--dns-bg);
	padding: 64px 20px;
}

.dns-sen-standalone {
	background: transparent;
	padding: 0;
}

.dns-sen-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.dns-sen-container--narrow {
	max-width: 900px;
}

.dns-sen-entry__content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Decorative background shapes */
.dns-sen-deco {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.dns-sen-deco__dot,
.dns-sen-deco__ring {
	position: absolute;
	border-radius: 50%;
	opacity: 0.35;
}

.dns-sen-deco__dot--1 {
	top: 34px;
	left: 3%;
	width: 14px;
	height: 14px;
	background: var(--dns-yellow);
}

.dns-sen-deco__dot--2 {
	bottom: 48px;
	right: 5%;
	width: 10px;
	height: 10px;
	background: var(--dns-accent);
}

.dns-sen-deco__ring {
	top: 12%;
	right: 2%;
	width: 120px;
	height: 120px;
	border: 10px solid rgba(11, 43, 99, 0.06);
	opacity: 0.9;
}

/* ---------------------------------------------------------------
   Columns
--------------------------------------------------------------- */
.dns-sen-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}

.dns-sen-col--events {
	flex: 1 1 44%;
	min-width: 0;
}

.dns-sen-col--news {
	flex: 1 1 52%;
	min-width: 0;
}

/* ---------------------------------------------------------------
   Section heading
--------------------------------------------------------------- */
.dns-sen-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 22px;
}

.dns-sen-head__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	flex: 0 0 auto;
}

.dns-sen-head__icon svg {
	width: 24px;
	height: 24px;
}

.dns-sen-head__icon--navy {
	color: var(--dns-primary);
	background: rgba(11, 43, 99, 0.10);
}

.dns-sen-head__icon--red {
	color: var(--dns-accent);
	background: rgba(239, 51, 64, 0.10);
}

.dns-sen-head__title {
	margin: 0;
	color: var(--dns-primary);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}

.dns-sen-head__underline {
	display: block;
	width: 100%;
	max-width: 84px;
	height: 6px;
	margin-top: 4px;
	border-radius: 6px;
	background: var(--dns-yellow);
	flex: 0 0 100%;
}

.dns-sen-head--archive {
	justify-content: flex-start;
	text-align: left;
	margin-bottom: 34px;
}

.dns-sen-head--archive .dns-sen-head__title {
	font-size: 32px;
}

.dns-sen-head--archive .dns-sen-head__underline {
	margin: 6px 0 0;
}

/* ---------------------------------------------------------------
   Event rows
--------------------------------------------------------------- */
.dns-sen-event-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dns-sen-event-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dns-sen-event {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--dns-white);
	border: var(--dns-border);
	border-radius: var(--dns-radius-sm);
	box-shadow: var(--dns-shadow);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dns-sen-event:hover,
.dns-sen-event:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--dns-shadow-lg);
	border-color: rgba(239, 51, 64, 0.25);
}

.dns-sen-event:focus-visible {
	outline: 3px solid var(--dns-accent);
	outline-offset: 2px;
}

.dns-sen-event__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	flex: 0 0 46px;
	transition: transform 0.25s ease;
}

.dns-sen-event__icon svg {
	width: 24px;
	height: 24px;
}

.dns-sen-event__icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	border-radius: 6px;
}

.dns-sen-event:hover .dns-sen-event__icon {
	transform: scale(1.06);
}

.dns-sen-event__title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--dns-primary);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: break-word;
	transition: color 0.25s ease;
}

.dns-sen-event:hover .dns-sen-event__title {
	color: var(--dns-accent);
}

.dns-sen-event__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	color: var(--dns-muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.dns-sen-event__date-icon {
	display: inline-flex;
	color: var(--dns-accent);
}

.dns-sen-event__date-icon svg {
	width: 16px;
	height: 16px;
}

.dns-sen-event__main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.dns-sen-event__excerpt {
	color: var(--dns-muted);
	font-size: 15px;
	line-height: 1.6;
}

.dns-sen-event--stacked {
	align-items: flex-start;
	padding: 18px 20px;
}

.dns-sen-event-list--archive {
	gap: 14px;
}

/* ---------------------------------------------------------------
   News cards
--------------------------------------------------------------- */
.dns-sen-news-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dns-sen-cols-1 {
	grid-template-columns: minmax(0, 1fr);
}

.dns-sen-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dns-sen-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dns-sen-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Archive grid: cards keep a fixed comfortable width and fill from the
   left, so one card sits under the heading at the start of the row and
   the next cards continue beside it instead of stretching. */
.dns-sen-archive .dns-sen-news-grid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
	justify-content: start;
}

.dns-sen-card {
	display: flex;
	height: 100%;
	margin: 0;
}

.dns-sen-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--dns-white);
	border: var(--dns-border);
	border-radius: var(--dns-radius);
	box-shadow: var(--dns-shadow);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dns-sen-card__link:hover,
.dns-sen-card__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--dns-shadow-lg);
}

.dns-sen-card__link:focus-visible {
	outline: 3px solid var(--dns-accent);
	outline-offset: 2px;
}

.dns-sen-card__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(11, 43, 99, 0.06);
	border-radius: var(--dns-radius) var(--dns-radius) 0 0;
}

.dns-sen-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dns-sen-card__link:hover .dns-sen-card__media img {
	transform: scale(1.06);
}

.dns-sen-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dns-primary);
	opacity: 0.25;
}

.dns-sen-card__placeholder svg {
	width: 48px;
	height: 48px;
}

.dns-sen-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding: 18px 18px 20px;
}

.dns-sen-card__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dns-muted);
	font-size: 13px;
	font-weight: 600;
}

.dns-sen-card__date-icon {
	display: inline-flex;
	color: var(--dns-accent);
}

.dns-sen-card__date-icon svg {
	width: 15px;
	height: 15px;
}

.dns-sen-card__title {
	margin: 0;
	color: var(--dns-primary);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	transition: color 0.25s ease;
}

.dns-sen-card__link:hover .dns-sen-card__title {
	color: var(--dns-accent);
}

.dns-sen-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--dns-muted);
	font-size: 15px;
	line-height: 1.65;
}

.dns-sen-card__body .dns-sen-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
.dns-sen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 2px solid transparent;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.dns-sen-btn__arrow {
	display: inline-flex;
	transition: transform 0.25s ease;
}

.dns-sen-btn__arrow svg {
	width: 16px;
	height: 16px;
}

.dns-sen-btn--solid {
	background: var(--dns-accent);
	border-color: var(--dns-accent);
	color: var(--dns-white);
}

.dns-sen-card__link:hover .dns-sen-btn--solid,
.dns-sen-btn--solid:hover,
.dns-sen-btn--solid:focus-visible {
	background: var(--dns-primary);
	border-color: var(--dns-primary);
	color: var(--dns-white);
}

.dns-sen-card__link:hover .dns-sen-btn__arrow,
.dns-sen-btn:hover .dns-sen-btn__arrow {
	transform: translateX(4px);
}

.dns-sen-btn--ghost {
	background: transparent;
	border-color: var(--dns-primary);
	color: var(--dns-primary);
}

.dns-sen-btn--ghost:hover,
.dns-sen-btn--ghost:focus-visible {
	background: var(--dns-primary);
	color: var(--dns-white);
}

.dns-sen-btn--text {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dns-accent);
}

.dns-sen-btn:focus-visible {
	outline: 3px solid var(--dns-accent);
	outline-offset: 2px;
}

.dns-sen-viewall {
	margin: 20px 0 0;
}

.dns-sen-empty {
	margin: 0;
	padding: 22px;
	background: var(--dns-white);
	border: var(--dns-border);
	border-radius: var(--dns-radius-sm);
	color: var(--dns-muted);
	text-align: center;
}

/* ---------------------------------------------------------------
   Single entry
--------------------------------------------------------------- */
.dns-sen-single,
.dns-sen-archive {
	padding: 48px 20px 64px;
	background: var(--dns-bg);
}

/* Page level templates carry the header clearance on top of the base
   padding so the first card never sits under a transparent header. */
.dns-sen-page.dns-sen-single,
.dns-sen-page.dns-sen-archive {
	padding-top: calc(48px + var(--dns-header-offset, 40px));
}

.dns-sen-page--has-banner.dns-sen-single,
.dns-sen-page--has-banner.dns-sen-archive {
	padding-top: 48px;
}

.dns-sen-entry {
	background: var(--dns-white);
	border: var(--dns-border);
	border-radius: var(--dns-radius);
	box-shadow: var(--dns-shadow);
	padding: 30px;
}

.dns-sen-entry__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 22px;
}

.dns-sen-entry__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
}

.dns-sen-entry__icon svg {
	width: 28px;
	height: 28px;
}

.dns-sen-entry__icon--news {
	color: var(--dns-accent);
	background: rgba(239, 51, 64, 0.10);
}

.dns-sen-entry__title {
	margin: 0;
	color: var(--dns-primary);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.dns-sen-entry__date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--dns-muted);
	font-size: 15px;
	font-weight: 600;
}

.dns-sen-entry__date-icon {
	display: inline-flex;
	color: var(--dns-accent);
}

.dns-sen-entry__date-icon svg {
	width: 18px;
	height: 18px;
}

.dns-sen-entry__media {
	margin: 24px auto;
	max-width: 850px;
	text-align: center;
}

.dns-sen-entry__media img,
.dns-sen-entry__img {
	display: block;
	width: 100%;
	max-width: 850px;
	height: auto;
	max-height: 520px;
	margin: 0 auto;
	/* contain keeps portrait images from being cropped */
	object-fit: contain;
	object-position: center;
	border-radius: 18px;
}

.dns-sen-entry__time {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--dns-muted);
	font-size: 15px;
	font-weight: 600;
}

.dns-sen-entry__content {
	color: var(--dns-text);
	font-size: 17px;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.dns-sen-entry__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--dns-radius-sm);
}

.dns-sen-entry__content h2,
.dns-sen-entry__content h3,
.dns-sen-entry__content h4 {
	color: var(--dns-primary);
}

.dns-sen-entry__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 26px 0 0;
}

.dns-sen-entry__nav-side {
	flex: 1 1 auto;
}

.dns-sen-entry__nav-side--right {
	text-align: right;
}

.dns-sen-entry__nav-mid {
	flex: 0 0 auto;
	text-align: center;
}

.dns-sen-related {
	margin-top: 44px;
}

.dns-sen-related__title {
	margin: 0 0 18px;
	color: var(--dns-primary);
	font-size: 22px;
	font-weight: 700;
}

/* ---------------------------------------------------------------
   Pagination
--------------------------------------------------------------- */
.dns-sen-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.dns-sen-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 12px;
	background: var(--dns-white);
	border: var(--dns-border);
	color: var(--dns-primary);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dns-sen-pagination .page-numbers:hover,
.dns-sen-pagination .page-numbers.current {
	background: var(--dns-accent);
	border-color: var(--dns-accent);
	color: var(--dns-white);
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1024px) {
	.dns-sen-section {
		padding: 48px 18px;
	}

	.dns-sen-columns {
		gap: 24px;
	}

	.dns-sen-col--events,
	.dns-sen-col--news {
		flex: 1 1 100%;
	}

	.dns-sen-cols-3,
	.dns-sen-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dns-sen-deco__ring {
		display: none;
	}
}

@media (max-width: 782px) {
	.dns-sen-head__title {
		font-size: 23px;
	}

	.dns-sen-head--archive .dns-sen-head__title {
		font-size: 27px;
	}

	.dns-sen-entry {
		padding: 22px;
	}

	.dns-sen-entry__title {
		font-size: 25px;
	}

	.dns-sen-entry__media img,
	.dns-sen-entry__img {
		max-height: 400px;
	}

}

@media (max-width: 640px) {
	.dns-sen-section,
	.dns-sen-single,
	.dns-sen-archive {
		padding-left: 16px;
		padding-right: 16px;
	}

	.dns-sen-page.dns-sen-single,
	.dns-sen-page.dns-sen-archive {
		padding-top: calc(28px + var(--dns-header-offset, 24px));
	}

	.dns-sen-entry__media {
		margin: 18px auto;
	}

	.dns-sen-entry__media img,
	.dns-sen-entry__img {
		max-height: 300px;
	}

	.dns-sen-archive .dns-sen-news-grid {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}

	.dns-sen-news-grid,
	.dns-sen-cols-2,
	.dns-sen-cols-3,
	.dns-sen-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.dns-sen-event {
		flex-wrap: wrap;
		row-gap: 10px;
		padding: 14px;
	}

	.dns-sen-event__title {
		flex: 1 1 calc(100% - 60px);
		font-size: 16px;
	}

	.dns-sen-event__date {
		flex: 1 1 100%;
		padding-left: 60px;
		font-size: 13px;
		white-space: normal;
	}

	.dns-sen-event--stacked .dns-sen-event__date {
		padding-left: 60px;
	}

	.dns-sen-card__body .dns-sen-btn,
	.dns-sen-viewall .dns-sen-btn {
		width: 100%;
		align-self: stretch;
	}

	.dns-sen-entry__nav {
		flex-direction: column;
		align-items: stretch;
	}

	.dns-sen-entry__nav-side,
	.dns-sen-entry__nav-side--right,
	.dns-sen-entry__nav-mid {
		text-align: center;
	}

	.dns-sen-entry__nav .dns-sen-btn {
		width: 100%;
	}

	.dns-sen-deco {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dns-sen * {
		transition: none !important;
		animation: none !important;
	}
}