/* ============================================================
   BSX-PUB ARTICLE — row cards, category-sectioned homepage,
   layout variants (hero/compact/horizontal/bottom/sidebar/text).
   Requires the site's own shared design tokens (--bsx-text,
   --bsx-border, --bsx-bg, --bsx-accent-mid, --bsx-radius-lg,
   --bsx-shadow-md, --bsx-transition), same convention as
   bsx-opi-row.css / bsx-camp-row.css.

   Design: bsx_pub_render_article_row() outputs the SAME fields
   in the same order for every layout — this file is what
   actually differentiates them (position, visibility, size).
   ============================================================ */

p:empty {
	display: none;
}

.bsx-pub-article-row-wrap {
	position: relative;
	height:   100%;
}

.bsx-pub-article-row-link {
	position:        absolute;
	inset:           0;
	z-index:         2;
	text-decoration: none;
}

.bsx-pub-layout {
    display: flex;
    flex-direction: row;
}

.bsx-pub-article-row {
	display:        flex;
	flex-direction: column;
	border:         1px solid var(--bsx-border);
	border-radius:  var(--bsx-radius-lg);
	overflow:       hidden;
	transition:     all var(--bsx-transition);
	height:         100%;
	color:          var(--bsx-text);
}

.bsx-pub-article-row-link:hover ~ .bsx-pub-article-row {
	box-shadow:   var(--bsx-shadow-md);
	border-color: var(--bsx-accent-mid);
}


.bsx-pub-article-row-thumbnail img {
	width:      100%;
	height:     160px;
	object-fit: cover;
	display:    block;
}

.bsx-pub-article-row-body {
	padding: 0.5rem;
}

/* Date: hidden by default — only the "sidebar" layout shows it, above
   Claim/Title, per the mockup. */
.bsx-pub-article-row-date {
    font-size: 0.7rem;
    color: var(--bsx-accent2);
    margin-bottom: 1rem;
/*	display: none; */
}

.bsx-pub-article-row-claim {
	font-size:     0.8rem;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color:          var(--bsx-accent);
}

.bsx-pub-article-row-title {
    font-size: 1.15rem;
    line-height: 1.2rem;
    color:     var(--bsx-text);
    margin-bottom: 1rem;
}

.bsx-pub-article-row-excerpt {
	margin:      0 0 0.5rem;
	font-size:   0.8rem;
	color:       var(--bsx-text);
	line-height: 1rem;
}

.bsx-pub-article-row-meta {
	margin:    0;
	font-size: 0.8rem;
	color:     var(--bsx-accent);
}

.bsx-pub-article-row-cat {
	font-weight: 600;
}

.bsx-pub-article-row-cat::after {
	content: " · ";
}

/* Byline wording differs by layout ("by X" vs "Written by X") — purely
   presentational, done via ::before rather than duplicating markup. */
.bsx-pub-article-row-byline::before {
	content: "by ";
}

/* --- Category section wrapper (shared by [bsx_pub_homepage] and
   [bsx_pub_category_section]) ---
   width: 100% — the sections sit inside WP vertical flex groups
   (align-items: flex-start), which would otherwise shrink them to
   their content width. */
.bsx-pub-homepage-section,
.bsx-pub-category-section {
	margin-bottom: 2.5rem;
	width:         100%;
}

.bsx-pub-homepage-section-header {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	margin-top:      1.5rem;
	border-bottom:   1px solid var(--bsx-border);
	margin-bottom:   0.5rem;
}

.bsx-pub-homepage-section-header h2 {
    display: flex;
    font-size: 1.5rem;
    color: #6d0a20;
    margin: 0;
}

.bsx-pub-homepage-see-more {
    display: flex;
    color:           var(--bsx-accent);
    text-decoration: none;
    font-size:       0.9rem;
}

.bsx-pub-homepage-see-more:hover {
	text-decoration: underline;
}

.bsx-pub-homepage-row,
.bsx-pub-category-section-row {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   0.5rem;
}

