/*
 * Theme Name:   JSYK Astra 2.0
 * Theme URI:    https://jsyk.info
 * Description:  A calm, premium, editorial child theme for Astra — built for the JSYK clarity platform.
 * Author:       JSYK
 * Author URI:   https://jsyk.info
 * Template:     astra
 * Version:      2.0.0
 * License:      GPL-2.0-or-later
 * License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:  jsyk-astra-2
 * Requires at least: 6.0
 * Tested up to: 6.7
 * Requires PHP: 7.4
 */

/* ==========================================================================
   1. DESIGN TOKENS — LIGHT MODE (default)
   ========================================================================== */

:root {
	/* --- Color: Backgrounds --- */
	--jsyk-bg:              #F7F7F5;
	--jsyk-surface:         #FFFFFF;
	--jsyk-surface-alt:     #F0EFED;

	/* --- Color: Borders & Dividers --- */
	--jsyk-border:          rgba(0, 0, 0, 0.08);
	--jsyk-border-strong:   rgba(0, 0, 0, 0.14);

	/* --- Color: Text --- */
	--jsyk-text:            #1A1A1E;
	--jsyk-text-secondary:  #767779;
	--jsyk-text-tertiary:   #9B9BA4;

	/* --- Color: Accent --- */
	--jsyk-accent:          #0B3B4F;
	--jsyk-accent-hover:    #1F6F8B;
	--jsyk-accent-subtle:   rgba(11, 59, 79, 0.08);
	--jsyk-accent-text:     #FFFFFF;

	/* --- Color: Status --- */
	--jsyk-success:         #2E8B57;
	--jsyk-caution:         #C5922E;
	--jsyk-danger:          #C0392B;

	/* --- Shadows --- */
	--jsyk-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.04);
	--jsyk-shadow:          0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--jsyk-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.06);
	--jsyk-shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.08);

	/* --- Typography --- */
	--jsyk-font-sans:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--jsyk-font-serif:      'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--jsyk-font-mono:       'JetBrains Mono', 'Fira Code', monospace;

	/* Fluid type scale */
	--jsyk-text-xs:         clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);      /* ~11-12px */
	--jsyk-text-sm:         clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);     /* ~13-14px */
	--jsyk-text-base:       clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);         /* ~15-16px */
	--jsyk-text-lg:         clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);        /* ~17-18px */
	--jsyk-text-xl:         clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);     /* ~19-21px */
	--jsyk-text-2xl:        clamp(1.4375rem, 1.3rem + 0.45vw, 1.625rem);     /* ~23-26px */
	--jsyk-text-3xl:        clamp(1.75rem, 1.55rem + 0.65vw, 2.125rem);      /* ~28-34px */
	--jsyk-text-4xl:        clamp(2.125rem, 1.8rem + 1vw, 2.75rem);          /* ~34-44px */

	/* Line heights */
	--jsyk-leading-tight:   1.25;
	--jsyk-leading-snug:    1.375;
	--jsyk-leading-normal:  1.6;
	--jsyk-leading-relaxed: 1.75;

	/* Font weights */
	--jsyk-weight-regular:  400;
	--jsyk-weight-medium:   500;
	--jsyk-weight-semibold: 600;
	--jsyk-weight-bold:     700;

	/* Letter spacing */
	--jsyk-tracking-tight:  -0.01em;
	--jsyk-tracking-normal:  0;
	--jsyk-tracking-wide:    0.02em;
	--jsyk-tracking-wider:   0.06em;

	/* --- Spacing (4px base) --- */
	--jsyk-space-1:   0.25rem;    /*  4px */
	--jsyk-space-2:   0.5rem;     /*  8px */
	--jsyk-space-3:   0.75rem;    /* 12px */
	--jsyk-space-4:   1rem;       /* 16px */
	--jsyk-space-5:   1.25rem;    /* 20px */
	--jsyk-space-6:   1.5rem;     /* 24px */
	--jsyk-space-8:   2rem;       /* 32px */
	--jsyk-space-10:  2.5rem;     /* 40px */
	--jsyk-space-12:  3rem;       /* 48px */
	--jsyk-space-16:  4rem;       /* 64px */
	--jsyk-space-20:  5rem;       /* 80px */
	--jsyk-space-24:  6rem;       /* 96px */

	/* --- Border Radius --- */
	--jsyk-radius-sm:    6px;
	--jsyk-radius-md:   10px;
	--jsyk-radius-lg:   16px;
	--jsyk-radius-xl:   24px;
	--jsyk-radius-pill: 999px;

	/* --- Layout --- */
	--jsyk-content-width:  720px;
	--jsyk-wide-width:    1120px;
	--jsyk-max-width:     1320px;

	/* --- Transitions --- */
	--jsyk-duration-fast:   150ms;
	--jsyk-duration:        250ms;
	--jsyk-duration-slow:   400ms;
	--jsyk-ease:            cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. DESIGN TOKENS — DARK MODE
   ========================================================================== */

