/**
 * GetPress Design System v2.0 - Layout
 * =====================================
 * Grid system, flexbox utilities, and spacing.
 */

/* ===========================================
   CONTAINER
   =========================================== */

.gp-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gp-space-4);
  padding-right: var(--gp-space-4);
}

@media (min-width: 640px) {
  .gp-container { max-width: 640px; }
}

@media (min-width: 768px) {
  .gp-container { max-width: 768px; }
}

@media (min-width: 1024px) {
  .gp-container { max-width: 1024px; }
}

@media (min-width: 1280px) {
  .gp-container { max-width: 1280px; }
}

.gp-container-fluid {
  width: 100%;
  padding-left: var(--gp-space-4);
  padding-right: var(--gp-space-4);
}

/* ===========================================
   CSS GRID
   =========================================== */

.gp-grid {
  display: grid;
  gap: var(--gp-space-6);
}

.gp-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.gp-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gp-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gp-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gp-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.gp-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.gp-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Responsive Grid */
@media (min-width: 640px) {
  .gp-sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .gp-sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .gp-sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .gp-sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .gp-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .gp-md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .gp-md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .gp-md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1024px) {
  .gp-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .gp-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .gp-lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .gp-lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Column Spans */
.gp-col-span-1 { grid-column: span 1; }
.gp-col-span-2 { grid-column: span 2; }
.gp-col-span-3 { grid-column: span 3; }
.gp-col-span-4 { grid-column: span 4; }
.gp-col-span-6 { grid-column: span 6; }
.gp-col-span-12 { grid-column: span 12; }
.gp-col-span-full { grid-column: 1 / -1; }

/* Gap Utilities */
.gp-gap-0 { gap: 0; }
.gp-gap-1 { gap: var(--gp-space-1); }
.gp-gap-2 { gap: var(--gp-space-2); }
.gp-gap-3 { gap: var(--gp-space-3); }
.gp-gap-4 { gap: var(--gp-space-4); }
.gp-gap-5 { gap: var(--gp-space-5); }
.gp-gap-6 { gap: var(--gp-space-6); }
.gp-gap-8 { gap: var(--gp-space-8); }

/* ===========================================
   FLEXBOX
   =========================================== */

.gp-flex { display: flex; }
.gp-flex-inline { display: inline-flex; }
.gp-flex-row { flex-direction: row; }
.gp-flex-col { flex-direction: column; }
.gp-flex-row-reverse { flex-direction: row-reverse; }
.gp-flex-col-reverse { flex-direction: column-reverse; }
.gp-flex-wrap { flex-wrap: wrap; }
.gp-flex-nowrap { flex-wrap: nowrap; }

/* Justify Content */
.gp-justify-start { justify-content: flex-start; }
.gp-justify-end { justify-content: flex-end; }
.gp-justify-center { justify-content: center; }
.gp-justify-between { justify-content: space-between; }
.gp-justify-around { justify-content: space-around; }
.gp-justify-evenly { justify-content: space-evenly; }

/* Align Items */
.gp-items-start { align-items: flex-start; }
.gp-items-end { align-items: flex-end; }
.gp-items-center { align-items: center; }
.gp-items-baseline { align-items: baseline; }
.gp-items-stretch { align-items: stretch; }

/* Align Self */
.gp-self-auto { align-self: auto; }
.gp-self-start { align-self: flex-start; }
.gp-self-end { align-self: flex-end; }
.gp-self-center { align-self: center; }
.gp-self-stretch { align-self: stretch; }

/* Flex Grow/Shrink */
.gp-flex-1 { flex: 1 1 0%; }
.gp-flex-auto { flex: 1 1 auto; }
.gp-flex-initial { flex: 0 1 auto; }
.gp-flex-none { flex: none; }
.gp-grow { flex-grow: 1; }
.gp-grow-0 { flex-grow: 0; }
.gp-shrink { flex-shrink: 1; }
.gp-shrink-0 { flex-shrink: 0; }

/* ===========================================
   SPACING UTILITIES
   =========================================== */

/* Margin */
.gp-m-0 { margin: 0; }
.gp-m-1 { margin: var(--gp-space-1); }
.gp-m-2 { margin: var(--gp-space-2); }
.gp-m-3 { margin: var(--gp-space-3); }
.gp-m-4 { margin: var(--gp-space-4); }
.gp-m-5 { margin: var(--gp-space-5); }
.gp-m-6 { margin: var(--gp-space-6); }
.gp-m-8 { margin: var(--gp-space-8); }
.gp-m-auto { margin: auto; }

/* Margin X */
.gp-mx-0 { margin-left: 0; margin-right: 0; }
.gp-mx-1 { margin-left: var(--gp-space-1); margin-right: var(--gp-space-1); }
.gp-mx-2 { margin-left: var(--gp-space-2); margin-right: var(--gp-space-2); }
.gp-mx-3 { margin-left: var(--gp-space-3); margin-right: var(--gp-space-3); }
.gp-mx-4 { margin-left: var(--gp-space-4); margin-right: var(--gp-space-4); }
.gp-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y */
.gp-my-0 { margin-top: 0; margin-bottom: 0; }
.gp-my-1 { margin-top: var(--gp-space-1); margin-bottom: var(--gp-space-1); }
.gp-my-2 { margin-top: var(--gp-space-2); margin-bottom: var(--gp-space-2); }
.gp-my-3 { margin-top: var(--gp-space-3); margin-bottom: var(--gp-space-3); }
.gp-my-4 { margin-top: var(--gp-space-4); margin-bottom: var(--gp-space-4); }
.gp-my-6 { margin-top: var(--gp-space-6); margin-bottom: var(--gp-space-6); }
.gp-my-8 { margin-top: var(--gp-space-8); margin-bottom: var(--gp-space-8); }

/* Margin Top */
.gp-mt-0 { margin-top: 0; }
.gp-mt-1 { margin-top: var(--gp-space-1); }
.gp-mt-2 { margin-top: var(--gp-space-2); }
.gp-mt-3 { margin-top: var(--gp-space-3); }
.gp-mt-4 { margin-top: var(--gp-space-4); }
.gp-mt-5 { margin-top: var(--gp-space-5); }
.gp-mt-6 { margin-top: var(--gp-space-6); }
.gp-mt-8 { margin-top: var(--gp-space-8); }

/* Margin Bottom */
.gp-mb-0 { margin-bottom: 0; }
.gp-mb-1 { margin-bottom: var(--gp-space-1); }
.gp-mb-2 { margin-bottom: var(--gp-space-2); }
.gp-mb-3 { margin-bottom: var(--gp-space-3); }
.gp-mb-4 { margin-bottom: var(--gp-space-4); }
.gp-mb-5 { margin-bottom: var(--gp-space-5); }
.gp-mb-6 { margin-bottom: var(--gp-space-6); }
.gp-mb-8 { margin-bottom: var(--gp-space-8); }

/* Margin Left */
.gp-ml-0 { margin-left: 0; }
.gp-ml-1 { margin-left: var(--gp-space-1); }
.gp-ml-2 { margin-left: var(--gp-space-2); }
.gp-ml-3 { margin-left: var(--gp-space-3); }
.gp-ml-4 { margin-left: var(--gp-space-4); }
.gp-ml-auto { margin-left: auto; }

/* Margin Right */
.gp-mr-0 { margin-right: 0; }
.gp-mr-1 { margin-right: var(--gp-space-1); }
.gp-mr-2 { margin-right: var(--gp-space-2); }
.gp-mr-3 { margin-right: var(--gp-space-3); }
.gp-mr-4 { margin-right: var(--gp-space-4); }
.gp-mr-auto { margin-right: auto; }

/* Padding */
.gp-p-0 { padding: 0; }
.gp-p-1 { padding: var(--gp-space-1); }
.gp-p-2 { padding: var(--gp-space-2); }
.gp-p-3 { padding: var(--gp-space-3); }
.gp-p-4 { padding: var(--gp-space-4); }
.gp-p-5 { padding: var(--gp-space-5); }
.gp-p-6 { padding: var(--gp-space-6); }
.gp-p-8 { padding: var(--gp-space-8); }

/* Padding X */
.gp-px-0 { padding-left: 0; padding-right: 0; }
.gp-px-1 { padding-left: var(--gp-space-1); padding-right: var(--gp-space-1); }
.gp-px-2 { padding-left: var(--gp-space-2); padding-right: var(--gp-space-2); }
.gp-px-3 { padding-left: var(--gp-space-3); padding-right: var(--gp-space-3); }
.gp-px-4 { padding-left: var(--gp-space-4); padding-right: var(--gp-space-4); }
.gp-px-5 { padding-left: var(--gp-space-5); padding-right: var(--gp-space-5); }
.gp-px-6 { padding-left: var(--gp-space-6); padding-right: var(--gp-space-6); }
.gp-px-8 { padding-left: var(--gp-space-8); padding-right: var(--gp-space-8); }

/* Padding Y */
.gp-py-0 { padding-top: 0; padding-bottom: 0; }
.gp-py-1 { padding-top: var(--gp-space-1); padding-bottom: var(--gp-space-1); }
.gp-py-2 { padding-top: var(--gp-space-2); padding-bottom: var(--gp-space-2); }
.gp-py-3 { padding-top: var(--gp-space-3); padding-bottom: var(--gp-space-3); }
.gp-py-4 { padding-top: var(--gp-space-4); padding-bottom: var(--gp-space-4); }
.gp-py-5 { padding-top: var(--gp-space-5); padding-bottom: var(--gp-space-5); }
.gp-py-6 { padding-top: var(--gp-space-6); padding-bottom: var(--gp-space-6); }
.gp-py-8 { padding-top: var(--gp-space-8); padding-bottom: var(--gp-space-8); }

/* Padding Top */
.gp-pt-0 { padding-top: 0; }
.gp-pt-1 { padding-top: var(--gp-space-1); }
.gp-pt-2 { padding-top: var(--gp-space-2); }
.gp-pt-3 { padding-top: var(--gp-space-3); }
.gp-pt-4 { padding-top: var(--gp-space-4); }
.gp-pt-5 { padding-top: var(--gp-space-5); }
.gp-pt-6 { padding-top: var(--gp-space-6); }

/* Padding Bottom */
.gp-pb-0 { padding-bottom: 0; }
.gp-pb-1 { padding-bottom: var(--gp-space-1); }
.gp-pb-2 { padding-bottom: var(--gp-space-2); }
.gp-pb-3 { padding-bottom: var(--gp-space-3); }
.gp-pb-4 { padding-bottom: var(--gp-space-4); }
.gp-pb-5 { padding-bottom: var(--gp-space-5); }
.gp-pb-6 { padding-bottom: var(--gp-space-6); }

/* Padding Left */
.gp-pl-0 { padding-left: 0; }
.gp-pl-1 { padding-left: var(--gp-space-1); }
.gp-pl-2 { padding-left: var(--gp-space-2); }
.gp-pl-3 { padding-left: var(--gp-space-3); }
.gp-pl-4 { padding-left: var(--gp-space-4); }

/* Padding Right */
.gp-pr-0 { padding-right: 0; }
.gp-pr-1 { padding-right: var(--gp-space-1); }
.gp-pr-2 { padding-right: var(--gp-space-2); }
.gp-pr-3 { padding-right: var(--gp-space-3); }
.gp-pr-4 { padding-right: var(--gp-space-4); }

/* ===========================================
   WIDTH & HEIGHT
   =========================================== */

.gp-w-full { width: 100%; }
.gp-w-screen { width: 100vw; }
.gp-w-auto { width: auto; }
.gp-w-1\/2 { width: 50%; }
.gp-w-1\/3 { width: 33.333333%; }
.gp-w-2\/3 { width: 66.666667%; }
.gp-w-1\/4 { width: 25%; }
.gp-w-3\/4 { width: 75%; }

.gp-min-w-0 { min-width: 0; }
.gp-min-w-full { min-width: 100%; }
.gp-max-w-sm { max-width: 24rem; }
.gp-max-w-md { max-width: 28rem; }
.gp-max-w-lg { max-width: 32rem; }
.gp-max-w-xl { max-width: 36rem; }
.gp-max-w-2xl { max-width: 42rem; }
.gp-max-w-3xl { max-width: 48rem; }
.gp-max-w-4xl { max-width: 56rem; }
.gp-max-w-full { max-width: 100%; }

.gp-h-full { height: 100%; }
.gp-h-screen { height: 100vh; }
.gp-h-auto { height: auto; }
.gp-min-h-screen { min-height: 100vh; }

/* ===========================================
   POSITIONING
   =========================================== */

.gp-relative { position: relative; }
.gp-absolute { position: absolute; }
.gp-fixed { position: fixed; }
.gp-sticky { position: sticky; }
.gp-static { position: static; }

.gp-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.gp-top-0 { top: 0; }
.gp-right-0 { right: 0; }
.gp-bottom-0 { bottom: 0; }
.gp-left-0 { left: 0; }

/* ===========================================
   OVERFLOW
   =========================================== */

.gp-overflow-auto { overflow: auto; }
.gp-overflow-hidden { overflow: hidden; }
.gp-overflow-visible { overflow: visible; }
.gp-overflow-scroll { overflow: scroll; }
.gp-overflow-x-auto { overflow-x: auto; }
.gp-overflow-y-auto { overflow-y: auto; }
.gp-overflow-x-hidden { overflow-x: hidden; }
.gp-overflow-y-hidden { overflow-y: hidden; }

/* ===========================================
   SECTION SPACING
   =========================================== */

.gp-section {
  padding-top: var(--gp-space-16);
  padding-bottom: var(--gp-space-16);
}

.gp-section-sm {
  padding-top: var(--gp-space-8);
  padding-bottom: var(--gp-space-8);
}

.gp-section-lg {
  padding-top: var(--gp-space-20);
  padding-bottom: var(--gp-space-20);
}

/* ===========================================
   RESPONSIVE DISPLAY
   =========================================== */

.gp-hidden { display: none; }
.gp-block { display: block; }
.gp-inline { display: inline; }
.gp-inline-block { display: inline-block; }

@media (min-width: 640px) {
  .gp-sm\:hidden { display: none; }
  .gp-sm\:block { display: block; }
  .gp-sm\:flex { display: flex; }
}

@media (min-width: 768px) {
  .gp-md\:hidden { display: none; }
  .gp-md\:block { display: block; }
  .gp-md\:flex { display: flex; }
}

@media (min-width: 1024px) {
  .gp-lg\:hidden { display: none; }
  .gp-lg\:block { display: block; }
  .gp-lg\:flex { display: flex; }
}

/* ===========================================
   DIVIDERS
   =========================================== */

.gp-divider {
  height: 0;
  margin: var(--gp-space-6) 0;
  border: 0;
  border-top: 1px solid var(--gp-border-light);
}

.gp-divider-vertical {
  width: 0;
  height: 100%;
  margin: 0 var(--gp-space-4);
  border: 0;
  border-left: 1px solid var(--gp-border-light);
}