/* ============================================================
   STAV — Components & utilities / רכיבים ושירותים
   כאן ייכנסו רכיבים וסגנונות ספציפיים שייבנו לפי ה-Figma.
   ============================================================ */

/* ---------- שירותים / Utilities ---------- */
.text-center { text-align: center; }
.flow > * + * { margin-block-start: var(--space-md); }

/* ---------- אפקט כניסה בגלילה / Scroll reveal ----------
   מוחל על סקשני תוכן (לא ה-hero) בכל העמודים — ראה main.js.
   ה-.js גם קובע: בלי JS (או כשה-script חסום), התוכן פשוט גלוי — אין FOUC. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .js .reveal.is-inview { opacity: 1; transform: none; }
}

/* ---------- כותרת עמוד / Page header ---------- */
.page-header { padding-block: var(--space-2xl) var(--space-lg); }
.page-header__title { margin-block-end: var(--space-sm); }
.entry-meta { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- תוכן / Entry content ---------- */
.entry-content > * + * { margin-block-start: var(--space-md); }
.entry-content h2,
.entry-content h3 { margin-block-start: var(--space-xl); }
.page-thumbnail { margin-block-end: var(--space-xl); border-radius: var(--radius-lg); overflow: hidden; }

/* ---------- רשת פוסטים / Posts grid ---------- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.post-card:hover { box-shadow: var(--shadow-md); }
.post-card__thumb img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
.post-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.post-card__title { font-size: var(--text-xl); }
.post-card__title a { color: var(--color-text); }
.post-card__title a:hover { color: var(--color-accent); }

/* ---------- טופס חיפוש / Search form ---------- */
.search-form {
  display: flex;
  gap: var(--space-xs);
  max-width: 480px;
  margin-inline: auto;
}
.search-field {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ---------- אין תוצאות / No results ---------- */
.no-results {
  text-align: center;
  padding-block: var(--space-3xl);
}
.no-results .search-form { margin-block-start: var(--space-lg); }