/**
 * Trygghetspaket block — audience bullet lists (tenant / landlord).
 *
 * Markup: Views/Shared/Partials/_SafetyPackageBlock.cshtml, used on the start
 * page and the listing page. The feature cards and section head come from
 * shared components (_feature-card.css, _section.css).
 */

.safety-audiences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

.safety-audiences h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 var(--s-2);
  color: var(--text-primary);
}

.safety-audiences ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}

.safety-audiences li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  color: var(--sam-brown-dark);
}

.safety-audiences li::before {
  content: "✓";
  color: var(--sam-confirmation);
  font-weight: 700;
}

@media (max-width: 640px) {
  .safety-audiences {
    grid-template-columns: 1fr;
  }
}

/**
 * Trygghetspaketet page — Views/Home/SafetyPackage.cshtml.
 *
 * Landlord and tenant cards side by side, shared cards below. The cards are
 * .faq-item disclosures (_faq.css); this only lays them out.
 */

.safety-page__title {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
}

.safety-page__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  align-items: start;
}

.safety-page__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.safety-page__column .faq-list {
  width: 100%;
}

.safety-page__cta {
  margin-top: var(--s-4);
}

.safety-page__shared {
  margin-top: var(--s-7);
}

.safety-page__shared-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* The mini carousel takes the hero's full width instead of shrinking to its
   fallback link. */
.safety-page__reviews .tp-widget {
  display: block;
  min-height: 350px;
}

@media (max-width: 768px) {
  .safety-page__columns,
  .safety-page__shared-list {
    grid-template-columns: 1fr;
  }

  .safety-page__shared {
    margin-top: var(--s-6);
  }
}