/**
 * Manager総研（Media）— Shared Card Components (Phase 9-5D).
 *
 * Loaded after foundation.css and components.css, Media context only (see
 * functions.php kakeai_enqueue_assets()). A sibling file to components.css
 * rather than appended to it — foundation.css's own docblock explicitly
 * defers "cards/TOC/share/pagination/breadcrumb/search/TOP-sections" to a
 * later phase/file, and components.css's docblock scopes itself to
 * "Header / Footer / Navigation components" specifically, so this is a new
 * file rather than overloading either.
 *
 * Built from real measurements of https://kakeai.co.jp/media/,
 * /media/article/, and /media/article-authors taken via Chrome DevTools
 * Protocol (getBoundingClientRect / getComputedStyle on the live production
 * DOM, PC 1440px) — not copied from Webflow's CSS bundle. Class names are
 * Production's own (.bl_m_card_v1, .bl_m_card_h1, .bl_m_card_a1/a2,
 * .bl_m_tag, .el_m_cat, .bl_m_card_day, etc.) since the PHP templates
 * reproduce Production's real markup 1:1 rather than inventing new class
 * names — this keeps future Production-comparison QA direct or classname.
 */

/* ---------------------------------------------------------------------
 * Category label + date — shared across all card types (standard card,
 * horizontal card, slide card eventually, Single article info row).
 * ------------------------------------------------------------------- */
.el_m_cat {
	display: inline-block;
	background-color: var(--media-color-primary);
	color: var(--media-color-white);
	font-size: 0.75rem; /* 12px */
	font-weight: 400;
	line-height: 1.2; /* 14.4px at 12px */
	padding: 0.375rem 1rem; /* 6px 16px */
	border-radius: 2px;
}

.bl_m_card_day {
	display: flex;
	font-size: 0.875rem; /* 14px */
	font-weight: 400;
	line-height: 1.79; /* 25.06px at 14px */
	color: var(--media-color-gray-46);
}

.bl_m_card_info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1.125rem 3.8%; /* 18px row gap, Production's own 3.8% column gap */
}

/* ---------------------------------------------------------------------
 * Standard Article Card (.bl_m_card_v1) — TOP 新着記事/おすすめ記事 and
 * Single Article 関連記事 (both a 3-col grid); Tag Feature Card reuses the
 * same classes (see tag-feature-card.php).
 * ------------------------------------------------------------------- */
.bl_m_card_v1 {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* 16px, Production-measured */
	text-decoration: none;
}

/* Human Review Correction (Phase 9-5D.1, Issue #6) — ROOT CAUSE (re-found
   after the first attempt above didn't survive re-verification): this
   element is always an `<a>` (confirmed in article-card.php and
   tag-feature-card.php), so Foundation's `.media-site a { color: primary; }`
   (specificity 0,1,1 — one class + one element) was beating the
   single-class `.bl_m_card_v1` rule (0,1,0) regardless of `inherit` vs an
   explicit var() — the same specificity pattern as the `.el_m_card_ttl`
   fix above. Matching element+class here (confirmed via CDP: Production's
   own card anchor computes rgb(51,51,51), not the navy link color). */
a.bl_m_card_v1 {
	color: var(--media-color-text);
	/* Human Review Correction (Phase 9-5D.2, Issue #2) — same specificity
	   pattern: Foundation's `.media-site a { text-decoration: underline; }`
	   (0,1,1) was also beating this element's own `text-decoration: none`
	   in the base `.bl_m_card_v1` rule (0,1,0) — confirmed unconditional
	   (not hover-only) via CDP (`:hover` matched false, decoration still
	   "underline"). Because a parent's own underline renders visually
	   under child inline content even when the child's own decoration
	   computes "none" (the child isn't where the line is drawn), this was
	   the true cause of the Category/Date/Title underline bleed Human
	   Review saw on hover — not anything hover-specific. */
	text-decoration: none;
}

