/* ===================================================================
   CITY PAGE COMPONENT LIBRARY
   Shared stylesheet for all local/city landing pages
   (ventilation-huddinge.html and all other ventilation-[stad].html pages)
   Loaded in addition to style.css so informational/article pages are
   not forced to download unused CSS.
   =================================================================== */

/* ---- Layout basics (kept consistent with the inline hero styles
   already shipped on ventilation-huddinge.html) ---- */
.page-hero{background:#f4f7fb;padding:75px 20px 50px}
.page-wrap{max-width:1180px;margin:auto}
.page-wrap.narrow{max-width:820px}
.breadcrumb{font-size:14px;color:#61718a;margin-bottom:20px}
.breadcrumb a{color:#2f7cff;font-weight:700;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-tag{font-size:14px;font-weight:800;letter-spacing:2px;color:#2f7cff;margin-bottom:18px}
.hero-title{font-size:56px;line-height:1.08;margin-bottom:24px;color:#071A33}
.hero-lead{font-size:21px;line-height:1.7;color:#51627c;max-width:760px}
.hero-buttons{display:flex;gap:16px;margin-top:35px;flex-wrap:wrap}
.hero-buttons a{padding:16px 26px;border-radius:18px;text-decoration:none;font-weight:800;transition:.25s}
.hero-primary{background:#2f7cff;color:#fff}
.hero-primary:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(47,124,255,.35)}
.hero-secondary{background:#fff;border:1px solid #dce4ef;color:#071A33}
.hero-secondary:hover{transform:translateY(-3px)}
.hero-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
.hero-trust div{background:#fff;padding:14px 18px;border-radius:14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.hero-image img{width:100%;border-radius:24px;box-shadow:0 25px 60px rgba(0,0,0,.18);display:block}

/* ---- Section shells ---- */
.section{padding:64px 20px}
.section-light{background:#f4f7fb}
.section-dark{background:#071A33;color:#fff}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p,.section-dark li{color:#c7d4e8}
.section-heading{max-width:760px;margin-bottom:36px}
.section-heading.center{max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
.section-label{display:inline-block;color:#2f7cff;font-weight:800;letter-spacing:2px;font-size:13px;margin-bottom:14px}
.section-dark .section-label{color:#5fa2ff}
.section h2{font-size:32px;color:#071A33;margin-bottom:14px;line-height:1.2}
.section-dark h2{color:#fff}
.section p{font-size:17px;color:#51627c;line-height:1.7}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

/* ---- USP strip ---- */
.hero-usp{padding:36px 20px;background:#fff;border-bottom:1px solid #eef1f6}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.usp-card{text-align:center}
.usp-icon{font-size:30px;margin-bottom:10px}
.usp-card h3{font-size:17px;color:#071A33;margin-bottom:6px}
.usp-card p{font-size:14px;color:#67748c;margin:0}

/* ---- Google review card ---- */
.review-highlight{padding:50px 20px;background:#f4f7fb}
.review-card{background:#fff;border:1px solid #e5ebf4;border-radius:28px;padding:36px;box-shadow:0 20px 50px rgba(7,26,51,.06)}
.review-header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.google-logo{width:32px;height:32px}
.review-header h2{font-size:22px;margin:0 0 4px;color:#071A33}
.stars{color:#f5a623;letter-spacing:2px}
.review-card blockquote{font-size:19px;color:#33415a;line-height:1.6;margin:0 0 18px;font-style:italic}
.review-author{margin:0 0 18px}
.review-button{color:#2f7cff;font-weight:800;text-decoration:none}
.review-button:hover{text-decoration:underline}

/* ---- Intro ---- */
.intro-section{padding:56px 20px 10px}
.intro-section h2{font-size:30px;color:#071A33;margin-bottom:14px}
.intro-section p{font-size:17px;color:#51627c;line-height:1.75;margin-bottom:14px}

/* ---- Problem grid ---- */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.problem-card{background:#fff;border:1px solid #e5ebf4;border-radius:22px;padding:26px;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.problem-icon{font-size:26px;margin-bottom:10px}
.problem-card h3{font-size:19px;color:#071A33;margin-bottom:8px}
.problem-card p{font-size:15px;color:#5a6883;margin:0 0 10px}
.problem-card a{color:#2f7cff;font-weight:700;font-size:14px;text-decoration:none}
.problem-card a:hover{text-decoration:underline}

/* ---- Info / tip boxes ---- */
.info-box{background:#eef6ff;border:1px solid #d8ebff;border-radius:20px;padding:24px}
.info-box h3{font-size:18px;color:#071A33;margin-bottom:12px}
.tip-box{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:24px;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.tip-box h3{font-size:18px;color:#071A33;margin-bottom:12px}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{padding:6px 0;color:#33415a;font-size:15px}
.did-you-know{display:flex;gap:20px;background:#fff8e8;border:1px solid #f4e3b0;border-radius:22px;padding:28px;align-items:flex-start}
.tip-icon{font-size:30px}
.tip-content h2{font-size:22px;color:#071A33;margin-bottom:8px}
.tip-content p{font-size:16px;color:#5a5433;margin:0}

/* ---- Service comparison cards ---- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.service-card{position:relative;background:#fff;border:1px solid #e5ebf4;border-radius:24px;padding:30px;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.service-card.featured-card{border:2px solid #2f7cff;box-shadow:0 20px 45px rgba(47,124,255,.18)}
.service-icon{font-size:28px;margin-bottom:12px}
.service-card h3{font-size:21px;color:#071A33;margin-bottom:10px}
.service-card p{font-size:15px;color:#5a6883;margin-bottom:14px}
.service-list{list-style:none;padding:0;margin:0 0 16px}
.service-list li{font-size:14px;color:#33415a;padding:4px 0}
.service-badge{display:inline-block;padding:8px 14px;background:#eef5ff;color:#2f7cff;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:18px}
.service-badge.badge-green{background:#eaf8ef;color:#1b8f4d}
.recommended{position:absolute;top:-14px;left:24px;background:#2f7cff;color:#fff;font-size:12px;font-weight:800;padding:6px 14px;border-radius:999px}
.card-button{display:inline-block;color:#2f7cff;font-weight:800;text-decoration:none;font-size:15px}
.card-button:hover{text-decoration:underline}

/* ---- Comparison table ---- */
.comparison-box{background:#fff;border:1px solid #e5ebf4;border-radius:24px;padding:32px;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.comparison-box h2{font-size:26px;color:#071A33;margin-bottom:20px}
.comparison-table{width:100%;border-collapse:collapse}
.comparison-table th,.comparison-table td{text-align:left;padding:14px 16px;font-size:15px;border-bottom:1px solid #eef1f6}
.comparison-table th{color:#071A33;font-weight:800}
.comparison-table td{color:#4a5875}

/* ---- Pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px}
.price-card{position:relative;background:#fff;border:1px solid #e5ebf4;border-radius:22px;padding:26px;text-align:center;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.price-card.featured-price{border:2px solid #2f7cff}
.price-icon{font-size:26px;margin-bottom:10px}
.price-card h3{font-size:16px;color:#071A33;margin-bottom:8px}
.price{font-size:21px;font-weight:900;color:#2f7cff;margin-bottom:8px}
.price-card p{font-size:13px;color:#5a6883;margin:0}
.price-note{font-size:13px;color:#7a879e;margin-top:18px}

/* ---- Price influencing factors ---- */
.factor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.factor-card{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:22px}
.factor-card h3{font-size:16px;color:#071A33;margin-bottom:8px}
.factor-card p{font-size:14px;color:#5a6883;margin:0}

/* ---- Decision helper ---- */
.decision-box{background:#fff;border:1px solid #e5ebf4;border-radius:26px;padding:36px;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.decision-box h2{font-size:26px;color:#071A33;margin-bottom:12px}
.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px}
.decision-list{list-style:none;padding:0;margin:0}
.decision-list li{font-size:15px;color:#33415a;padding:5px 0}

/* ---- CTA banners ---- */
.cta-banner{background:linear-gradient(135deg,#2f7cff,#0f57d5);color:#fff;border-radius:30px;padding:44px}
.cta-banner h2{color:#fff;font-size:28px;margin-bottom:10px}
.cta-banner p{color:#e3ecff;font-size:16px}
.cta-banner .hero-secondary{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);color:#fff}
.cta-banner .hero-primary{background:#fff;color:#0f57d5}

.trust-banner{background:#071A33;padding:50px 20px}
.trust-banner-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.trust-banner-inner h2{color:#fff;font-size:26px;margin-bottom:8px}
.trust-banner-inner p{color:#c7d4e8;font-size:15px;margin:0}
.trust-buttons{display:flex;gap:14px;flex-wrap:wrap}

.final-cta{background:#071A33;border-radius:30px;padding:46px}
.final-cta h2{color:#fff;font-size:28px;margin-bottom:12px}
.final-cta p{color:#c7d4e8;font-size:16px;margin-bottom:18px}
.cta-list{list-style:none;padding:0;margin:0}
.cta-list li{color:#dbe6f7;font-size:15px;padding:4px 0}

/* ---- Trust / why us ---- */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.trust-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:26px}
.section-dark .trust-card h3{color:#fff}
.section-dark .trust-card p{color:#c7d4e8}
.trust-icon{font-size:26px;margin-bottom:10px}

/* ---- Process timeline ---- */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:10px}
.timeline-item{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:22px}
.timeline-number{width:34px;height:34px;border-radius:50%;background:#2f7cff;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}
.timeline-item h3{font-size:17px;color:#071A33;margin-bottom:8px}
.timeline-item p{font-size:14px;color:#5a6883;margin:0}

/* ---- Local areas ---- */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.area-card{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:24px}
.area-card h3{font-size:18px;color:#071A33;margin-bottom:8px}
.area-card p{font-size:14px;color:#5a6883;margin:0}

/* ---- Villa guide ---- */
.villa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.villa-card{position:relative;background:#fff;border:1px solid #e5ebf4;border-radius:24px;padding:28px;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.villa-card.featured-card{border:2px solid #2f7cff}
.villa-year{display:inline-block;background:#eef5ff;color:#2f7cff;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.villa-card h3{font-size:20px;color:#071A33;margin-bottom:10px}
.villa-card p{font-size:15px;color:#5a6883;margin-bottom:14px}
.villa-info strong{font-size:13px;color:#071A33;text-transform:uppercase;letter-spacing:1px}
.villa-info ul{list-style:none;padding:0;margin:8px 0 0}
.villa-info li{font-size:14px;color:#5a6883;padding:2px 0}

/* ---- Common mistakes ---- */
.mistake-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mistake-card{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:22px}
.mistake-number{font-size:26px;font-weight:900;color:#dbe6fb;margin-bottom:8px}
.mistake-card h3{font-size:16px;color:#071A33;margin-bottom:8px}
.mistake-card p{font-size:14px;color:#5a6883;margin:0}

/* ---- Seasons ---- */
.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.season-card{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:24px}
.season-icon{font-size:26px;margin-bottom:10px}
.season-card h3{font-size:17px;color:#071A33;margin-bottom:8px}
.season-card p{font-size:14px;color:#5a6883;margin:0}

/* ---- Checklist ---- */
.checklist-card{background:#fff;border:1px solid #e5ebf4;border-radius:26px;padding:32px;box-shadow:0 10px 30px rgba(7,26,51,.04)}
.checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;margin:20px 0}
.checklist-grid label{display:flex;align-items:center;gap:10px;font-size:15px;color:#33415a}
.checklist-grid input{width:18px;height:18px}

/* ---- FAQ accordion ---- */
.faq-wrapper{max-width:820px;margin:0 auto}
.faq-wrapper details{background:#fff;border:1px solid #e5ebf4;border-radius:18px;padding:20px 24px;margin-bottom:14px}
.faq-wrapper summary{font-weight:800;color:#071A33;cursor:pointer;font-size:16px;list-style:none}
.faq-wrapper summary::-webkit-details-marker{display:none}
.faq-wrapper summary:after{content:"+";float:right;color:#2f7cff;font-weight:900}
.faq-wrapper details[open] summary:after{content:"–"}
.faq-wrapper details p{margin-top:14px;font-size:15px;color:#5a6883;line-height:1.7}

/* ---- Footer ---- */
.footer{background:#071A33;color:#fff;padding:56px 20px 26px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:32px}
.footer h3{font-size:16px;color:#fff;margin-bottom:14px}
.footer p{font-size:14px;color:#c7d4e8}
.footer ul{list-style:none;padding:0;margin:0}
.footer ul li{margin-bottom:8px}
.footer a{color:#c7d4e8;text-decoration:none;font-size:14px}
.footer a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.footer-bottom p{font-size:13px;color:#8ea0bf;margin:0}

/* ---- Responsive ---- */
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr}
.hero-title{font-size:40px}
.usp-grid,.problem-grid,.service-grid,.price-grid,.factor-grid,.decision-grid,.grid-two,.timeline,.area-grid,.villa-grid,.mistake-grid,.season-grid,.checklist-grid,.trust-grid,.footer-grid{grid-template-columns:1fr 1fr}
.timeline{grid-template-columns:1fr}
.trust-banner-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
.usp-grid,.problem-grid,.service-grid,.price-grid,.factor-grid,.decision-grid,.grid-two,.area-grid,.villa-grid,.mistake-grid,.season-grid,.checklist-grid,.trust-grid,.footer-grid{grid-template-columns:1fr}
.hero-title{font-size:32px}
}