/* ==========================================================================
   ARC GAMES — Layout
   Mobile First
   ========================================================================== */


/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.arc-container {
    width: min(
        calc(100% - (var(--arc-space-md) * 2)),
        var(--arc-container)
    );

    margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Site structure
   -------------------------------------------------------------------------- */

body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* Main ocupa el espacio disponible y empuja el Footer hacia abajo */
.site-main {
    flex: 1 0 auto;
    min-height: 0;
}


/* Footer no agrega espacio externo */
.site-footer {
    width: 100%;
    margin: 0;
    padding: 0;

    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.arc-section {
    width: 100%;
    padding-block: var(--arc-space-xl);
}

.arc-section-sm {
    padding-block: var(--arc-space-lg);
}

.arc-section-lg {
    padding-block: var(--arc-space-2xl);
}


/* --------------------------------------------------------------------------
   Generic grids
   -------------------------------------------------------------------------- */

.arc-grid {
    display: grid;
    gap: var(--arc-space-lg);
}

.arc-grid-2,
.arc-grid-3,
.arc-grid-4 {
    grid-template-columns: 1fr;
}


/* --------------------------------------------------------------------------
   Flex utilities
   -------------------------------------------------------------------------- */

.arc-flex {
    display: flex;
}

.arc-flex-wrap {
    flex-wrap: wrap;
}

.arc-items-center {
    align-items: center;
}

.arc-justify-between {
    justify-content: space-between;
}

.arc-gap-sm {
    gap: var(--arc-space-sm);
}

.arc-gap-md {
    gap: var(--arc-space-md);
}

.arc-gap-lg {
    gap: var(--arc-space-lg);
}


/* --------------------------------------------------------------------------
   Content alignment
   -------------------------------------------------------------------------- */

.arc-text-center {
    text-align: center;
}

.arc-content-narrow {
    width: 100%;
    max-width: 760px;
}


/* --------------------------------------------------------------------------
   Header spacing
   -------------------------------------------------------------------------- */

.site-header {
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

    .arc-container {
        width: min(
            calc(100% - (var(--arc-space-lg) * 2)),
            var(--arc-container)
        );
    }

    .arc-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .arc-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

    .arc-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .arc-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


/* --------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {

    .arc-container {
        width: min(
            calc(100% - (var(--arc-space-xl) * 2)),
            var(--arc-container)
        );
    }

}