/*
Theme Name: SlovakPortal
Theme URI: https://slovakportal.cz
Author: Luke
Author URI: https://gmushop.cz
Description: Portál pre Slovákov žijúcich v Česku. Prispôsobiteľná domovská stránka s vyhľadávaním, tematickými rozcestníkmi, kalendárom akcií a komunitnou poradňou. Obsahuje vlastný typ obsahu Akcie, plne responzívny dizajn a pripravené preklady do slovenčiny.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: slovakportal
Domain Path: /languages
Tags: news, blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, one-column, two-columns, right-sidebar
*/

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--sp-font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sp-body);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--sp-blue);
}

ul,
ol {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	border: none;
	background: none;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-font);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--sp-navy);
}

h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin-bottom: 1.15em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }
em { font-style: italic; }

/* ============================================================
   ACCESSIBILITY UTILITIES
   ============================================================ */
.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: .75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(13, 36, 64, .2);
	font-weight: 700;
	color: var(--sp-navy);
}


:root {
	--sp-navy:        #0d2440;
	--sp-ink:         #1a2b42;
	--sp-body:        #3d4f66;
	--sp-muted:       #6b7789;
	--sp-blue:        #1b6ec2;
	--sp-blue-dark:   #14406f;
	--sp-blue-darker: #0f3159;
	--sp-red:         #d8232a;
	--sp-red-dark:    #b3191f;
	--sp-line:        #e4eaf2;
	--sp-tint:        #eff6fe;
	--sp-tint-deep:   #dbeafe;
	--sp-pink:        #fdf1f1;
	--sp-footer-bg:   #102332;

	--sp-font:        'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--sp-font-script: 'Caveat', 'Segoe Script', cursive;

	--sp-radius:      14px;
	--sp-radius-lg:   18px;
	--sp-radius-sm:   9px;

	--sp-shadow-sm:   0 1px 3px rgba(13, 36, 64, .06), 0 4px 14px rgba(13, 36, 64, .05);
	--sp-shadow-md:   0 6px 20px rgba(13, 36, 64, .10);
	--sp-shadow-lg:   0 18px 50px rgba(13, 36, 64, .13);

	--sp-ease:        cubic-bezier(.25, .46, .45, .94);
}

.sp-header,
.sp-home,
.sp-footer {
	font-family: var(--sp-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--sp-body);
}

.sp-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.sp-home ul,
.sp-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-home p { margin: 0; }

.sp-icon,
.sp-meta__icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.sp-script {
	font-family: var(--sp-font-script);
	font-weight: 600;
	line-height: 1.15;
}

/* ============================================================
   BUTTONS & LINKS
   ============================================================ */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .72rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--sp-radius-sm);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 180ms var(--sp-ease), transform 180ms var(--sp-ease), box-shadow 180ms var(--sp-ease);
}

.sp-btn__icon {
	width: 1.05em;
	height: 1.05em;
}

.sp-btn--primary,
.sp-btn--navy {
	background: var(--sp-blue-dark);
	color: #fff;
}

.sp-btn--primary:hover,
.sp-btn--primary:focus-visible,
.sp-btn--navy:hover,
.sp-btn--navy:focus-visible {
	background: var(--sp-blue-darker);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--sp-shadow-md);
}

.sp-btn--red {
	background: var(--sp-red);
	color: #fff;
}

.sp-btn--red:hover,
.sp-btn--red:focus-visible {
	background: var(--sp-red-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--sp-shadow-md);
}

.sp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--sp-blue);
	font-size: .92rem;
	font-weight: 700;
	white-space: nowrap;
}

.sp-link-arrow:hover,
.sp-link-arrow:focus-visible {
	color: var(--sp-blue-dark);
}

.sp-link-arrow__icon {
	width: 1.05em;
	height: 1.05em;
	transition: transform 180ms var(--sp-ease);
}

.sp-link-arrow:hover .sp-link-arrow__icon {
	transform: translateX(3px);
}

/* Visible keyboard focus everywhere in the redesign. */
.sp-header :focus-visible,
.sp-home :focus-visible,
.sp-footer :focus-visible {
	outline: 2px solid var(--sp-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
.sp-section {
	padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

.sp-section-title {
	margin: 0;
	padding-bottom: .7rem;
	position: relative;
	font-family: var(--sp-font);
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--sp-navy);
}

.sp-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 58px;
	height: 4px;
	border-radius: 2px;
	background: var(--sp-red);
}

.sp-section-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	margin-bottom: 1.6rem;
}

