/* BLR articles v20261026. Only loaded by blog articles; no global image rules. */
body[data-page="articulo"] .article-hero {
  display: flex; flex-direction: column; min-height: 0;
  padding: calc(var(--header-height) + 1.5rem) 0 0;
  overflow: visible;
}
body[data-page="articulo"] .article-hero::before,
body[data-page="articulo"] .article-hero::after { display: none; }
body[data-page="articulo"] .article-hero > .container { order: 0; }
body[data-page="articulo"] .article-hero-media {
  position: relative; inset: auto; z-index: auto; order: 1;
  width: min(calc(100% - 30px), 1100px); margin: 1.75rem auto 0;
}
body[data-page="articulo"] .article-hero-media img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 620px;
  margin: auto; object-fit: contain; filter: none; border-radius: 12px;
}
body[data-page="articulo"] .hero-credit {
  position: static; margin: .65rem 0 0; padding: 0;
  font-size: .75rem; line-height: 1.5; color: #aaa9a5; background: none;
  overflow-wrap: anywhere;
}
body[data-page="articulo"] .breadcrumbs { margin-bottom: 1.5rem; }
body[data-page="articulo"] .article-title {
  font-size: clamp(2rem, 4.7vw, 4.7rem); line-height: 1.06; overflow-wrap: anywhere;
}
body[data-page="articulo"] .article-deck { text-wrap: pretty; }
body[data-page="articulo"] .article-main { padding: 2.5rem 0 4rem; }
body[data-page="articulo"] .article-layout { gap: clamp(1.5rem, 4vw, 4rem); }
body[data-page="articulo"] .article-body,
body[data-page="articulo"] .article-sidebar { min-width: 0; overflow-wrap: anywhere; }
body[data-page="articulo"] .article-figure img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 760px;
  margin-inline: auto; object-fit: contain;
}
/* Infographics remain readable at the full column width, without a height cap. */
body[data-page="articulo"] .article-figure--infographic img { width: 100%; max-height: none; }
body[data-page="articulo"] .article-figure figcaption { font-size: .85rem; color: #aaa9a5; overflow-wrap: anywhere; }
body[data-page="articulo"] .image-credit { font-size: .75rem; color: #a09f9b; }
body[data-page="articulo"] .card-media img,
body[data-page="articulo"] .product-card-media img { object-fit: contain; transform: none; }
body[data-page="articulo"] .article-section { scroll-margin-top: calc(var(--header-height) + 20px); }
body[data-page="articulo"] .article-sidebar { top: calc(var(--header-height) + 20px); }
body[data-page="articulo"] .toc { max-height: calc(100dvh - var(--header-height) - 50px); overflow-y: auto; }
@media (max-width: 980px) {
  body[data-page="articulo"] .article-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-page="articulo"] .article-sidebar { position: static; grid-row: 1; }
  body[data-page="articulo"] .toc { max-height: 15rem; }
}
@media (max-width: 620px) {
  body[data-page="articulo"] .article-hero { padding-top: calc(var(--header-height) + 1rem); }
  body[data-page="articulo"] .article-hero-media img { max-height: 480px; }
  body[data-page="articulo"] .article-deck { font-size: 1rem; }
  body[data-page="articulo"] .article-figure { margin-block: 1.75rem; }
  body[data-page="articulo"] .article-figure img { max-height: 600px; }
  body[data-page="articulo"] .article-figure--infographic img { max-height: none; }
  body[data-page="articulo"] .article-body h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.12; }
}

/* Mobile video invitation must grow with its text and buttons. */
@media (max-width: 620px) {
  body[data-page="articulo"] .video-embed:has(.video-consent) {
    display: block;
    aspect-ratio: auto;
    height: auto;
  }
  body[data-page="articulo"] .video-consent {
    min-width: 0;
    margin: 1rem;
    padding: 1.2rem;
  }
  body[data-page="articulo"] .video-actions {
    flex-direction: column;
    align-items: stretch;
  }
  body[data-page="articulo"] .video-consent-button {
    white-space: normal;
  }
}
/* Once accepted, remove the decorative layer above player controls. */
body[data-page="articulo"] .video-embed:has(.video-frame)::after { display: none; }
body[data-page="articulo"] .video-frame { display: block; }