/* ==========================================================================
   SHARED EDITORIAL PATTERNS — Inner Pages Reframe
   --------------------------------------------------------------------------
   Append to src/app/globals.css (or whichever file already holds shared
   styles). These classes give every inner page the same editorial language
   as the homepage's "How It Works" and "Our Promise to You" sections.

   Hard rules:
     - No bordered rectangles. No cards. No drop shadows.
     - Champagne gold #C6A96C only for accents (eyebrows, rules, display
       numerals, "Explore →", primary CTA fill).
     - Cormorant Garamond for display / italic pull quotes.
     - Montserrat for small caps, labels, body utility.
     - All vertical rhythm is whitespace, not chrome.
   ========================================================================== */


/* -- Typography primitives ------------------------------------------------- */

.ed-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold, #C6A96C);
  margin: 0 0 1.25rem;
}

.ed-display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--cream, #F5F0E8);
  margin: 0;
}

.ed-display--xl  { font-size: clamp(2.25rem, 4.4vw, 4rem);   line-height: 1.22; }
.ed-display--lg  { font-size: clamp(2rem,    3.8vw, 3.5rem); line-height: 1.2;  }
.ed-display--md  { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.22; }

.ed-display em,
.ed-display i {
  font-style: italic;
  font-weight: 400;
  color: var(--gold, #C6A96C);
}

.ed-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--cream, #F5F0E8);
  opacity: 0.82;
  max-width: 52ch;
  margin: 0;
}

.ed-smallcaps {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #C6A96C);
}

/* Hairline rule — the only divider we use, everywhere. */
.ed-rule {
  border: 0;
  height: 1px;
  background: rgba(198, 169, 108, 0.25);
  margin: 0;
  width: 100%;
}

/* -- Editorial hero (shared by localized + location + attorneys + results) -- */

.editorial-hero {
  padding: clamp(6rem, 12vw, 10rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
  text-align: center;
}

.editorial-hero__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Italic Cormorant descenders need real vertical separation under display
   headlines in a hero — flex gap alone isn't enough. */
.editorial-hero__inner .ed-display {
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.editorial-hero__cta-row {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.editorial-hero__cta-secondary {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream, #F5F0E8);
  opacity: 0.7;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 240, 232, 0.25);
  padding-bottom: 0.35rem;
  transition: opacity .25s ease, border-color .25s ease;
}

.editorial-hero__cta-secondary:hover {
  opacity: 1;
  border-color: var(--gold, #C6A96C);
}

/* Left-aligned hero variant (used on location pages w/ portrait) */
.editorial-hero--left { text-align: left; }
.editorial-hero--left .editorial-hero__inner { align-items: flex-start; }
.editorial-hero--left .editorial-hero__cta-row { justify-content: flex-start; }

/* -- Editorial index rows (practice-areas hub + location pages) ----------- */

.editorial-index {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(198, 169, 108, 0.18);
}

.editorial-index-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(2rem, 3.5vw, 3.25rem) 0;
  border-bottom: 1px solid rgba(198, 169, 108, 0.18);
  color: var(--cream, #F5F0E8);
  text-decoration: none;
  transition: padding-left .35s ease, color .35s ease;
}

.editorial-index-row:hover {
  padding-left: 1.25rem;
  color: var(--gold-light, #D6BC82);
}

.editorial-index-row__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--gold, #C6A96C);
  padding-top: 0.9rem;
}

.editorial-index-row__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.05;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}

.editorial-index-row__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream, #F5F0E8);
  opacity: 0.65;
  max-width: 58ch;
  margin: 0;
}

.editorial-index-row__cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #C6A96C);
  white-space: nowrap;
  align-self: center;
  transition: transform .35s ease;
}

.editorial-index-row:hover .editorial-index-row__cta { transform: translateX(6px); }