.sp-section-head__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.sp-empty {
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--sp-line);
	border-radius: var(--sp-radius);
	text-align: center;
	color: var(--sp-muted);
}

/* ============================================================
   BRAND
   ============================================================ */
.sp-brand {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	flex-shrink: 0;
	color: inherit;
	text-decoration: none;
}

.sp-brand__mark {
	width: 36px;
	height: 34px;
	flex-shrink: 0;
}

.sp-brand__logo-img {
	width: auto;
	max-height: 44px;
}

.sp-brand__text {
	display: block;
}

.sp-brand__name {
	display: block;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.1;
	color: var(--sp-navy);
}

.sp-brand__name-accent {
	color: var(--sp-blue);
}

.sp-brand__tagline {
	display: block;
	margin-top: .1rem;
	font-size: .74rem;
	font-weight: 400;
	color: var(--sp-muted);
}

/* ============================================================
   HEADER
   ============================================================ */
.sp-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid var(--sp-line);
}

.sp-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 78px;
}

.sp-nav {
	margin-left: 1.75rem;
	margin-right: auto;
}

.sp-menu {
	display: flex;
	align-items: center;
	gap: 1.7rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-menu__item {
	position: relative;
}

.sp-menu__link {
	display: inline-flex;
	align-items: center;
	padding: .35rem 0;
	font-size: .96rem;
	font-weight: 700;
	color: var(--sp-navy);
	text-decoration: none;
	white-space: nowrap;
}

.sp-menu__link:hover {
	color: var(--sp-blue);
}

.sp-menu__item.is-current > .sp-menu__link {
	color: var(--sp-blue);
}

.sp-menu__item.is-current > .sp-menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--sp-blue);
}

.sp-submenu-toggle {
	display: inline-flex;
	align-items: center;
	padding: .25rem;
	margin-left: .1rem;
	border: 0;
	background: none;
	color: var(--sp-navy);
	cursor: pointer;
}

.sp-submenu-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 180ms var(--sp-ease);
}

.sp-menu__item.is-open > .sp-submenu-toggle svg {
	transform: rotate(180deg);
}

.sp-submenu {
	position: absolute;
	top: calc(100% + .65rem);
	left: -.75rem;
	z-index: 10;
	display: none;
	min-width: 230px;
	padding: .5rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	box-shadow: var(--sp-shadow-lg);
}

.sp-menu__item.is-open > .sp-submenu {
	display: block;
}

.sp-submenu .sp-menu__link {
	display: block;
	width: 100%;
	padding: .55rem .75rem;
	border-radius: 7px;
	font-size: .92rem;
	font-weight: 600;
}

.sp-submenu .sp-menu__link:hover {
	background: var(--sp-tint);
}

/* Header search pill */
.sp-search {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-shrink: 0;
	width: clamp(200px, 22vw, 280px);
	padding: .62rem 1.1rem;
	background: #f2f5f9;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: border-color 180ms var(--sp-ease), background-color 180ms var(--sp-ease);
}

.sp-search:focus-within {
	background: #fff;
	border-color: var(--sp-blue);
}

.sp-search__icon {
	width: 18px;
	height: 18px;
	color: var(--sp-navy);
}

.sp-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: .92rem;
	color: var(--sp-ink);
}

.sp-search input:focus {
	outline: none;
}

.sp-search input::placeholder {
	color: #9aa6b6;
}

/* Mobile-only pieces */
.sp-burger,
.sp-nav__search {
	display: none;
}

.sp-burger {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--sp-navy);
	cursor: pointer;
}

.sp-burger svg {
	width: 22px;
	height: 22px;
}

.sp-burger__close,
.sp-burger[aria-expanded="true"] .sp-burger__open {
	display: none;
}

.sp-burger[aria-expanded="true"] .sp-burger__close {
	display: block;
}

/* ============================================================
   1. HERO
   ============================================================ */
.sp-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(6rem, 11vw, 9rem);
	background: linear-gradient(135deg, #dceafb 0%, #eaf3fd 45%, #f6dfd3 100%);
	overflow: hidden;
}

.sp-hero--has-image {
	background-image: var(--sp-hero-image);
	background-size: cover;
	background-position: center 40%;
}