@media (max-width: 800px) {
	.bsx-pub-homepage-row,
	.bsx-pub-category-section-row {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   LAYOUT VARIANTS
   ============================================================ */

/* --- compact (default) — image on top, text below, 3-across grid.
   No overrides needed: this matches the base card styling above
   exactly, which was designed around this layout originally. --- */

/* --- hero — image on the left, text on the right, together spanning
   the full width. Container is a single column (typically used with
   count=1). --- */
.bsx-pub-category-section-row--hero {
	grid-template-columns: 1fr;
}

.bsx-pub-layout-hero .bsx-pub-article-row {
	flex-direction: row;
}

.bsx-pub-layout-hero .bsx-pub-article-row-thumbnail {
	flex: 0 0 61.9%;
}

.bsx-pub-layout-hero .bsx-pub-article-row-thumbnail img {
	min-height: 360px;
}

.bsx-pub-layout-hero .bsx-pub-article-row-body {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	padding:         1rem 1rem;
}

.bsx-pub-layout-hero .bsx-pub-article-row-title {
    font-size: 1.5rem;
    line-height: 1.6rem;
}

.bsx-pub-layout-hero .bsx-pub-article-row-excerpt {
    font-size: 0.9rem;
    line-height: 1rem;
}

.bsx-pub-layout-hero .bsx-pub-article-row-body {
    margin-left:1rem;
}

/* --- horizontal — smaller image on the left, text on the right.
   Single-column container, more compact than hero. --- */
.bsx-pub-category-section-row--horizontal {
	grid-template-columns: 1fr;
}

.bsx-pub-layout-horizontal .bsx-pub-article-row {
	flex-direction: row;
}

.bsx-pub-layout-horizontal .bsx-pub-article-row-thumbnail {
	flex: 0 0 38.3%;
}

.bsx-pub-layout-horizontal .bsx-pub-article-row-thumbnail img {
	min-height: 180px;
}

.bsx-pub-layout-horizontal .bsx-pub-article-row-body {
	flex:    1;
	padding: 0.9rem 1.25rem;
}

/* --- bottom — image on top, text placed below the image.
   Card stays column-direction (the base default); the thumbnail must
   NOT get a percentage flex-basis here, since in a column that applies
   to the height, not the width. --- */
.bsx-pub-category-section-row--bottom {
	grid-template-columns: 1fr;
}


.bsx-pub-layout-bottom .bsx-pub-layout {
    flex-direction: column;
}

.bsx-pub-layout-bottom .bsx-pub-article-row {
    flex-direction: column;
}

.bsx-pub-layout-bottom .bsx-pub-article-row-thumbnail {
    flex: none;
}

.bsx-pub-layout-bottom .bsx-pub-article-row-thumbnail img {
	height: 280px;
}


.bsx-pub-layout-bottom .bsx-pub-article-row-body {
    padding: 1.25rem 1.5rem;
}

.bsx-pub-layout-bottom .bsx-pub-article-row-title {
    font-size: 1.5rem;
    line-height: 1.6rem;
}


/* --- sidebar — text-only (no image), Date shown above Claim/Title,
   longer excerpt, no "more…", no category label, "Written by" wording. --- */
.bsx-pub-category-section-row--sidebar {
	grid-template-columns: 1fr;
}

.bsx-pub-layout-sidebar .bsx-pub-article-row-thumbnail {
	display: none;
}

.bsx-pub-layout-sidebar .bsx-pub-article-row-date {
	display:       block;
	color:         var(--bsx-text-muted);
	font-size:     0.8rem;
	margin-bottom: 0.5rem;
}

.bsx-pub-layout-sidebar .bsx-pub-article-row-cat {
	display: none;
}

.bsx-pub-layout-sidebar .bsx-pub-article-row-title {
	font-size: 1.3rem;
}

.bsx-pub-layout-sidebar .bsx-pub-article-row-byline::before {
	content: "Written by ";
}

.bsx-pub-layout-hero .bsx-pub-article-row-byline::before,
.bsx-pub-layout-bottom .bsx-pub-article-row-byline::before {
	content: "Written by ";
}

/* --- text — for Briefs: no image, 3-across grid (inherits the base
   section grid), date as small kicker on top, longer excerpt (the PHP
   side gives Briefs 40 words instead of 12). Even if a Brief has a
   featured image, it is never shown here. --- */
.bsx-pub-layout-text .bsx-pub-article-row-thumbnail {
	display: none;
}

.bsx-pub-layout-text .bsx-pub-article-row-body {
	padding: 0.75rem 1rem;
}

.bsx-pub-layout-text .bsx-pub-article-row-date {
	display:       block;
	margin-bottom: 0.5rem;
}

.bsx-pub-layout-text .bsx-pub-article-row-title {
	margin-bottom: 0.6rem;
}

.bsx-pub-layout-text .bsx-pub-article-row-excerpt {
	font-size:   0.85rem;
	line-height: 1.15rem;
}

/* ============================================================
   FORMAT VARIANTS (bsx-pub-format-* on the row wrap)
   ============================================================ */

/* --- partner — images shown in black & white, in every layout.
   The original image stays untouched. --- */
.bsx-pub-format-partner .bsx-pub-article-row-thumbnail img {
	filter: grayscale(1);
}

/* --- Responsive: row-based layouts collapse to a column stack on
   narrow screens rather than staying side-by-side, which gets cramped. --- */
@media (max-width: 700px) {
	.bsx-pub-layout-hero .bsx-pub-article-row,
	.bsx-pub-layout-horizontal .bsx-pub-article-row {
		flex-direction: column;
	}

	.bsx-pub-layout-hero .bsx-pub-article-row-thumbnail,
	.bsx-pub-layout-horizontal .bsx-pub-article-row-thumbnail {
		flex: none;
	}
}

/* --- Single article page --- */
.bsx-pub-single-article-header-image {
	margin-bottom: 1.5rem;
}

.bsx-pub-single-article-header-image img {
	width:         100%;
	max-height:    420px;
	object-fit:    cover;
	display:       block;
	border-radius: var(--bsx-radius-lg);
}

.bsx-pub-single-article-body {
	line-height: 1.7;
	margin-top:  1rem;
}

.bsx-pub-single-article-tags {
	margin-top: 2rem;
	color:      var(--bsx-text-muted);
	font-size:  0.85rem;
}