/* Required Hover Behavior (Phase 9-5D.2, Issue #2, §12): Production
   underlines ONLY the title on card hover — category/date never underline,
   and the card/title's own `color` doesn't change.
   Phase 9-5G.1 Human Review Finding 10 correction: the Phase 9-5D.2 note
   excluding `.is-artical-main` from this rule was wrong — re-verified via
   a real `Input.dispatchMouseEvent` hover (not `CSS.forcePseudoState`,
   this project's own established source of false negatives) on BOTH
   Production's Single Article「関連記事」grid AND Media TOP's own
   「新着記事」grid: both contexts underline the title on hover identically
   (`.bl_m_cms_article a:hover .el_m_card_ttl`, confirmed via
   `CSS.getMatchedStylesForNode`) — this is the Standard Card's own
   universal hover behavior, not limited to the default variant. The
   `:not(.is-artical-main)` exclusion is removed accordingly. Also adds the
   matching image-opacity hover (`.bl_m_cms_article a:hover .el_m_card_img
   { opacity:.7 }` on Production), which this component never had at all
   until now, on TOP or here. */
.bl_m_card_v1:hover .el_m_card_ttl {
	text-decoration: underline;
}

.bl_m_card_v1:hover .el_m_card_img {
	opacity: 0.7;
}

.bl_m_card_v1_img {
	display: block;
	width: 100%;
	aspect-ratio: 1.91 / 1; /* Production-measured: 375.94×196.81 at 1440px */
	overflow: hidden;
	background-color: var(--media-color-gray-93);
}

.bl_m_card_v1_img .el_m_card_img,
.bl_m_card_h1_img .el_m_card_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s; /* Production-measured — see the Finding 10 hover rule above */
}

.bl_m_card_v1_cnt {
	display: flex;
	flex-direction: column;
	gap: 0.4rem; /* 6.4px, Production-measured */
}

/* Human Review Correction (Phase 9-5D.1, Issues #2/#3/#4) — ROOT CAUSE:
   Foundation.css's `.media-site h2 { font-size: 1.5rem; }` /
   `.media-site h3 { font-size: 1.25rem; }` / `.media-site h1,h2,...
   { font-weight: 700; }` rules (specificity 0,1,1 — one class + one
   element) were silently beating this single-class `.el_m_card_ttl` rule
   (0,1,0), regardless of source order — confirmed via direct Computed
   Style comparison: Local was rendering 24px/700 (Horizontal default, h2)
   and 20px/700 (Horizontal side, h3) instead of the correct values below.
   Re-verified fresh against Production (not reusing the previous round's
   numbers), and fixed by matching Foundation's specificity with an
   element+class selector here, for every heading level this component
   actually uses (h2 for Horizontal default, h3 for Standard Card and
   Horizontal side). */
h2.el_m_card_ttl,
h3.el_m_card_ttl {
	margin: 0;
	font-size: 1.125rem; /* 18px, Production-measured (Standard Card + Horizontal default) */
	font-weight: 600;
	color: var(--media-color-text);
}

/* Tablet QA Correction (Phase 9-5D.1, Tablet round): the shared rule above
   previously also set `line-height: 1.72` for every context, copied from
   the Horizontal Default card's own measurement — re-checked across
   768–1440px this round and found Production actually uses two distinct
   ratios depending on context, consistent at every width in that range
   (not a responsive breakpoint): the plain Standard Card (h3, no
   modifier) uses 1.67, the Horizontal Default card (h2) uses 1.72. Split
   into two context-scoped rules rather than one shared value. */
.bl_m_card_v1 h3.el_m_card_ttl:not(.is-artical-main) {
	line-height: 1.67; /* 30.06px at 18px, Production-measured */
}

.bl_m_card_h1:not(.is-side) h2.el_m_card_ttl {
	line-height: 1.72; /* 30.96px at 18px, Production-measured */
}

/* Line-clamp utilities — Production's own `show-2line`/`show-3line` names,
   reused verbatim (confirmed via CDP: these ARE the real clamp classes, not
   Webflow-internal noise). */
