/* ed: 2026-06 — Стили хаба «Ремонт в новостройке» */

.novostroyka-page { padding-top: 0; }
.vn-tariff-card { color: inherit; display: block; }

/* ed: 2026-07 — tariffs-grid: 4 карточки → 4 колонки на десктопе.
   Глобальный auto-fit minmax(300px) даёт 3+1 на ~1100px.
   Фиксим: явно 4 колонки на десктопе, 2 на планшете, 1 на мобильном. */
.novostroyka-page .tariffs-grid {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
    .novostroyka-page .tariffs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Hero background */
.vn-hero-image--novostroyka {
    background: linear-gradient(135deg, rgba(var(--surface-page-rgb), 0.92), rgba(var(--surface-elevated-rgb), 0.88)),
                url('/remont-kvartir/images/parallax-bg.png.webp') center/cover no-repeat;
}

/* Hero stats row */
.vn-hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
    padding: 24px 32px;
    background: rgba(var(--white-rgb), 0.08);
    border: 1px solid rgba(var(--accent-gold-rgb), 0.25);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
}
.vn-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vn-hero-stat-value {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: -0.02em;
}
.vn-hero-stat-label {
    font-size: 14px;
    color: rgba(var(--text-body-rgb), 0.65);
    font-weight: 500;
}

/* Router-render hero (data pages) */
.novostroyka-page .vn-hero { position:relative; min-height:100dvh; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--surface-page); }
.novostroyka-page .vn-hero-bg { position:absolute; inset:0; z-index:0; }
.novostroyka-page .vn-hero-image { position:absolute; inset:0; background:var(--surface-page); }
.novostroyka-page .vn-hero-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(var(--surface-page-rgb),0.7) 0%,rgba(var(--surface-page-rgb),0.5) 50%,rgba(var(--surface-page-rgb),0.85) 100%); }
.novostroyka-page .vn-hero-content { position:relative; z-index:3; max-width:800px; padding:140px 0 80px; }
.novostroyka-page .vn-hero-content h1 { font-family:var(--font-heading); font-size:clamp(32px,5vw,52px); font-weight:700; line-height:1.1; letter-spacing:-0.02em; margin-bottom:28px; }
.novostroyka-page .vn-hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(var(--accent-gold-rgb),0.15); border:1px solid rgba(var(--accent-gold-rgb),0.3); border-radius:20px; font-size:13px; font-weight:600; color:var(--accent-gold); margin-bottom:24px; }
.novostroyka-page .vn-hero-subtitle { font-family:var(--font-body); font-size:clamp(16px,2vw,20px); font-weight:400; line-height:1.7; color:rgba(var(--text-body-rgb),0.75); margin:0 0 40px; max-width:600px; }
.novostroyka-page .vn-hero-actions { display:flex; gap:16px; flex-wrap:wrap; }

/* Router-render section title (data pages) */
.novostroyka-page .vn-section-title { font-family:var(--font-heading); font-weight:600; font-size:clamp(28px,4vw,42px); color:var(--text-body); margin-bottom:16px; letter-spacing:-0.015em; line-height:1.15; }
.novostroyka-page .vn-section-subtitle { color:rgba(var(--text-body-rgb),0.65); max-width:640px; margin:0 auto; font-size:17px; line-height:1.7; }

/* Section note */
.section-note {
    text-align: center;
    margin-top: 32px;
    color: rgba(var(--text-body-rgb), 0.65);
    font-size: 14px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
.section-note a {
    color: var(--accent-gold);
    text-decoration: underline;
}

/* Otdelka cards (types of finishing) */
.otdelka-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 48px;
}
.otdelka-card {
    padding: 36px 28px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.4s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.4s ease;
}
.otdelka-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-gold);
    box-shadow: 0 12px 40px rgba(var(--shadow-color-rgb), 0.3), 0 0 24px rgba(var(--accent-gold-rgb), 0.15);
}
.otdelka-card-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.12), rgba(var(--accent-gold-rgb), 0.04));
    border-radius: var(--radius-sm);
    color: var(--accent-gold);
    box-shadow: 0 4px 16px rgba(var(--accent-gold-rgb), 0.2);
}
.otdelka-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-body);
}
.otdelka-card-desc {
    font-size: 15px;
    color: rgba(var(--text-body-rgb), 0.7);
    line-height: 1.65;
    flex: 1;
}
.otdelka-card-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: -0.02em;
}
.otdelka-card-link {
    font-size: 14px;
    color: rgba(var(--text-body-rgb), 0.65);
    transition: color 0.2s;
    font-weight: 500;
}
.otdelka-card:hover .otdelka-card-link {
    color: var(--accent-gold);
}

/* Spec cards (novostroyka specifics) */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 48px;
}
.spec-card {
    padding: 36px 28px;
    transition: transform 0.4s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.4s ease;
}
.spec-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-gold-rgb), 0.4);
    box-shadow: 0 12px 40px rgba(var(--shadow-color-rgb), 0.3), 0 0 20px rgba(var(--accent-gold-rgb), 0.12);
}
.spec-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.15), rgba(var(--accent-gold-rgb), 0.05));
    border-radius: 50%;
    color: var(--accent-gold);
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(var(--accent-gold-rgb), 0.25);
}
.spec-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 12px;
}
.spec-card p {
    font-size: 15px;
    color: rgba(var(--text-body-rgb), 0.72);
    line-height: 1.65;
}
.spec-card a {
    color: var(--accent-gold);
    text-decoration: underline;
}

