/**
 * State hub (evergreen /public-holidays|school-holidays|long-weekends/
 * {state}/ pages) — mobile-first, matching components.css's own convention:
 * base rules are the single-column mobile layout, the 900px min-width
 * media query holds the desktop treatment. Every colour/spacing/radius
 * value is a token from tokens.css — no hardcoded hex/px, per the
 * approved design system's rule (see components.css's own docblock).
 */

/* Hero */

.dv-hub-hero {
	padding: var(--dv-space-4) 0 var(--dv-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-4);
}

@media (min-width: 900px) {
	.dv-hub-hero {
		display: grid;
		grid-template-columns: 7fr 5fr;
		gap: var(--dv-space-6);
		align-items: end;
		padding: var(--dv-space-5) 0 var(--dv-space-6);
	}
}

.dv-hub-hero__eyebrow {
	font-size: var(--dv-text-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dv-color-terracotta);
	margin-bottom: var(--dv-space-2);
}

.dv-hub-hero__intro h1 {
	font-family: var(--dv-font-serif);
	font-size: var(--dv-text-hero-mobile);
	line-height: 1.05;
	font-weight: 500;
	color: var(--dv-color-primary);
	margin: 0 0 var(--dv-space-2);
	letter-spacing: -0.5px;
}

@media (min-width: 900px) {
	.dv-hub-hero__intro h1 {
		font-size: 68px;
		letter-spacing: -1px;
	}
}

.dv-hub-hero__desktop-copy,
.dv-hub-hero__mobile-copy {
	font-size: var(--dv-text-body);
	line-height: 1.5;
	color: rgba(32, 35, 32, 0.72);
	max-width: 560px;
	margin: 0;
}

/* Genuinely different mobile/desktop copy strings (not a reflow of the
 * same text) — see hub-hero.php's two <p> tags and the hub-redesign plan's
 * "genuine mobile-copy differences" rule. */
.dv-hub-hero__desktop-copy {
	display: none;
}

.dv-hub-hero__mobile-copy {
	display: block;
}

@media (min-width: 900px) {
	.dv-hub-hero__desktop-copy {
		display: block;
		font-size: 19px;
	}

	.dv-hub-hero__mobile-copy {
		display: none;
	}
}

/* Hero "Change state" control — desktop-only, per the mobile mockup
 * (which omits it entirely; mobile relies on the header's own compact
 * selector). Mirrors .dv-header__nav's identical show/hide breakpoint. */
.dv-hub-hero__state-switch {
	display: none;
}

@media (min-width: 900px) {
	.dv-hub-hero__state-switch {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dv-space-2);
	}
}

.dv-hub-hero__state-switch-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(32, 35, 32, 0.5);
}

.dv-hub-hero__state-switch .dv-state-control--hero {
	background: var(--dv-color-surface);
	border: 1px solid rgba(32, 35, 32, 0.15);
	border-radius: var(--dv-radius-control);
	padding: var(--dv-space-2) var(--dv-space-3);
}

.dv-hub-hero__state-switch-note {
	font-size: 13px;
	color: rgba(32, 35, 32, 0.55);
	line-height: 1.5;
	max-width: 300px;
}

/* Next-event card */

.dv-hub-next-event {
	padding: 0 0 var(--dv-space-5);
}

.dv-hub-next-event__inner {
	background: var(--dv-color-butter-yellow);
	border-radius: var(--dv-radius-hero);
	padding: var(--dv-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-3);
}

@media (min-width: 900px) {
	.dv-hub-next-event__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: var(--dv-space-5);
		align-items: center;
		padding: var(--dv-space-5) var(--dv-space-6);
	}
}

.dv-hub-next-event__eyebrow {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dv-color-primary);
	margin-bottom: var(--dv-space-2);
	display: flex;
	align-items: center;
	gap: var(--dv-space-2);
}

.dv-hub-next-event__number-row {
	display: flex;
	align-items: baseline;
	gap: var(--dv-space-2);
}

.dv-hub-next-event__number {
	font-family: var(--dv-font-serif);
	font-size: var(--dv-text-countdown-mobile);
	font-weight: 500;
	color: var(--dv-color-primary);
	line-height: 0.85;
}

@media (min-width: 900px) {
	.dv-hub-next-event__number {
		font-size: 84px;
	}
}

