/*
 * blog-single-rail.css — Toro Legal Marketing
 * Figma node: 383:1234 (left rail of article)
 *
 * Sticky left rail on desktop. Hidden on mobile (bottom dock takes
 * over — see preview-blog-single.html for the mobile UI).
 *
 * Layout:
 *   - 299px wide on desktop, 48px vertical gap between sections.
 *   - sticky top: 152px (clears navbar @ 100px + 52px breathing).
 *   - No internal scroll: rail scrolls with the page. A scrollbar
 *     down the rail looks ugly and we don't need it (TOC is short).
 *
 * Class boundary: the parent .blog-single-layout (in body.css) owns
 * the 2-column grid; this file only styles the rail's internal blocks.
 */

.blog-single-rail {
  display: none;        /* hidden on mobile — bottom dock takes over */
}

/* ============================================
 * Desktop (≥1024px) — sticky rail
 * ============================================ */

@media (min-width: 1024px) {
  .blog-single-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    width: 299px;
    flex-shrink: 0;
    /* Rail itself is NOT sticky — author block scrolls with article.
       Only the .blog-single-rail__toc block sticks (rule below). */
  }

  /* The TOC + Subscribe CTA stick together. (Was on __toc alone; moved
     up a level so the Subscribe button travels with the TOC.) */
  .blog-single-rail__sticky {
    position: sticky;
    /* Clears navbar (100px) + breathing. Same anchor used elsewhere. */
    top: 152px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    align-items: flex-start;
  }
}

/* Subscribe CTA at the foot of the rail — navy pill + email icon,
   matching the insights-index Subscribe button. align-items:flex-start
   on the sticky column keeps it sized to its content, not full width. */
.blog-single-rail__subscribe {
  gap: var(--space-2xs);
  padding-block: 14px;
}

.blog-single-rail__subscribe-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.blog-single-rail__subscribe-icon svg {
  width: 1.125em;
  height: 1.125em;
}

/* ============================================
 * Section dividers
 * ============================================ */

.blog-single-rail__divider {
  height: 1px;
  background: var(--color-navy-divider);
  width: 100%;
}

/* ============================================
 * Eyebrows (shared)
 * ============================================ */

.blog-single-rail__eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  /* Eyebrows stay uppercase across the site — consistent with chrome. */
  font-size: var(--text-sm);
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 0 0 var(--space-lg) 0;
}

/* ============================================
 * Author mini-card
 * ============================================ */

.blog-single-rail__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-single-rail__author-label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
  margin: 0;
}

.blog-single-rail__author-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.blog-single-rail__avatar {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy-faint);
  overflow: hidden;
}

.blog-single-rail__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-single-rail__author-text {
  display: flex;
  flex-direction: column;
}

.blog-single-rail__author-name {
  font-family: var(--font-serif);
  /* 24px — author-name standard (desktop value). The rail is
     desktop-only (hidden < 1024), so the mobile 20 never applies here. */
  font-size: var(--text-2xl);           /* 24px Halant */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  margin: 0;
}

/* .blog-single-rail__author-link: inherits the canonical link style
   from base.css (navy → 70%-navy hover + underline). No override
   needed beyond colour inheritance for the Halant 20 name. */
.blog-single-rail__author-link {
  color: inherit;
}

.blog-single-rail__author-role {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  margin: 0;
}

/* ============================================
 * TOC
 * ============================================ */

.blog-single-rail__toc {}

.blog-single-rail__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-single-rail__toc-item {
  position: relative;
  margin: 0;
}

.blog-single-rail__toc-link {
  display: block;
  padding: var(--space-sm) 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);   /* multi-line TOC labels */
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  text-decoration: none;
}

.blog-single-rail__toc-link--active {
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
}

@media (hover: hover) {
  .blog-single-rail__toc-link:hover {
    color: var(--color-navy);
  }
}

/* ============================================
 * Share buttons
 * ============================================ */

.blog-single-rail__share {}

.blog-single-rail__share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-sm);
}

.blog-single-rail__share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-pill);
  color: var(--color-navy);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

@media (hover: hover) {
  .blog-single-rail__share-link:hover {
    background: var(--color-navy);
    color: var(--color-white);
  }
}