/**
 * Manager総研 記事一覧 — Page Layout CSS (Phase 9-5F).
 *
 * Loaded only on the Article Archive (functions.php kakeai_enqueue_assets(),
 * is_post_type_archive('article')), after cards.css. Owns Breadcrumb/H1/
 * 2-column layout/Sidebar/Pagination — Page Layout responsibilities kept out
 * of cards.css (Component-only file, CLAUDE.md Phase 9-5D §15). The
 * Horizontal Article Card itself (`.bl_m_card_h1`) is NOT redefined here —
 * it is an existing Phase 9-5D Shared Component (cards.css +
 * template-parts/media/article-card-horizontal.php), reused unchanged.
 *
 * Built from live Production measurement (https://kakeai.co.jp/media/article,
 * CDP `CSS.getMatchedStylesForNode` — the actual applied rules, not just
 * computed values — plus Screenshot/elementFromPoint cross-checks).
 */

/* `.ly_m_wrapper`/`.ly_m_container` are the same shared Media container
   pattern top.css already defines (base 3% side padding, 1176px max-width
   content column) — redeclared here since archive.css is enqueued
   independently of top.css (Archive and TOP are never loaded on the same
   request) and this page uses the same wrapper/container markup, confirmed
   via CDP: Production's own Breadcrumb/Archive sections sit in an
   identical `.ly_m_wrapper > .ly_m_container` shell (padding "0 43.1875px"
   at 1440px = 3%, `.ly_m_container` capped at 1176px and centered). */
.ly_m_wrapper {
	padding-left: 3%;
	padding-right: 3%;
}

.ly_m_container {
	width: 100%;
	max-width: 1176px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
 * Breadcrumb (.media-path).
 * ------------------------------------------------------------------- */
.bl_m_path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem 1rem; /* 8px row / 16px column, Production-measured */
	padding-top: 1.375rem; /* 22px */
	padding-bottom: 2.5rem; /* 40px */
}

.el_m_path_txt {
	color: var(--media-color-text);
	white-space: nowrap;
	font-size: 0.875rem; /* 14px */
	font-weight: 400;
	line-height: 1.57; /* 22px at 14px */
	text-decoration: none;
}

/* Phase 9-5F.1 ROOT CAUSE (Human Review, "ホーム" rendering navy instead of
   black): confirmed via `CSS.getMatchedStylesForNode` — the single-class
   `.el_m_path_txt { color: var(--media-color-text) }` above (specificity
   0,1,0) was losing to Foundation's `.media-site a { color:
   var(--media-color-primary); ... }` (components.css, specificity 0,1,1),
   the same recurring pattern already fixed throughout cards.css/top.css.
   Production itself only needs a plain `a { color: var(--primary) }`
   (0,0,1) to lose to its own `.el_m_path_txt` (0,1,0) — this theme's extra
   Foundation layer requires the extra specificity bump here. Scoped to
   `.bl_m_path` (this Archive's own Breadcrumb, not a blanket
   `.el_m_path_txt` override) so it cannot affect Corporate's own,
   separately-loaded `.el_m_path_txt` rules in kakeai-service-site.webflow.css
   (class names coincide — both are the same Webflow-origin naming pattern —
   but the two stylesheets are never enqueued on the same request). */
.bl_m_path a.el_m_path_txt {
	color: var(--media-color-text);
}

a.el_m_path_txt.is-link {
	text-decoration: underline;
	transition: opacity 0.2s;
}

.bl_m_path_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0.4375rem; /* 7px */
	height: 0.75rem; /* 12px */
	color: var(--media-color-black);
}

@media (max-width: 767px) {
	.bl_m_path {
		padding-top: 1rem; /* 16px, Production-measured */
		padding-bottom: 2rem; /* 32px, Production-measured */
	}
}

/* ---------------------------------------------------------------------
 * Page Title (.bl_m_page_ttl / .el_m_page_ttl).
 * ------------------------------------------------------------------- */
.bl_m_page_ttl {
	display: flex;
	gap: 1rem; /* 16px, Production-measured */
	padding-bottom: 4rem; /* 64px, Production-measured */
}

