/* ============================================================
   KAPITALNYJ — капитальный ремонт (ed: 2026-08-16)
   Страница /remont-kvartir/kapitalnyj/
   Все классы с префиксом kp- (страница не конфликтует с хабами).
   ============================================================ */

.kp-page { padding-top: 0; }

/* ===== HERO ===== */
.kp-hero { position:relative; min-height:100dvh; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--surface-page); }
.kp-hero-bg { position:absolute; inset:0; z-index:0; }
.kp-hero-image { position:absolute; inset:0; }
.kp-hero-image--kapitalnyj {
    background: linear-gradient(135deg, rgba(var(--surface-page-rgb), 0.92), rgba(var(--surface-elevated-rgb), 0.88)),
                url('/remont-kvartir/images/parallax-background-interior.webp') center/cover no-repeat;
}
.kp-hero-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(var(--surface-page-rgb),0.82) 0%, rgba(var(--surface-page-rgb),0.58) 50%, rgba(var(--surface-page-rgb),0.94) 100%); }
.kp-hero-content { position:relative; z-index:3; max-width:800px; padding:140px 0 80px; }
.kp-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; color:var(--text-body); }
.kp-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; }
.kp-hero-badge .badge-icon { display:inline-flex; align-items:center; justify-content:center; }
.kp-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.78); margin:0 0 40px; max-width:620px; }
.kp-hero-stats { display:flex; gap:40px; margin-top:8px; flex-wrap:wrap; padding:24px 32px; background:rgba(var(--text-body-rgb),0.04); border:1px solid var(--gold-opacity-30); border-radius:var(--radius); }
.kp-hero-stat { display:flex; flex-direction:column; gap:6px; }
.kp-hero-stat-value { font-family:var(--font-heading); font-size:28px; font-weight:700; color:var(--accent-gold); letter-spacing:-0.02em; }
.kp-hero-stat-label { font-size:14px; color:rgba(var(--text-body-rgb),0.65); font-weight:500; }
.kp-hero-actions { display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

/* ===== SECTION TITLES ===== */
.kp-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; }
.kp-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; }

/* ===== TARIFFS: 4 карточки в ряд на десктопе ===== */
.kp-page .tariffs-grid { grid-template-columns:repeat(4, 1fr); gap:24px; }
@media (max-width: 1200px) {
    .kp-page .tariffs-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .kp-page .tariffs-grid { grid-template-columns:1fr; }
}

/* Tariff card как ссылка (по комнатности) */
.kp-tariff-card { display:flex; flex-direction:column; }
.kp-tariff-card .tariff-features { flex:1; }
.kp-tariff-card .tariff-note { font-size:14px; font-weight:600; color:var(--accent-gold); margin-top:8px; }
.kp-tariff-card:hover .tariff-note { text-decoration:underline; }

/* ===== WORKS (что входит) ===== */
.kp-works-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:48px; }
.kp-work-card { padding:32px 28px; transition:transform 0.4s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.4s ease; }
.kp-work-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); }
.kp-work-icon { width:56px; height:56px; 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.04)); border-radius:14px; color:var(--accent-gold); margin-bottom:20px; box-shadow:0 4px 16px rgba(var(--accent-gold-rgb),0.2); }
.kp-work-title { font-family:var(--font-heading); font-size:20px; font-weight:600; color:var(--text-body); margin-bottom:12px; line-height:1.3; }
.kp-work-card p { font-size:14px; color:rgba(var(--text-body-rgb),0.72); line-height:1.65; margin:0; }

/* ===== SPEC CARDS (когда нужен + специфика вторички) ===== */
.kp-spec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin-top:48px; }
.kp-spec-card { padding:36px 28px; transition:transform 0.4s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.4s ease; }
.kp-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); }
.kp-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); }
.kp-spec-card h3 { font-family:var(--font-heading); font-size:20px; font-weight:600; color:var(--text-body); margin-bottom:12px; }
.kp-spec-card p { font-size:15px; color:rgba(var(--text-body-rgb),0.72); line-height:1.65; margin:0; }
.kp-spec-card a { color:var(--accent-gold); text-decoration:underline; }

/* ===== PORTFOLIO ===== */
.kp-portfolio-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:48px; }
.kp-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; }
.kp-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); }
.kp-portfolio-img { aspect-ratio:4/3; overflow:hidden; }
.kp-portfolio-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s var(--transition-smooth); }
.kp-portfolio-item:hover .kp-portfolio-img img { transform:scale(1.04); }
.kp-portfolio-caption { padding:20px 24px; display:flex; flex-direction:column; gap:6px; }
.kp-portfolio-caption strong { font-size:16px; color:var(--text-body); font-weight:600; }
.kp-portfolio-caption span { font-size:14px; color:rgba(var(--text-body-rgb),0.7); }
.portfolio-cta { text-align:center; margin-top:48px; }

