/* =====================================================
   PAGE STYLES (KI Website Builder KMU)
   Purpose: page-specific layout tweaks only.
   No global component styling here (cards/buttons/table base).
===================================================== */

.page-kicker{
  margin: 0 0 8px;
}

/* Trust strip */
.trust-strip{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: -10px;
  padding: 0 0 24px;
}

.trust-item{
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 12px;
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  font-size: 0.95rem;
  padding: 10px 12px;
  text-align: center;
}

/* Fallback if color-mix unsupported */
@supports not (color: color-mix(in srgb, white 50%, black)){
  .trust-item{
    border-color: rgba(37,99,235,.28);
    color: #1e3a8a;
  }
  body[data-theme="dark"] .trust-item{
    border-color: rgba(59,130,246,.35);
    color: rgba(255,255,255,.88);
  }
}

/* SEO intro */
.seo-intro p{
  margin-bottom: 14px;
}

/* Align page grids with global .grid spacing */
.quick-grid,
.links-grid{
  padding-top: 0;
}

/* Table wrapper (page-specific) */
.table-wrap{
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

/* Ensure table stays readable (forces horizontal scroll when needed) */
.table-wrap table{
  min-width: 980px;
}

/* Sticky header inside the scroll container (desktop only) */
@media (min-width: 992px){
  .table-wrap thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: inset 0 -1px 0 var(--border);
  }
}

/* Mini reviews layout */
.mini-reviews{
  display: grid;
  gap: 16px;
}

.review-card{
  padding: 18px;
}

.review-card h2,
.review-card h3{
  margin-top: 0;
}

/* Editor recommendation box (page highlight) */
.reco-box{
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: var(--accent-soft);
  padding: 18px;
}

/* Fallback for older browsers */
@supports not (color: color-mix(in srgb, white 50%, black)){
  .reco-box{
    border-color: rgba(37,99,235,.30);
  }
  body[data-theme="dark"] .reco-box{
    border-color: rgba(59,130,246,.35);
  }
}

@media (max-width: 900px){
  .trust-strip{
    grid-template-columns: 1fr;
  }
}