/* Containers */
.sp-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sp-container-sm {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sp-container-lg {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sp-container-fluid {
  width: 100%;
  padding: 0 1rem;
}

/* Row and columns */
.sp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sp-row.sp-g-2 { gap: 0.5rem; }
.sp-row.sp-g-3 { gap: 1rem; }

.sp-col-4 { flex: 0 0 calc(33.333% - 0.667rem); }
.sp-col-6 { flex: 0 0 calc(50% - 0.5rem); }
.sp-col-8 { flex: 0 0 calc(66.666% - 0.333rem); }
.sp-col-12 { flex: 0 0 100%; }
.sp-col-auto { flex: 0 0 auto; }

/* Responsive columns */
@media (min-width: 769px) {
  .sp-col-md-3 { flex: 0 0 calc(25% - 0.75rem); }
  .sp-col-md-4 { flex: 0 0 calc(33.333% - 0.667rem); }
  .sp-col-md-6 { flex: 0 0 calc(50% - 0.5rem); }
}

@media (min-width: 1024px) {
  .sp-col-lg-4 { flex: 0 0 calc(33.333% - 0.667rem); }
  .sp-col-lg-8 { flex: 0 0 calc(66.666% - 0.333rem); }
}

/* Flex utilities */
.sp-flex { display: flex; }
.sp-flex-column { flex-direction: column; }
.sp-flex-wrap { flex-wrap: wrap; }
.sp-flex-grow { flex-grow: 1; }
.sp-flex-shrink-0 { flex-shrink: 0; }
.sp-flex-fill { flex: 1 1 auto; }

.sp-items-center { align-items: center; }
.sp-items-start { align-items: flex-start; }

.sp-justify-between { justify-content: space-between; }
.sp-justify-center { justify-content: center; }
.sp-justify-end { justify-content: flex-end; }

.sp-gap-1 { gap: 0.25rem; }
.sp-gap-2 { gap: 0.5rem; }
.sp-gap-3 { gap: 1rem; }

.sp-grid { display: grid; }

/* Main content area — semantic wrapper. Owns navbar clearance globally
   so every page using the base.html layout starts below the fixed
   navbar at scroll=0. Per-template padding-top rules that used to
   handle this are being removed as they're found so nothing
   double-pads. */
.sp-main {
    padding-top: calc(60px + env(safe-area-inset-top, 0px) + 1rem);
}
@media (min-width: 769px) {
    .sp-main {
        padding-top: calc(90px + env(safe-area-inset-top, 0px) + 1rem);
    }
}