.dv-hub-next-event__unit {
	font-size: 16px;
	font-weight: 500;
	color: var(--dv-color-primary);
	opacity: 0.8;
}

.dv-hub-next-event__name {
	font-family: var(--dv-font-serif);
	font-size: var(--dv-text-h3);
	font-weight: 600;
	color: var(--dv-color-primary);
	line-height: 1.1;
}

.dv-hub-next-event__date {
	font-size: 16px;
	font-weight: 600;
	color: var(--dv-color-primary);
	opacity: 0.85;
	margin-top: var(--dv-space-1);
}

.dv-hub-next-event__note {
	font-size: 13px;
	color: var(--dv-color-primary);
	opacity: 0.75;
	margin-top: var(--dv-space-1);
}

.dv-hub-next-event__unavailable,
.dv-hub-snapshot__empty {
	background: var(--dv-color-surface);
	border: 1px dashed rgba(32, 35, 32, 0.2);
	border-radius: var(--dv-radius-card);
	padding: var(--dv-space-4);
	color: rgba(32, 35, 32, 0.6);
	font-size: 14px;
}

/* Years by year */

.dv-hub-years {
	padding: 0 0 var(--dv-space-5);
}

.dv-hub-years__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dv-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--dv-space-3);
}

.dv-hub-years__header h2 {
	font-family: var(--dv-font-serif);
	font-size: var(--dv-text-h2-mobile);
	font-weight: 500;
	color: var(--dv-color-primary);
	margin: 0;
}

.dv-hub-years__legend {
	display: flex;
	gap: var(--dv-space-3);
	font-size: 13px;
	font-weight: 600;
	color: rgba(32, 35, 32, 0.6);
}

.dv-hub-years__legend-item {
	display: flex;
	align-items: center;
	gap: 7px;
}

.dv-hub-years__legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

.dv-hub-years__legend-dot--verified {
	background: var(--dv-color-primary);
}

.dv-hub-years__legend-dot--provisional {
	background: var(--dv-color-golden-yellow);
}

.dv-hub-years__list {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-2);
}

.dv-hub-year-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--dv-space-2);
	align-items: center;
	background: var(--dv-color-surface);
	border: 1px solid rgba(32, 35, 32, 0.1);
	border-radius: var(--dv-radius-card);
	padding: var(--dv-space-3) var(--dv-space-4);
}

@media (min-width: 900px) {
	.dv-hub-year-card {
		grid-template-columns: 120px 1fr auto auto;
		gap: var(--dv-space-4);
		padding: var(--dv-space-4) var(--dv-space-5);
	}
}

.dv-hub-year-card.is-current {
	background: var(--dv-color-butter-yellow);
	border-color: transparent;
}

.dv-hub-year-card__year {
	font-family: var(--dv-font-serif);
	font-size: 28px;
	font-weight: 600;
	color: var(--dv-color-primary);
	line-height: 1;
}

@media (min-width: 900px) {
	.dv-hub-year-card__year {
		font-size: 40px;
	}
}

.dv-hub-year-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-1);
	align-items: flex-start;
}

.dv-hub-year-card__summary {
	font-size: 14px;
	color: rgba(32, 35, 32, 0.7);
}

.dv-hub-year-card__summary--desktop {
	display: none;
}

@media (min-width: 900px) {
	.dv-hub-year-card__summary--desktop {
		display: block;
	}
}

.dv-hub-year-card__status {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(32, 35, 32, 0.5);
	display: none;
}

@media (min-width: 900px) {
	.dv-hub-year-card__status {
		display: block;
	}
}

.dv-hub-year-card__cta {
	font-size: 14px;
	font-weight: 600;
	color: var(--dv-color-primary);
	white-space: nowrap;
	justify-self: end;
}

.dv-hub-year-card__cta--desktop {
	display: none;
}

.dv-hub-year-card__cta--mobile {
	display: inline;
}

@media (min-width: 900px) {
	.dv-hub-year-card__cta--desktop {
		display: inline;
	}

	.dv-hub-year-card__cta--mobile {
		display: none;
	}
}

.dv-hub-years__note {
	border: 1px dashed rgba(32, 35, 32, 0.2);
	border-radius: var(--dv-radius-card);
	padding: var(--dv-space-3) var(--dv-space-4);
	font-size: 13px;
	color: rgba(32, 35, 32, 0.5);
}

/* Current-year snapshot */

.dv-hub-snapshot {
	padding: 0 0 var(--dv-space-5);
}

