/* ============================================================
   components/article.css
   The reading surface: article card, reading column, subtitle,
   byline, hero figure, prose body, tag row and share.

   Reading measure is 720px inside the card; the hero figure is the
   only element allowed to break it. The slot above the headline
   carries no topic (there is nothing to scan on a single article):
   it carries one thing, and only when true, the partner disclosure.
   No outer margin on the root.
   ============================================================ */
.rfi-article { background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); padding: 28px 24px 34px; }

/* The reading measure. Every child of the article opts into it explicitly. */
.rfi-article__read { max-width: var(--rfi-measure); margin: 0 auto; }

/* Rendered only when the editor wrote a subtitle: this is not a slot the excerpt
   falls into, so it needs no empty state. */
.rfi-article__subtitle { font-size: 19px; line-height: 1.55; color: var(--rfi-text-2); margin-top: 14px; }

.rfi-article__byline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13.5px; color: var(--rfi-text-2); margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rfi-border-soft); }
.rfi-article__author { color: var(--rfi-navy); font-weight: 600; }
.rfi-article__author:hover { color: var(--rfi-teal); }

/* The event facts panel sits inside the reading column, between the title and the
   hero. The article places it; the panel owns no outer margin. */
.rfi-article__facts { margin-top: 20px; }

.rfi-article__figure { margin: 22px auto 0; max-width: var(--rfi-measure); }
.rfi-article__figure img { width: 100%; height: auto; border-radius: var(--rfi-radius-sm); }
.rfi-article__caption { font-size: var(--rfi-meta); color: var(--rfi-text-3); margin-top: 8px; }

/* No picture: the brand fill, the same one the card and the feed hero draw. A fixed
   3:2 so a text-only article still opens on a proper figure, not a collapsed box;
   the mark is quietened by the shared dial, and it is smaller here than on a card
   because the figure is much wider (design-decisions.md 3). */
.rfi-article__figure--brand { aspect-ratio: 3 / 2; background: var(--rfi-brandfill-bg); border-radius: var(--rfi-radius-sm); display: flex; align-items: center; justify-content: center; }
.rfi-article__figure--brand .rfi-brandfill__mark { width: 30%; height: auto; color: var(--rfi-brandfill-mark); opacity: var(--rfi-brandfill-ink); }

/* The slot above the headline. A NEWS page leaves it empty (see the file header):
   there is nothing to scan on a single article. An INSIGHT and an EVENT put their
   type there, because the type changes how the piece is read (an interview is not a
   market-research report; a webinar is not an exhibition). It is the one scannable
   classifier, so it earns the slot the news page leaves empty. */
.rfi-article__type { display: inline-block; font-family: var(--rfi-font-ui); font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--rfi-navy); margin-bottom: 11px; }

/* Prose. Element selectors are scoped inside the body because the_content()
   returns unclassed HTML: there is no class to hook. */
.rfi-article__body { margin-top: 24px; }
.rfi-article__body p { font-size: var(--rfi-body); line-height: 1.7; margin-bottom: 18px; }
.rfi-article__body h2 { font-family: var(--rfi-font-ui); font-size: 22px; font-weight: 600; margin: 30px 0 12px; }
.rfi-article__body h3 { font-family: var(--rfi-font-ui); font-size: 19px; font-weight: 600; margin: 24px 0 10px; }
.rfi-article__body ul, .rfi-article__body ol { margin: 0 0 18px 22px; }
.rfi-article__body li { font-size: var(--rfi-body); line-height: 1.7; margin-bottom: 6px; }
.rfi-article__body img { border-radius: var(--rfi-radius-sm); margin: 0 0 18px; }
.rfi-article__body figure { margin-bottom: 18px; }
.rfi-article__body blockquote { border-left: 3px solid var(--rfi-navy); padding: 2px 0 2px 18px; margin: 24px 0; font-size: 18px; line-height: 1.6; }
.rfi-article__body a { color: var(--rfi-navy); text-decoration: underline; text-underline-offset: 2px; }
.rfi-article__body a:hover { color: var(--rfi-teal); }

/* ---- Q&A (interviews) --------------------------------------
   The question is the interviewer's and is set apart; the answers are body prose.

   This styles an explicit .q in the body and NOTHING ELSE, on purpose. It is not
   wired to a heuristic, because there is no reliable marker to key off: across the
   real interviews on file, <b> marks questions in some pieces, the SPEAKER'S NAME in
   others ("Aurelien Tissot:"), and plain emphasis in the rest, while another
   interview is narrative prose under h3 section headings with no questions at all.
   Styling <b> as a question would print a person's name as an interviewer's question.
   The layout needs an editorial convention first (owner decision, see PROGRESS);
   until then this rule is the target that convention writes to, and an interview with
   no .q simply reads as prose, which is what it is. */
