/**
 * JSYK Astra – Responsive Styles
 *
 * Breakpoint-specific overrides for mobile and tablet.
 * Adjusts typography, grids, tables, cards, search,
 * and touch targets for smaller screens.
 *
 * Breakpoints:
 *   - Mobile:  up to 47.99rem  (~768px)
 *   - Tablet:  48rem – 63.99rem (~768px – 1024px)
 *   - Desktop: 64rem+ (~1024px)
 *
 * @since 0.2.0
 */

/* ==========================================================================
   1. MOBILE (up to ~768px)
   ========================================================================== */

@media (max-width: 47.99rem) {

	/* --- Typography scale down --- */
	h1 { font-size: var(--jsyk-text-2xl); }
	h2 { font-size: var(--jsyk-text-xl);  }
	h3 { font-size: var(--jsyk-text-lg);  }

	.jsyk-prose {
		font-size: var(--jsyk-text-base);
	}

	.jsyk-prose h1 { font-size: var(--jsyk-text-2xl); }
	.jsyk-prose h2 { font-size: var(--jsyk-text-xl); }
	.jsyk-prose h3 { font-size: var(--jsyk-text-lg); }

	/* --- Containers --- */
	.jsyk-container,
	.jsyk-container--narrow,
	.jsyk-container--wide {
		padding-inline: var(--jsyk-space-4);
	}

	/* --- Sections reduce vertical spacing --- */
	.jsyk-main {
		padding-block: var(--jsyk-space-5);
	}

	.jsyk-section {
		padding-block: var(--jsyk-space-6);
	}

	/* --- Grids stack --- */
	.jsyk-grid,
	.jsyk-grid--2,
	.jsyk-grid--3 {
		grid-template-columns: 1fr;
	}

	/* --- Split stacks --- */
	.jsyk-split {
		flex-direction: column;
	}

	.jsyk-split > * {
		flex-basis: auto;
	}

	/* --- Article layout: single column --- */
	.jsyk-article-layout {
		grid-template-columns: 1fr;
		padding-inline: var(--jsyk-space-4);
	}

	/* --- Cards reduce padding --- */
	.jsyk-card__header {
		padding: var(--jsyk-space-4) var(--jsyk-space-4) var(--jsyk-space-2);
	}

	.jsyk-card__body {
		padding: var(--jsyk-space-2) var(--jsyk-space-4);
	}

	.jsyk-card__footer {
		padding: var(--jsyk-space-2) var(--jsyk-space-4) var(--jsyk-space-4);
	}

	/* --- Tables: horizontal scroll only inside wrapper --- */
	.jsyk-table-wrap {
		margin-inline: calc(-1 * var(--jsyk-space-4));
		border-radius: 0;
		border-inline: none;
	}

	.jsyk-table th,
	.jsyk-table td {
		padding: var(--jsyk-space-2) var(--jsyk-space-3);
		font-size: var(--jsyk-text-sm);
	}

	/* --- Search full-width --- */
	.jsyk-search {
		max-width: 100%;
	}

	/* --- Buttons: ensure touch targets --- */
	.jsyk-button {
		min-height: 2.75rem;
		padding-inline: var(--jsyk-space-4);
	}

	.jsyk-button--small {
		min-height: 2.25rem;
	}

	/* --- Notices/callouts reduce padding --- */
	.jsyk-notice {
		padding: var(--jsyk-space-3) var(--jsyk-space-4);
	}

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

	/* --- Pill wrapping --- */
	.jsyk-topic-list,
	.jsyk-cluster {
		gap: var(--jsyk-space-2);
	}

	/* --- Disclosure padding --- */
	.jsyk-disclosure__summary {
		padding: var(--jsyk-space-3);
	}

	.jsyk-disclosure__content {
		padding: var(--jsyk-space-3);
	}

	/* --- Theme toggle: compact on mobile --- */
	.jsyk-theme-toggle__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.jsyk-theme-toggle__label {
		display: none;
	}

	.jsyk-theme-toggle--floating {
		bottom: var(--jsyk-space-4);
	}

	.jsyk-theme-toggle--bottom-right {
		right: var(--jsyk-space-4);
	}

	.jsyk-theme-toggle--bottom-left {
		left: var(--jsyk-space-4);
	}
}

/* ==========================================================================
   2. TABLET (48rem – 63.99rem)
   ========================================================================== */

@media (min-width: 48rem) and (max-width: 63.99rem) {

	/* --- Grids: 2 columns max --- */
	.jsyk-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Article layout stays single column until wider --- */
	.jsyk-article-layout {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   3. DESKTOP ENHANCEMENTS (64rem+)
   ========================================================================== */

@media (min-width: 64rem) {

	/* --- Grids enforce columns at desktop --- */
	.jsyk-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.jsyk-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   4. PRINT
   ========================================================================== */

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.jsyk-skip-link,
	.jsyk-search,
	.jsyk-sidebar,
	.jsyk-theme-toggle,
	.jsyk-theme-toggle--floating {
		display: none;
	}

	.jsyk-card,
	.jsyk-notice,
	.jsyk-callout,
	.jsyk-disclosure {
		break-inside: avoid;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}
}