/* ============================================================
   RoboSpati — Layout / container / grids
   ============================================================ */

.container,
.container-lg,
.container-xl,
.container-xxl {
    max-width: var(--container);
}

.container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* ---- Section shell ---- */
.section {
    padding: var(--section-y) 0;
    position: relative;
}

.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }

/* ---- Background helpers ---- */
.section-gray { background-color: var(--gray); }
.section-blue-soft { background-color: #F1F8FE; }
.section-white { background-color: var(--white); }

/* ---- Dark section (premium navy) ---- */
.section-dark {
    position: relative;
    background-color: var(--dark);
    background-image: var(--gradient-dark);
    color: rgba(255, 255, 255, .92);
    overflow: hidden;
}
.section-dark .section-tag { color: #6CC3FF; }
.section-dark .section-title { color: #fff; }
.section-dark .section-sub { color: rgba(255, 255, 255, .78); }

.section-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    pointer-events: none;
}
.section-dark > .container { position: relative; z-index: 1; }

/* ---- Two-column helpers ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

@media (max-width: 991.98px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---- Divider ---- */
.divider {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 0;
}

/* ---- Sticky sidebar ---- */
.sticky-sidebar { position: sticky; top: 120px; }

@media (max-width: 991.98px) {
    .sticky-sidebar { position: static; }
}