/*
 * Immutable Blog Article readability refinement.
 *
 * Loaded after the retained v19 and v20 layers. This patch keeps the
 * fold-by-fold layout while making the lower-page discovery and author
 * surfaces calmer, less text-heavy, and usable at tablet widths.
 */

@layer cis-blog-experience {
  [data-blog-experience][data-cbe-surface="public"] #eb .eb-growth-related h3 {
    background: transparent !important;
  }

  [data-blog-experience][data-cbe-surface="public"] #eb .eb-growth-related ul,
  [data-blog-experience][data-cbe-surface="public"] .cBlg-authorMainInfo .eb-entry-author-recents,
  [data-blog-experience][data-cbe-surface="public"] .eb-entry-related {
    gap: 16px;
  }

  [data-blog-experience][data-cbe-surface="public"] #eb .eb-growth-related a {
    min-height: 100px;
    padding: 18px 20px;
    font-size: 1.025rem !important;
    line-height: 1.5 !important;
  }

  [data-blog-experience][data-cbe-surface="public"] .cBlg-authorMainInfo .eb-entry-author-bio {
    align-items: start !important;
  }

  [data-blog-experience][data-cbe-surface="public"] .cBlg-authorMainInfo .eb-author-summary {
    margin: 0 !important;
    color: var(--cbe-text);
    font-size: 1.05rem;
    line-height: 1.7;
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-author-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cbe-border);
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-author-details > summary {
    display: inline-flex;
    min-height: 44px;
    cursor: pointer;
    align-items: center;
    padding: 9px 14px;
    border: 1px solid var(--cbe-border);
    border-radius: 12px;
    background: var(--cbe-surface-soft);
    color: var(--cbe-accent);
    font-weight: 750;
    line-height: 1.35;
    list-style: none;
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-author-details > summary::-webkit-details-marker {
    display: none;
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-author-details > summary::after {
    content: "+";
    margin-left: 10px;
    font-size: 1.2rem;
    line-height: 1;
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-author-details[open] > summary::after {
    content: "−";
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-author-details > summary:hover,
  [data-blog-experience][data-cbe-surface="public"] .eb-author-details > summary:focus-visible {
    border-color: var(--cbe-accent);
    background: var(--cbe-surface);
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-author-details__body {
    margin: 16px 0 0 !important;
    color: var(--cbe-muted);
    font-size: 1rem;
    line-height: 1.7;
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-link-card {
    min-height: 84px !important;
    padding: 17px 18px !important;
    font-size: 1rem;
    line-height: 1.5 !important;
  }

  [data-blog-experience][data-cbe-surface="public"] .pn-sec > ul > .pn .eb-post-nav-card {
    min-height: 122px;
    padding: 18px 20px !important;
  }

  [data-blog-experience][data-cbe-surface="public"] .eb-post-nav-card__title {
    font-size: 1.025rem;
    line-height: 1.45;
  }

  @media (max-width: 900px) {
    /*
     * The legacy tablet header moves its navigation to a second row while the
     * current public header intentionally stays 64px tall. Collapse that
     * article-only navigation before it can overlap the logo and push the
     * reading-preferences control outside the viewport.
     */
    [data-blog-experience][data-cbe-surface="public"] .cbe-page--article .cbe-header-actions > .header-nav {
      display: none !important;
      width: 0 !important;
      min-width: 0 !important;
    }

    [data-blog-experience][data-cbe-surface="public"] #eb .eb-growth-related ul,
    [data-blog-experience][data-cbe-surface="public"] .cBlg-authorMainInfo .eb-entry-author-recents,
    [data-blog-experience][data-cbe-surface="public"] .eb-entry-related,
    [data-blog-experience][data-cbe-surface="public"] .pn-sec > .eb-entry-author-recents,
    [data-blog-experience][data-cbe-surface="public"] .pn-sec > ul {
      grid-template-columns: 1fr;
    }

    [data-blog-experience][data-cbe-surface="public"] .pn-sec > ul > .pn-n .eb-post-nav-card {
      align-items: flex-start;
      text-align: left;
    }
  }

  @media (max-width: 760px) {
    [data-blog-experience][data-cbe-surface="public"] #eb .eb-growth-related a,
    [data-blog-experience][data-cbe-surface="public"] .eb-link-card,
    [data-blog-experience][data-cbe-surface="public"] .pn-sec > ul > .pn .eb-post-nav-card {
      min-height: auto !important;
    }
  }
}