/* ==========================================================================
   RENIVO RESPONSIVE LAYOUTS — breakpoint grid system (deliverable)
   Breakpoints: sm 480 · md 768 · lg 992 · xl 1280
   ========================================================================== */

:root {
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1280px;
    --grid-gap-sm: 16px;
    --grid-gap-md: 20px;
    --grid-gap-lg: 24px;
    --grid-cols: 12;
}

/* — Responsive shell — */
.r-layout {
    width: min(var(--layout-max, 1280px), calc(100% - var(--grid-gap-lg) * 2));
    margin-inline: auto;
    padding-inline: var(--grid-gap-lg);
}

.r-layout-fluid {
    width: 100%;
    padding-inline: var(--grid-gap-md);
}

.r-section {
    padding-block: var(--section-pad-y, 72px);
}

@media (min-width: 900px) {
    .r-section {
        padding-block: var(--section-pad-y-lg, 120px);
    }
}

/* — 12-column grid — */
.r-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gap-md);
}

.r-col-span-12 { grid-column: span 12; }
.r-col-span-8 { grid-column: span 12; }
.r-col-span-6 { grid-column: span 12; }
.r-col-span-4 { grid-column: span 12; }
.r-col-span-3 { grid-column: span 6; }

@media (min-width: 768px) {
    .r-col-span-8 { grid-column: span 8; }
    .r-col-span-6 { grid-column: span 6; }
    .r-col-span-4 { grid-column: span 4; }
    .r-col-span-3 { grid-column: span 3; }
}

/* — Auto-fit card grids — */
.r-grid-cards {
    display: grid;
    gap: var(--grid-gap-md);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .r-grid-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .r-grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
    .r-grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
    .r-grid-cards--5 { grid-template-columns: repeat(5, 1fr); }
}

/* — Split layouts (wizard, portal, editorial) — */
.r-split {
    display: grid;
    gap: var(--grid-gap-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .r-split--sidebar {
        grid-template-columns: minmax(240px, 300px) 1fr;
        align-items: start;
    }

    .r-split--wizard {
        grid-template-columns: 1fr minmax(280px, 360px);
        align-items: start;
    }

    .r-split--60-40 {
        grid-template-columns: 3fr 2fr;
    }
}

/* — Stack → row — */
.r-stack {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap-sm);
}

@media (min-width: 768px) {
    .r-stack--row-md {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* — Visibility helpers — */
.r-hide-sm { display: none; }
.r-show-sm { display: block; }

@media (min-width: 768px) {
    .r-hide-sm { display: block; }
    .r-show-sm { display: none; }
    .r-hide-md { display: none; }
    .r-show-md { display: block; }
}

/* — Design-system docs layout — */
.ds-layout-grid {
    display: grid;
    gap: 32px;
}

@media (min-width: 992px) {
    .ds-layout-grid {
        grid-template-columns: 240px 1fr;
        align-items: start;
    }
}

.ds-sidebar-nav {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ds-sidebar-nav a {
    padding: 8px 12px;
    border-radius: var(--radius-control);
    color: var(--readable-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.ds-sidebar-nav a:hover,
.ds-sidebar-nav a.active {
    background: var(--pink-base);
    color: var(--accent-primary-hover);
}

/* — Responsive demo blocks (Storybook + docs) — */
.r-demo-breakpoints {
    display: grid;
    gap: 12px;
}

.r-demo-bp {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-soft);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.r-demo-bp::before {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pink-base);
    color: var(--accent-primary-hover);
    font-size: 11px;
    font-weight: 800;
}

.r-demo-bp--sm::before { content: 'SM 480+'; }
.r-demo-bp--md::before { content: 'MD 768+'; }
.r-demo-bp--lg::before { content: 'LG 992+'; }
.r-demo-bp--xl::before { content: 'XL 1280'; }

.r-demo-bp--md { display: none; }
.r-demo-bp--lg { display: none; }

@media (min-width: 768px) {
    .r-demo-bp--md { display: block; }
}

@media (min-width: 992px) {
    .r-demo-bp--lg { display: block; }
}