h1.el_m_page_ttl {
	margin: 0;
	font-size: 2rem; /* 32px, Production-measured */
	font-weight: 400;
	line-height: 1.38; /* 44.16px at 32px, Production-measured */
	color: var(--media-color-text);
}

@media (max-width: 767px) {
	h1.el_m_page_ttl {
		font-size: 1.5rem; /* 24px, Production-measured */
		line-height: 1.4; /* 33.6px at 24px, Production-measured */
	}
}

/* ---------------------------------------------------------------------
 * 2-column layout (.bl_m_2col: .bl_m_main + .bl_m_side).
 * ------------------------------------------------------------------- */
.bl_m_2col {
	display: flex;
	gap: 5rem 6.7%; /* 80px row / 6.7% column, Production-measured */
	padding-bottom: 3.5rem; /* 56px, Production-measured */
}

.bl_m_main {
	width: 61.3%; /* Production-measured */
}

.bl_m_side {
	width: 32%; /* Production-measured */
	position: relative;
}

@media (max-width: 991px) {
	.bl_m_2col {
		gap: 4% 4%; /* Production-measured */
	}

	.bl_m_main {
		width: 58%; /* Production-measured */
	}

	.bl_m_side {
		width: 38%; /* Production-measured */
	}
}

@media (max-width: 767px) {
	.bl_m_2col {
		flex-flow: column;
	}

	.bl_m_main,
	.bl_m_side {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
 * Main article list (.ly_m_cms_1col, not .is-side).
 * ------------------------------------------------------------------- */
.ly_m_cms_1col:not(.is-side) {
	display: flex;
	flex-direction: column;
	gap: 3.5rem; /* 56px, Production-measured */
}

.el_m_archive_empty {
	color: var(--media-color-text);
	font-size: 1rem;
}

/* ---------------------------------------------------------------------
 * Search result summary text (.el_m_search_summary) — Phase 9-5J.
 *
 * Production has no equivalent of this element (its own native search page
 * has no keyword/count summary line at all, confirmed during this Phase's
 * own Production Audit) — this is new, Human-approved-spec-driven UI
 * (§07), styled to simply match this Archive family's own established body
 * text conventions rather than reproducing a Production value that doesn't
 * exist to measure.
 * ------------------------------------------------------------------- */
.el_m_search_summary {
	margin: 0 0 2rem;
	color: var(--media-color-text);
	font-size: 1rem;
	line-height: 1.8;
}

/* ---------------------------------------------------------------------
 * Author Archive grid (.ly_m_cms_3col.is-author) — Phase 9-5I.
 *
 * single.css already defines a bare `.ly_m_cms_3col` for Single Article's
 * 関連記事 grid, but that file is not enqueued here (scoped to
 * `is_singular('article')`) and its own rule is a fixed 3 columns at every
 * width (Related Articles is hidden outright below 767px there, so it
 * never needs to collapse). Production's Author Archive grid, confirmed via
 * a live breakpoint sweep on https://kakeai.co.jp/media/article-authors,
 * genuinely collapses 3→2→1 columns because it sits inside the narrower
 * `.bl_m_main` column of this page's own 2-column layout rather than
 * full-width — exact breakpoints confirmed as Foundation's own existing
 * 991px/479px (not 767px), gap 32px row / 4.5% column at every width. The
 * `.is-author` modifier scopes this to the Author Archive grid only, so it
 * cannot collide with single.css's own unscoped `.ly_m_cms_3col` if both
 * were ever (hypothetically) loaded on the same request.
 * ------------------------------------------------------------------- */
.ly_m_cms_3col.is-author {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 4.5%; /* 32px row / 4.5% column, Production-measured */
}

@media (max-width: 991px) {
	.ly_m_cms_3col.is-author {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.ly_m_cms_3col.is-author {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Author Detail (single-article_author.php) `.bl_m_main` spacing —
 * Phase 9-5I.1 Human Review correction.
 *
 * Local's `.bl_m_main` here is this file's plain generic rule (a block
 * container, same as Article/Category/Tag Archive's own `.bl_m_main`,
 * which only ever needs spacing between a `.bl_m_page_ttl` H1 and its own
 * list/pagination that already carry their own padding/gap) — but
 * Production's Author Detail page stacks only two children directly
 * (profile card, article list) with NO page-title block between them, and
 * puts the needed spacing on `.bl_m_main` itself:
 * `display:flex;flex-direction:column;gap:27px`, confirmed via
 * `getComputedStyle()` as a CONSTANT 27px at every width from 1440 down to
 * 320px (not a percentage or breakpoint-dependent value). Scoped to
 * `body.single-article_author` (WordPress's own default `body_class()`
 * output for this CPT's singular template — no new PHP needed) so this
 * cannot affect `.bl_m_main` on any other archive page sharing this file.
 * ------------------------------------------------------------------- */
body.single-article_author .bl_m_main {
	display: flex;
	flex-direction: column;
	gap: 1.6875rem; /* 27px, Production-measured */
}

/* ---------------------------------------------------------------------
 * Card Hover (.bl_m_card_h1, both default + .is-side variants).
 *
 * Phase 9-5F.1 ROOT CAUSE (Human Review, Card hover missing): a live
 * mouse-dispatch test on Production (not `CSS.forcePseudoState`, which
 * does not reliably propagate `:hover` to descendants for this markup —
 * confirmed by it under-reporting the effect) found:
 *   - Default (main list) card: image opacity 1→0.7 on hover; title gets
 *     NO underline (confirmed via matched-rules while actually hovered —
 *     no `:hover` rule targets this variant's title at all, matching
 *     cards.css's own existing Phase 9-5D note for this exact variant).
 *   - `.is-side` (おすすめ記事) card: image opacity 1→0.7 on hover; title
 *     DOES get an underline — already implemented
 *     (`.bl_m_card_h1.is-side:hover .el_m_card_ttl`, cards.css, Phase
 *     9-5D), confirmed still firing correctly on Local before this round.
 * The only actually-missing piece in both variants was the image opacity
 * — Production's own rule lives on the Shared Component's class
 * (`.bl_m_card_h1:hover .el_m_card_img`), but no corresponding cards.css
 * rule was ever added for the Archive context. Added here, scoped to
 * `.media-archive`, rather than in cards.css itself (this Phase's Scope
 * Control keeps cards.css unchanged) — Single Article's 関連記事 grid and
 * any future page reusing this Shared Component are unaffected by this
 * Archive-scoped rule.
 * ------------------------------------------------------------------- */
.media-archive .bl_m_card_h1 .el_m_card_img {
	transition: opacity 0.2s; /* Production-measured */
}

.media-archive .bl_m_card_h1:hover .el_m_card_img {
	opacity: 0.7; /* Production-measured */
}

/* ---------------------------------------------------------------------
 * Sidebar (.bl_m_side > .ly_m_side_inner > .bl_m_side_block...).
 * ------------------------------------------------------------------- */
/* Phase 9-5F.2 ROOT CAUSE (Human Re-Review, Sticky Banner not visible):
   a scroll-position trace (not a single-point check) showed `bannerTop`
   decreasing in lockstep with `scrollY` all the way down — the sticky pin
   never engaged at `top: 100px`, it just scrolled past like a normal
   static element. Confirmed via direct comparison: Production's
   `.ly_m_side_inner` computes `height: 2868.89px` — exactly equal to its
   sibling `.bl_m_main`'s height (`height: 100%` of `.bl_m_side`, which
   itself already stretches to match `.bl_m_main` via the 2-column flex
   row's default `align-items: stretch`) — while Local's, missing
   `height: 100%`, computed only `2680.64px`: its own content's natural
   height, 234px SHORTER than `.bl_m_side`'s actual (stretched) height.
   That missing 234px of slack inside the sticky containing block is
   exactly the scroll range the banner needs to actually pin at `top:
   100px` before reaching `.bl_m_side`'s real bottom edge — without it,
   there was essentially no room to stick in, so the banner's own natural
   (unstuck) position scrolled straight past the Header underneath it.
   `position: relative` added to match Production's own computed value
   too (`sideInnerPosition: relative`), making this the sticky banner's
   explicit containing block rather than leaving it implicit. */
.ly_m_side_inner {
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px, Production-measured */
	height: 100%; /* Production-measured — see ROOT CAUSE above */
	position: relative; /* Production-measured */
}

/* Phase 9-5F.2 ROOT CAUSE (Human Re-Review, SP Pagination→おすすめ記事 gap
   too narrow): confirmed via `CSS.getMatchedStylesForNode` on Production
   at 390/375px — Production's `.ly_m_side_inner` carries a dedicated
   `padding-top: 3rem` (48px) at this breakpoint (plus `gap` shrinking
   4rem→3rem), which is what actually produces the visible 48px gap above
   the first sidebar block (おすすめ記事's heading) once the layout
   collapses to 1 column: flex `gap` alone never applies before a
   container's FIRST child, so without this explicit padding-top there is
   no space between `.bl_m_main`'s last element (Pagination) and
   `.bl_m_side`'s first (confirmed via a direct rect comparison: Local
   measured a 0px gap here before this fix, Production 48px). This is
   `.ly_m_side_inner`'s own responsibility, not an ad-hoc margin-top added
   to the heading — matching Production's actual CSS Architecture rather
   than visually faking the same spacing from a different element. */
@media (max-width: 767px) {
	.ly_m_side_inner {
		gap: 3rem; /* 48px, Production-measured */
		padding-top: 3rem; /* 48px, Production-measured — see ROOT CAUSE above */
	}
}

.bl_m_side_block {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px, Production-measured */
}

.bl_m_side_block.is-side,
.bl_m_side_block .ly_m_cms_1col.is-side {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px, matches the outer block's own row gap — Production's
	                sidebar "recommended articles" list uses the same gap as
	                its own block, confirmed via CDP (no separate list gap
	                value exists for this inner container). */
}

.el_m_side_block_ttl {
	margin: 0;
	border-bottom: 1px solid var(--media-color-gray-82);
	padding-bottom: 1rem; /* 16px, Production-measured */
	font-size: 1.375rem; /* 22px, Production-measured */
	font-weight: 600;
	line-height: 1.2; /* 26.4px at 22px, Production-measured */
	color: var(--media-color-text);
}

/* ---------------------------------------------------------------------
 * Sidebar — カテゴリ.
 * ------------------------------------------------------------------- */
a.bl_m_side_cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem; /* 16px, Production-measured */
	border-bottom: 1px solid var(--media-color-gray-82);
	padding: 1rem 4.2%; /* Production-measured */
	color: var(--media-color-primary);
	font-size: 1.125rem; /* 18px, Production-measured */
	font-weight: 600;
	line-height: 1.3; /* 23.4px at 18px, Production-measured */
	text-decoration: none;
}

.bl_m_side_cat_svg {
	display: flex;
	flex-shrink: 0;
	width: 0.75rem; /* 12px, Production-measured */
	transition: transform 0.2s;
}

/* ---------------------------------------------------------------------
 * Sidebar — Sticky promotional banner (Phase 9-5F.1). Production-measured:
 * `position: sticky; top: 100px`, width capped at 23.5rem (376px — the
 * sidebar's own full width at PC, so this cap only matters at Tablet
 * widths where `.bl_m_side` narrows below it), centered via auto margins,
 * no border-radius. Standard `position: sticky` behavior (pins at `top`
 * while scrolling through its own containing block, then stops naturally
 * at `.bl_m_side`'s own bottom edge) needs no extra JS or bottom-boundary
 * logic — confirmed via a live top/middle/bottom scroll test on
 * Production itself, not assumed from the "sticky" class name alone.
 * ------------------------------------------------------------------- */
.bl_m_side_banner {
	width: 100%;
	max-width: 23.5rem; /* 376px, Production-measured */
	margin-left: auto;
	margin-right: auto;
}

/* Phase 9-5F.2 correction (Human Re-Review, Sticky Banner hidden under
   Header): Production's own declared `top: 100px` is, in practice, mostly
   theoretical on Production itself — a scroll trace showed Production's
   sidebar content runs out of scrollable slack and naturally stops
   (`bannerTop` settling around 143px) BEFORE the pin value of 100px is
   ever reached, which is only why it happens to clear Production's own
   140px-tall sticky Header (components.css) there. Local's real article
   content is ~93px taller at this measurement (CMS data length, not a
   layout bug — out of this round's scope to change), so the exact same
   100px pin value actually gets fully reached here, pulling the banner
   100px below the Header's top instead of ~143px — 40px short of this
   theme's own 140px Header height (components.css, "total header height:
   140px"), tucking the banner's top edge underneath it. Rather than
   depend on Production's own content-length-dependent coincidence (which
   would reproduce the identical hidden-banner bug on Production itself if
   its content ever grew), `top` is set to clear this theme's actual,
   fixed Header height directly, guaranteeing the banner is always fully
   visible below it regardless of sidebar content length. */
.bl_m_side_banner.is-sticky {
	position: sticky;
	top: 9rem; /* 144px — this theme's own 140px sticky Header height (components.css) + a small safety margin, so the banner never tucks a single pixel under it */
}

/* Tablet correction, same round: `.media-header` (components.css, not
   edited here) wraps its nav onto a second row somewhere in the
   ~768–849px range (confirmed via a bisection sweep: 849px still measures
   140.6px tall, 830px and below measure 169.4px — not the usual 767/768
   breakpoint this theme uses elsewhere, so it is not assumed here either),
   so the base `top: 9rem` (144px) is no longer enough to clear it at
   768–991px specifically. A single conservative value sized to the
   taller 169.4px variant (covering both the 140.6px and 169.4px states
   within this one range) is simpler and safer than chasing the Header's
   own exact, non-standard sub-breakpoint. */
@media (max-width: 991px) {
	.bl_m_side_banner.is-sticky {
		top: 11.5rem; /* 184px — clears this range's taller 169.4px Header height */
	}
}

.bl_m_side_banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
 * Sidebar — タグ. Reuses cards.css's existing `.bl_m_tag_box` (TOP 注目
 * タグ's own wrap container: `display:flex; flex-wrap:wrap; gap:1rem`) —
 * Production's own sidebar tag list computes the identical mechanism
 * (`.ly_m_cms_tag { flex-flow:wrap; gap:1rem }`, confirmed via
 * `CSS.getMatchedStylesForNode`), so no archive-specific override is
 * needed here; `tag-pill.php`'s own `.bl_m_tag` markup/hover styling
 * (cards.css) is reused unchanged too.
 * ------------------------------------------------------------------- */

/* Production hides both the カテゴリ and タグ sidebar blocks outright at
   ≤767px (`display: none`, confirmed via computed style on the live
   element — not a layout side-effect of the 2-column→1-column stack
   above) — only おすすめ記事 (the block with no modifier class) stays
   visible on SP. Self-caught during QA: initially missing here, which
   left both blocks visibly stacked below おすすめ記事 on SP instead of
   hidden. */
@media (max-width: 767px) {
	.bl_m_side_block.is-cat,
	.bl_m_side_block.is-tag {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Pagination (.ly_m_cms_pn — kakeai_media_cms_pagination(), inc/helpers.php).
 * ------------------------------------------------------------------- */
.ly_m_cms_pn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.bl_m_cms_pn_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	gap: 0.5rem; /* 8px, Production-measured */
	padding-top: 4.5rem; /* 72px, Production-measured */
}

.bl_m_cms_pn_box {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem; /* 8px, Production-measured */
}

a.bl_m_cms_pn_num,
span.bl_m_cms_pn_num {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	width: 2rem; /* 32px, Production-measured */
	border: 1px solid var(--media-color-gray-82);
	border-radius: 0.5rem; /* 8px, Production-measured */
	background-color: var(--media-color-white);
	color: var(--media-color-text);
	text-align: center;
	font-size: 0.875rem; /* 14px, Production-measured */
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s;
}

span.bl_m_cms_pn_num.w--current {
	background-color: var(--media-color-primary);
	border-color: var(--media-color-primary);
	color: var(--media-color-white);
}

.bl_m_cms_pn_dots {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	color: var(--media-color-text);
	font-size: 0.875rem;
}

a.bl_m_cms_pn_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem; /* Production-measured */
	width: 100%;
	max-width: 6rem; /* 96px, Production-measured */
	border: 1px solid var(--media-color-gray-82);
	border-radius: 0.5rem; /* 8px, Production-measured */
	background-color: var(--media-color-white);
	color: var(--media-color-text);
	word-break: keep-all;
	padding: 0.5rem 0; /* 8px 0, Production-measured */
	font-size: 0.875rem; /* 14px, Production-measured */
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s;
}