/* ============================================================
   HOMEPAGE — loaded only on "/"
   ============================================================ */

/* ---- Hero ---- */
.pe-hero {
  background: var(--gradient-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-10) var(--space-8);
  text-align: center;
}
.pe-hero__inner { max-width: 720px; }
.pe-hero__eyebrow {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.pe-hero__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) { .pe-hero__title { font-size: 3.25rem; } }

.pe-hero__subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.pe-hero__search { position: relative; max-width: 560px; margin-inline: auto; }
.pe-hero__search-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--shadow-md);
  color: var(--color-text-faint);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.pe-hero__search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg), var(--shadow-focus);
}
.pe-hero__search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--text-md);
  color: var(--color-text);
  background: transparent;
}
.pe-hero__search-box kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
}
.pe-hero__search-results { text-align: left; top: calc(100% + 10px); }

.pe-hero__popular {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.pe-hero__popular span { color: var(--color-text-faint); }
.pe-hero__popular a {
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
}
.pe-hero__popular a:hover { color: var(--color-primary); border-color: var(--color-primary); text-decoration: none; }

/* ---- Section header (title + optional "view all" link) ---- */
.pe-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.pe-section__header h2 { margin: 0; }
.pe-section__link { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }

/* ---- Category bento ---- */
.pe-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) { .pe-bento { grid-template-columns: repeat(4, 1fr); } }

.pe-bento__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--color-text);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.pe-bento__tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-border-strong); text-decoration: none; }
.pe-bento__tile--wide { grid-column: span 2; }

.pe-bento__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.pe-bento__name { font-weight: var(--weight-semibold); }
.pe-bento__count { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---- Why Pinedit + stats ---- */
.pe-why { background: var(--color-surface); border-block: 1px solid var(--color-border); padding-block: var(--space-8); }
.pe-why__inner { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .pe-why__inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.pe-why__copy h2 { margin-top: 0; }
.pe-why__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pe-why__list li { color: var(--color-text-muted); }
.pe-why__list strong { color: var(--color-text); }

.pe-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pe-stats__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-3);
  text-align: center;
}
.pe-stats__number {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pe-stats__label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Newsletter band ---- */
.pe-newsletter-band { background: var(--gradient-brand); color: #fff; padding-block: var(--space-8); margin-top: var(--space-8); }
.pe-newsletter-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}
@media (min-width: 768px) { .pe-newsletter-band__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.pe-newsletter-band h2 { margin: 0 0 var(--space-1); color: #fff; }
.pe-newsletter-band .pe-muted { color: rgba(255, 255, 255, 0.85); }
.pe-newsletter-band .pe-newsletter-form { min-width: 320px; }
.pe-newsletter-band .pe-input { border: none; }