.show-2line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.show-3line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Related-articles context modifier (Single Article's 関連記事 grid) —
   Production applies this to card/content/info/category/date/title but NOT
   the image wrapper (confirmed via CDP). Tablet QA Correction (Phase
   9-5D.1, Tablet round): the previous round's "no distinct rule" claim was
   wrong — it never actually checked this modifier's own font-size/padding
   values, only layout. Fresh measurement (consistent at every width from
   600px to 1440px, not a responsive breakpoint) shows a genuinely smaller,
   compact variant distinct from the default Standard Card. */
/* Phase 9-5G.1 Human Review Finding 9 (Related Articles Category Badge
   padding "looks cramped"): the horizontal padding here was already
   correct — the actual gap was a missing `line-height` override. This
   modifier's real line-height is 1.6 (not the base `.el_m_cat`'s 1.2),
   confirmed via `CSS.getMatchedStylesForNode` — with zero vertical padding,
   that taller line-height IS the badge's entire visual height, so omitting
   it made the badge noticeably shorter/tighter than Production's. */
.el_m_cat.is-artical-main {
	font-size: 0.75rem; /* 12px, Production-measured */
	padding: 0 0.5rem; /* 0px 8px, Production-measured — no vertical padding */
	line-height: 1.6; /* Production-measured */
}

.bl_m_card_day.is-artical-main {
	font-size: 0.625rem; /* 10px, Production-measured */
}

h3.el_m_card_ttl.is-artical-main {
	font-size: 0.8125rem; /* 13px, Production-measured */
	line-height: 1.67; /* 21.71px at 13px, Production-measured */
}

/* ---------------------------------------------------------------------
 * Horizontal Article Card (.bl_m_card_h1) — Article Archive, Category
 * Archive, Tag Archive (1-col list) + `.is-side` sidebar variant.
 * ------------------------------------------------------------------- */
.bl_m_card_h1 {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.5rem 3.4%; /* 24px row gap, Production's own 3.4% column gap */
	text-decoration: none;
}

/* Human Review Correction (Phase 9-5D.1, found during Issue #6 re-check) —
   same specificity bug: the `is-side` variant's outer element is itself an
   `<a>` (default variant's outer element is a plain `<div>`, unaffected),
   so Foundation's `.media-site a { color: primary }` (0,1,1) was beating
   this single-class `color: inherit` (0,1,0), computing navy instead of
   Production's actual rgb(51,51,51) — confirmed via CDP. */
a.bl_m_card_h1 {
	color: var(--media-color-text);
	/* Human Review Correction (Phase 9-5D.2, Issue #2): same underline-bleed
	   bug as `.bl_m_card_v1` above — only affects the `.is-side` variant
	   since that's the only one rendered as an `<a>`. */
	text-decoration: none;
}

.el_m_card_h1_link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bl_m_card_h1_cnt {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1 1 auto;
	min-width: 0;
	order: 1;
}

.bl_m_card_h1_box {
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* 12px, Production-measured */
}

.el_m_card_txt {
	font-size: 1rem; /* 16px */
	font-weight: 400;
	line-height: 1.75; /* 28px at 16px */
	color: var(--media-color-text);
}

.bl_m_card_h1_img {
	display: block;
	flex-shrink: 0;
	width: 45%;
	max-width: 22.5rem; /* 324.39px at 1440px, Production-measured */
	aspect-ratio: 1.91 / 1;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--media-color-gray-93);
	order: 2;
}

/* Sidebar variant: card itself is the link (no excerpt, so no inner overlay
   link is needed — confirmed via CDP, a genuinely different DOM shape, not
   just a CSS modifier on the same markup). */
.bl_m_card_h1.is-side {
	align-items: center;
}

.bl_m_card_h1_cnt.is-side {
	gap: 0.5rem;
}

.bl_m_card_h1_img.is-side {
	width: 35%;
	max-width: 9rem;
}

/* Human Review Correction (Phase 9-5D.1, Issue #3) — ROOT CAUSE: these
   compact sizes did not exist at all, so the sidebar's narrow content
   column used the default card's full-size category/date, whose combined
   width exceeded the column and triggered `.bl_m_card_info`'s
   `flex-wrap: wrap`, pushing the date onto its own line instead of staying
   on the same row as the category — confirmed via CDP (category/date
   bounding-rect top coordinates differed before this fix, matched after).
   Values below are fresh Production measurements of the sidebar's own
   "latest articles" widget, not reused from a prior round. */
h3.el_m_card_ttl.is-side {
	font-size: 0.875rem; /* 14px, Production-measured */
	font-weight: 400;
	line-height: 1.6; /* 22.4px at 14px, Production-measured */
}

/* Required Hover Behavior (Phase 9-5D.2, Issue #2, §12/§14): unlike the
   Horizontal Default variant (confirmed via CDP: its title stays "none"
   through hover, no rule added for it), the Side variant DOES underline
   its title on hover, matching the Standard Card's pattern. Category/date
   are untouched (no rule targets them). */
.bl_m_card_h1.is-side:hover .el_m_card_ttl {
	text-decoration: underline;
}