/* ===== GEOGRAPHY ===== */
.kp-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); }
.kp-geo-subtitle:first-of-type { margin-top:0; }
.kp-geo-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.kp-geo-card { padding:24px; }
.kp-geo-card h4 { font-family:var(--font-heading); font-size:18px; font-weight:600; color:var(--text-body); margin-bottom:8px; }
.kp-geo-card p { font-size:14px; color:rgba(var(--text-body-rgb),0.7); line-height:1.6; margin:0; }

/* ===== VIDY (виды ремонта) ===== */
.kp-vidy-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:48px; }
.kp-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); }
.kp-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); }
.kp-vidy-card h3 { font-family:var(--font-heading); font-size:20px; font-weight:600; color:var(--text-body); margin-bottom:12px; }
.kp-vidy-card p { font-size:15px; color:rgba(var(--text-body-rgb),0.7); line-height:1.6; margin-bottom:16px; }
.kp-vidy-price { font-size:18px; font-weight:700; color:var(--accent-gold); letter-spacing:-0.02em; }

/* ===== MATERIALS ===== */
.kp-materials-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-top:48px; }
.kp-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; }
.kp-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); }
.kp-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); }
.kp-material-group ul { list-style:none; padding:0; margin:0; }
.kp-material-group li { padding:8px 0 8px 24px; position:relative; font-size:14px; color:rgba(var(--text-body-rgb),0.75); border-bottom:1px solid rgba(var(--text-body-rgb),0.06); }
.kp-material-group li:last-child { border-bottom:none; }
.kp-material-group li::before { content:'•'; position:absolute; left:0; color:var(--accent-gold); font-weight:700; font-size:18px; }

/* ===== FAQ: аккордеон (перебиваем always-open из article-shared) ===== */
.kp-page .faq-question { cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 28px; color:var(--text-body); font-weight:600; }
.kp-page .faq-question span { color:var(--text-body); }
.kp-page .faq-question:hover span { color:var(--accent-gold); }
.kp-page .faq-chevron { flex-shrink:0; margin-left:0; color:var(--accent-gold); transition:transform 0.3s var(--transition-smooth); }
.kp-page .faq-item.active .faq-chevron { transform:rotate(180deg); }
.kp-page .faq-answer { max-height:0; overflow:hidden; padding:0 28px; transition:max-height 0.4s var(--transition-smooth); }
.kp-page .faq-item.active .faq-answer { max-height:600px; padding:0 28px 24px; }
.kp-page .faq-answer p { padding:0; font-size:15px; line-height:1.7; color:rgba(var(--text-body-rgb),0.75); }
.kp-page .faq-answer a { color:var(--accent-gold); text-decoration:underline; }

/* ===== SIGNATURE ===== */
.kp-signature-block { text-align:center; max-width:640px; margin:0 auto; padding:40px; background:linear-gradient(135deg, var(--gold-opacity-10), rgba(var(--accent-gold-rgb),0.04)); border:1px solid var(--gold-opacity-30); 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); }

/* Trust-bar: восстанавливаем рамку первой карточки (общая rule убирает её) */
.kp-page .trust-card:first-child { border-left:1px solid var(--glass-border); padding-left:24px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .kp-hero { min-height:100dvh; }
    .kp-hero-content { padding:120px 0 60px; }
    .kp-works-grid { grid-template-columns:repeat(2, 1fr); }
    .kp-portfolio-grid { grid-template-columns:repeat(2, 1fr); }
    .kp-vidy-grid { grid-template-columns:repeat(2, 1fr); }
    .kp-geo-grid { grid-template-columns:repeat(2, 1fr); }
    .kp-materials-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .kp-hero { min-height:auto; }
    .kp-hero-content { padding:100px 0 60px; }
    .kp-hero-stats { gap:20px; padding:20px; }
    .kp-hero-stat-value { font-size:22px; }
    .kp-works-grid { grid-template-columns:1fr; }
    .kp-portfolio-grid { grid-template-columns:1fr; }
    .kp-vidy-grid { grid-template-columns:1fr; }
    .kp-geo-grid { grid-template-columns:1fr; }
    .kp-materials-grid { grid-template-columns:1fr; }
    .faq-question { font-size:15px; }
}