/* Light wash so the navy headline keeps contrast over any photo. */
.sp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg,
		rgba(255, 255, 255, .96) 0%,
		rgba(255, 255, 255, .88) 34%,
		rgba(255, 255, 255, .45) 58%,
		rgba(255, 255, 255, .12) 100%);
}

.sp-hero__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
}

.sp-hero__content {
	max-width: 600px;
}

.sp-hero__title {
	margin: 0;
	font-family: var(--sp-font);
	font-size: clamp(2.1rem, 4.4vw, 3.3rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--sp-navy);
}

.sp-hero__lead {
	margin-top: 1.1rem;
	max-width: 33em;
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	color: var(--sp-ink);
}

.sp-hero__search {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: 1.9rem;
	padding: .45rem .45rem .45rem 1.1rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(13, 36, 64, .18);
}

.sp-hero__search-icon {
	width: 20px;
	height: 20px;
	color: var(--sp-navy);
	flex-shrink: 0;
}

.sp-hero__search input {
	flex: 1;
	min-width: 0;
	padding: .55rem 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 1rem;
	color: var(--sp-ink);
}

.sp-hero__search input:focus {
	outline: none;
}

.sp-hero__search input::placeholder {
	color: #93a1b3;
}

.sp-hero__search-submit {
	flex-shrink: 0;
}

.sp-hero__examples {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem .8rem;
	margin-top: 1.1rem;
}

.sp-hero__examples-label {
	font-size: .84rem;
	font-weight: 600;
	color: var(--sp-ink);
}

.sp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-chip {
	display: inline-block;
	padding: .34rem .75rem;
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(13, 36, 64, .08);
	border-radius: 8px;
	font-size: .82rem;
	color: var(--sp-body);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(13, 36, 64, .06);
	transition: background-color 180ms var(--sp-ease), color 180ms var(--sp-ease);
}

.sp-chip:hover,
.sp-chip:focus-visible {
	background: #fff;
	color: var(--sp-blue);
}

.sp-hero__script {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	flex-shrink: 0;
	margin-top: 1rem;
	max-width: 230px;
	color: var(--sp-navy);
	transform: rotate(-7deg);
}

.sp-hero__script .sp-script {
	font-size: 1.6rem;
}

.sp-hero__script-heart {
	width: 24px;
	height: 24px;
	margin-top: .6rem;
	color: var(--sp-red);
	stroke-width: 2;
}

/* ============================================================
   2. ČO POTREBUJEŠ?
   ============================================================ */
.sp-needs {
	position: relative;
	z-index: 3;
	margin-top: clamp(-5.5rem, -6vw, -3.5rem);
}

.sp-needs__panel {
	padding: clamp(1.4rem, 3vw, 2.4rem);
	background: #fff;
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-lg);
}

.sp-needs__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.75rem;
}

.sp-need-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.3rem 1.05rem 2.6rem;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow-sm);
	text-decoration: none;
	transition: transform 200ms var(--sp-ease), box-shadow 200ms var(--sp-ease), border-color 200ms var(--sp-ease);
}

.sp-need-card:hover,
.sp-need-card:focus-visible {
	transform: translateY(-4px);
	border-color: #c6dcf5;
	box-shadow: var(--sp-shadow-md);
}

.sp-need-card__icon {
	width: 44px;
	height: 44px;
	margin: 0 auto .95rem;
}

.sp-need-card__title {
	margin: 0 0 .55rem;
	font-family: var(--sp-font);
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	color: var(--sp-navy);
}

.sp-need-card__text {
	margin: 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--sp-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sp-need-card__arrow {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	width: 16px;
	height: 16px;
	color: #9aa6b6;
	transition: transform 180ms var(--sp-ease), color 180ms var(--sp-ease);
}

.sp-need-card:hover .sp-need-card__arrow {
	color: var(--sp-blue);
	transform: translateX(3px);
}

/* ============================================================
   3. AKCIE
   ============================================================ */
.sp-events__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.sp-event-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	overflow: hidden;
	box-shadow: var(--sp-shadow-sm);
	transition: transform 200ms var(--sp-ease), box-shadow 200ms var(--sp-ease);
}

.sp-event-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-md);
}

.sp-event-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #e9eef5;
}

