/**
 * Suntyp Block — responsive CSS variables.
 * Tablet: max-width 781px. Mobile: max-width 480px.
 * Inheritance: empty breakpoint → wider breakpoint.
 *
 * @package Suntyp_Block
 */

[data-suntyp-r] {
	box-sizing: border-box;
}

[data-suntyp-r] {
	padding-top: var(--sr-pt-d, revert-layer);
	padding-right: var(--sr-pr-d, revert-layer);
	padding-bottom: var(--sr-pb-d, revert-layer);
	padding-left: var(--sr-pl-d, revert-layer);
	margin-top: var(--sr-mt-d, revert-layer);
	margin-right: var(--sr-mr-d, revert-layer);
	margin-bottom: var(--sr-mb-d, revert-layer);
	margin-left: var(--sr-ml-d, revert-layer);
	gap: var(--sr-gap-d, revert-layer);
	max-inline-size: var(--sr-cw-d, revert-layer);
	border-width: var(--sr-bdw-d, revert-layer);
	border-radius: var(--sr-bdr-d, revert-layer);
}

.suntyp-r-bdw[data-suntyp-r] {
	border-style: solid;
	border-color: var(--wp--preset--color--border, #e2e8f0);
}

@media (max-width: 781px) {
	[data-suntyp-r] {
		padding-top: var(--sr-pt-t, var(--sr-pt-d, revert-layer));
		padding-right: var(--sr-pr-t, var(--sr-pr-d, revert-layer));
		padding-bottom: var(--sr-pb-t, var(--sr-pb-d, revert-layer));
		padding-left: var(--sr-pl-t, var(--sr-pl-d, revert-layer));
		margin-top: var(--sr-mt-t, var(--sr-mt-d, revert-layer));
		margin-right: var(--sr-mr-t, var(--sr-mr-d, revert-layer));
		margin-bottom: var(--sr-mb-t, var(--sr-mb-d, revert-layer));
		margin-left: var(--sr-ml-t, var(--sr-ml-d, revert-layer));
		gap: var(--sr-gap-t, var(--sr-gap-d, revert-layer));
		max-inline-size: var(--sr-cw-t, var(--sr-cw-d, revert-layer));
		border-width: var(--sr-bdw-t, var(--sr-bdw-d, revert-layer));
		border-radius: var(--sr-bdr-t, var(--sr-bdr-d, revert-layer));
	}
}

@media (max-width: 480px) {
	[data-suntyp-r] {
		padding-top: var(--sr-pt-m, var(--sr-pt-t, var(--sr-pt-d, revert-layer)));
		padding-right: var(--sr-pr-m, var(--sr-pr-t, var(--sr-pr-d, revert-layer)));
		padding-bottom: var(--sr-pb-m, var(--sr-pb-t, var(--sr-pb-d, revert-layer)));
		padding-left: var(--sr-pl-m, var(--sr-pl-t, var(--sr-pl-d, revert-layer)));
		margin-top: var(--sr-mt-m, var(--sr-mt-t, var(--sr-mt-d, revert-layer)));
		margin-right: var(--sr-mr-m, var(--sr-mr-t, var(--sr-mr-d, revert-layer)));
		margin-bottom: var(--sr-mb-m, var(--sr-mb-t, var(--sr-mb-d, revert-layer)));
		margin-left: var(--sr-ml-m, var(--sr-ml-t, var(--sr-ml-d, revert-layer)));
		gap: var(--sr-gap-m, var(--sr-gap-t, var(--sr-gap-d, revert-layer)));
		max-inline-size: var(--sr-cw-m, var(--sr-cw-t, var(--sr-cw-d, revert-layer)));
		border-width: var(--sr-bdw-m, var(--sr-bdw-t, var(--sr-bdw-d, revert-layer)));
		border-radius: var(--sr-bdr-m, var(--sr-bdr-t, var(--sr-bdr-d, revert-layer)));
	}
}