/* =========================================================
   Article shell (resources/views/posts/show.blade.php).
   refs docs/frontend-spec.md#F-4.1, #F-9.2
   Uses only the design tokens from coreloadout.css (F-1.1) -- no new
   colors, fonts or spacing values. Body typography is a readable
   baseline scoped to the shell; artkit.css (F-1.2) takes over the
   artkit- classes once it is added.
   ========================================================= */

.cl-article {
  max-width: 1120px;
  margin-inline: auto;
  padding-block: var(--cl-space-6) var(--cl-space-8);
}

.cl-article__header { max-width: 760px; }

.cl-article__eyebrow {
  margin: 0 0 var(--cl-space-3);
  font-family: var(--cl-font-label);
  font-size: var(--cl-fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cl-article__eyebrow a { color: var(--cl-cyan); text-decoration: none; }
.cl-article--hardware .cl-article__eyebrow a { color: var(--cl-pillar-hardware); }
.cl-article--performance .cl-article__eyebrow a { color: var(--cl-pillar-performance); }
.cl-article--games .cl-article__eyebrow a { color: var(--cl-pillar-games); }
.cl-article--news .cl-article__eyebrow a { color: var(--cl-pillar-news); }
.cl-article--deals .cl-article__eyebrow a { color: var(--cl-pillar-deals); }

.cl-article__title {
  margin: 0;
  font-family: var(--cl-font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--cl-text);
}

.cl-article__dek {
  margin: var(--cl-space-4) 0 0;
  font-size: var(--cl-fs-lg);
  color: var(--cl-text-muted);
}

.cl-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl-space-2) var(--cl-space-4);
  margin: var(--cl-space-5) 0 0;
  font-size: var(--cl-fs-sm);
  color: var(--cl-text-dim);
}
.cl-article__byline a { color: var(--cl-text-muted); }

.cl-article__disclosure {
  margin: var(--cl-space-4) 0 0;
  padding: var(--cl-space-3) var(--cl-space-4);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius-sm);
  background: var(--cl-surface);
  font-size: var(--cl-fs-xs);
  color: var(--cl-text-muted);
}

.cl-article__hero { margin: var(--cl-space-6) 0 0; }
.cl-article__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cl-radius-lg);
}

.cl-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cl-space-6);
  margin-top: var(--cl-space-6);
}
/* Desktop: TOC rail + body only when the template output a TOC. Without the
   modifier the body is one 760px column on the article's left edge, under the
   title and byline, never auto-placed into a 240px rail (H-17). */
@media (min-width: 1181px) {
  .cl-article__layout { grid-template-columns: minmax(0, 760px); }
  .cl-article__layout--has-toc { grid-template-columns: 240px minmax(0, 760px); }
  .cl-article__layout--has-toc .cl-toc { position: sticky; top: calc(var(--cl-header-offset) + var(--cl-space-4)); align-self: start; }
}

.cl-toc {
  padding: var(--cl-space-4);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius-md);
  background: var(--cl-surface);
}
.cl-toc__title {
  margin: 0 0 var(--cl-space-3);
  font-family: var(--cl-font-label);
  font-size: var(--cl-fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-text-muted);
}
.cl-toc__list { margin: 0; padding: 0; list-style: none; }
.cl-toc__item { margin: var(--cl-space-2) 0; font-size: var(--cl-fs-sm); }
.cl-toc__item--h3 { padding-left: var(--cl-space-4); }
.cl-toc__item a { color: var(--cl-text-muted); text-decoration: none; }
.cl-toc__item a:hover { color: var(--cl-cyan); }

/* Readable baseline for the body region (pre-artkit.css) */
.cl-article__body {
  font-size: var(--cl-fs-lg);
  line-height: 1.7;
  color: var(--cl-text);
}
.cl-article__body :where(h2, h3) {
  font-family: var(--cl-font-display);
  font-weight: 600;
  line-height: 1.1;
  /* No scroll-margin-top here or on section[id]: html scroll-padding-top (coreloadout.css) already
     clears the header, and a margin on the target would stack on top of it. */
}
.cl-article__body h2 { margin: var(--cl-space-7) 0 var(--cl-space-3); font-size: 2rem; }
.cl-article__body h3 { margin: var(--cl-space-6) 0 var(--cl-space-3); font-size: 1.5rem; }
.cl-article__body a { color: var(--cl-cyan); }
.cl-article__body img { max-width: 100%; height: auto; }
.cl-article__body figure,
.cl-article__body .artkit-figure {
  margin: var(--cl-space-6) 0;   /* about 32px top and bottom, zero sides */
  padding: 0;
}
.cl-article__body .artkit-img {
  display: block;                /* removes the inline baseline gap */
  width: 100%;
  height: auto;
  border-radius: var(--cl-radius-md);
}
.cl-article__body .artkit-caption {
  margin-top: var(--cl-space-2);
  font-size: var(--cl-fs-sm);
  line-height: 1.5;
  color: var(--cl-text-muted);
}
/* Heading permalink "#": quiet on touch, revealed on hover/focus with a fine pointer. */
.cl-article__body .artkit-anchor {
  margin-left: .4em;
  padding: 0 .25em;
  font-size: .7em;
  font-weight: 400;
  text-decoration: none;
  color: var(--cl-text-muted);
  opacity: .5;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .cl-article__body .artkit-anchor { opacity: 0; transition: opacity var(--cl-dur-fast); }
  .cl-article__body h2:hover > .artkit-anchor,
  .cl-article__body h3:hover > .artkit-anchor,
  .cl-article__body .artkit-anchor:focus-visible { opacity: 1; }
  .cl-article__body .artkit-anchor:hover { color: var(--cl-cyan); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-article__body .artkit-anchor { transition: none; }
}
@media print {
  .cl-article__body .artkit-anchor { display: none; }
}
.cl-article__body table { width: 100%; border-collapse: collapse; }
.cl-article__body :where(th, td) { padding: var(--cl-space-2) var(--cl-space-3); border-bottom: 1px solid var(--cl-line); text-align: left; }

/* Artkit table component (first piece of F-1.2 artkit.css, scoped to tables only) */
.artkit-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--cl-space-4, 1.5rem) 0;
  border: 1px solid var(--cl-line);
  border-radius: 8px;
}