.sp-event-card__media img,
.sp-event-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-event-card__placeholder {
	background: linear-gradient(135deg, #dbe6f3, #eef3f9);
}

.sp-event-card__date {
	position: absolute;
	left: .8rem;
	bottom: .7rem;
	min-width: 52px;
	padding: .35rem .55rem .3rem;
	background: #fff;
	border-radius: 10px;
	text-align: center;
	box-shadow: var(--sp-shadow-md);
}

.sp-event-card__day {
	display: block;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--sp-navy);
}

.sp-event-card__month {
	display: block;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.sp-event-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: .4rem;
	padding: 1rem 1.1rem 1.15rem;
}

.sp-event-card__title {
	margin: 0;
	font-family: var(--sp-font);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--sp-navy);
}

.sp-event-card__title a {
	color: inherit;
	text-decoration: none;
}

.sp-event-card__title a:hover {
	color: var(--sp-blue);
}

.sp-event-card__place {
	font-size: .93rem;
	color: var(--sp-body);
}

.sp-event-card__meta {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: .35rem;
	font-size: .84rem;
	color: var(--sp-muted);
}

.sp-event-card__meta li {
	display: flex;
	align-items: center;
	gap: .45rem;
}

.sp-event-card__meta .sp-meta__icon {
	width: 15px;
	height: 15px;
	color: #9aa6b6;
}

.sp-event-card__link {
	margin-top: auto;
	padding-top: .75rem;
}

/* ============================================================
   4. NAJNOVŠIE ČLÁNKY
   ============================================================ */
.sp-section-head--tabs .sp-section-head__more {
	margin-left: auto;
}

.sp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	align-items: center;
}

.sp-tab {
	padding: .3rem 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: inherit;
	font-size: .93rem;
	font-weight: 600;
	color: var(--sp-muted);
	cursor: pointer;
	transition: color 180ms var(--sp-ease), border-color 180ms var(--sp-ease);
}

.sp-tab:hover {
	color: var(--sp-ink);
}

.sp-tab.is-active {
	color: var(--sp-blue);
	border-bottom-color: var(--sp-blue);
	font-weight: 700;
}

.sp-articles__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.1rem;
}

.sp-article-card {
	height: 100%;
}

.sp-article-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: #e9eef5;
}

.sp-article-card__media img,
.sp-article-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms var(--sp-ease);
}

.sp-article-card__placeholder {
	background: linear-gradient(135deg, #dbe6f3, #eef3f9);
}

.sp-article-card:hover .sp-article-card__media img {
	transform: scale(1.04);
}

.sp-article-card__title {
	margin: .75rem 0 0;
	font-family: var(--sp-font);
	font-size: .94rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sp-navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sp-article-card__title a {
	color: inherit;
	text-decoration: none;
}

.sp-article-card__title a:hover {
	color: var(--sp-blue);
}

.sp-article-card__date {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .5rem;
	font-size: .79rem;
	color: var(--sp-muted);
}

.sp-article-card__date .sp-meta__icon {
	width: 14px;
	height: 14px;
	color: #9aa6b6;
}

/* ============================================================
   5. PROMO PANELS
   ============================================================ */
.sp-promo__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.sp-promo-card {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	border-radius: var(--sp-radius-lg);
}

.sp-promo-card--guide {
	background: var(--sp-tint);
}

.sp-promo-card--qa {
	background: var(--sp-pink);
}

.sp-promo-card__media {
	flex-shrink: 0;
	width: clamp(104px, 17%, 148px);
	aspect-ratio: 1 / 1.08;
	border-radius: 12px;
	overflow: hidden;
}

.sp-promo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-promo-card__illustration {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: clamp(88px, 16%, 128px);
}

.sp-promo-card__chat {
	width: 100%;
	height: auto;
	color: #efb4b4;
	stroke-width: 1.4;
}

.sp-promo-card__body {
	flex: 1;
	min-width: 0;
}

.sp-promo-card__title {
	margin: 0 0 .6rem;
	font-family: var(--sp-font);
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.sp-promo-card--guide .sp-promo-card__title {
	color: #15558f;
}

.sp-promo-card--qa .sp-promo-card__title {
	color: var(--sp-navy);
}

.sp-promo-card__text {
	margin-bottom: 1.15rem;
	font-size: .95rem;
	color: var(--sp-body);
	max-width: 42em;
}

.sp-promo-card__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
}

/* ============================================================
   6. NEWSLETTER
   ============================================================ */
.sp-newsletter__panel {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	padding: clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.25rem, 3vw, 2.2rem);
	background: var(--sp-tint);
	border-radius: var(--sp-radius-lg);
}

.sp-newsletter__intro {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: 1 1 340px;
}

.sp-newsletter__icon {
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	color: var(--sp-blue-dark);
	stroke-width: 1.3;
}

.sp-newsletter__title {
	margin: 0 0 .3rem;
	font-family: var(--sp-font);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--sp-navy);
}