[data-theme="dark"] {
	--jsyk-bg:              #131316;
	--jsyk-surface:         #1C1C21;
	--jsyk-surface-alt:     #232329;

	--jsyk-border:          rgba(255, 255, 255, 0.08);
	--jsyk-border-strong:   rgba(255, 255, 255, 0.14);

	--jsyk-text:            #EDEDEC;
	--jsyk-text-secondary:  #74777A;
	--jsyk-text-tertiary:   #6B6B74;

	--jsyk-accent:          #81D4FA;
	--jsyk-accent-hover:    #4FC3F7;
	--jsyk-accent-subtle:   rgba(129, 212, 250, 0.10);
	--jsyk-accent-text:     #1A1A1E;

	--jsyk-success:         #3DA86B;
	--jsyk-caution:         #FFD54F;
	--jsyk-danger:          #D4544A;

	--jsyk-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.16);
	--jsyk-shadow:          0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
	--jsyk-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.28);
	--jsyk-shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.32);
}

/* System preference fallback (when no data-theme is set) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--jsyk-bg:              #131316;
		--jsyk-surface:         #1C1C21;
		--jsyk-surface-alt:     #232329;

		--jsyk-border:          rgba(255, 255, 255, 0.08);
		--jsyk-border-strong:   rgba(255, 255, 255, 0.14);

		--jsyk-text:            #EDEDEC;
		--jsyk-text-secondary:  #74777A;
		--jsyk-text-tertiary:   #6B6B74;

		--jsyk-accent:          #81D4FA;
		--jsyk-accent-hover:    #4FC3F7;
		--jsyk-accent-subtle:   rgba(129, 212, 250, 0.10);
		--jsyk-accent-text:     #1A1A1E;

		--jsyk-success:         #3DA86B;
		--jsyk-caution:         #FFD54F;
		--jsyk-danger:          #D4544A;

		--jsyk-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.16);
		--jsyk-shadow:          0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
		--jsyk-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.28);
		--jsyk-shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.32);
	}
}

/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

body {
	background-color: var(--jsyk-bg);
	color: var(--jsyk-text);
	font-family: var(--jsyk-font-sans);
	font-size: var(--jsyk-text-base);
	font-weight: var(--jsyk-weight-regular);
	line-height: var(--jsyk-leading-normal);
	letter-spacing: var(--jsyk-tracking-normal);
	transition:
		background-color var(--jsyk-duration-slow) var(--jsyk-ease),
		color var(--jsyk-duration-slow) var(--jsyk-ease);
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jsyk-font-sans);
	font-weight: var(--jsyk-weight-semibold);
	line-height: var(--jsyk-leading-tight);
	letter-spacing: var(--jsyk-tracking-tight);
	color: var(--jsyk-text);
	margin-top: 0;
}

h1 {
	font-size: var(--jsyk-text-4xl);
	font-weight: var(--jsyk-weight-bold);
}

h2 {
	font-size: var(--jsyk-text-3xl);
}

h3 {
	font-size: var(--jsyk-text-2xl);
}

h4 {
	font-size: var(--jsyk-text-xl);
}

h5 {
	font-size: var(--jsyk-text-lg);
}

h6 {
	font-size: var(--jsyk-text-base);
	font-weight: var(--jsyk-weight-semibold);
	letter-spacing: var(--jsyk-tracking-wide);
	text-transform: uppercase;
}

/* Serif accent — opt-in via class */
.jsyk-serif {
	font-family: var(--jsyk-font-serif);
	letter-spacing: var(--jsyk-tracking-normal);
}

p {
	margin-top: 0;
	margin-bottom: var(--jsyk-space-4);
	max-width: 65ch;
}

strong, b {
	font-weight: var(--jsyk-weight-semibold);
}

small {
	font-size: var(--jsyk-text-sm);
	color: var(--jsyk-text-secondary);
}

