/* ==========================================================================
   Blog article template — headline hero, single-column body copy (headings,
   paragraphs, list, pull-quote/callout, inline image), a mid-article
   .cta-liquid band, and a "Related posts" strip reusing the blog grid
   card's visual language under its own class names. Same per-section
   background recipe as pitch.css / roadmap.css / blog.css.
   ========================================================================== */

.article {
  position: relative;
  background-color: #0a0a0d;
  background-image: radial-gradient(circle at 8% 10%, rgba(91, 42, 134, 0.14), transparent 30%),
    radial-gradient(circle at 94% 6%, rgba(255, 122, 26, 0.08), transparent 28%);
  padding-block: var(--space-16);
}

/* Same main-content width as every other inner page (Shop, Blog,
   Portfolio, .page-header itself) — matches var(--container-max) rather
   than a narrower reading column, so the post doesn't look like it's
   floating in an empty box under the full-width header band. */
.article__inner {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Article meta row — pinned to the top of the reading column, aligned to
   the same left/right edges the body text and cover image run along:
   publication date on the left, Share pill on the right. It's a normal
   flow row (not an absolute overlay), so it stays put and behaves the same
   at every width. */
.article__meta {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.article__date {
  font-size: var(--fs-small);
  color: var(--color-text-faint);
  font-weight: 600;
}

/* Share control, right side of the meta row — same size/shape/color
   recipe as .filter-pill (css/filter-pill.css) so it reads as the same
   control family as the Shop/Blog/Portfolio filter buttons. The resting
   "border" is an inset box-shadow rather than a real border for the same
   reason as .filter-pill: it lets the ring's color cross-fade smoothly on
   hover/copied instead of snapping (border-style can't transition). The
   icon has no color of its own (fill="currentColor" in the markup), so it
   always matches the button's current text color automatically. */
.article__share {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: none;
  box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent, inset 0 0 0 1px var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.article__share svg {
  width: 15px;
  height: 15px;
}

@media (hover: hover) {
  .article__share:hover {
    background: var(--color-bg-elevated-hover);
    color: var(--color-text);
  }
}

/* Copied confirmation (js/share.js): no color flash — it just takes on the
   same look as the hover state (elevated background + full-strength text)
   plus a quick pop, so the feedback reads as a subtle press, not a
   separate orange accent. */
.article__share.is-copied {
  background: var(--color-bg-elevated-hover);
  color: var(--color-text);
  animation: sharePop 320ms var(--ease-standard);
}

@keyframes sharePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* --- Hero ---
   Same narrower reading measure as .article__body/.article__cta (not the
   full .article__inner width) — the cover image sits in the same column
   the article text reads in. The post title now lives in the page-header
   band at the top (same as every other inner page), so the hero is just
   the cover image. */

.article__hero {
  max-width: 820px;
  margin-inline: auto;
}

.article__hero-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.article__hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Body copy ---
   max-width + margin-inline: auto keeps a comfortable reading measure at
   the new, wider .article__inner — same "default narrower, opt out
   per-block" pattern as .product__section in css/product.css. The hero
   above and the related-posts carousel below still span the full
   .article__inner width. */

.article__body {
  max-width: 820px;
  margin-inline: auto;
  margin-top: var(--space-10);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.article__body > * + * {
  margin-top: var(--space-5);
}

/* Same size/weight/line-height as .about__title (css/about.css) — the
   site's one standard section-heading recipe. */
.article__body h2 {
  margin-top: var(--space-10);
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.article__body h3 {
  margin-top: var(--space-8);
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-text);
}

.article__body p {
  color: var(--color-text-muted);
}

.article__body ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-2);
}

.article__body li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-text-muted);
}

.article__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text);
}

.article__body li strong {
  color: var(--color-text);
}