.sp-newsletter__text {
	font-size: .92rem;
	color: var(--sp-body);
}

.sp-newsletter__form-wrap {
	flex: 0 1 auto;
}

.sp-newsletter__form {
	display: flex;
	gap: .6rem;
}

.sp-newsletter__form input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: .7rem 1rem;
	background: #fff;
	border: 1px solid #d5e2f2;
	border-radius: var(--sp-radius-sm);
	font-family: inherit;
	font-size: .95rem;
	color: var(--sp-ink);
}

.sp-newsletter__form input[type="email"]::placeholder {
	color: #93a1b3;
}

.sp-newsletter__note {
	margin-top: .55rem;
	font-size: .76rem;
	color: var(--sp-muted);
}

/* ============================================================
   FOOTER
   ============================================================ */
.sp-footer {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(2.25rem, 4vw, 3rem) 1.4rem;
	background: var(--sp-footer-bg);
	color: #b9c7d6;
}

.sp-footer__top {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1.3fr 1.1fr;
	gap: 2rem;
	padding-bottom: 2rem;
}

.sp-brand--footer .sp-brand__name,
.sp-brand--footer .sp-brand__name-accent {
	color: #fff;
}

.sp-brand--footer .sp-brand__tagline {
	color: #9db0c4;
}

.sp-social {
	display: flex;
	gap: .7rem;
	margin-top: 1.5rem;
}

.sp-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	color: #dce6f1;
	transition: background-color 180ms var(--sp-ease), border-color 180ms var(--sp-ease);
}

.sp-social a:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .5);
}

.sp-social__icon {
	width: 19px;
	height: 19px;
}

.sp-footer__heading {
	margin: 0 0 .95rem;
	font-size: .95rem;
	font-weight: 800;
	color: #fff;
}

.sp-footer__links {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-footer__links a {
	font-size: .9rem;
	color: #b9c7d6;
	text-decoration: none;
}

.sp-footer__links a:hover {
	color: #fff;
}

.sp-footer__script {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: .6rem;
	color: #e3ebf4;
}

.sp-footer__script .sp-script {
	display: inline-block;
	max-width: 190px;
	font-size: 1.45rem;
	text-align: center;
	transform: rotate(-6deg);
}

.sp-footer__script-heart {
	width: 22px;
	height: 22px;
	margin-top: .35rem;
	stroke-width: 1.6;
}

.sp-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	padding-top: 1.35rem;
	border-top: 1px solid rgba(255, 255, 255, .13);
	font-size: .82rem;
	color: #8ca0b4;
}

