/*
 * Layout primitives — containers, grids. No component styling here.
 */

.rm-container {
    width: 100%;
    max-width: var(--rm-container-max);
    margin: 0 auto;
    padding-left: var(--rm-container-pad-mobile);
    padding-right: var(--rm-container-pad-mobile);
}

@media (min-width: 1024px) {
    .rm-container {
        padding-left: var(--rm-container-pad-desktop);
        padding-right: var(--rm-container-pad-desktop);
    }
}

.rm-stack { display: flex; flex-direction: column; gap: var(--rm-sp-4); }
.rm-stack-2 { gap: var(--rm-sp-2); }
.rm-stack-5 { gap: var(--rm-sp-5); }

.rm-row { display: flex; gap: var(--rm-sp-4); align-items: center; }
.rm-row-end { justify-content: flex-end; }
.rm-row-between { justify-content: space-between; }

.rm-grid {
    display: grid;
    gap: var(--rm-sp-4);
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 600px) { .rm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rm-sp-5); } }

.rm-grid-4 { display: grid; gap: var(--rm-sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .rm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Site shell: fixed header, normal flow content, fixed bottom nav (mobile). */
.rm-site-header {
    position: sticky;
    top: 0;
    z-index: var(--rm-z-header);
    height: var(--rm-header-h-mobile);
    background: var(--rm-bg);
    border-bottom: 1px solid var(--rm-border);
    display: flex; align-items: center;
}
@media (min-width: 1024px) {
    .rm-site-header { height: var(--rm-header-h-desktop); }
}

main.rm-site-main { min-height: 60vh; }

.rm-site-footer {
    background: var(--rm-charcoal);
    color: var(--rm-text-on-dark);
    padding: var(--rm-sp-6) 0 var(--rm-sp-5);
    margin-top: var(--rm-sp-7);
}
.rm-site-footer a { color: var(--rm-text-on-dark); }
.rm-site-footer a:hover { color: var(--rm-accent); }

/* Bottom mobile nav — fixed at bottom on viewports under 1024px, hidden on desktop. */
.rm-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--rm-bottomnav-h);
    background: var(--rm-bg);
    border-top: 1px solid var(--rm-border);
    z-index: var(--rm-z-bottomnav);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* iOS safe-area inset */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 1024px) {
    .rm-bottomnav { display: none; }
}