@media (max-width: 720px) {
  .editorial-index-row {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .editorial-index-row__cta { justify-self: flex-start; }
  .editorial-index-row__num { padding-top: 0; }
}

/* -- Inline italic TOC (localized practice-area pages) -------------------- */

.editorial-toc-inline {
  /* Override bare `nav` selector (position: fixed; top:0; …) in page
     inline styles — without these resets the TOC gets pinned to the
     viewport top, overlapping the global navigation bar. */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  display: block;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: transparent;
  border-bottom: none;

  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 2.1;
  color: var(--cream, #F5F0E8);
  opacity: 0.85;
}

.editorial-toc-inline__label {
  display: block;
  margin-bottom: 1.25rem;
}

.editorial-toc-inline a {
  color: var(--cream, #F5F0E8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.editorial-toc-inline a:hover {
  color: var(--gold, #C6A96C);
  border-color: var(--gold, #C6A96C);
}

.editorial-toc-inline__sep {
  color: var(--gold, #C6A96C);
  margin: 0 0.6rem;
  font-style: normal;
}

/* -- Sticky minimal TOC (optional variant for long-form pages) ------------ */

.editorial-toc-sticky {
  position: sticky;
  top: 72px;
  z-index: 5;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198, 169, 108, 0.18);
  border-bottom: 1px solid rgba(198, 169, 108, 0.18);
}

.editorial-toc-sticky__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem clamp(1.5rem, 4vw, 3rem);
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}

.editorial-toc-sticky__inner::-webkit-scrollbar { display: none; }

.editorial-toc-sticky__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #C6A96C);
  white-space: nowrap;
  padding-right: 0.5rem;
}

.editorial-toc-sticky a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--cream, #F5F0E8);
  opacity: 0.65;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .25s ease, color .25s ease;
}

.editorial-toc-sticky a:hover,
.editorial-toc-sticky a[aria-current="true"] {
  opacity: 1;
  color: var(--gold, #C6A96C);
}

/* -- Location chip selector (replaces floating dropdown) ------------------ */

.editorial-location-select {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  justify-content: center;
  align-items: baseline;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream, #F5F0E8);
  opacity: 0.85;
}

.editorial-location-select__label {
  opacity: 0.55;
  padding-right: 0.5rem;
}

.editorial-location-select__chip {
  padding: 0.45rem 0.9rem;
  color: var(--cream, #F5F0E8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color .25s ease, border-color .25s ease;
}

.editorial-location-select__chip:hover {
  color: var(--gold, #C6A96C);
}

.editorial-location-select__chip[aria-pressed="true"] {
  color: var(--gold, #C6A96C);
  border-bottom-color: var(--gold, #C6A96C);
}

/* -- Attorneys magazine spread -------------------------------------------- */

.attorney-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 85vh;
  align-items: stretch;
}

.attorney-spread--reverse { direction: rtl; }
.attorney-spread--reverse > * { direction: ltr; }

.attorney-spread__portrait {
  position: relative;
  background: #111;
  overflow: hidden;
}

.attorney-spread__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  display: block;
}

.attorney-spread__portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  background:
    repeating-linear-gradient(
      135deg,
      #121212,
      #121212 14px,
      #0f0f0f 14px,
      #0f0f0f 28px
    );
  color: rgba(245, 240, 232, 0.55);
  text-align: center;
  padding: 2rem;
  font-family: 'Montserrat', sans-serif;
}

.attorney-spread__portrait--placeholder .ed-smallcaps {
  color: var(--gold, #C6A96C);
  opacity: 0.8;
}

.attorney-spread__portrait--placeholder .note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  max-width: 22ch;
  line-height: 1.4;
}

.attorney-spread__content {
  padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  max-width: 640px;
}

.attorney-spread__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold, #C6A96C);
  margin: 0;
}

.attorney-spread__quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.3;
  color: var(--cream, #F5F0E8);
  border-left: 1px solid var(--gold, #C6A96C);
  padding-left: 1.25rem;
  margin: 0.5rem 0 0.5rem;
}

.attorney-spread__bio p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cream, #F5F0E8);
  opacity: 0.78;
  margin: 0 0 1rem;
}

.attorney-spread__credentials {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(198, 169, 108, 0.25);
  display: grid;
  gap: 0.9rem;
}

.attorney-spread__credential {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  align-items: baseline;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
}

.attorney-spread__credential dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #C6A96C);
  opacity: 0.9;
}

.attorney-spread__credential dd {
  margin: 0;
  color: var(--cream, #F5F0E8);
  opacity: 0.78;
}

@media (max-width: 900px) {
  .attorney-spread,
  .attorney-spread--reverse { grid-template-columns: 1fr; direction: ltr; min-height: 0; }
  .attorney-spread__portrait { aspect-ratio: 4 / 5; }
  .attorney-spread__credential { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* -- Case narrative rows (results page) ----------------------------------- */

.case-narrative-list {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(198, 169, 108, 0.18);
}

.case-narrative-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) 2.2fr auto;
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: baseline;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid rgba(198, 169, 108, 0.18);
}

.case-narrative-row__amount {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(3rem, 5.5vw, 5rem);
  line-height: 0.95;
  color: var(--gold, #C6A96C);
  letter-spacing: -0.02em;
  margin: 0;
}

.case-narrative-row__story {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--cream, #F5F0E8);
  opacity: 0.88;
  margin: 0;
  max-width: 48ch;
}

.case-narrative-row__tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream, #F5F0E8);
  opacity: 0.55;
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 820px) {
  .case-narrative-row {
    grid-template-columns: 1fr;
    row-gap: 0.9rem;
  }
  .case-narrative-row__tag { justify-self: flex-start; }
}

/* -- Primary CTA (gold pill) — already exists as .btn, alias for clarity -- */
.ed-btn-primary {
  display: inline-block;
  padding: 1rem 2.25rem;
  background: var(--gold, #C6A96C);
  color: #0A0A0A;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}
.ed-btn-primary:hover {
  background: var(--gold-light, #D6BC82);
  transform: translateY(-2px);
}