.sp-footer__pride {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.sp-footer__flag svg {
	width: 17px;
	height: 16px;
	display: block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
	.sp-needs__grid,
	.sp-articles__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sp-events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-menu {
		gap: 1.25rem;
	}

	.sp-nav {
		margin-left: 1.1rem;
	}
}

@media (max-width: 1080px) {
	.sp-hero__script {
		display: none;
	}
}

@media (max-width: 960px) {
	/* Header collapses into a panel below the bar. */
	.sp-burger {
		display: inline-flex;
	}

	.sp-search--header {
		display: none;
	}

	.sp-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		margin: 0;
		padding: .5rem clamp(1rem, 4vw, 2rem) 1.35rem;
		background: #fff;
		border-bottom: 1px solid var(--sp-line);
		box-shadow: var(--sp-shadow-lg);
		max-height: calc(100vh - 78px);
		overflow-y: auto;
	}

	.sp-nav.is-open {
		display: block;
	}

	.sp-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sp-menu__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-menu__link {
		flex: 1;
		padding: .9rem 0;
	}

	.sp-menu__item.is-current > .sp-menu__link::after {
		display: none;
	}

	.sp-submenu-toggle {
		padding: .6rem;
	}

	.sp-submenu {
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0 0 .6rem .8rem;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sp-nav__search {
		display: flex;
		width: 100%;
		margin-top: 1.1rem;
	}

	.sp-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1.5rem;
	}

	.sp-footer__script {
		justify-content: flex-start;
	}

	.sp-promo__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.sp-needs {
		margin-top: -3rem;
	}

	.sp-needs__grid,
	.sp-articles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-section-head__actions {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.sp-section-head--tabs .sp-section-head__more {
		margin-left: 0;
	}

	.sp-tabs {
		width: 100%;
		gap: 1.1rem;
		overflow-x: auto;
		padding-bottom: .25rem;
		-webkit-overflow-scrolling: touch;
	}

	.sp-tab {
		white-space: nowrap;
	}

	.sp-newsletter__form-wrap {
		flex: 1 1 100%;
	}

	.sp-newsletter__form input[type="email"] {
		min-width: 0;
	}
}

@media (max-width: 560px) {
	.sp-brand__name {
		font-size: 1.2rem;
	}

	.sp-brand__tagline {
		display: none;
	}

	.sp-hero__search {
		flex-wrap: wrap;
		padding: .75rem;
		gap: .5rem;
	}

	.sp-hero__search-icon {
		display: none;
	}

	.sp-hero__search input {
		flex: 1 1 100%;
		padding: .4rem .25rem;
	}

	.sp-hero__search-submit {
		width: 100%;
	}

	.sp-events__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-promo-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-promo-card__media,
	.sp-promo-card__illustration {
		width: 120px;
	}

	.sp-newsletter__intro {
		flex: 1 1 100%;
	}

	.sp-newsletter__form {
		flex-wrap: wrap;
	}

	.sp-newsletter__form input[type="email"] {
		flex: 1 1 100%;
	}

	.sp-newsletter__form .sp-btn {
		width: 100%;
	}

	.sp-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 420px) {
	.sp-needs__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-header *,
	.sp-home *,
	.sp-footer * {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}

/* ============================================================
   INNER PAGES — shared scaffolding
   ============================================================ */
.sp-page {
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.sp-page-header {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.sp-page-title {
	margin: 0;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.12;
	color: var(--sp-navy);
}

.sp-page-title::after {
	content: "";
	display: block;
	width: 58px;
	height: 4px;
	margin-top: .8rem;
	border-radius: 2px;
	background: var(--sp-red);
}

.sp-page-desc {
	margin-top: .9rem;
	max-width: 60ch;
	font-size: 1.02rem;
	color: var(--sp-body);
}

/* Breadcrumbs */
.sp-breadcrumbs {
	margin-bottom: .9rem;
	font-size: .84rem;
	color: var(--sp-muted);
}

.sp-breadcrumbs a {
	color: var(--sp-blue);
	font-weight: 600;
}

.sp-breadcrumbs .sp-breadcrumbs__sep {
	margin-inline: .4rem;
	color: #b6c1cf;
}

/* Optional sidebar column — only rendered when a widget area has content. */
.sp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 3vw, 2.5rem);
	align-items: start;
}

.sp-layout--with-aside {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.sp-aside {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sp-aside .widget {
	padding: 1.25rem;
	background: var(--sp-tint);
	border-radius: var(--sp-radius);
}

.sp-aside .widget-title {
	margin: 0 0 .85rem;
	font-size: 1rem;
	font-weight: 800;
	color: var(--sp-navy);
}

.sp-aside .widget ul {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-size: .92rem;
}

.sp-aside .widget a {
	color: var(--sp-body);
}

.sp-aside .widget a:hover {
	color: var(--sp-blue);
}

/* ============================================================
   POST LISTINGS
   ============================================================ */
.sp-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 1.35rem;
}

.sp-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sp-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	background: #e9eef5;
}

.sp-post-card__media img,
.sp-post-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms var(--sp-ease);
}

.sp-post-card__placeholder {
	background: linear-gradient(135deg, #dbe6f3, #eef3f9);
}

.sp-post-card:hover .sp-post-card__media img {
	transform: scale(1.04);
}

.sp-post-card__cat {
	display: inline-block;
	margin-top: .85rem;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sp-red);
}

.sp-post-card__title {
	margin: .4rem 0 0;
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.015em;
	color: var(--sp-navy);
}

.sp-post-card__title a:hover {
	color: var(--sp-blue);
}

.sp-post-card__excerpt {
	margin: .5rem 0 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--sp-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Shared meta line: date, author, reading time */
.sp-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem .85rem;
	margin-top: .7rem;
	font-size: .8rem;
	color: var(--sp-muted);
}

.sp-meta > * {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.sp-meta .sp-meta__icon {
	width: 14px;
	height: 14px;
	color: #9aa6b6;
}

.sp-post-card .sp-meta {
	margin-top: auto;
	padding-top: .7rem;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.sp-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .45rem;
	margin-top: 2.5rem;
}

.sp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: .8rem;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-sm);
	font-size: .92rem;
	font-weight: 700;
	color: var(--sp-navy);
	background: #fff;
	transition: background-color 180ms var(--sp-ease), border-color 180ms var(--sp-ease), color 180ms var(--sp-ease);
}

