/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — LOCAL PAGES (dentist-beirut.html, dentist-achrafieh.html)
   Loaded after blog.css and contact-us.css on body.v2.tx.blog, so it uses the
   same tokens (--tx-*) and borrows the contact page's hours list, map and
   "ways to reach us" cards (.ct-*). Everything new is scoped to .lc.
   ══════════════════════════════════════════════════════════════════════════ */

.blog .lc { padding-bottom: clamp(60px, 8vw, 110px); }
.blog .lc .ba-lede a { border-bottom: 1px solid var(--tx-champ); transition: color .3s; }
.blog .lc .ba-lede a:hover { color: var(--tx-champ); }
.blog .lc-sec { margin-top: clamp(64px, 9vw, 130px); }
.blog .lc-intro { margin-top: 18px; max-width: 620px; font: 400 16px/1.7 Inter, Arial, sans-serif; color: var(--tx-soft); text-wrap: pretty; }

/* ── four facts under the title ─────────────────────────────────────────── */
.blog .lc-facts {
  margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--tx-line); border-bottom: 1px solid var(--tx-line);
}
.blog .lc-facts > div { padding: 24px 24px 26px 0; display: grid; align-content: start; gap: 8px; }
.blog .lc-facts > div + div { padding-left: 24px; border-left: 1px solid var(--tx-line); }
.blog .lc-facts dt { font: 500 11px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-champ); }
.blog .lc-facts dd { margin: 0; font: 500 clamp(19px, 1.7vw, 24px)/1.25 var(--serif); letter-spacing: -.01em; }
.blog .lc-facts dd small { display: block; margin-top: 4px; font: 400 14px/1.5 Inter, Arial, sans-serif; letter-spacing: 0; color: var(--tx-soft); }
.blog .lc-facts a { transition: color .3s; }
.blog .lc-facts a:hover { color: var(--tx-champ); }

/* ── treatments ─────────────────────────────────────────────────────────── */
.blog .lc-tx { margin: 34px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.blog .lc-tx li { border-top: 1px solid var(--tx-line); }
.blog .lc-tx li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--tx-line); }
.blog .lc-tx a { position: relative; display: grid; gap: 8px; padding: 24px 44px 28px 0; }
.blog .lc-tx__t { font: 500 clamp(24px, 2.3vw, 32px)/1.1 var(--serif); letter-spacing: -.02em; transition: color .4s var(--tx-ease); }
.blog .lc-tx__n { font: 400 15px/1.6 Inter, Arial, sans-serif; color: var(--tx-soft); text-wrap: pretty; }
.blog .lc-tx a::after {
  content: "→"; position: absolute; right: 0; top: 26px; font: 400 20px/1 Inter, sans-serif; color: var(--tx-soft);
  transition: transform .6s var(--tx-ease), color .4s var(--tx-ease);
}
.blog .lc-tx a:hover .lc-tx__t { color: var(--tx-champ); }
.blog .lc-tx a:hover::after { transform: translateX(6px); color: var(--tx-champ); }
.blog .lc-tx a:focus-visible { outline: 2px solid var(--tx-champ); outline-offset: -2px; }
.blog .lc-all { margin-top: 30px; }

/* ── the first visit, in four steps ─────────────────────────────────────── */
.blog .lc-steps { margin: 34px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px); counter-reset: lc; }
.blog .lc-steps li { counter-increment: lc; padding-top: 22px; border-top: 1px solid var(--tx-line); display: grid; align-content: start; gap: 10px; }
.blog .lc-steps li::before { content: counter(lc, decimal-leading-zero); font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--tx-champ); }
.blog .lc-steps h3 { font: 500 clamp(22px, 2vw, 28px)/1.1 var(--serif); letter-spacing: -.015em; }
.blog .lc-steps p { font: 400 15px/1.65 Inter, Arial, sans-serif; color: var(--tx-soft); text-wrap: pretty; }