.el_m_cat.is-side {
	padding: 0.375rem 0.5rem; /* 6px 8px, Production-measured */
}

.bl_m_card_day.is-side {
	font-size: 0.75rem; /* 12px, Production-measured */
}

/* ---------------------------------------------------------------------
 * Tag Pill (.bl_m_tag) — TOP 注目タグ.
 * ------------------------------------------------------------------- */
.bl_m_tag_box {
	display: flex;
	flex-wrap: wrap;
	/* Tag Pill Flex-wrap Follow-up (Phase 9-5D.2, §21/22): traced Production's
	   real wrap-controlling element this round — not `.bl_m_tag_box` (which
	   exists on Production too, but as `display:block`, not the wrap
	   container) but its grandparent `.ly_m_cms_tag.is-highlight`
	   (`display:flex; flex-wrap:wrap; gap:16px`), confirmed by walking the
	   DOM ancestor chain. The previous round's "computed nowrap" finding was
	   from measuring the wrong element. Mechanism already matched (both
	   flex+wrap); only the gap value was off (12px here vs Production's
	   16px) — fixed below. Row-count differences seen between Production
	   and this Preview at narrower widths are from the Preview's own fixed
	   demo container width, not from this wrap rule. */
	gap: 1rem; /* 16px, Production-measured */
}

.bl_m_tag {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem; /* 10px */
	background-color: var(--media-color-white);
	border: 1px solid var(--media-color-primary);
	border-radius: 4px;
	padding: 0.5rem 0.9375rem; /* 8px 15px */
	color: var(--media-color-primary);
	font-size: 0.875rem; /* 14px */
	font-weight: 400;
	line-height: 1.2; /* 16.8px at 14px */
	text-decoration: none;
}

/* Human Review Correction (Phase 9-5D.2, Issue #2): this element is always
   an `<a>` (tag-pill.php), so the single-class `text-decoration: none`
   above (0,1,0) was losing its DEFAULT (non-hover) state to Foundation's
   `.media-site a { text-decoration: underline; }` (0,1,1) — confirmed via
   CDP (`:hover` false, decoration still "underline" at rest). The existing
   `.bl_m_tag:hover` rule above was unaffected by this (two classes, 0,2,0,
   already beats Foundation's base rule), which is why only the default
   state showed the bug. */
a.bl_m_tag {
	text-decoration: none;
}

.bl_m_tag_svg {
	flex-shrink: 0;
	width: 0.875rem; /* 14px */
	height: 0.875rem;
}

/* Human Review Correction (Phase 9-5D.1, Issue #5) — ROOT CAUSE: this
   hover rule did not exist at all; only Foundation's generic
   `.media-site a:hover { text-decoration-color: currentColor; }` was
   firing, so only the underline reacted. Production-measured hover state
   (re-verified fresh this round): background and border turn to
   `--media-color-primary`'s own navy with white text, no underline. The
   tag-pill.php SVG icon already uses `fill="currentColor"`, so it follows
   the `color` change here automatically without a separate SVG rule. */