.sp-pagination .page-numbers:hover {
	border-color: #c6dcf5;
	background: var(--sp-tint);
	color: var(--sp-blue);
}

.sp-pagination .page-numbers.current {
	background: var(--sp-blue-dark);
	border-color: var(--sp-blue-dark);
	color: #fff;
}

.sp-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.sp-single {
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
}

.sp-single__cover {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 8;
	background: #e9eef5;
}

.sp-single__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-single__header {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: 1.75rem;
}

.sp-single__cat {
	display: inline-block;
	margin-bottom: .6rem;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sp-red);
}

.sp-single__title {
	margin: 0;
	font-size: clamp(1.85rem, 3.6vw, 2.7rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.03em;
	color: var(--sp-navy);
}

.sp-single__excerpt {
	margin-top: 1rem;
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--sp-body);
}

.sp-single__meta {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--sp-line);
}

/* Article body typography */
.sp-prose {
	max-width: 760px;
	margin-inline: auto;
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--sp-ink);
}

.sp-prose > * + * {
	margin-top: 1.15em;
}

.sp-prose h2 {
	margin-top: 2em;
	font-size: 1.55rem;
}

.sp-prose h3 {
	margin-top: 1.7em;
	font-size: 1.25rem;
}

.sp-prose a {
	color: var(--sp-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sp-prose ul,
.sp-prose ol {
	padding-left: 1.4em;
}

.sp-prose ul { list-style: disc; }
.sp-prose ol { list-style: decimal; }

.sp-prose li + li {
	margin-top: .4em;
}

.sp-prose img,
.sp-prose figure {
	border-radius: var(--sp-radius);
	overflow: hidden;
}

.sp-prose figcaption {
	margin-top: .5rem;
	font-size: .85rem;
	color: var(--sp-muted);
	text-align: center;
}

.sp-prose blockquote {
	padding: .25rem 0 .25rem 1.4rem;
	border-left: 4px solid var(--sp-red);
	font-size: 1.15rem;
	color: var(--sp-navy);
}

.sp-prose code {
	padding: .15em .4em;
	background: var(--sp-tint);
	border-radius: 5px;
	font-size: .9em;
}

.sp-prose pre {
	padding: 1.1rem;
	background: var(--sp-navy);
	border-radius: var(--sp-radius);
	color: #e6edf5;
	overflow-x: auto;
}

.sp-prose pre code {
	background: none;
	padding: 0;
}

.sp-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.sp-prose th,
.sp-prose td {
	padding: .6rem .75rem;
	border: 1px solid var(--sp-line);
	text-align: left;
}

.sp-prose th {
	background: var(--sp-tint);
	font-weight: 700;
	color: var(--sp-navy);
}

/* Narrow blocks under the article */
.sp-single__footer {
	max-width: 760px;
	margin-inline: auto;
}

.sp-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 2rem;
}

.sp-tag-list a {
	display: inline-block;
	padding: .35rem .8rem;
	background: var(--sp-tint);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--sp-body);
}

.sp-tag-list a:hover {
	background: var(--sp-tint-deep);
	color: var(--sp-blue);
}

.sp-author {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-top: 2rem;
	padding: 1.35rem;
	background: var(--sp-tint);
	border-radius: var(--sp-radius);
}

.sp-author img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
}

.sp-author__name {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--sp-navy);
}

.sp-author__bio {
	margin: .25rem 0 0;
	font-size: .9rem;
	color: var(--sp-muted);
}

.sp-postnav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sp-line);
	font-size: .92rem;
	font-weight: 700;
}

.sp-postnav a {
	color: var(--sp-blue);
}

