/* ==========================================================================
   company-detail.css — company profile page
   Markup: frontend/views/company/view.php
   Notes:  rating-display logic (ratingAvg/ratingCount) and CTA hrefs are
   untouched — this only replaces inline styles with classes.
   ========================================================================== */

.otzivi-company-card {
  background: var(--otzivi-surface);
  border: 1px solid var(--otzivi-border);
  border-radius: var(--otzivi-radius-lg);
  box-shadow: var(--otzivi-shadow-md);
  padding: var(--otzivi-space-32);
}

.otzivi-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--otzivi-space-8);
}
.otzivi-rating-count {
  color: var(--otzivi-text-muted);
}
.otzivi-rating-row .stars {
  margin-top: 0 !important;
}
/* .star uses a raw ⭐ emoji glyph, not a font-icon — emoji ignore the CSS
   `color` property entirely (always renders in its own built-in color), so
   a color-only filled/empty distinction is invisible. `filter` does affect
   emoji rendering; dim the empty stars with it instead. */
.otzivi-rating-row .star.empty { filter: grayscale(1) opacity(.4); }

.otzivi-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otzivi-space-12);
  margin-top: var(--otzivi-space-24);
}

.otzivi-info-list p {
  color: var(--otzivi-text);
  margin-bottom: var(--otzivi-space-8);
}
.otzivi-info-list strong {
  color: var(--otzivi-text-muted);
  font-weight: var(--otzivi-fw-semibold);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .otzivi-company-card { padding: var(--otzivi-space-16); }
  .otzivi-cta-row { flex-direction: column; align-items: stretch; }
  .otzivi-cta-row .btn-otzivi-primary,
  .otzivi-cta-row .btn-otzivi-secondary,
  .otzivi-cta-row .btn-otzivi-link { width: 100%; text-align: center; }
}