/* BridgeWP shared design control utilities */

.bridgewp-design {
	position: relative;
	box-sizing: border-box;
	z-index: var(--bridge-layer-base, 0);
}

.bridgewp-design__inner,
.bridgewp-design > .bridgewp-section-inner {
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

/* Content width */
.bridgewp-design--width-readable > .bridgewp-section-inner,
.bridgewp-design--width-readable .bridgewp-design__inner { max-width: var(--bridge-content-readable, 720px); }
.bridgewp-design--width-default > .bridgewp-section-inner,
.bridgewp-design--width-default .bridgewp-design__inner { max-width: var(--bridge-content-default, 1180px); }
.bridgewp-design--width-wide > .bridgewp-section-inner,
.bridgewp-design--width-wide .bridgewp-design__inner { max-width: var(--bridge-content-wide, 1280px); }
.bridgewp-design--width-full > .bridgewp-section-inner,
.bridgewp-design--width-full .bridgewp-design__inner { max-width: var(--bridge-content-full, 100%); }

/* Alignment */
.bridgewp-design--align-left { text-align: left; }
.bridgewp-design--align-center { text-align: center; }
.bridgewp-design--align-right { text-align: right; }

.bridgewp-design--valign-top { align-items: flex-start; }
.bridgewp-design--valign-middle { align-items: center; }
.bridgewp-design--valign-bottom { align-items: flex-end; }
.bridgewp-design--valign-stretch { align-items: stretch; }

/* Height */
.bridgewp-design--height-auto { min-height: auto; }
.bridgewp-design--height-small { min-height: var(--bridge-section-height-small, 20rem); }
.bridgewp-design--height-medium { min-height: var(--bridge-section-height-medium, 28rem); }
.bridgewp-design--height-large { min-height: var(--bridge-section-height-large, 36rem); }
.bridgewp-design--height-viewport { min-height: var(--bridge-section-height-viewport, 100svh); }
.bridgewp-design--height-mode-fixed.bridgewp-design--height-small { height: var(--bridge-section-height-small, 20rem); }
.bridgewp-design--height-mode-fixed.bridgewp-design--height-medium { height: var(--bridge-section-height-medium, 28rem); }
.bridgewp-design--height-mode-fixed.bridgewp-design--height-large { height: var(--bridge-section-height-large, 36rem); }
.bridgewp-design--height-mode-fixed.bridgewp-design--height-viewport { height: var(--bridge-section-height-viewport, 100svh); }

/* Padding */
.bridgewp-design--pad-block-none { padding-block: 0; }
.bridgewp-design--pad-block-xs { padding-block: var(--bridge-space-xs); }
.bridgewp-design--pad-block-sm { padding-block: var(--bridge-space-sm); }
.bridgewp-design--pad-block-md { padding-block: var(--bridge-space-md); }
.bridgewp-design--pad-block-lg { padding-block: var(--bridge-space-lg); }
.bridgewp-design--pad-block-xl { padding-block: var(--bridge-space-xl); }
.bridgewp-design--pad-block-2xl { padding-block: var(--bridge-space-2xl); }
.bridgewp-design--pad-block-3xl { padding-block: var(--bridge-space-3xl); }
.bridgewp-design--pad-block-section {
	padding-block: var(--bridge-space-section-mobile, 4rem);
}
@media (min-width: 768px) {
	.bridgewp-design--pad-block-section {
		padding-block: var(--bridge-space-section-desktop, 7rem);
	}
}

.bridgewp-design--pad-inline-none { padding-inline: 0; }
.bridgewp-design--pad-inline-xs { padding-inline: var(--bridge-space-xs); }
.bridgewp-design--pad-inline-sm { padding-inline: var(--bridge-space-sm); }
.bridgewp-design--pad-inline-md { padding-inline: var(--bridge-space-md); }
.bridgewp-design--pad-inline-lg { padding-inline: var(--bridge-space-lg); }
.bridgewp-design--pad-inline-xl { padding-inline: var(--bridge-space-xl); }
.bridgewp-design--pad-inline-2xl { padding-inline: var(--bridge-space-2xl); }
.bridgewp-design--pad-inline-3xl { padding-inline: var(--bridge-space-3xl); }
.bridgewp-design--pad-inline-section { padding-inline: var(--bridge-space-lg); }

/* Gap / direction / columns */
.bridgewp-design--gap-none { --bridge-gap: 0; }
.bridgewp-design--gap-xs { --bridge-gap: var(--bridge-space-xs); }
.bridgewp-design--gap-sm { --bridge-gap: var(--bridge-space-sm); }
.bridgewp-design--gap-md { --bridge-gap: var(--bridge-space-md); }
.bridgewp-design--gap-lg { --bridge-gap: var(--bridge-space-lg); }
.bridgewp-design--gap-xl { --bridge-gap: var(--bridge-space-xl); }
.bridgewp-design--gap-2xl { --bridge-gap: var(--bridge-space-2xl); }
.bridgewp-design--gap-3xl { --bridge-gap: var(--bridge-space-3xl); }

.bridgewp-design--dir-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--bridge-gap, 1rem); }
.bridgewp-design--dir-column { display: flex; flex-direction: column; gap: var(--bridge-gap, 1rem); }

