/* ==========================================================================
   Article / Resource Detail — editorial template shared by
   article-*.html (full Thought Leadership articles) and resource-*.html
   (gated-resource detail/preview pages, per the "select → detail →
   download" flow). Reuses page-hero's blueprint-grid language for the
   header band, then a narrow reading column for the body.
   ========================================================================== */

.article-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--space-3xl) + var(--space-lg));
  padding-bottom: var(--space-xl);
  background:
    radial-gradient(circle at 85% 10%, rgba(0, 87, 217, 0.24), transparent 46%),
    radial-gradient(circle at 10% 90%, rgba(0, 245, 160, 0.12), transparent 50%),
    linear-gradient(180deg, var(--color-navy-950) 0%, var(--color-navy-900) 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.article-hero__grid {
  position: absolute;
  inset: -10% -10%;
  background-image: url('../images/blueprint-grid.svg');
  background-size: 96px 96px;
  opacity: 0.22;
}

.article-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 72ch;
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.article-hero__type {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.article-hero__title {
  font-size: var(--text-h1);
  max-width: 20ch;
}

.article-hero__byline {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.article-hero__byline strong {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.article-hero__byline-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
}

@media (max-width: 700px) {
  .article-hero {
    padding-top: calc(var(--space-2xl) + var(--space-lg));
  }
}

/* ---- Media placeholder (hero + inline) ----
   Shared "clearly labeled placeholder" treatment: blueprint pattern +
   a dashed mono chip, so it reads as intentional rather than broken. */
.media-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--color-navy-800), var(--color-navy-950));
  aspect-ratio: 16 / 9;
}

.media-placeholder--inline {
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
}

.media-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/blueprint-grid.svg');
  background-size: 64px 64px;
  opacity: 0.22;
}

.media-placeholder::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 245, 160, 0.14), transparent 60%);
}

.media-placeholder__chip {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  background: rgba(6, 15, 34, 0.5);
}

.article-hero__media {
  margin-top: var(--space-xl);
}

.article-hero__media img,
.article-hero__media video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: #000;
}

/* ---- Reading column ---- */
.article-body {
  max-width: 68ch;
  margin-inline: auto;
}

.article-body__intro {
  font-size: var(--text-lead);
  font-weight: 500;
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.article-body__section {
  margin-top: var(--space-xl);
}

.article-body__section h2 {
  font-size: var(--text-h3);
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.article-body__section p {
  color: var(--text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

.article-body__section p:last-child {
  margin-bottom: 0;
}

.article-body__section p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 245, 160, 0.4);
}

.article-body__section p a:hover {
  text-decoration-color: var(--accent);
}

/* Small teal kicker label used ahead of a bulleted callout within an
   article body (e.g. "Key Highlights", "The Skinny") — reuses the site's
   existing .eyebrow treatment (mono, uppercase, teal) rather than a new
   color decision, just with bottom spacing before the list that follows. */
.article-body__kicker {
  margin-bottom: var(--space-md);
}

/* Bullet/paragraph "key statement: explanation" pattern — the bold
   lead-in reads as a title (white, bold) while the rest of the sentence
   stays the normal muted article-body color. Covers both list items
   (resource-detail__list, shared with resource-detail pages) and plain
   paragraph lead-ins within article bodies. */
.resource-detail__list li strong,
.article-body__section p strong {
  color: var(--text-primary);
  font-weight: 700;
}

.article-media {
  margin-block: var(--space-xl);
}

.article-media img,
.article-media video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #000;
}

/* ---- Intro text paired with a video (e.g. a highlight reel) — text
   column reads first, video sits alongside rather than breaking the
   reading flow into its own section. ---- */
.article-intro-media {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

.article-intro-media__video video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #000;
}

.article-intro-media__video figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .article-intro-media {
    grid-template-columns: 1fr;
  }

  .article-intro-media__video {
    max-width: 220px;
    margin-inline: auto;
  }
}

.article-media figcaption,
.article-hero__media figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.pull-quote {
  margin-block: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  border-left: 2px solid var(--accent);
  background: var(--color-navy-900);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Downloadable-resource callout — a companion PDF/gated resource
   attached to an article. Built from the same bordered-box language as
   .article-cta-inline, but with its own type label + title so it reads as
   a distinct resource, not another inline nudge or an ad. ---- */
.article-resource-callout {
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
}

.article-resource-callout__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.article-resource-callout__title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-sm);
}

.article-resource-callout__desc {
  color: var(--text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
  max-width: 56ch;
}

.article-cta-inline {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.article-cta-inline p {
  color: var(--text-muted);
  font-size: var(--text-small);
  max-width: 44ch;
}

/* ---- Related content ---- */
.article-related {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-subtle);
}

.article-related__title {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.article-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.article-related__card {
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--color-navy-900);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.article-related__card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
}

.article-related__type {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.article-related__title-text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: var(--leading-snug);
}

@media (max-width: 900px) {
  .article-related__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Resource detail page (lighter chrome, no full editorial body) ---- */
.resource-detail {
  max-width: 68ch;
  margin-inline: auto;
}

.resource-detail__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: var(--space-lg);
}

.resource-detail__desc {
  font-size: var(--text-lead);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
}

.resource-detail__list {
  margin: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.resource-detail__list li {
  position: relative;
  padding-left: var(--space-md);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.resource-detail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

.resource-detail__actions {
  margin-top: var(--space-xl);
}

/* resource-layered-security.html specifically: the intro/instructions
   section (#detail) and the embed section (#experience) are two
   .section elements for side-rail navigation purposes, but read as one
   continuous flow — intro text straight into the demo — not a section
   break. Each .section's own padding-block: var(--space-3xl) would stack
   into an 18rem gap between them; this collapses it to something that
   reads as "next block," not "next page section." */
#detail {
  padding-bottom: var(--space-lg);
}

#experience {
  padding-top: var(--space-lg);
}

/* ---- Embedded interactive prototype (e.g. Figma) — full-bleed within the
   reading column, dark-integrated chrome instead of a bare iframe drop-in.
   initInteractiveEmbedExpand() in js/main.js wires the expand button to
   the native Fullscreen API on .interactive-embed__frame-wrap. ---- */
.interactive-embed {
  margin-block: var(--space-2xl);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy-950);
  box-shadow: var(--shadow-card);
}

.interactive-embed__frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-navy-950);
}

.interactive-embed__frame-wrap:fullscreen {
  aspect-ratio: auto;
}

.interactive-embed__frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.interactive-embed__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  background: var(--color-navy-900);
}

.interactive-embed__toolbar-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.interactive-embed__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.interactive-embed__expand-btn,
.interactive-embed__fallback {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
}

.interactive-embed__expand-btn {
  color: var(--accent);
}

.interactive-embed__fallback {
  color: var(--text-muted);
}

.interactive-embed__fallback:hover {
  color: var(--accent);
}

.interactive-embed__expand-btn .arrow,
.interactive-embed__fallback .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.interactive-embed__expand-btn:hover .arrow,
.interactive-embed__fallback:hover .arrow {
  transform: translate(2px, -2px);
}

@media (max-width: 900px) {
  .interactive-embed__frame-wrap {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 700px) {
  .interactive-embed__frame-wrap {
    aspect-ratio: 3 / 4;
  }
}