/* ============================================================================
   static/css/home.css
   ========================================================================== */
/* ============================================================================
   HOME.CSS
   Homepage panels and benefit tiles.
   ========================================================================== */

.content-area { padding: 8px 10px 12px; }

.hero {
  display: grid;
  grid-template-columns: 1fr; /* full-width single card */
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.hero .panel {
  padding: 20px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-2);
}

.hero h1 { margin: 0 0 8px 0; font-size: clamp(22px, 3.2vw, 32px); color: var(--color-primary); }
.hero p { margin: 0; color: var(--color-text-dim); }

.actions { display:flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Benefits row */
.benefits {
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; margin-top: 16px;
}
.benefit {
  padding: 14px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid #edf0f6;
  display:flex; gap:10px; align-items:flex-start;
}
.benefit .icon { color: var(--color-secondary); }

/* Example info card */
.tiles { display:grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.tile { padding: 16px; border-radius: var(--radius-lg); background: #fff; border: 1px solid #edf0f6; }

@media (max-width: 1040px) {
  .benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .benefits { grid-template-columns: 1fr; }
}