/* =============================================================
   Giant Styling — Utility Classes
   Apply these to any Gutenberg block via the "Additional CSS
   class(es)" field in the block's Advanced settings panel.
   Multiple classes can be used together, separated by a space.

   Breakpoints:
     Mobile  : ≤ 767px
     Tablet  : 768px – 1024px
     Desktop : ≥ 1025px
   ============================================================= */


/* ── Alignment ──────────────────────────────────────────────── */

.gs-align-left {
	margin-left:  0 !important;
	margin-right: auto !important;
}

.gs-align-center {
	margin-left:  auto !important;
	margin-right: auto !important;
}

.gs-align-right {
	margin-left:  auto !important;
	margin-right: 0 !important;
}

.gs-text-left   { text-align: left   !important; }
.gs-text-center { text-align: center !important; }
.gs-text-right  { text-align: right  !important; }


/* ── Max Width ──────────────────────────────────────────────── */

.gs-max-w-400  { max-width: 400px  !important; width: 100%; margin-left: auto; margin-right: auto; }
.gs-max-w-600  { max-width: 600px  !important; width: 100%; margin-left: auto; margin-right: auto; }
.gs-max-w-800  { max-width: 800px  !important; width: 100%; margin-left: auto; margin-right: auto; }
.gs-max-w-1000 { max-width: 1000px !important; width: 100%; margin-left: auto; margin-right: auto; }
.gs-max-w-1200 { max-width: 1200px !important; width: 100%; margin-left: auto; margin-right: auto; }


/* ── Width ──────────────────────────────────────────────────── */

.gs-w-25  { width: 25%      !important; }
.gs-w-33  { width: 33.333%  !important; }
.gs-w-50  { width: 50%      !important; }
.gs-w-66  { width: 66.666%  !important; }
.gs-w-75  { width: 75%      !important; }
.gs-w-100 { width: 100%     !important; }


/* ── Height ─────────────────────────────────────────────────── */

.gs-min-h-100    { min-height: 100px  !important; }
.gs-min-h-200    { min-height: 200px  !important; }
.gs-min-h-300    { min-height: 300px  !important; }
.gs-min-h-400    { min-height: 400px  !important; }
.gs-min-h-500    { min-height: 500px  !important; }
.gs-min-h-screen { min-height: 100vh  !important; }


/* ── Padding ────────────────────────────────────────────────── */

.gs-pad-none { padding: 0     !important; }
.gs-pad-xs   { padding: 8px   !important; }
.gs-pad-sm   { padding: 16px  !important; }
.gs-pad-md   { padding: 32px  !important; }
.gs-pad-lg   { padding: 56px  !important; }
.gs-pad-xl   { padding: 80px  !important; }


/* ── Margin ─────────────────────────────────────────────────── */

.gs-mar-none { margin: 0     !important; }
.gs-mar-xs   { margin: 8px   !important; }
.gs-mar-sm   { margin: 16px  !important; }
.gs-mar-md   { margin: 32px  !important; }
.gs-mar-lg   { margin: 56px  !important; }
.gs-mar-xl   { margin: 80px  !important; }


/* ── Visibility ─────────────────────────────────────────────── */

@media ( max-width: 767px ) {
	.gs-hide-mobile       { display: none !important; }
	.gs-show-tablet-only  { display: none !important; }
	.gs-show-desktop-only { display: none !important; }
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.gs-hide-tablet       { display: none !important; }
	.gs-show-mobile-only  { display: none !important; }
	.gs-show-desktop-only { display: none !important; }
}

@media ( min-width: 1025px ) {
	.gs-hide-desktop      { display: none !important; }
	.gs-show-mobile-only  { display: none !important; }
	.gs-show-tablet-only  { display: none !important; }
}