.artkit-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.artkit-table th,
.artkit-table td {
  padding: var(--cl-space-2) var(--cl-space-3);
  border-bottom: 1px solid var(--cl-line);
  text-align: left;
}

.artkit-table thead th {
  background: var(--cl-surface-2, rgba(255, 255, 255, 0.04));
  font-weight: 600;
}

.artkit-table tbody tr:nth-child(even) {
  background: var(--cl-surface-1, rgba(255, 255, 255, 0.02));
}

.artkit-table-caption {
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  color: var(--cl-text-muted, #9ca3af);
  padding: 0 0 var(--cl-space-2) 0;
}

/* Mobile scroll affordance — edge fade hints there's more to scroll */
@media (max-width: 640px) {
  .artkit-table-container {
    -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, black 92%, transparent 100%);
  }
}
.cl-article__body :where(pre, code) { font-size: var(--cl-fs-sm); }
.cl-article__body pre { overflow-x: auto; padding: var(--cl-space-4); border-radius: var(--cl-radius-sm); background: var(--cl-surface-2); }
.cl-article__body blockquote { margin: var(--cl-space-5) 0; padding-left: var(--cl-space-4); border-left: 3px solid var(--cl-line-strong); color: var(--cl-text-muted); }

/* In-content ad slots: geometry reserved before any fill (B-12.1 / F-9.2).
   The slot's own inline min-height is the guarantee; this only frames it. */
.cl-article__body .ad-slot {
  margin: var(--cl-space-6) 0;
  border-radius: var(--cl-radius-sm);
  background: var(--cl-surface);
}

.cl-author-box {
  max-width: 760px;
  margin: var(--cl-space-7) 0 0 auto;
  padding: var(--cl-space-5);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius-md);
  background: var(--cl-surface);
}
.cl-author-box__title {
  margin: 0 0 var(--cl-space-2);
  font-family: var(--cl-font-label);
  font-size: var(--cl-fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
}
.cl-author-box__name { margin: 0; font-weight: 600; }
.cl-author-box__name a { color: var(--cl-text); }
.cl-author-box__role { margin: var(--cl-space-1) 0 0; font-size: var(--cl-fs-sm); color: var(--cl-text-muted); }
.cl-author-box__bio { margin: var(--cl-space-3) 0 0; color: var(--cl-text-muted); }
.cl-author-box__head { display: flex; align-items: center; gap: var(--cl-space-4); }

/* Author photo (or neutral placeholder), always a circle. */
.cl-avatar { flex: none; display: block; border-radius: 50%; object-fit: cover; background: var(--cl-surface-2); }
.cl-avatar--thumb { width: 64px; height: 64px; }
.cl-avatar--profile { width: 160px; height: 160px; }
.cl-avatar--placeholder { display: grid; place-items: center; border: 1px solid var(--cl-line); color: var(--cl-text-dim); }
.cl-avatar--placeholder svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

.cl-author-profile { display: flex; align-items: center; gap: var(--cl-space-6); }
@media (max-width: 680px) {
  .cl-author-profile { flex-direction: column; align-items: flex-start; gap: var(--cl-space-4); }
  .cl-avatar--profile { width: 120px; height: 120px; }
}

/* Social profile icons: only networks with a URL are rendered. 40px tap targets. */
.cl-social-links { display: flex; flex-wrap: wrap; gap: var(--cl-space-2); margin: var(--cl-space-4) 0 0; padding: 0; list-style: none; }
.cl-social-links__link {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--cl-line); border-radius: 50%;
  color: var(--cl-text-muted); background: var(--cl-surface-2);
}
.cl-social-links__link:hover { color: var(--cl-text); border-color: var(--cl-text-dim); }
.cl-social-links__link svg { width: 18px; height: 18px; }

.cl-related { max-width: 760px; margin: var(--cl-space-7) 0 0 auto; }
/* Author page with nothing published: the empty state gets the same gap below the bio as the article lists. */
.cl-article__header + .cl-empty { margin-top: var(--cl-space-7); }
.cl-related__title { font-family: var(--cl-font-display); font-weight: 600; font-size: 1.75rem; margin: 0 0 var(--cl-space-3); }
.cl-related__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--cl-space-3); }
.cl-related__item a { color: var(--cl-text); font-weight: 600; }
.cl-related__meta { display: block; font-size: var(--cl-fs-xs); color: var(--cl-text-dim); }

@media (max-width: 1180px) {
  .cl-author-box, .cl-related { margin-left: 0; }
}