/* Stylesheet for every generated article page: editorial layout (hero,
 * reading column, body typography) plus the share block at the end.
 *
 * Shipped from this repo (static/ -> dist/css/, deployed by the workflow's
 * root FTP step) rather than added to website/2026/css/components.css,
 * because that file is uploaded by hand: adding it there would mean the
 * generated pages reference classes that don't exist until someone
 * remembers to upload the CSS. This way the feature works the moment the
 * generator runs.
 *
 * Every colour comes from the site's own tokens.css, already loaded by each
 * article page, so this inherits light/dark and any future palette change
 * instead of hard-coding hex values. */

.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
}

.article-share__label {
  margin: 0;
  margin-right: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #666);
}

.article-share__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-text-primary, #111);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.article-share__link:hover,
.article-share__link:focus-visible {
  border-color: var(--color-text-primary, #111);
}

.article-share__link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Swapped to "Link copiado" by insights-share.js and reverted a couple of
 * seconds later. Width is not pinned, so the button grows with the label —
 * a fixed width would either clip the longer text or leave a gap under the
 * shorter one. */
.article-share__link[data-copied="true"] {
  border-color: var(--color-text-primary, #111);
}

@media (prefers-reduced-motion: reduce) {
  .article-share__link {
    transition: none;
  }
}


/* ------------------------------------------------------------------
   Article page layout.

   The generated pages used to borrow the project-detail classes from the
   main site (a framed hero image and a 300px "Artigo" label beside a
   narrow text column), which reads fine for a portfolio piece and badly
   for a 1.200-word article. This is a proper reading layout: a centred
   header, an optional real featured image, and a single 720px column
   with typography sized for long-form text. Tokens come from the site's
   tokens.css so palette and fonts stay in sync.
   ------------------------------------------------------------------ */

.article-hero {
  margin-top: 96px; /* clears the fixed nav pill, same convention as the site's heroes */
  padding-top: 24px;
  padding-bottom: 0;
}
.article-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.article-hero__inner .project-detail__back-link {
  margin-bottom: 8px;
}
.article-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-purple);
}
.article-hero__dot {
  color: var(--color-gray-muted);
}
.article-hero__reading {
  color: var(--color-gray-text);
}
.article-hero__title {
  margin: 0;
  max-width: 860px; /* same measure as .projects-hero__heading */
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -1.8px;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--color-dark), var(--color-gray-muted));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.article-hero__lede {
  margin: 4px 0 0;
  max-width: 720px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--color-gray-text);
}
.article-hero__meta {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray-muted);
}
.article-hero__figure {
  max-width: 1040px;
  margin: 56px 0 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-off-white);
}
.article-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.article-body-section {
  padding-top: 56px;
  padding-bottom: 64px;
}
.article-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  /* No align-items:start on purpose: the aside has to stretch to the full
     row height, otherwise the sticky index inside it has no room to travel
     and simply scrolls away with the top of the article. */
}
.article-layout__main {
  max-width: 720px;
}
.article-toc {
  position: sticky;
  top: 120px; /* below the fixed nav pill */
}
.article-toc__label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gray-muted);
}
.article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.article-toc__list a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray-text);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.article-toc__list a:hover {
  color: var(--color-dark);
}
.article-toc__list a.is-active {
  color: var(--color-dark);
  border-left-color: var(--color-purple);
}
.article-body h2[id] {
  scroll-margin-top: 120px;
}
.article-body {
  font-size: 18px;
  line-height: 1.75;
  color: #3d3d3d;
  overflow-wrap: anywhere;
}
.article-body > :first-child {
  margin-top: 0;
}
.article-body p {
  margin: 0 0 1.35em;
}
.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: var(--font-header);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.25;
}
.article-body h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -0.6px;
  margin: 2.2em 0 0.7em;
}
.article-body h3 {
  font-size: clamp(20px, 2vw, 23px);
  letter-spacing: -0.3px;
  margin: 1.8em 0 0.6em;
}
.article-body h4 {
  font-size: 18px;
  margin: 1.6em 0 0.5em;
}
.article-body ul,
.article-body ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
}
.article-body li {
  margin: 0.45em 0;
  padding-left: 0.2em;
}
.article-body li::marker {
  color: var(--color-purple);
}
.article-body a {
  color: var(--color-purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body a:hover {
  color: var(--color-dark);
}
.article-body strong {
  color: var(--color-dark);
}
.article-body blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--color-purple);
  color: var(--color-dark);
  font-size: 1.08em;
}
.article-body blockquote p:last-child {
  margin-bottom: 0;
}
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em 0;
  border-radius: 16px;
}
.article-body figure {
  margin: 2em 0;
}
.article-body figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-gray-muted);
}
.article-body hr {
  border: 0;
  border-top: 1px solid var(--color-gray-border);
  margin: 3em 0;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.article-body pre {
  margin: 0 0 1.5em;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--color-off-white);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
}
.article-body table {
  width: 100%;
  margin: 0 0 1.6em;
  border-collapse: collapse;
  font-size: 16px;
}
.article-body th,
.article-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-gray-border);
  text-align: left;
  vertical-align: top;
}
.article-body th {
  color: var(--color-dark);
  font-weight: 600;
}
.article-body__share {
  margin: 40px 0 0;
}

@media (max-width: 900px) {
  .article-hero {
    margin-top: 88px;
    padding-top: 8px;
  }
  .article-hero__inner {
    gap: 16px;
  }
  .article-hero__title {
    letter-spacing: -1.2px;
  }
  .article-hero__figure {
    margin-top: 32px;
    border-radius: 16px;
  }
  .article-body-section {
    padding-top: 40px;
  }
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .article-toc {
    position: static;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-gray-border);
  }
  .article-layout__aside:empty {
    display: none;
  }
  .article-body {
    font-size: 17px;
    line-height: 1.7;
  }
}


/* ------------------------------------------------------------------
   /insights listing.

   Same reasoning as the article page: the cards used to be the portfolio's
   project cards, which are built around a big image. Articles rarely have
   one, so every card showed the same og-cover banner at 1280px wide. These
   cards are text-first, two per row, with the real featured image on top
   only when it exists.
   ------------------------------------------------------------------ */

/* The listing hero is the projects page's own (.projects-hero +
   .projects-filterbar from components.css); only the grid below is ours. */
.insights-list.projects-list {
  padding-top: 24px;
}
.insights-list {
  padding-bottom: 32px;
}
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.insights-empty {
  color: var(--color-gray-text);
}
.insight-card.is-filtered-out {
  display: none;
}

.insight-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.insight-card:hover,
.insight-card:focus-visible {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.1);
}
.insight-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-gray-light);
  overflow: hidden;
}
.insight-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.insight-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  flex: 1;
}
.insight-card__category {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-purple);
}
.insight-card__title {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(21px, 2vw, 26px);
  letter-spacing: -0.6px;
  line-height: 1.2;
  color: var(--color-dark);
}
.insight-card__excerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-gray-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-card__meta {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-gray-muted);
}
.insight-card__cta {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-dark);
}
.insight-card:hover .insight-card__cta {
  color: var(--color-purple);
}

.insights-newsletter {
  padding-top: 32px;
}

@media (max-width: 900px) {
  .insights-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .insight-card__body {
    padding: 24px;
  }
}