.bl_m_tag:hover {
	background-color: var(--media-color-primary);
	color: var(--media-color-white);
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Section heading — TOP 新着記事/おすすめ記事/特集, 注目タグ.
 * ------------------------------------------------------------------- */
/* Human Review Correction (Phase 9-5E.2): this is always an `<h2>`
   (page-media.php), so the single-class rule below (0,1,0) was losing to
   Foundation's `.media-site h2 { font-size: 1.5rem; font-weight: 700; }`
   (0,1,1) — the same specificity pattern found repeatedly throughout this
   file. Production re-measured fresh this round confirms the values below
   were already correct; only the selector needed the element+class bump. */
h2.el_m_sec_ttl {
	margin: 0;
	font-size: 2rem; /* 32px, Production-measured */
	font-weight: 400;
	line-height: 1.72; /* 55.04px at 32px, Production-measured */
	color: var(--media-color-black);
}

.el_m_tag_ttl {
	margin: 0;
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	color: var(--media-color-text);
}

/* ---------------------------------------------------------------------
 * Author Card, grid (.bl_m_card_a1) — Author Archive.
 * ------------------------------------------------------------------- */
.bl_m_card_a1 {
	display: flex;
	flex-direction: column;
	/* Human Review Correction (Phase 9-5D.1, Issue #7): Production computes
	   `align-items: center` here (re-verified fresh), not flex-start — the
	   image/name/job/button column is cross-axis centered. Note this is
	   NOT `text-align: center` on the text itself (Production's name/job
	   text-align is `start`); it's purely flexbox centering of the column's
	   children. */
	align-items: center;
	gap: 0.5rem; /* 8px, Production-measured */
	text-decoration: none;
	/* Phase 9-5I.2 Human Review correction (equal card height per row):
	   confirmed via `CSS.getMatchedStylesForNode` that Production declares
	   `height: 100%` here. The grid's own default `align-items: normal`
	   (archive.css `.ly_m_cms_3col.is-author`, unchanged) already stretches
	   each card's own grid-item WRAPPER (the `<div role="listitem">` in
	   archive-article_author.php) to match its row's tallest wrapper — but
	   without this `height: 100%` the CARD itself (one level further in,
	   `.bl_m_card_a1`) only ever sized to its own content, visibly falling
	   short of its now-taller wrapper whenever a neighboring card in the
	   same row had a longer job title ("1on1総研編集部" has no job title at
	   all, so it was always the shortest card in any row it shared with a
	   longer one — e.g. 西澤知輝's two-line title). Confirmed via a direct
	   wrapper-height-vs-card-height comparison that Production's own wrapper
	   and card heights are always equal (270px/270px for this exact row on
	   Production) while Local's were not (279px wrapper / 228px card)
	   before this fix. */
	height: 100%;
	/* Phase 9-5I.1 Human Review correction: the card's own box decoration
	   (border/radius/padding) was never implemented — confirmed via
	   `getComputedStyle()` against live Production
	   (https://kakeai.co.jp/media/article-authors): 1px solid
	   `--media-color-gray-82` on all 4 sides, overridden to 6px solid
	   `--media-color-primary` on the top edge only (declaration order below
	   matters: the shorthand `border` must come first so the later
	   `border-top` longhand wins), 4px radius, 1.5rem vertical / 7.5%
	   horizontal padding (ratio confirmed constant — 7.485%/7.497%/7.492%/
	   7.488% — across 1440/991/768/390px, i.e. a real percentage value, not
	   a coincidence at one width). */
	border: 1px solid var(--media-color-gray-82);
	border-top: 0.375rem solid var(--media-color-primary); /* 6px, Production-measured */
	border-radius: 0.25rem; /* 4px, Production-measured */
	padding: 1.5rem 7.5%; /* 24px vertical, Production-measured */
}

/* Phase 9-5I.1 Human Review correction: Production dispatches a real hover
   test (`:hover` pseudo-class, not `CSS.forcePseudoState`) showing the
   image fades to 0.7 opacity on hover (title gets no underline) — the same
   pattern as every other card component in this file, but never added for
   this one. `.bl_m_card_a1` only ever appears on the Author Archive (unlike
   `.bl_m_card_h1`, which is also reused on Single Article and so needs a
   `.media-archive`-scoped rule in archive.css instead), so this is safe to
   declare directly here. */
.bl_m_card_a1 .el_m_card_img {
	transition: opacity 0.2s;
}

.bl_m_card_a1:hover .el_m_card_img {
	opacity: 0.7;
}

/* Human Review Correction (Phase 9-5D.1, found during Issue #6 re-check) —
   same `<a>` + Foundation `.media-site a` specificity bug as above: this
   element is always an `<a>` (author-card.php), so the single-class
   `color: inherit` here was losing to Foundation's element+class rule,
   computing navy instead of Production's actual rgb(51,51,51). */
a.bl_m_card_a1 {
	color: var(--media-color-text);
	/* Human Review Correction (Phase 9-5D.2, Issue #2): same underline-bleed
	   bug as `.bl_m_card_v1`/`.bl_m_card_h1` above. */
	text-decoration: none;
}

/* Phase 9-5I.1 Human Review correction: the `width:100%; max-width:6.5rem`
   pair was a flat 104.8px cap that happened to roughly match Production's
   own 1440px value by coincidence, but Production's real rule — confirmed
   directly via `CSS.getMatchedStylesForNode` (the actual declared property,
   not inferred from a computed-pixel ratio, which this round first got
   wrong against the card's OUTER width instead of its post-padding content
   box) — is `width: 57%` of the card's own content box, with no max-width
   at all. The old fixed cap silently shrank this image well below
   Production's real size at Tablet (991/768px) and especially SP (390px),
   not just a rounding difference. */
.bl_m_card_a1_img {
	width: 57%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* Human Review Correction (Phase 9-5D.1, Issue #7): the circular mask
	   lives on this WRAPPER, not on the <img> itself — confirmed via CDP,
	   Production's own `<img>` computes `border-radius: 0` in both
	   Production and the prior Local build, so only this wrapper rule was
	   missing. */
	border-radius: 50%;
	background-color: var(--media-color-gray-93);
}

.el_m_card_img.square {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Human Review Correction (Phase 9-5D.1, found during Issue #7 re-check) —
   same Foundation `.media-site h2` specificity bug as `.el_m_card_ttl`:
   this element is an `<h2>` (author-card.php), confirmed via CDP computing
   24px/700 locally instead of Production's actual 18px/600. */
h2.el_m_card_a1_ttl {
	margin: 0;
	font-size: 1.125rem; /* 18px, Production-measured */
	font-weight: 600;
	color: var(--media-color-text);
}

.el_m_card_a1_job {
	font-size: 0.75rem; /* 12px */
	font-weight: 400;
	color: var(--media-color-text);
}

.bl_m_card_a1_btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--media-color-primary);
	font-size: 0.875rem;
}

.bl_m_card_a_btn_svg {
	width: 0.75rem; /* 12px */
	height: 0.75rem;
}

/* ---------------------------------------------------------------------
 * Author Card, inline (.bl_m_card_a2) — Single Article author block.
 * ------------------------------------------------------------------- */
/* Phase 9-5G correction (self-caught during Single Article QA — this
   component had never been verified against a live Single Article page
   before, since Single didn't exist until this Phase): Production's real
   `.bl_m_card_a2` is a bordered panel (1px gray border all round, a 6px
   primary-colored accent on the LEFT edge at PC / on the TOP edge at SP,
   0.3rem corner radius, generous padding) — entirely absent from this
   component until now. Confirmed via `CSS.getMatchedStylesForNode` against
   live Production (0231) at both 1440px and 390px. */
.bl_m_card_a2 {
	display: flex;
	/* Human Review Correction (Phase 9-5D.1, Issue #8, PC): Production
	   computes `align-items: center` on this row container (re-verified
	   fresh this round), not flex-start. */
	align-items: center;
	gap: 1.125rem 3%; /* 18px row / 3% column, Production-measured */
	border: 1px solid var(--media-color-gray-82);
	border-left: 0.375rem solid var(--media-color-primary); /* 6px accent, Production-measured */
	border-radius: 0.3rem; /* Production-measured */
	padding: 2.5rem 5.6%; /* Production-measured */
	color: var(--media-color-gray-41);
	font-size: 0.875rem;
	font-weight: 300;
}

.bl_m_card_a2_img {
	flex-shrink: 0;
	/* Phase 9-5G correction (self-caught during Single Article QA): this was
	   a flat `6.5rem` (104px), a units slip from the intended 96px (96px ÷
	   16 = 6rem, not 6.5rem) that also never reproduced Production's own
	   responsive `width:16%;max-width:6rem` shape — confirmed via
	   `CSS.getMatchedStylesForNode` against live Production (0231). */
	width: 16%;
	max-width: 6rem; /* 96px at 1440px, Production-measured — intentionally
	                     smaller than the Grid card's ~104.8px; not unified. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* Human Review Correction (Phase 9-5D.1, Issue #8): same wrapper-level
	   circular mask as the Grid card (Issue #7) — confirmed via CDP. */
	border-radius: 50%;
	background-color: var(--media-color-gray-93);
}

.bl_m_card_a2_box {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	/* Phase 9-5G correction (self-caught during Single Article QA): Production's
	   box is 81% of the card's own (now-padded) content width, not simply
	   "whatever flex leaves over" — confirmed via `CSS.getMatchedStylesForNode`. */
	width: 81%;
}

/* Human Review Correction (Phase 9-5D.3) — re-measured fresh against
   Production this round (not reused from Phase 9-5D.1): `align-items` is
   `center` at every width (PC row AND SP column), not `baseline` as
   originally implemented; row gap is 20px, not 12px. Both corrected at
   the base level since Production shows no breakpoint change for either
   value — this is a universal fix, not SP-only. */
.bl_m_card_a2_name {
	display: flex;
	align-items: center;
	gap: 1.25rem; /* 20px, Production-measured (PC row gap) */
}

/* Human Review Correction (Phase 9-5D.3): font-weight (300) was never set
   (defaulted to inherited 400), and the color used `--media-color-gray-46`
   (#757575) when Production's actual computed color is `--media-color-
   gray-41` (#686868) — confirmed via CDP, constant at all widths. */
.el_m_card_name_txt {
	font-size: 0.75rem; /* 12px */
	font-weight: 300;
	line-height: 1.83; /* 21.96px at 12px, Production-measured */
	color: var(--media-color-gray-41);
}

/* Human Review Correction (Phase 9-5D.3): font-size was 18px, Production's
   actual value is 20px (constant at all widths, not SP-specific) —
   confirmed via CDP, this was simply never checked in a prior round.
 *
 * Phase 9-5I ROOT CAUSE (self-caught during Production/Local comparison):
 * this component now also renders as a real `<h1>` on its own
 * single-article_author.php page (author-card-inline.php's new
 * `heading_tag` arg — Production's own Author Detail page uses `<h1
 * class="el_m_card_a2_ttl">` there too, confirmed via CDP), and once it is
 * an `<h1>`, foundation.css's `.media-site h1 { font-size: 1.75rem }`
 * (specificity 0,1,1 — one class + one type) ties this single-class rule's
 * own specificity (0,1,0) and wins by source order (foundation.css loads
 * first), rendering 28px instead of 20px — the same recurring Foundation-
 * vs-page-specificity collision pattern documented throughout this theme.
 * `h1.el_m_card_a2_ttl` below (0,1,1) matches the Foundation rule's own
 * specificity and wins by cards.css loading after it; harmless when this
 * selector is a `<div>` instead (Single Article's own usage), since a
 * `h1.foo` selector simply never matches a `<div class="foo">` element.
 * `margin: 0` added for the same reason — Foundation's h1 rule's own
 * `margin: 0 0 1rem` property is untouched by the font-size/font-weight/
 * line-height/color properties above (CSS cascades per-property, not
 * per-rule), so it was still leaking through even after those; Production's
 * own computed margin here is `0px` at every width. */
.el_m_card_a2_ttl,
h1.el_m_card_a2_ttl {
	margin: 0;
	font-size: 1.25rem; /* 20px, Production-measured */
	font-weight: 600;
	line-height: 1.3; /* 26px at 20px, Production-measured */
	color: var(--media-color-text);
}

.el_m_card_txt.is-author {
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--media-color-text);
}

.bl_m_card_a2_btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--media-color-primary);
	font-size: 0.875rem;
	text-decoration: none;
	width: fit-content;
}

