/* =========================================================
   Baunatal location page – page-specific styles
   Loaded after /css/global.css and /maps/assets/style.css,
   which provide the shared design tokens (--primary, --c-*),
   buttons, hero, stats, service-card, map-card, faq, etc.
   This file only adds what is unique to this page.
   ========================================================= */

/* ---------- Service-pillar strip (4 core Leistungen) ---------- */
.pillars {
  padding: 1rem 0 .5rem;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.3rem 1.2rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.pillar-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--primary-l);
  color: var(--primary-hover);
  font-size: 1.3rem;
}
.pillar-card h3 { margin: 0; font-size: 1.02rem; }
.pillar-card p { margin: 0; font-size: .87rem; color: var(--c-text-soft); flex-grow: 1; }
.pillar-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .85rem;
  color: var(--primary-hover);
}
.pillar-card:hover .pillar-link { color: var(--primary); }

@media (max-width: 980px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ---------- Category chip on service cards ---------- */
.cat-chip {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--c-bg-alt);
  color: var(--c-text-soft);
  margin-bottom: .65rem;
}
.cat-chip.chip-key     { background: #fde5e1; color: var(--primary-hover); }
.cat-chip.chip-pipe    { background: #e0f2fe; color: #075985; }
.cat-chip.chip-sanitary{ background: #dcfce7; color: #15803d; }
.cat-chip.chip-clean   { background: #ede9fe; color: #6d28d9; }

/* ---------- Stadtteil / district badge row ---------- */
.district-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.1rem 0 0;
}
.district-strip span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--c-border);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text);
}
.district-strip span i { color: var(--primary-hover); }
.district-strip span.is-core {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}
.district-strip span.is-core i { color: #fff; }

/* ---------- Small local note under the map ---------- */
.map-note {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--c-text-soft);
}
.map-note i { color: var(--primary-hover); font-size: 1.1rem; margin-top: .1rem; }

/* ---------- Minor hero tweak: region eyebrow ---------- */
.hero-solo .eyebrow .bi-geo-alt-fill { color: var(--primary); }

/* ---------- "Nachbar von Kassel" proximity badge ---------- */
.proximity-note {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--primary-l);
  color: var(--primary-hover);
  font-weight: 700;
  font-size: .85rem;
}
.proximity-note i { font-size: 1rem; }


/* =========================================================
   GOOGLE-STYLE REVIEWS SECTION
   ========================================================= */
.gtest {
  padding: 5rem 0;
  background: var(--c-bg-alt);
}
.gtest-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.6rem;
}
.gtest-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .6rem;
}
.gtest-head h2 { margin-bottom: .6rem; }
.gtest-head > p { color: var(--c-text-soft); margin-bottom: 1.6rem; }

.gtest-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: .7rem 1.4rem;
  box-shadow: var(--shadow-sm);
  font-size: .95rem;
  color: var(--c-text);
}
.gtest-badge i.bi-google {
  font-size: 1.15rem;
  background: linear-gradient(135deg, #4285F4, #34A853 40%, #FBBC05 70%, #EA4335);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gtest-badge strong { font-weight: 800; }
.gtest-badge-stars { color: #facc15; display: inline-flex; gap: 1px; font-size: .85rem; }
.gtest-badge-sep {
  width: 1px; height: 18px;
  background: var(--c-border);
}

.gtest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.gtest-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gtest-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.gtest-card-top {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .9rem;
}
.gtest-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: .92rem;
  flex: 0 0 auto;
}
.gtest-who { display: flex; flex-direction: column; line-height: 1.25; flex-grow: 1; }
.gtest-who strong { font-family: var(--font-display); font-size: .98rem; }
.gtest-who span { font-size: .82rem; color: var(--c-muted); }
.gtest-g { font-size: 1.2rem; color: #4285F4; opacity: .9; }

.gtest-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .7rem;
}
.gtest-stars { color: #facc15; display: inline-flex; gap: 1px; font-size: .82rem; }
.gtest-time { font-size: .8rem; color: var(--c-muted); }
.gtest-card p { margin: 0; color: var(--c-text); font-size: .94rem; line-height: 1.55; }

.gtest-cta { text-align: center; margin-top: 2.4rem; }

@media (max-width: 980px) {
  .gtest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gtest-grid { grid-template-columns: 1fr; }
  .gtest-badge { flex-wrap: wrap; justify-content: center; text-align: center; }
}


/* =========================================================
   BAUNATAL — DISTINCT PAGE IDENTITY
   Gives this location page its own visual signature so it
   doesn't feel like a re-skinned copy of the other city
   pages, while staying on-brand (same red, same fonts).
   ========================================================= */

/* Rounder, softer geometry across cards on this page only */
.baunatal-page .service-card,
.baunatal-page .price-card,
.baunatal-page .stat,
.baunatal-page .testimonial,
.baunatal-page .pillar-card {
  border-radius: 20px;
}

/* Distinct hero backdrop: diagonal ribbon instead of the
   radial-dot pattern used on the other location pages */
.baunatal-page .hero.hero-solo {
  background:
    linear-gradient(115deg, rgba(239,73,51,.10) 0%, transparent 32%),
    linear-gradient(245deg, rgba(6,17,34,.05) 0%, transparent 40%),
    linear-gradient(180deg, #fff 0%, #fbfaf6 100%);
}
.baunatal-page .hero.hero-solo .hero-bg {
  background-image:
    linear-gradient(90deg, rgba(239,73,51,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(239,73,51,.10) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(65% 55% at 50% 35%, #000 30%, transparent 78%);
  opacity: .6;
}

/* Section eyebrows: pill-with-dot instead of plain text chip */
.baunatal-page .eyebrow.alt {
  border: 1px solid rgba(239,73,51,.25);
}

/* Service cards: colored top accent bar instead of the
   sliding underline used elsewhere */
.baunatal-page .service-card {
  border-top: 3px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.baunatal-page .service-card::before { display: none; }
.baunatal-page .service-card:hover {
  border-top-color: var(--primary);
}

/* Stat cards: icon-forward, gradient tile */
.baunatal-page .stat {
  background: linear-gradient(160deg, #fff, var(--c-bg-alt));
}

/* Price card featured ribbon in a rounder pill, offset */
.baunatal-page .price-card.featured {
  border-radius: 24px;
}

/* FAQ items: rounder, slightly larger radius to match cards */
.baunatal-page .faq-item {
  border-radius: 18px;
}

/* Pillars: rounder to match the rest of the page */
.baunatal-page .pillar-card { border-radius: 20px; }
.baunatal-page .pillar-icon { border-radius: 16px; }

/* ---------- Pricing CTA: muted text link on non-featured
   cards (only the featured plan gets a solid button) ---------- */
.price-link {
  display: block;
  text-align: center;
  padding: .85rem 1rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-muted);
  transition: color .2s ease;
}
.price-link:hover { color: var(--primary-hover); }

/* Featured pricing card: crisp red border + soft glow,
   matching the reference design exactly */
.baunatal-page .price-card.featured {
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 1px rgba(239,73,51,.08), var(--shadow-glow);
}