.bridgewp-design--cols-1,
.bridgewp-design--cols-2,
.bridgewp-design--cols-3,
.bridgewp-design--cols-4,
.bridgewp-design--cols-5,
.bridgewp-design--cols-6 {
	display: grid;
	gap: var(--bridge-gap, 1rem);
}
.bridgewp-design--cols-1 { grid-template-columns: 1fr; }
.bridgewp-design--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bridgewp-design--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bridgewp-design--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bridgewp-design--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bridgewp-design--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 767px) {
	.bridgewp-design--cols-2,
	.bridgewp-design--cols-3,
	.bridgewp-design--cols-4,
	.bridgewp-design--cols-5,
	.bridgewp-design--cols-6 {
		grid-template-columns: 1fr;
	}
}

/* Border */
.bridgewp-design--border-none { border-width: 0; }
.bridgewp-design--border-thin { border-width: var(--bridge-border-width-thin, 1px); border-color: var(--bridge-color-border-default); }
.bridgewp-design--border-medium { border-width: var(--bridge-border-width-medium, 2px); border-color: var(--bridge-color-border-default); }
.bridgewp-design--border-thick { border-width: var(--bridge-border-width-thick, 4px); border-color: var(--bridge-color-border-default); }
.bridgewp-design--border-style-solid { border-style: solid; }
.bridgewp-design--border-style-dashed { border-style: dashed; }
.bridgewp-design--border-style-dotted { border-style: dotted; }

/* Radius */
.bridgewp-design--radius-none { border-radius: var(--bridge-radius-none, 0); }
.bridgewp-design--radius-small { border-radius: var(--bridge-radius-small); }
.bridgewp-design--radius-medium { border-radius: var(--bridge-radius-medium); }
.bridgewp-design--radius-large { border-radius: var(--bridge-radius-large); }
.bridgewp-design--radius-pill { border-radius: var(--bridge-radius-pill); }

/* Shadow / opacity / overflow / layer */
.bridgewp-design--shadow-none { box-shadow: none; }
.bridgewp-design--shadow-subtle { box-shadow: var(--bridge-shadow-subtle); }
.bridgewp-design--shadow-medium { box-shadow: var(--bridge-shadow-medium); }
.bridgewp-design--shadow-strong { box-shadow: var(--bridge-shadow-strong); }
.bridgewp-design--shadow-floating { box-shadow: var(--bridge-shadow-floating); }

.bridgewp-design--opacity-muted { opacity: var(--bridge-opacity-muted); }
.bridgewp-design--opacity-soft { opacity: var(--bridge-opacity-soft); }
.bridgewp-design--opacity-solid { opacity: var(--bridge-opacity-solid); }

.bridgewp-design--overflow-visible { overflow: visible; }
.bridgewp-design--overflow-hidden { overflow: hidden; }
.bridgewp-design--overflow-auto { overflow: auto; }

.bridgewp-design--layer-base { z-index: var(--bridge-layer-base, 0); }
.bridgewp-design--layer-raised { z-index: var(--bridge-layer-raised, 10); }
.bridgewp-design--layer-sticky { z-index: var(--bridge-layer-sticky, 100); }
.bridgewp-design--layer-overlay { z-index: var(--bridge-layer-overlay, 200); }
.bridgewp-design--layer-modal { z-index: var(--bridge-layer-modal, 300); }

.bridgewp-design--sticky { position: sticky; top: 0; }
.bridgewp-design--hidden { display: none !important; }

/* Responsive visibility helpers via data attribute + JS/CSS cascade */
@media (max-width: 767px) {
	[data-bridgewp-hide~="mobile"] { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	[data-bridgewp-hide~="tablet"] { display: none !important; }
}
@media (min-width: 1024px) {
	[data-bridgewp-hide~="desktop"] { display: none !important; }
}

@media (max-width: 767px) {
	[data-bridgewp-mobile-order] { order: var(--bridge-mobile-order, 0); }
}