.sp-postnav__next {
	margin-left: auto;
	text-align: right;
}

/* ============================================================
   COMMENTS
   ============================================================ */
.sp-comments {
	max-width: 760px;
	margin: 2.75rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--sp-line);
}

.sp-comments__title {
	margin: 0 0 1.5rem;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--sp-navy);
}

.sp-comments .comment-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sp-comments .comment-list ol.children {
	margin-top: 1.25rem;
	padding-left: 1.5rem;
	border-left: 2px solid var(--sp-line);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sp-comments .comment-body {
	padding: 1.1rem 1.25rem;
	background: var(--sp-tint);
	border-radius: var(--sp-radius);
	font-size: .95rem;
}

.sp-comments .comment-author {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 700;
	color: var(--sp-navy);
}

.sp-comments .comment-author img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.sp-comments .comment-metadata {
	margin: .25rem 0 .6rem;
	font-size: .78rem;
	color: var(--sp-muted);
}

.sp-comments .reply {
	margin-top: .5rem;
	font-size: .85rem;
	font-weight: 700;
}

.sp-comments .reply a {
	color: var(--sp-blue);
}

.sp-comments .comment-respond {
	margin-top: 2rem;
}

.sp-comments .comment-reply-title {
	margin-bottom: 1rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--sp-navy);
}

.sp-comments input[type="text"],
.sp-comments input[type="email"],
.sp-comments input[type="url"],
.sp-comments textarea {
	width: 100%;
	padding: .7rem 1rem;
	margin-bottom: .85rem;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-sm);
	font-size: .95rem;
	color: var(--sp-ink);
}

.sp-comments .submit {
	display: inline-flex;
	align-items: center;
	padding: .72rem 1.35rem;
	background: var(--sp-blue-dark);
	border: 0;
	border-radius: var(--sp-radius-sm);
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.sp-comments .submit:hover {
	background: var(--sp-blue-darker);
}

/* ============================================================
   SEARCH FORM / EMPTY STATES / 404
   ============================================================ */
.sp-searchform {
	display: flex;
	gap: .6rem;
	max-width: 480px;
	margin-top: 1.25rem;
}

.sp-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: .72rem 1.1rem;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-sm);
	font-size: .95rem;
	color: var(--sp-ink);
}

.sp-searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--sp-blue);
}

.sp-noresults {
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--sp-line);
	border-radius: var(--sp-radius);
	text-align: center;
}

.sp-noresults__title {
	margin: 0 0 .6rem;
	font-size: 1.2rem;
	color: var(--sp-navy);
}

.sp-noresults p {
	color: var(--sp-muted);
}

.sp-noresults .sp-searchform {
	margin-inline: auto;
}

.sp-404 {
	max-width: 620px;
	margin-inline: auto;
	padding-block: clamp(3rem, 8vw, 5rem);
	text-align: center;
}

.sp-404__code {
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--sp-tint-deep);
}

.sp-404__title {
	margin: .5rem 0 .75rem;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	color: var(--sp-navy);
}

.sp-404 p {
	color: var(--sp-muted);
}

.sp-404 .sp-searchform {
	margin-inline: auto;
}

.sp-404 .sp-btn {
	margin-top: 1.5rem;
}

/* ============================================================
   EVENT ARCHIVE & SINGLE EVENT
   ============================================================ */
.sp-event-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	max-width: 760px;
	margin: 0 auto 1.75rem;
	padding: 1.1rem 1.35rem;
	background: var(--sp-tint);
	border-radius: var(--sp-radius);
	font-size: .95rem;
	color: var(--sp-body);
}

.sp-event-single__meta > div {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.sp-event-single__meta .sp-meta__icon {
	width: 17px;
	height: 17px;
	color: var(--sp-blue-dark);
}

.sp-event-single__cta {
	max-width: 760px;
	margin: 1.75rem auto 0;
}

/* ============================================================
   RESPONSIVE — inner pages
   ============================================================ */
@media (max-width: 1080px) {
	.sp-layout--with-aside {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-aside {
		position: static;
	}
}

@media (max-width: 900px) {
	.sp-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sp-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-single__cover {
		aspect-ratio: 16 / 10;
	}

	.sp-postnav {
		flex-direction: column;
	}

	.sp-postnav__next {
		margin-left: 0;
		text-align: left;
	}
}