blockquote {
	margin: var(--jsyk-space-6) 0;
	padding: var(--jsyk-space-4) var(--jsyk-space-6);
	border-left: 3px solid var(--jsyk-accent);
	background-color: var(--jsyk-surface-alt);
	border-radius: 0 var(--jsyk-radius-sm) var(--jsyk-radius-sm) 0;
	font-style: italic;
	color: var(--jsyk-text-secondary);
}

blockquote p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   5. LINKS & FOCUS
   ========================================================================== */

a {
	color: var(--jsyk-accent);
	text-decoration: none;
	transition: color var(--jsyk-duration-fast) var(--jsyk-ease);
}

a:hover {
	color: var(--jsyk-accent-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Accessible focus ring */
:focus-visible {
	outline: 2px solid var(--jsyk-accent);
	outline-offset: 2px;
	border-radius: var(--jsyk-radius-sm);
}

/* ==========================================================================
   6. COMPONENT: CARDS
   ========================================================================== */

.jsyk-card {
	background-color: var(--jsyk-surface);
	border: 1px solid var(--jsyk-border);
	border-radius: var(--jsyk-radius-md);
	box-shadow: var(--jsyk-shadow-sm);
	padding: var(--jsyk-space-6);
	transition:
		box-shadow var(--jsyk-duration) var(--jsyk-ease),
		border-color var(--jsyk-duration) var(--jsyk-ease),
		background-color var(--jsyk-duration-slow) var(--jsyk-ease);
}

.jsyk-card:hover {
	box-shadow: var(--jsyk-shadow-md);
	border-color: var(--jsyk-border-strong);
}

.jsyk-card--compact {
	padding: var(--jsyk-space-4);
}

.jsyk-card--editorial {
	padding: var(--jsyk-space-8);
	border-radius: var(--jsyk-radius-lg);
}

.jsyk-card__title {
	font-size: var(--jsyk-text-lg);
	font-weight: var(--jsyk-weight-semibold);
	margin-bottom: var(--jsyk-space-2);
}

.jsyk-card__meta {
	font-size: var(--jsyk-text-sm);
	color: var(--jsyk-text-tertiary);
	margin-bottom: var(--jsyk-space-3);
	display: flex;
	align-items: center;
	gap: var(--jsyk-space-2);
	flex-wrap: wrap;
}

.jsyk-card__excerpt {
	font-size: var(--jsyk-text-base);
	color: var(--jsyk-text-secondary);
	line-height: var(--jsyk-leading-relaxed);
}

/* ==========================================================================
   7. COMPONENT: PILLS
   ========================================================================== */

.jsyk-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--jsyk-space-1) var(--jsyk-space-3);
	border-radius: var(--jsyk-radius-pill);
	font-size: var(--jsyk-text-xs);
	font-weight: var(--jsyk-weight-medium);
	letter-spacing: var(--jsyk-tracking-wide);
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color var(--jsyk-duration-fast) var(--jsyk-ease),
		color var(--jsyk-duration-fast) var(--jsyk-ease);
}

.jsyk-pill--topic {
	background-color: var(--jsyk-accent-subtle);
	color: var(--jsyk-accent);
}

.jsyk-pill--topic:hover {
	background-color: var(--jsyk-accent);
	color: var(--jsyk-accent-text);
	text-decoration: none;
}

.jsyk-pill--status {
	background-color: var(--jsyk-surface-alt);
	color: var(--jsyk-text-secondary);
	border: 1px solid var(--jsyk-border);
}

.jsyk-pill--region {
	background-color: var(--jsyk-surface-alt);
	color: var(--jsyk-text-secondary);
	text-transform: uppercase;
	font-size: var(--jsyk-text-xs);
	letter-spacing: var(--jsyk-tracking-wider);
}

/* ==========================================================================
   8. COMPONENT: BUTTONS
   ========================================================================== */

.jsyk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jsyk-space-2);
	padding: var(--jsyk-space-2) var(--jsyk-space-5);
	border: 1px solid transparent;
	border-radius: var(--jsyk-radius-pill);
	font-family: var(--jsyk-font-sans);
	font-size: var(--jsyk-text-sm);
	font-weight: var(--jsyk-weight-medium);
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color var(--jsyk-duration-fast) var(--jsyk-ease),
		color var(--jsyk-duration-fast) var(--jsyk-ease),
		border-color var(--jsyk-duration-fast) var(--jsyk-ease),
		box-shadow var(--jsyk-duration-fast) var(--jsyk-ease);
}

.jsyk-btn:hover {
	text-decoration: none;
}

/* Primary */
.jsyk-btn--primary {
	background-color: var(--jsyk-accent);
	color: var(--jsyk-accent-text);
}