/* ── the dentists ───────────────────────────────────────────────────────── */
.blog .lc-docs { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.blog .lc-doc { padding: 24px 0 28px; border-top: 1px solid var(--tx-line); border-bottom: 1px solid var(--tx-line); display: grid; gap: 8px; align-content: start; }
.blog .lc-doc__k { font: 500 11px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-champ); }
.blog .lc-doc__n { font: 500 clamp(26px, 2.5vw, 36px)/1.1 var(--serif); letter-spacing: -.02em; transition: color .4s var(--tx-ease); }
.blog .lc-doc__t { font: 400 15px/1.6 Inter, Arial, sans-serif; color: var(--tx-soft); }
.blog a.lc-doc:hover .lc-doc__n { color: var(--tx-champ); }

/* ── where to find us (the Beirut page's short version) ─────────────────── */
.blog .lc-where { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.blog .lc-where address { font: 400 clamp(20px, 1.8vw, 26px)/1.5 var(--serif); font-style: normal; }
.blog .lc-where__links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.blog .lc-where .ct-hours__list { margin-top: 0; }

/* ── arriving at the clinic (the Achrafieh page) ────────────────────────── */
.blog .lc-arrive { margin-top: 30px; padding: 0; list-style: none; border-top: 1px solid var(--tx-line); }
.blog .lc-arrive li { padding: 18px 0; border-bottom: 1px solid var(--tx-line); font: 500 clamp(20px, 1.8vw, 25px)/1.25 var(--serif); letter-spacing: -.01em; }
.blog .lc-arrive li small { display: block; margin-top: 6px; font: 400 15px/1.6 Inter, Arial, sans-serif; letter-spacing: 0; color: var(--tx-soft); }
.blog .lc-arrive + .txlink { display: inline-block; margin-top: 26px; }

/* ── questions ──────────────────────────────────────────────────────────── */
.blog .lc-faq { margin-top: 30px; border-top: 1px solid var(--tx-line); }
.blog .lc-faq details { border-bottom: 1px solid var(--tx-line); }
.blog .lc-faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 24px; cursor: pointer; list-style: none;
  padding: 26px 0; font: 500 clamp(21px, 1.9vw, 27px)/1.25 var(--serif); letter-spacing: -.015em; transition: color .3s;
}
.blog .lc-faq summary::-webkit-details-marker { display: none; }
.blog .lc-faq summary:hover { color: var(--tx-champ); }
.blog .lc-faq summary:focus-visible { outline: 2px solid var(--tx-champ); outline-offset: 2px; }
.blog .lc-faq summary i { position: relative; width: 16px; height: 16px; justify-self: end; }
.blog .lc-faq summary i::before, .blog .lc-faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tx-ink); transition: transform .6s var(--tx-ease); }
.blog .lc-faq summary i::after { transform: rotate(90deg); }
.blog .lc-faq details[open] summary i::after { transform: rotate(0deg); }
.blog .lc-faq details p { padding: 0 44px 28px 0; max-width: 760px; font: 400 16px/1.75 Inter, Arial, sans-serif; color: var(--tx-soft); text-wrap: pretty; }

/* ── further reading ────────────────────────────────────────────────────── */
.blog .lc-more { margin-top: clamp(44px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 14px 34px; }

@media (max-width: 1000px) {
  .blog .lc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog .lc-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .blog .lc-facts > div:nth-child(n + 3) { border-top: 1px solid var(--tx-line); }
  .blog .lc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .blog .lc-where { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .blog .lc-facts { grid-template-columns: minmax(0, 1fr); }
  .blog .lc-facts > div, .blog .lc-facts > div + div { padding-left: 0; border-left: 0; }
  .blog .lc-facts > div + div { border-top: 1px solid var(--tx-line); }
  .blog .lc-tx, .blog .lc-docs, .blog .lc-steps { grid-template-columns: minmax(0, 1fr); }
  .blog .lc-tx li:nth-last-child(2) { border-bottom: 0; }
  .blog .lc-doc + .lc-doc { border-top: 0; }
  .blog .lc-faq details p { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog .lc-tx a::after, .blog .lc-tx__t, .blog .lc-faq summary i::before, .blog .lc-faq summary i::after { transition: none; }
}