/*
 * VIPelanlar — Layout Primitives
 * ---------------------------------------------------------------
 * Reusable structural building blocks: containers, section rhythm,
 * generic grid helpers. Page-specific layout stays in page CSS.
 */

.vip-shell {
    width: min(var(--vip-container-max), 100% - (var(--vip-container-gutter) * 2));
    margin-inline: auto;
}

/* Narrower reading/content shell — legal pages, listing detail body copy */
.vip-shell-narrow {
    width: min(860px, 100% - (var(--vip-container-gutter) * 2));
    margin-inline: auto;
}

.vip-section { padding-block: var(--vip-space-xl); }
.vip-section + .vip-section { padding-top: 0; }

.vip-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vip-space-sm);
    margin-bottom: var(--vip-space-md);
}

.vip-section-heading h2 { margin: 0; }

.vip-section-heading a {
    flex-shrink: 0;
    font-size: var(--vip-text-sm);
    font-weight: var(--vip-weight-semibold);
    text-decoration: none;
}

.vip-section-heading a:hover { text-decoration: underline; }

/* Generic auto-fit grid, sized per context via --vip-grid-min */
.vip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--vip-grid-min, 200px), 1fr));
    gap: var(--vip-space-md);
}

/* Category cards: compact, scannable, favour more columns than listings */
.vip-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--vip-space-sm);
}

/*
 * Listing cards: image-led, needs more room per card.
 *
 * 260px min settles at the D3.9 targets against the 1240px container
 * (24px gaps): 4 columns at >=1440 (full 1240px shell), 3 at 1024
 * (984px shell), 2 at 768 (728px shell) -- verified against realistic
 * AZ/RU listing titles and prices, not just short placeholder text.
 */
.vip-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--vip-space-md);
}

@media (max-width: 767px) {
    .vip-section { padding-block: var(--vip-space-lg); }
    .vip-category-grid, .vip-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 389px) {
    :root { --vip-container-gutter: 16px; }
    .vip-category-grid { grid-template-columns: 1fr; }
}