/* ============================================================
   EAGLES PHOTOGRAPHY — INSIGHTS PAGE CSS
   Combined Blog + FAQ page: centered hero, Blog/FAQ toggle tabs,
   show/hide panels. Blog grid styles come from blog.css and the
   FAQ accordion from components.css + faq.css.
   ============================================================ */

.ep-insights-hero {
  padding: 80px var(--content-pad) 0;
  background: var(--color-bg);
  text-align: center;
}

.ep-insights-hero .ep-label-row {
  justify-content: center;
}

.ep-insights-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  line-height: var(--lh-display);
  color: var(--color-ink);
  margin-top: 8px;
}

.ep-insights-hero__sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-width: 560px;
  margin: 16px auto 0;
}

/* ============================================================
   BLOG / FAQ TOGGLE TABS
   Active: dark bg + cream text · Inactive: cream bg + border
   ============================================================ */
.ep-insights-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 40px 0 8px;
  padding: 0 var(--content-pad);
}

.ep-insights-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-pill);
  padding: 13px 40px;
  cursor: none;
  transition:
    background var(--dur-base) ease,
    color var(--dur-base) ease,
    border-color var(--dur-base) ease;
}

.ep-insights-tab:hover {
  border-color: var(--color-ink);
}

.ep-insights-tab.is-active {
  background: var(--color-ink);
  color: var(--color-dark-text);
  border-color: var(--color-ink);
}

@media (hover: none), (pointer: coarse) {
  .ep-insights-tab { cursor: pointer; }
}

/* ============================================================
   PANELS
   ============================================================ */
.ep-insights-panel { padding-bottom: 40px; }
.ep-insights-panel[hidden] { display: none; }

/* Tighten the reused blog featured top padding under the tabs */
.ep-insights-panel[data-panel="blog"] .ep-blog-featured-wrap {
  padding-top: 24px;
}

/* FAQ CTA sits inside the panel — keep its top margin reasonable */
.ep-insights-panel[data-panel="faq"] .ep-faq-cta {
  margin-top: 80px;
}

@media (max-width: 768px) {
  .ep-insights-tabs { gap: 10px; }
  .ep-insights-tab { padding: 12px 32px; }
}