.jsyk-btn--primary:hover {
	background-color: var(--jsyk-accent-hover);
	color: var(--jsyk-accent-text);
	box-shadow: var(--jsyk-shadow);
}

/* Secondary */
.jsyk-btn--secondary {
	background-color: var(--jsyk-surface);
	color: var(--jsyk-text);
	border-color: var(--jsyk-border-strong);
}

.jsyk-btn--secondary:hover {
	background-color: var(--jsyk-surface-alt);
	border-color: var(--jsyk-accent);
	color: var(--jsyk-accent);
}

/* Ghost */
.jsyk-btn--ghost {
	background-color: transparent;
	color: var(--jsyk-text-secondary);
}

.jsyk-btn--ghost:hover {
	background-color: var(--jsyk-surface-alt);
	color: var(--jsyk-text);
}

/* ==========================================================================
   9. COMPONENT: SURFACES & PANELS
   ========================================================================== */

.jsyk-panel {
	background-color: var(--jsyk-surface);
	border: 1px solid var(--jsyk-border);
	border-radius: var(--jsyk-radius-lg);
	padding: var(--jsyk-space-8);
	transition: background-color var(--jsyk-duration-slow) var(--jsyk-ease);
}

.jsyk-panel--subtle {
	background-color: var(--jsyk-surface-alt);
	border: none;
}

/* ==========================================================================
   10. COMPONENT: META LABELS
   ========================================================================== */

.jsyk-meta {
	display: flex;
	align-items: center;
	gap: var(--jsyk-space-2);
	flex-wrap: wrap;
	font-size: var(--jsyk-text-sm);
	color: var(--jsyk-text-tertiary);
}

.jsyk-meta__separator {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--jsyk-text-tertiary);
	flex-shrink: 0;
}

/* ==========================================================================
   11. COMPONENT: SEARCH BAR
   ========================================================================== */

.jsyk-search {
	position: relative;
	width: 100%;
	max-width: 560px;
}

.jsyk-search__input {
	width: 100%;
	padding: var(--jsyk-space-3) var(--jsyk-space-5);
	padding-left: var(--jsyk-space-10);
	background-color: var(--jsyk-surface);
	border: 1px solid var(--jsyk-border);
	border-radius: var(--jsyk-radius-pill);
	font-family: var(--jsyk-font-sans);
	font-size: var(--jsyk-text-base);
	color: var(--jsyk-text);
	box-shadow: var(--jsyk-shadow-sm);
	transition:
		border-color var(--jsyk-duration-fast) var(--jsyk-ease),
		box-shadow var(--jsyk-duration-fast) var(--jsyk-ease),
		background-color var(--jsyk-duration-slow) var(--jsyk-ease);
}

.jsyk-search__input::placeholder {
	color: var(--jsyk-text-tertiary);
}

.jsyk-search__input:focus {
	outline: none;
	border-color: var(--jsyk-accent);
	box-shadow: 0 0 0 3px var(--jsyk-accent-subtle);
}

.jsyk-search__icon {
	position: absolute;
	left: var(--jsyk-space-4);
	top: 50%;
	transform: translateY(-50%);
	color: var(--jsyk-text-tertiary);
	pointer-events: none;
}

/* ==========================================================================
   12. COMPONENT: ACCORDION
   ========================================================================== */

.jsyk-accordion {
	border: 1px solid var(--jsyk-border);
	border-radius: var(--jsyk-radius-md);
	overflow: hidden;
}

.jsyk-accordion__item + .jsyk-accordion__item {
	border-top: 1px solid var(--jsyk-border);
}

.jsyk-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--jsyk-space-4) var(--jsyk-space-5);
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--jsyk-font-sans);
	font-size: var(--jsyk-text-base);
	font-weight: var(--jsyk-weight-medium);
	color: var(--jsyk-text);
	text-align: left;
	transition: background-color var(--jsyk-duration-fast) var(--jsyk-ease);
}

.jsyk-accordion__trigger:hover {
	background-color: var(--jsyk-surface-alt);
}

.jsyk-accordion__icon {
	flex-shrink: 0;
	transition: transform var(--jsyk-duration) var(--jsyk-ease);
}

.jsyk-accordion__item[open] .jsyk-accordion__icon {
	transform: rotate(180deg);
}

.jsyk-accordion__content {
	padding: 0 var(--jsyk-space-5) var(--jsyk-space-5);
	color: var(--jsyk-text-secondary);
	line-height: var(--jsyk-leading-relaxed);
}

