/* ════════════════════════════════════════════════════════════════════════════
   REAL-ESTATE-DIRECTORY.CSS
   RealSEOLife.com ... /best/real-estate-seo/

   Only what the directory needs on top of archive.css and case-study.css.
   Loaded last by templates/directory-category.php and directory-listing.php,
   so it can override the shared hero eyebrow without touching the archive,
   tag or category pages that also use that class.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero eyebrow ──────────────────────────────────────────────────────────
   This is the page H1 and the stable keyword line, so it has to read as the
   top of the page rather than as one more section label. Gold like the
   section eyebrows, in the same mono family, but set larger than the 0.7rem
   those use so the hierarchy is obvious at a glance.
   ───────────────────────────────────────────────────────────────────────── */
.dir-hero__eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gold-primary);
}

@media (max-width: 768px) {
  .dir-hero__eyebrow {
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
  }
}

/* ── How the count was made ────────────────────────────────────────────────
   The method section on the state and vertical pages. It is the proof of the
   directory's own argument, so it gets a gold rule rather than sitting as
   another run of body copy.
   ───────────────────────────────────────────────────────────────────────── */
.dir-method {
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold-primary);
}

.dir-method p {
  margin-bottom: var(--space-4);
}

.dir-method p:last-child {
  margin-bottom: 0;
}

.dir-method__close {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: 1.45;
  color: var(--ink-primary);
}

/* ── Section eyebrows ──────────────────────────────────────────────────────
   Bumped from the shared 0.7rem to 1.125rem and moved off gold onto the
   site's blue accent, so the section labels read as navigation through a long
   page rather than as fine print. Scoped to the directory on purpose: the same
   class is used by case studies, which were not part of this change.

   The hero eyebrow moves up with them so it stays the largest label on the
   page. That hierarchy is the whole reason it is the H1.
   ───────────────────────────────────────────────────────────────────────── */
.dir-hero__eyebrow {
  font-size: 1.5rem;
}

.page-content .case-detail-section__eyebrow {
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--color-accent-blue);
}

@media (max-width: 768px) {
  .dir-hero__eyebrow {
    font-size: 1.125rem;
  }

  .page-content .case-detail-section__eyebrow {
    font-size: 0.9375rem;
  }
}

/* ── Next step ─────────────────────────────────────────────────────────────
   The three checkers this portfolio already runs. They answer the question the
   method section raises, so they sit directly under it rather than in a footer
   band.
   ───────────────────────────────────────────────────────────────────────── */
.dir-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.dir-tool {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-blue);
}

.dir-tool__name {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: 1.25;
  color: var(--ink-primary);
}

.dir-tool__name:hover {
  color: var(--color-accent-blue);
}

.dir-tool__what {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

.dir-tools__close {
  margin-top: var(--space-6);
  font-size: var(--text-base);
  color: var(--ink-secondary);
}

/* ── Opening lede ──────────────────────────────────────────────────────────
   The first paragraphs of a directory page make the actual argument, so they
   get the site's editorial excerpt treatment rather than body styling: display
   face, italic, gold rule down the side.

   Deliberately a size below .page-header__lead, which carries the dek directly
   above it. Matching that size would put two identical blocks back to back and
   neither would read as the more important one.
   ───────────────────────────────────────────────────────────────────────── */
.dir-lede {
  max-width: 48rem;
  margin-bottom: var(--space-10);
  padding: var(--space-6) var(--space-7) var(--space-6) var(--space-6);
  border-left: 3px solid var(--gold-primary);
  border-radius: 0 6px 6px 0;
  /* A wash rather than a filled box: the gold tint sits against the rule and
     falls away to the page, so the block reads as emphasis instead of as a
     callout competing with the gold callouts further down. */
  background: linear-gradient(
    100deg,
    var(--glow-gold) 0%,
    rgba(201, 168, 76, 0.05) 42%,
    rgba(255, 255, 255, 0) 88%
  );
}

.dir-lede p {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}

.dir-lede p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .dir-lede {
    padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);
  }

  .dir-lede p {
    font-size: 1.375rem;
    line-height: 1.45;
  }
}