.rfi-article__body .q { font-family: var(--rfi-font-ui); font-size: 18px; font-weight: 600; color: var(--rfi-navy); line-height: 1.4; margin: 30px 0 12px; }
.rfi-article__body .q::before { content: 'Q'; display: inline-block; font-size: 12px; font-weight: 700; color: var(--rfi-teal); vertical-align: 2px; margin-right: 9px; letter-spacing: 0; }

/* ---- body-image lightbox (no JS, the checkbox trick) -------
   The wrapper and opener stay block so the image keeps the full-width reading flow
   it had inline. The toggle is visually gone but still focusable, so a keyboard user
   can Tab to an image and press Space; the overlay is a second <label> for the same
   checkbox, so a click anywhere on the dimmed page closes it. */
.rfi-lb { display: block; }
.rfi-lb__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.rfi-lb__open { display: block; cursor: zoom-in; }
.rfi-lb__zoom {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 4vh 4vw;
  background: var(--rfi-scrim); cursor: zoom-out;
}
.rfi-lb__toggle:checked ~ .rfi-lb__zoom { display: flex; }
.rfi-lb__zoom img { max-width: 100%; max-height: 92vh; width: auto; height: auto; margin: 0; border-radius: var(--rfi-radius-sm); box-shadow: var(--rfi-shadow-up); }
.rfi-lb__toggle:focus-visible ~ .rfi-lb__open { outline: 2px solid var(--rfi-teal); outline-offset: 3px; }

.rfi-article__gallery { max-width: var(--rfi-measure); margin: 22px auto 0; display: flex; gap: 8px; overflow-x: auto; }
.rfi-article__gallery img { height: 120px; width: auto; flex: none; border-radius: var(--rfi-radius-sm); }

.rfi-article__source { max-width: var(--rfi-measure); margin: 18px auto 0; font-size: var(--rfi-desc); color: var(--rfi-text-3); }
.rfi-article__source a { color: var(--rfi-navy); text-decoration: underline; }
.rfi-article__source a:hover { color: var(--rfi-teal); }

/* ---- partner disclosure ------------------------------------
   Prominence is a dial; disclosure is not. This reads the partner
   accent but never the rule width: at --rfi-partner-rule:0 the card
   rule disappears and this text still says who is speaking. */
.rfi-disclosure {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--rfi-font-ui); font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--rfi-partner-accent); background: var(--rfi-partner-tint);
  box-shadow: 0 0 0 1px var(--rfi-partner-line) inset;
  padding: 5px 10px; border-radius: var(--rfi-radius-sm); margin-bottom: 12px;
}
.rfi-disclosure::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rfi-partner-accent); }

/* ---- tag row: tags left, share right, one row, no label ---- */
.rfi-tagrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: var(--rfi-measure); margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--rfi-border-soft); }
.rfi-tag { font-size: 12.5px; padding: 5px 11px; border-radius: var(--rfi-radius-sm); border: 1px solid var(--rfi-border); color: var(--rfi-text-2); }
.rfi-tag:hover { border-color: var(--rfi-teal); color: var(--rfi-teal); }

.rfi-share { margin-left: auto; display: flex; align-items: center; gap: 13px; padding-left: 14px; }
.rfi-share__btn { color: var(--rfi-text-3); display: flex; background: none; border: 0; padding: 0; }
.rfi-share__btn:hover { color: var(--rfi-teal); }
.rfi-share__btn svg { width: 16px; height: 16px; fill: currentColor; }
.rfi-share__copied { font-size: var(--rfi-meta); color: var(--rfi-teal); }

/* The About-this-company card (Silver+, partner articles) is an article block; the
   component owns no outer margin, so the article places it in the same rhythm as the
   tag row above and the inline subscribe below, instead of it sitting flush against
   the tags. News and insights only; events carry no card. */
.rfi-article .rfi-aboutco { margin-top: 30px; }

/* Inline subscribe: on a detail page the form sits where the reader finished. */
.rfi-inline-sub { max-width: var(--rfi-measure); margin: 30px auto 0; background: var(--rfi-bg); border-radius: var(--rfi-radius); padding: 20px 22px; }
.rfi-inline-sub__t { font-family: var(--rfi-font-ui); font-size: 18px; font-weight: 500; }
.rfi-inline-sub__s { font-size: var(--rfi-desc); line-height: 1.55; color: var(--rfi-text-2); margin: 6px 0 14px; }

@media (max-width: 700px) {
  .rfi-article { padding: 20px 16px 26px; }
  .rfi-share { margin-left: 0; padding-left: 0; }
}