.article__body a {
  color: var(--color-magenta, #c0298b);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.article__body a:hover {
  opacity: 0.78;
}

/* Pull-quote / callout: left brand-gradient border, larger italic text —
   visually distinct from body paragraphs so it reads as a highlighted
   aside, not just another paragraph. */
.article__callout {
  position: relative;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid transparent;
  border-image: var(--gradient-brand) 1;
  background: var(--color-bg-elevated);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.article__callout p {
  font-family: var(--font-heading);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

.article__inline-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.article__inline-media img {
  width: 100%;
  height: auto;
  display: block;
}

.article__inline-caption {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-text-faint);
  text-align: center;
}

/* --- Mid/end-article CTA band --- */

.article__cta {
  max-width: 820px;
  margin-inline: auto;
  margin-top: var(--space-12);
  padding: var(--space-10);
  text-align: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article__cta-title {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-text);
}

.article__cta-text {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-inline: auto;
}

.article__cta-wrap {
  margin-top: var(--space-6);
}

/* --- Related posts carousel ---
   Same visual language as the Blog grid's own cards (css/blog.css) —
   badge, title, date + Read More footer — just narrower and without the
   excerpt, since 5 need to fit across the column at once instead of 4
   across the full page width (same trade-off .product__related-card
   makes off .shop__card in css/product.css). js/article-related-carousel.js
   drives the actual sliding: every 5s (or on an arrow click) the track
   moves by exactly one card's width, right-to-left, looping seamlessly by
   cloning the first few cards onto the end. */

.article__related {
  max-width: var(--container-max);
  margin: var(--space-16) auto 0;
  padding-inline: var(--container-pad);
}

.article__related-title {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-text);
}

/* space-6 (24px) so the "Keep reading" heading→cards gap LOOKS the same as
   an in-body heading→text gap (cards have no line-leading — see the note on
   .services__section-title). */
.article__related-carousel {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Same outline + hover-outline-swap recipe as .product__related-arrow. */
.article__related-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.article__related-arrow:hover {
  background: var(--color-bg-elevated-hover);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.article__related-arrow svg {
  width: 20px;
  height: 20px;
}

/* container-type lets .article__related-card size itself off THIS box's
   width (via cqw, below) rather than the track's — the track is wider
   than the viewport (it holds every card end to end), so a plain
   percentage on the card would resolve against that oversized width
   instead of the visible 5-card window. */
.article__related-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

/* transition is long and eased both in and out (not the sharper
   --ease-standard) — a soft, unhurried glide, matching the Shop/Blog
   banner's own slide and .product__related-track. */
.article__related-track {
  display: flex;
  gap: var(--space-4);
  transition: transform 900ms ease-in-out;
}

/* Exactly 5 fit the viewport width (4 gaps between them) — cqw resolves
   against .article__related-viewport above, not this track. */
.article__related-card {
  flex: 0 0 calc((100cqw - 4 * var(--space-4)) / 5);
  display: flex;
  flex-direction: column;
  min-height: 230px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

/* Border-only highlight — no lift, no shadow, no image zoom, same
   reasoning as .product__related-card:hover: the carousel can be
   mid-slide under the cursor, so movement-on-hover would fight the
   slide animation. */
.article__related-card:hover {
  border-color: var(--color-border-strong);
}

/* Own 16:9 ratio, isolated from the shared box in components.css —
   matches the Blog grid card's own image ratio, since these are the same
   posts. */
.article__related-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article__related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__related-body {
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.article__related-title-link {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-standard);
}
/* Title only, capped at 3 lines then truncated (like the verstka related card).
   Clamp lives on the inner <a> so the flex-item blockify doesn't disable it. */
.article__related-title-link a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.article__related-title-link:hover {
  color: var(--color-hover-accent);
}

/* margin-top: auto docks the footer (date + Read More) to the bottom of
   the card, consuming whatever space the title didn't need above it —
   same technique as .blog__card-footer in css/blog.css. */
.article__related-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.article__related-date {
  font-size: 11px;
  color: var(--color-text-faint);
}

/* Same outline + hover-outline-swap recipe as .blog__card-cta, sized down
   to fit this narrower card. */
.article__related-cta {
  flex-shrink: 0;
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.article__related-cta:hover {
  background: var(--color-bg-elevated-hover);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

/* "Keep reading": reduce how many cards show at once as the screen narrows
   — same responsive logic as the Explainer Video spotlight and the product
   page's "You might also like". Desktop shows 5; below that 3 / 2 / 1, so
   the cards never crush into unusable slivers on a phone. (The carousel JS
   slides one card at a time and clones 5 either side, so a smaller visible
   count needs no JS change.) */
@media (max-width: 1024px) {
  .article__related-card {
    flex-basis: calc((100cqw - 2 * var(--space-4)) / 3);
  }
}

@media (max-width: 767px) {
  /* Halve the top gap above the date + Share row on phones. */
  .article {
    padding-top: var(--space-8);
  }
  /* One "Keep reading" card in view at a time on phones (swipe/arrows for
     the rest) — a single full-width card reads better than two cramped ones. */
  .article__related-card {
    flex-basis: 100cqw;
  }
}