/* Human Review Correction (Phase 9-5D.2, Issue #2): same underline-bleed
   bug as `.bl_m_tag` above — this is always an `<a>`
   (author-card-inline.php), Production confirmed text-decoration stays
   "none" by default and on hover. */
a.bl_m_card_a2_btn {
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Responsive — reusing Foundation's own breakpoints (991/768/479,
 * Phase 9-5A research) rather than inventing new ones.
 *
 * Human Review Correction (Phase 9-5D.1): the block that used to live here
 * (a ≤991px image max-width cap, and a ≤767px wrap/stack/reorder override
 * for `.bl_m_card_h1`) was never checked against real Production Tablet/SP
 * DOM and turned out to be wrong on both counts, confirmed via fresh CDP
 * measurement this round:
 *   - Tablet (991px/768px): Production's Horizontal Default thumbnail is
 *     NOT capped at 12rem/192px — it renders uncapped (243.1px @991,
 *     188.4px @768, i.e. plain 45% of its container) — the old cap was
 *     silently shrinking the image below Production's real size.
 *   - SP (390px/375px): Production's Horizontal card (default AND side)
 *     never wraps/stacks at all — it stays the same side-by-side
 *     `flex-wrap: nowrap` row layout as desktop at every width down to
 *     375px (confirmed: flexWrap "nowrap", image keeps its 45%/35% width,
 *     DOM order unchanged). The excerpt paragraph (`.el_m_card_txt`) is
 *     the only thing that changes — Production sets it to `display: none`
 *     below 768px, rather than hiding the whole layout. Title font-size
 *     drops from 18px to 14px at the same ≤767px breakpoint (weight stays
 *     600 in both the Standard and Horizontal-default cards — only
 *     size/line-height shrink, confirmed via CDP), with different
 *     line-height ratios per component (1.6 for the Standard Card's h3,
 *     1.4 for the Horizontal Default's h2) so these need separate rules
 *     rather than one shared one.
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Must match (and so override) the base rule's
	   `.bl_m_card_v1 h3.el_m_card_ttl:not(.is-artical-main)` selector
	   specificity (0,3,1) exactly — a plain `.bl_m_card_v1 h3.el_m_card_ttl`
	   here (0,2,1) would lose to that base rule's line-height even inside
	   this media query, since the base rule has no media guard of its own.
	   Caught via PC1440/SP390 regression re-check after the Tablet round's
	   line-height split (the SP rule was briefly shadowed and silently
	   fell back to the non-SP 1.67 ratio instead of SP's own 1.6). */
	.bl_m_card_v1 h3.el_m_card_ttl:not(.is-artical-main) {
		font-size: 0.875rem; /* 14px, Production-measured */
		line-height: 1.6; /* 22.4px at 14px, Production-measured */
	}

	.bl_m_card_h1:not(.is-side) h2.el_m_card_ttl {
		font-size: 0.875rem; /* 14px, Production-measured */
		line-height: 1.4; /* 19.6px at 14px, Production-measured */
	}

	/* Related-card title keeps its own 13px at SP too (confirmed via CDP,
	   unlike the default Standard Card it does NOT jump to 14px) — only the
	   line-height ratio shifts to match the generic SP ratio. Specificity
	   bumped above the generic `.bl_m_card_v1 h3.el_m_card_ttl` rule so this
	   wins regardless of source order. */
	.bl_m_card_v1 h3.el_m_card_ttl.is-artical-main {
		font-size: 0.8125rem; /* 13px, Production-measured */
		line-height: 1.6; /* 20.8px at 13px, Production-measured */
	}

	.bl_m_card_h1_box .el_m_card_txt {
		display: none;
	}

	/* Human Review Correction (Phase 9-5D.3, most important per §10):
	   ROOT CAUSE — `.bl_m_card_a2_name` never had an SP flex-direction
	   override, so role("執筆者")/name stayed side-by-side (row) even
	   after the outer `.bl_m_card_a2` switched to column below. Confirmed
	   via a full 1440→375px breakpoint sweep that the outer card and this
	   inner name-wrapper switch row→column at the EXACT SAME breakpoint
	   (≤767px, not 767/479 split as initially suspected) — so no separate
	   media query was needed, just the missing rule added to this
	   existing block. Gap also narrows from 20px (PC row) to 16px
	   (SP column), Production-measured. */
	.bl_m_card_a2_name {
		flex-direction: column;
		gap: 1rem; /* 16px, Production-measured */
	}

	/* Phase 9-5G correction (self-caught during Single Article QA):
	   Phase 9-5D.3's own horizontal-padding-only correction (~14–18px) is
	   superseded here now that a live Single Article page exists to measure
	   against directly — Production's real SP rule keeps the base rule's
	   vertical 2.5rem (40px) padding and sets horizontal padding to 4%
	   (not a flat 1rem), AND moves the accent border from the left edge to
	   the TOP edge (`border-top: 6px solid primary; border-left: 1px solid
	   gray82`, replacing the base rule's 6px left accent) — confirmed via
	   `CSS.getMatchedStylesForNode` against live Production at 390px (0231). */
	.bl_m_card_a2 {
		flex-direction: column;
		border-top: 0.375rem solid var(--media-color-primary); /* 6px, Production-measured */
		border-left: 1px solid var(--media-color-gray-82);
		padding-left: 4%;
		padding-right: 4%;
	}

	.bl_m_card_a2_box {
		gap: 1rem; /* Production-measured */
		width: 100%;
	}

	/* Phase 9-5G correction (self-caught during Single Article QA): SP's own
	   cap is a DIFFERENT value from PC's (123px, not 96px) — confirmed via
	   `CSS.getMatchedStylesForNode` against live Production at 390px
	   (0231); `6.5rem` at this breakpoint was the same units-slip bug as
	   the base rule's, not a coincidentally-matching intentional value. */
	.bl_m_card_a2_img {
		width: 100%;
		max-width: 7.6875rem; /* 123px, Production-measured */
	}
}