/*
 * Shared article-card design (client rounds 2/3, 2026-08) for the card partial
 * includes/article_card.php — used on index.php and articles.php.
 * Moved here from index.php's inline <style> so both pages share one source.
 *
 * Every rule is prefixed `body ` (house pattern): this file loads from
 * tabler/head.php BEFORE the per-page style.scoped.css, so ties would lose —
 * the prefix out-specifies the scoped legacy context rules
 * (.page-specialty / .articles_page / .specialties-preview-list) that
 * articles.php keeps on the card's ancestors.
 */

/* ── Card shell ─────────────────────────────────────────────────────────── */
body .dq-legacy .dq-home-card { margin-bottom: 14px; }
body .dq-legacy .dq-home-card:last-child { margin-bottom: 0; }
body .dq-legacy .dq-home-card > .card-body { padding: 16px; }
body .dq-legacy .dq-home-card { box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 8px rgba(0,0,0,.05); border: 1px solid #e6e8ec; border-radius: 12px; }

/* ── Article card: image beside text; stacks on phones ──────────────────── */
body .dq-legacy .dq-article-row { display: flex; gap: 14px; align-items: stretch; }
/* Owner PDF round 3 (2026-08): the image covers the card's full height with
   IDENTICAL distance to the card outline on all sides (the card-body's 16px),
   like the original. Fixed 180px width + align-self:stretch — do NOT use
   aspect-ratio+stretch (WebKit explodes it to 2^25px, see round 2). */
/* min-height 180 = width → the row can never go under square; when the
   clamped text column is shorter, the meta row's auto margin absorbs the
   slack and stays flush with the image bottom. */
body .dq-legacy .dq-article-thumb { flex: 0 0 180px; width: 180px; align-self: stretch; overflow: hidden; border-radius: 8px; display: block; min-height: 180px; }
body .dq-legacy .dq-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Round 3: content is a column so the meta row (specialty pill + article
   type) can sit flush with the image's bottom border. */
body .dq-legacy .dq-article-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body .dq-legacy .dq-article-body .articles__item_meta { margin-top: auto; margin-bottom: 0; }
/* Round 3: a tad more air between the specialty pill and the article type.
   Client 2026-08-24: type and tag on the SAME line — the legacy pill rule's
   margin-top:16px pushed the pill 8px below the type's centerline. */
body .dq-legacy .dq-article-body .meta-right { display: flex; align-items: center; gap: 12px; }
body .dq-legacy .dq-article-body .meta-right .articles__item_specialty { margin: 0; }
/* Round 3: double the gap between the date/language row and the title
   (was row1 8px + title 6px). Round 3b (client: "reduce the card height so
   the image is square again"): trim the fat legacy margins BELOW the title
   (17+16px) and below the abstract (17px dead space above the auto-pushed
   meta row). With everything clamped the content column is exactly
   20+16+12+42+8+42+40 = 180px = the thumb width → a true square. */
body .dq-legacy .dq-article-body .articles__item_title { margin-top: 12px; margin-bottom: 8px; }
body .dq-legacy .dq-article-body .articles__item_article { margin-top: 0; margin-bottom: 0; }
/* Owner PDF 2026-08: card internals must match the legacy .page-specialty
   look, whose context class the homepage dropped: row1 flows LTR (speaker+langs
   on the visual left, date on the right, even in RTL), langs/date in the
   12px gray, and the article-type label italic — restated here explicitly. */
body .dq-legacy .dq-article-body .articles__item_row1 { direction: ltr; gap: 8px; margin: 0 0 16px; }
/* Client 2026-08-24: the speaker icon is the LEFTMOST, before the languages —
   the markup's dir=rtl on .row1-left reversed it; CSS direction wins.
   Same day: "a tad more space" in the icon/languages cluster (was 6px/4px). */
/* (.dq-article-row in the chain: articles.php's scoped
   body.all_specialties .specialties-preview-list .row1-left { gap: 6px }
   ties a shorter chain and wins by load order) */
body .dq-legacy .dq-article-row .dq-article-body .articles__item_row1 .row1-left { display: flex; align-items: center; gap: 10px; direction: ltr; }
body .dq-legacy .dq-article-body .articles__item_langs-inline .sep { margin: 0 3px; }
body .dq-legacy .dq-article-body .articles__item_langs-inline a.dq-lang-link,
body .dq-legacy .dq-article-body .articles__item_langs-inline .sep { font-size: 12px; color: #999CB2 !important; font-weight: 400; text-decoration: none !important; }
body .dq-legacy .dq-article-body .articles__item_row1 .articles__item_date { color: #999CB2; font-size: 12px; margin-top: 0; }
/* Round 3: italic stays, but lighter weight than the legacy 500. */
body .dq-legacy .dq-article-body .summary-article-type { color: #0D0F2B; text-align: center; font-family: Rubik, sans-serif; font-size: 14px; font-style: italic; font-weight: 400; line-height: 24px; background: transparent; }
/* Specialty pill IS shown on the cards (Figma 5952-25114 / 5952-24989);
   white text comes from the scoped pill rule — the card-link ink rule in
   tabler/head.php excludes .articles__item_specialty. */
@media (max-width: 480px) {
    body .dq-legacy .dq-article-row { flex-direction: column; }
    body .dq-legacy .dq-article-thumb { flex-basis: auto; width: 100%; height: 150px; align-self: stretch; }
}

/* ── articles.php context neutralizers ──────────────────────────────────── */
/* Title/abstract link ink: tabler/head.php's card-ink rule is keyed on
   .page-body, which articles.php's wrapper doesn't have — without this the
   anchors render Tabler link-blue there. Same values as the head.php rule. */
body .dq-legacy .dq-article-body .articles__item_title a,
body .dq-legacy .dq-article-body .articles__item_article a {
    color: var(--dq-ink, #323232) !important;
}
body .dq-legacy .dq-article-body .articles__item_title a:hover,
body .dq-legacy .dq-article-body .articles__item_article a:hover {
    color: var(--dq-red, #ee645b) !important;
}

/* The legacy .page-specialty context reserves 128px title padding (with
   !important in RTL) for overlay language links the card layout doesn't
   have — the (0,4,1) chain out-specifies the scoped (0,4,0) !important. */
body .dq-legacy .dq-article-row .dq-article-body .articles__item_title {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}
/* The preview list wrapper is a legacy flex/grid gallery
   (.page-specialty .main_content_articles { display:flex/grid … } !important,
   style.css ~9880-9915) whose gap would double the card spacing; cards stack
   in one plain column like the homepage. Full class chain to out-specify
   every !important variant. */
body .dq-legacy .page-specialty .main_content_articles.articles_page.specialties-preview-list.dq-article-cards,
body .dq-legacy .page-specialty .main_content_articles.articles_page.dq-article-cards {
    display: block !important;
    gap: 0 !important;
}