/* Our own articles: the article page, the newsroom list and the article blocks on other pages. */

/* ---------- Article page ---------- */
.article { display: grid; gap: var(--space-5); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-6) var(--space-6); }
@media (max-width: 599px) { .article { padding: var(--space-4); border-radius: var(--radius-m); gap: var(--space-4); } }
.article__head { display: grid; gap: var(--space-3); }
.article__kicker { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin: 0; font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
:root[dir="rtl"] .article__kicker { text-transform: none; letter-spacing: 0; }
.article__sport { color: var(--atlas-green); text-decoration: none; }
.article__title { font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; }
:root[dir="rtl"] .article__title { line-height: 1.45; letter-spacing: 0; }
.article__dek { margin: 0; font-size: var(--step-2); line-height: 1.45; color: var(--ink-2); font-weight: 500; }
@media (max-width: 599px) { .article__dek { font-size: var(--step-1); } }
.article__meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.article__byline { font-weight: 700; color: var(--ink); }

.article__cover { margin: 0 calc(-1 * var(--space-6)); display: grid; gap: var(--space-2); }
@media (max-width: 599px) { .article__cover { margin-inline: calc(-1 * var(--space-4)); } }
.article__cover img { inline-size: 100%; block-size: auto; max-block-size: 70vh; object-fit: cover; }
.article__cover figcaption, .article-figure figcaption { padding-inline: var(--space-6); font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 599px) { .article__cover figcaption { padding-inline: var(--space-4); } }

.article__body { max-inline-size: 720px; inline-size: 100%; justify-self: center; font-size: 1.125rem; line-height: 1.75; }
:root[dir="rtl"] .article__body { line-height: 1.95; }
.article__body .trix-content { display: grid; gap: var(--space-4); }
.article__body .trix-content > * { margin: 0; }
.article__body h1, .article__body h2 { font-size: var(--step-3); line-height: 1.2; margin-block-start: var(--space-4) !important; }
.article__body h3 { font-size: var(--step-2); line-height: 1.25; margin-block-start: var(--space-2) !important; }
.article__body a { color: var(--atlas-green); text-underline-offset: 0.15em; }
.article__body blockquote { margin: 0; padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--atlas-green); font-size: var(--step-2); line-height: 1.5; font-weight: 600; color: var(--ink); }
.article__body ul, .article__body ol { padding-inline-start: 1.4em; display: grid; gap: var(--space-2); }
.article__body action-text-attachment { display: block; }
.article-figure { margin: 0; display: grid; gap: var(--space-2); }
.article-figure img { inline-size: 100%; block-size: auto; border-radius: var(--radius-m); }
.article-figure figcaption { padding: 0; }
.article-figure__credit { white-space: nowrap; }
.article-embed { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); font-size: var(--step-0); line-height: 1.4; }
.article-embed__title { margin: 0; font-weight: 800; }
.article-embed__more { margin: 0; font-size: var(--step--1); }
.article-embed__card { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none !important; }
.article-embed__text { display: grid; gap: 2px; }
.article-embed__text span { font-size: var(--step--1); color: var(--ink-2); }
.article-embed__photo { border-radius: 50%; object-fit: cover; }

.article__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); max-inline-size: 720px; inline-size: 100%; justify-self: center; }
.article__tag { display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: var(--space-3); border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--step--1); font-weight: 600; color: var(--ink); text-decoration: none; }
.article__tag:hover { border-color: var(--atlas-green); color: var(--atlas-green); }
.article__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-inline-size: 720px; inline-size: 100%; justify-self: center; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.article__share-label { font-weight: 700; margin-inline-end: var(--space-2); }
.article__share-button { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--step--1); font-weight: 600; text-decoration: none; cursor: pointer; }
.article__share-button:hover { border-color: var(--ink-2); }
.article__share-button--whatsapp { background: #25D366; border-color: #25D366; color: #0B2E19; }
.article__share-done { font-size: var(--step--1); color: var(--atlas-green); font-weight: 700; }
.article__translations { margin: 0; max-inline-size: 720px; inline-size: 100%; justify-self: center; font-size: var(--step--1); color: var(--ink-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.article-preview-banner { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: color-mix(in srgb, #D97706 18%, var(--surface)); color: var(--ink); font-weight: 700; }

/* ---------- Blocks on other pages and related ---------- */
.article-related, .article-block { margin-block-start: var(--space-5); }
.article-block.hub-block { margin-block-start: 0; }
.article-list { display: grid; padding: 0 var(--space-4) var(--space-2); }
.hub-block .article-list { padding: 0; }
@media (min-width: 900px) { .hub-block .article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); } }

/* ---------- Newsroom list and home row ---------- */
.articles-hub__lead { max-inline-size: 960px; }
.articles-hub__grid, .editorial-grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mag-section--editorial .mag-head { border-color: var(--atlas-green); }
.pager { display: flex; justify-content: center; gap: var(--space-3); padding-block: var(--space-5); }
.article__body .article-embed a { color: inherit; }