.dv-hub-snapshot__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dv-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--dv-space-3);
}

.dv-hub-snapshot__header h2 {
	font-family: var(--dv-font-serif);
	font-size: 28px;
	font-weight: 500;
	color: var(--dv-color-primary);
	margin: 0;
}

@media (min-width: 900px) {
	.dv-hub-snapshot__header h2 {
		font-size: 40px;
	}
}

.dv-hub-snapshot__note {
	font-size: 14px;
	color: rgba(32, 35, 32, 0.55);
}

.dv-hub-snapshot__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dv-space-2);
	margin-bottom: var(--dv-space-3);
}

@media (min-width: 900px) {
	.dv-hub-snapshot__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--dv-space-3);
	}

	.dv-hub-snapshot__grid--three {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dv-hub-snapshot-tile {
	background: var(--dv-color-surface);
	border: 1px solid rgba(32, 35, 32, 0.1);
	border-radius: var(--dv-radius-card);
	padding: var(--dv-space-3);
}

@media (min-width: 900px) {
	.dv-hub-snapshot-tile {
		padding: var(--dv-space-4);
	}
}

.dv-hub-snapshot-tile.is-provisional {
	border-color: var(--dv-color-golden-yellow);
}

.dv-hub-snapshot-tile__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dv-color-primary);
	opacity: 0.65;
	margin-bottom: var(--dv-space-2);
}

.dv-hub-snapshot-tile__date {
	font-family: var(--dv-font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--dv-color-primary);
}

@media (min-width: 900px) {
	.dv-hub-snapshot-tile__date {
		font-size: 24px;
	}
}

.dv-hub-snapshot-tile__meta {
	font-size: 13px;
	color: var(--dv-color-primary);
	opacity: 0.65;
	margin-top: var(--dv-space-1);
}

.dv-hub-snapshot-tile__badge {
	margin-top: var(--dv-space-2);
}

/* Planning cross-links */

.dv-hub-planning {
	padding: 0 0 var(--dv-space-5);
}

.dv-hub-planning h2 {
	font-family: var(--dv-font-serif);
	font-size: 28px;
	font-weight: 500;
	color: var(--dv-color-primary);
	margin: 0 0 var(--dv-space-3);
}

@media (min-width: 900px) {
	.dv-hub-planning h2 {
		font-size: 40px;
	}
}

.dv-hub-planning__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dv-space-2);
}

@media (min-width: 900px) {
	.dv-hub-planning__grid {
		grid-template-columns: repeat(12, 1fr);
		gap: var(--dv-space-3);
	}
}

.dv-hub-planning-tile {
	background: var(--dv-color-surface);
	border: 1px solid rgba(23, 63, 53, 0.12);
	border-radius: var(--dv-radius-card);
	padding: var(--dv-space-4);
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--dv-color-primary);
}

@media (min-width: 900px) {
	.dv-hub-planning-tile--span-5 {
		grid-column: span 5;
	}

	.dv-hub-planning-tile--span-4 {
		grid-column: span 4;
	}

	.dv-hub-planning-tile--span-3 {
		grid-column: span 3;
	}

	.dv-hub-planning-tile--span-12 {
		grid-column: span 12;
	}
}

.dv-hub-planning-tile--school-holidays {
	background: var(--dv-color-sky-blue);
	border-color: transparent;
}

.dv-hub-planning-tile--long-weekends {
	background: var(--dv-color-lavender);
	border-color: transparent;
}

.dv-hub-planning-tile--annual-leave {
	background: var(--dv-color-soft-peach);
	border-color: transparent;
}

.dv-hub-planning-tile--public-holidays {
	background: var(--dv-color-sky-blue);
	border-color: transparent;
}

.dv-hub-planning-tile__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--dv-space-3);
}

.dv-hub-planning-tile__eyebrow {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.dv-hub-planning-tile__stat {
	text-align: right;
}

.dv-hub-planning-tile__stat-number {
	font-family: var(--dv-font-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	display: block;
}

.dv-hub-planning-tile__stat-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0.6;
}

.dv-hub-planning-tile__title {
	font-family: var(--dv-font-serif);
	font-size: 22px;
	font-weight: 500;
}

.dv-hub-planning-tile__desc {
	font-size: 14px;
	opacity: 0.75;
	margin-top: var(--dv-space-1);
	max-width: 320px;
}