/* ==============================================
   LAYOUT UTILITIES & CONTAINERS
   rv-layout.css — Reparatieviewer v2.0.0
   ============================================== */

/* Global box-sizing — prevents padding/border from causing overflow */
.rv-frontend,
.rv-frontend *,
.rv-frontend *::before,
.rv-frontend *::after {
    box-sizing: border-box;
}

/* Global image safety — images never exceed their container */
.rv-frontend img {
    max-width: 100%;
    height: auto;
}

/* ==============================================
   PAGE SHELL
   ============================================== */

.rv-frontend .rv-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: var(--rv-space-10);
}

@media (max-width: 900px) {
    .rv-frontend .rv-page {
        padding-bottom: var(--rv-space-8);
    }
}

@media (max-width: 480px) {
    .rv-frontend .rv-page {
        padding-bottom: var(--rv-space-6);
    }
}

.rv-frontend .rv-container {
    width: 100%;
    max-width: var(--rv-container-max-width);
    margin: 0 auto;
    padding: 0 var(--rv-container-padding);
}

@media (max-width: 768px) {
    .rv-frontend .rv-container {
        padding: 0 var(--rv-container-padding-mobile);
    }
}

/* ==============================================
   PAGE HERO SECTION
   ============================================== */

.rv-frontend .rv-page-hero {
    background: linear-gradient(180deg, var(--rv-color-bg) 0%, #ffffff 45%);
    padding: var(--rv-space-7) 0;
}

@media (max-width: 900px) {
    .rv-frontend .rv-page-hero {
        padding: var(--rv-space-5) 0;
    }
}

.rv-frontend .rv-page-header {
    margin-top: var(--rv-space-5);
}

.rv-frontend .rv-page-subtitle {
    font-size: var(--rv-text-md);
    color: var(--rv-color-muted);
    margin: var(--rv-space-2) 0 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==============================================
   CONTENT LAYOUT (MAIN + SIDEBAR)
   ============================================== */

.rv-frontend .rv-content-layout {
    display: flex;
    gap: var(--rv-grid-gap-lg);
    align-items: flex-start;
    margin-top: var(--rv-space-6);
}

@media (max-width: 900px) {
    .rv-frontend .rv-content-layout {
        flex-direction: column;
    }
}

/* Main area: flex: 1 + min-width: 0 prevents flex blowout */
.rv-frontend .rv-main {
    flex: 1;
    min-width: 0;
}

/* Sidebar: fixed width on desktop, full width when stacked */
.rv-frontend .rv-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--rv-space-4);
    width: 320px;
    flex-shrink: 0;
    min-width: 0; /* Prevent flex blowout */
}

@media (max-width: 900px) {
    .rv-frontend .rv-sidebar {
        width: 100%;
        max-width: 100%;
        /* min-width: auto removes the desktop constraint when stacked */
        min-width: auto;
    }
}

/* ==============================================
   MODEL GRID
   ============================================== */

/*
 * Base: auto-fill with safe minmax.
 * min(200px, 100%) ensures the minimum never exceeds the container,
 * preventing horizontal overflow on narrow screens.
 */
.rv-frontend .models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: var(--rv-grid-gap-sm);
}

@media (max-width: 1200px) {
    .rv-frontend .models-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .rv-frontend .models-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .rv-frontend .models-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--rv-grid-gap-sm);
    }
}

@media (max-width: 400px) {
    .rv-frontend .models-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--rv-grid-gap-sm);
    }
}

/* ==============================================
   MODEL CARDS
   ============================================== */

.rv-frontend .model-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--rv-radius-md);
    background-color: var(--rv-color-surface);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--rv-space-2);
}

.rv-frontend .model-card:hover {
    transform: scale(1.02);
    box-shadow: var(--rv-shadow-md);
}

.rv-frontend .model-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rv-frontend .model-image {
    width: 100%;
    height: 160px;
    object-fit: contain;
    background-color: transparent;
    margin-bottom: var(--rv-space-2);
}

@media (max-width: 480px) {
    .rv-frontend .model-image {
        height: 120px;
    }
}

.rv-frontend .model-title {
    font-size: var(--rv-text-md);
    color: var(--rv-color-text);
    margin: var(--rv-space-2) 0;
    font-weight: 600;
    /* Prevent long model names from overflowing their card */
    overflow-wrap: break-word;
    word-break: break-word;
}