/* Portfolio grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}
.portfolio-item {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid rgba(var(--text-body-rgb), 0.1);
    transition: transform 0.4s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.4s ease;
}
.portfolio-item:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-gold-rgb), 0.4);
    box-shadow: 0 12px 40px rgba(var(--shadow-color-rgb), 0.35), 0 0 24px rgba(var(--accent-gold-rgb), 0.15);
}
.portfolio-item .image-placeholder {
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.04), rgba(var(--white-rgb), 0.02));
    position: relative;
    overflow: hidden;
}
.portfolio-item .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity 0.4s ease;
}
.portfolio-item:hover .image-placeholder img {
    opacity: 1;
}
.portfolio-item .image-placeholder span {
    color: rgba(var(--text-body-rgb), 0.65);
    font-size: 14px;
}
.portfolio-caption {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.portfolio-caption strong {
    font-size: 16px;
    color: var(--text-body);
    font-weight: 600;
}
.portfolio-caption span {
    font-size: 14px;
    color: rgba(var(--text-body-rgb), 0.7);
}
.portfolio-cta {
    text-align: center;
    margin-top: 48px;
}

/* Geography */
.geo-subtitle {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-body);
    margin: 56px 0 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(var(--accent-gold-rgb), 0.2);
}
.geo-subtitle:first-of-type {
    margin-top: 0;
}
.geo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.geo-card {
    padding: 24px;
    text-decoration: none;
    display: block;
    transition: transform 0.4s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.4s ease, background 0.3s ease;
}
.geo-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-gold);
    box-shadow: 0 8px 32px rgba(var(--shadow-color-rgb), 0.3), 0 0 20px rgba(var(--accent-gold-rgb), 0.12);
    background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.08), rgba(var(--accent-gold-rgb), 0.02));
}
.geo-card h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 8px;
}
.geo-card p {
    font-size: 14px;
    color: rgba(var(--text-body-rgb), 0.7);
    line-height: 1.6;
}

/* Vidy (types of repair) */
.vidy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.vidy-card {
    padding: 32px 28px;
    text-decoration: none;
    display: block;
    transition: transform 0.4s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.4s ease;
    background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.04), transparent), var(--glass-bg);
}
.vidy-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-gold);
    box-shadow: 0 12px 40px rgba(var(--shadow-color-rgb), 0.3), 0 0 24px rgba(var(--accent-gold-rgb), 0.15);
}
.vidy-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 12px;
}
.vidy-card p {
    font-size: 15px;
    color: rgba(var(--text-body-rgb), 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}
.vidy-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: -0.02em;
}

/* Materials */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 48px;
}
.material-group {
    padding: 28px;
    background: var(--glass-bg);
    border: 1px solid rgba(var(--text-body-rgb), 0.1);
    border-radius: var(--radius-sm);
    transition: transform 0.3s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.3s ease;
}
.material-group:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-gold-rgb), 0.3);
    box-shadow: 0 8px 24px rgba(var(--shadow-color-rgb), 0.25);
}
.material-group h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(var(--accent-gold-rgb), 0.2);
}
.material-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.material-group li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 15px;
    color: rgba(var(--text-body-rgb), 0.75);
    border-bottom: 1px solid rgba(var(--text-body-rgb), 0.06);
}
.material-group li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 18px;
}

/* Signature */
.signature-section {
    padding: 80px 0;
}
.signature-block {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 40px;
    background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.06), rgba(var(--accent-gold-rgb), 0.02));
    border: 1px solid rgba(var(--accent-gold-rgb), 0.2);
    border-radius: var(--radius);
}
.signature-author {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 16px;
}
.signature-quote {
    font-style: italic;
    font-size: 16px;
    color: rgba(var(--text-body-rgb), 0.85);
    line-height: 1.75;
    margin-bottom: 16px;
}
.signature-date {
    font-size: 14px;
    color: rgba(var(--text-body-rgb), 0.7);
}

/* FAQ */
.faq-section {
    padding: 100px 0;
}

/* Related cards (page-specific: HTML uses h3, global CSS targets h4) */
.novostroyka-page .related-card h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 8px;
}
.novostroyka-page .related-card p {
    font-size: 14px;
    color: rgba(var(--text-body-rgb), 0.7);
    line-height: 1.5;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid rgba(var(--text-body-rgb), 0.12);
    padding: 4px 0;
}
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-body);
    transition: color 0.2s;
}
.faq-question:hover {
    color: var(--accent-gold);
}
.faq-chevron {
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.3s var(--transition-smooth);
    color: var(--accent-gold);
}
.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--transition-smooth);
}
.faq-item.active .faq-answer {
    max-height: 500px;
}
.faq-answer p {
    padding: 0 0 24px;
    font-size: 16px;
    color: rgba(var(--text-body-rgb), 0.75);
    line-height: 1.75;
}
.faq-answer a {
    color: var(--accent-gold);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .novostroyka-page .vn-hero {
        min-height: 100dvh;
    }
    .novostroyka-page .vn-hero-content {
        padding: 120px 0 60px;
    }
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .geo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vidy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .otdelka-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .novostroyka-page .vn-hero {
        min-height: auto;
    }
    .novostroyka-page .vn-hero-content {
        padding: 100px 0 60px;
    }
    .vn-hero-stats {
        gap: 20px;
    }
    .vn-hero-stat-value {
        font-size: 20px;
    }
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .geo-grid {
        grid-template-columns: 1fr;
    }
    .otdelka-grid {
        grid-template-columns: 1fr;
    }
    .spec-grid {
        grid-template-columns: 1fr;
    }
    .vidy-grid {
        grid-template-columns: 1fr;
    }
    .materials-grid {
        grid-template-columns: 1fr;
    }
    .case-block {
        padding: 28px 20px;
    }
    .faq-question {
        font-size: 15px;
    }
}