/* ==========================================================================
   13. COMPONENT: BREADCRUMBS
   ========================================================================== */

.jsyk-breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--jsyk-space-1);
	font-size: var(--jsyk-text-sm);
	color: var(--jsyk-text-tertiary);
	margin-bottom: var(--jsyk-space-6);
}

.jsyk-breadcrumbs a {
	color: var(--jsyk-text-tertiary);
}

.jsyk-breadcrumbs a:hover {
	color: var(--jsyk-accent);
}

.jsyk-breadcrumbs__separator {
	margin: 0 var(--jsyk-space-1);
	opacity: 0.5;
}

.jsyk-breadcrumbs__current {
	color: var(--jsyk-text-secondary);
	font-weight: var(--jsyk-weight-medium);
}

/* ==========================================================================
   14. LAYOUT HELPERS
   ========================================================================== */

.jsyk-container {
	width: 100%;
	max-width: var(--jsyk-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--jsyk-space-5);
	padding-right: var(--jsyk-space-5);
}

.jsyk-content-width {
	max-width: var(--jsyk-content-width);
}

.jsyk-wide-width {
	max-width: var(--jsyk-wide-width);
}

/* Archive grid */
.jsyk-grid {
	display: grid;
	gap: var(--jsyk-space-6);
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.jsyk-grid--2 {
	grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
}

/* Section spacing */
.jsyk-section {
	padding-top: var(--jsyk-space-16);
	padding-bottom: var(--jsyk-space-16);
}

.jsyk-section--sm {
	padding-top: var(--jsyk-space-10);
	padding-bottom: var(--jsyk-space-10);
}

/* ==========================================================================
   15. DARK MODE TOGGLE (styled by JS)
   ========================================================================== */

.jsyk-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--jsyk-border);
	border-radius: var(--jsyk-radius-pill);
	color: var(--jsyk-text-secondary);
	cursor: pointer;
	transition:
		background-color var(--jsyk-duration-fast) var(--jsyk-ease),
		color var(--jsyk-duration-fast) var(--jsyk-ease),
		border-color var(--jsyk-duration-fast) var(--jsyk-ease);
}

.jsyk-theme-toggle:hover {
	background-color: var(--jsyk-surface-alt);
	color: var(--jsyk-text);
	border-color: var(--jsyk-border-strong);
}

.jsyk-theme-toggle__icon--sun,
.jsyk-theme-toggle__icon--moon {
	width: 18px;
	height: 18px;
}

/* Show/hide correct icon based on theme */
[data-theme="dark"] .jsyk-theme-toggle__icon--moon,
.jsyk-theme-toggle__icon--sun {
	display: none;
}

[data-theme="dark"] .jsyk-theme-toggle__icon--sun,
.jsyk-theme-toggle__icon--moon {
	display: block;
}

/* System preference fallback icon visibility */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .jsyk-theme-toggle__icon--moon {
		display: none;
	}
	:root:not([data-theme="light"]) .jsyk-theme-toggle__icon--sun {
		display: block;
	}
}

/* ==========================================================================
   16. WORDPRESS / ASTRA OVERRIDES
   ========================================================================== */

/* Ensure Astra inherits our design tokens */
body,
.ast-container {
	font-family: var(--jsyk-font-sans);
	color: var(--jsyk-text);
}

/* Override Astra heading colors */
.entry-title,
.entry-title a,
.page-title {
	color: var(--jsyk-text);
}

.entry-title a:hover {
	color: var(--jsyk-accent);
}

/* Override Astra link colors */
.entry-content a {
	color: var(--jsyk-accent);
}

.entry-content a:hover {
	color: var(--jsyk-accent-hover);
}

/* Smooth transition for all surfaces */
.ast-container,
.site-content,
.ast-single-post,
.ast-archive-description,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
	background-color: var(--jsyk-surface);
	transition: background-color var(--jsyk-duration-slow) var(--jsyk-ease);
}

/* ==========================================================================
   17. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
	.jsyk-section {
		padding-top: var(--jsyk-space-10);
		padding-bottom: var(--jsyk-space-10);
	}

	.jsyk-card--editorial {
		padding: var(--jsyk-space-5);
	}

	.jsyk-panel {
		padding: var(--jsyk-space-5);
	}
}

@media (max-width: 480px) {
	.jsyk-container {
		padding-left: var(--jsyk-space-4);
		padding-right: var(--jsyk-space-4);
	}

	.jsyk-grid {
		gap: var(--jsyk-space-4);
	}
}