/* ============================================================
   BSX-PUB RECOMMENDATION ROW
   Adapted from bsx-camp-row.css — same visual language (status
   colors, performance badge, hover lift) but a simpler grid,
   since Article's data model has no region/campaign-type to
   show, and no byline column (every recommendation is authored
   by the same publisher, unlike Campaign's Cassandra attribution,
   so it carries no information here).
   The thumbnail sits OUTSIDE the header/details grids entirely,
   as a flex sibling of a wrapper holding both rows stacked — this
   is what lets it span the full card height rather than being
   confined to just one of the two grids.
   Requires: bsx-design.css, bsx-base.css (site-wide tokens, same
   as Campaign's row relies on), plus bsx-pub-tokens.css.
   ============================================================ */
p:empty {
	display: none;
}


.bsx-pub-rec-row-wrap {
	display: flex;
	margin-bottom: 0.5rem;
	cursor: pointer;
}

.bsx-pub-rec-row-wrap:hover .bsx-pub-rec-row {
	background: var(--bsx-bg);
	box-shadow: var(--bsx-shadow-md);
	transform: scale(1.02);
	border-color: var(--bsx-accent-mid);
}


.bsx-pub-rec-chart {
	flex: 0 0 auto;
	width: 24.3%;
}


.bsx-pub-rec-row {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
	border: 1px solid var(--bsx-border);
	border-radius: var(--bsx-radius-lg);
	padding: 0.25rem;
	transition: all var(--bsx-transition);
}

/* Thumbnail — spans the full card height as a flex sibling of the
   text wrapper, not a grid item inside either row */
.bsx-pub-rec-thumb {
	flex: 0 0 auto;
	width: 12%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bsx-pub-rec-thumb img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: invert(1);
}

.bsx-pub-rec-row-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Header row: title | symbol | last-label | last-date | last-price |
   performance | pnl-label */
.bsx-pub-rec-row-header {
	display: grid;
	grid-template-columns: 33% 10% 20% 13% ;
	gap: 0.1rem;
	align-items: center;
	margin-bottom: 0.15rem;
	padding-bottom: 0.15rem;
}

.bsx-pub-rec-row-mid {
	display: grid;
	grid-template-columns: 28% 5% 10% 20% 13% 3% 18%;
	gap: 0.1rem;
	align-items: center;
	margin-bottom: 0.15rem;
	padding-bottom: 0.15rem;
}

/* Details row: status | direction | entry-label | entry-date |
   entry-price | pre-perf | pnl-label | blank | tenure-text |
   tenure-value */
.bsx-pub-rec-row-details {
	display: grid;
	grid-template-columns: 16% 17% 10% 20% 13% ;
	gap: 0.1rem;
	align-items: center;
	margin-bottom: 0.15rem;
	padding-bottom: 0.15rem;
}

/* --- Cells (reusing Campaign's exact class names/conventions where the
   concept is identical, so the same site-wide tokens apply) --- */
.bsx-pub-rec-title { font-weight: 600; font-size: var(--bsx-text-md);color: var(--bsx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsx-pub-cell { font-size: var(--bsx-text-md); color: var(--bsx-text); }
.bsx-pub-symbol { font-size: var(--bsx-text-md); color: var(--bsx-text); }
.bsx-pub-performance { text-align: right; margin-right: 1rem; }
.bsx-pub-perf-last { font-weight: 400; font-size: var(--bsx-text-md); text-align: right; }
.bsx-pub-pnl-lab { font-size: var(--bsx-text-md); color: #888; }
.bsx-pub-rec-preperf { padding-left: 6px; color: #888; font-size: 0.8rem; }

.bsx-pub-date-time-price {
    color: #21201e;
    font-weight: 400;
    font-size: var(--bsx-text-sm);
    color: var(--bsx-text);
    text-align: left; 
}
.bsx-pub-date-time-price-r {
    color: #21201e;
    font-weight: 400;
    font-size: var(--bsx-text-sm);
    color: var(--bsx-text);
    text-align: right;
}

.bsx-pub-type { font-size: var(--bsx-text-sm); color: var(--bsx-text); font-weight: 400; }

/* Status badge — same color mapping as Campaign's */
.bsx-pub-status { font-size: var(--bsx-text-md); font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 4px; }
.bsx-pub-status.green { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.bsx-pub-status.red { background: rgba(229, 115, 115, 0.15); color: #e57373; }
.bsx-pub-status.pink { background: rgba(240, 98, 146, 0.15); color: #f06292; }
.bsx-pub-status.grey { background: rgba(136, 136, 136, 0.15); color: #888; }

/* Performance badge — same positive/negative convention as Campaign's */
.bsx-pub-perf-badge { display: inline-block; font-size: var(--bsx-text-lg); font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; }
.bsx-pub-perf-badge.positive { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.bsx-pub-perf-badge.negative { background: rgba(229, 115, 115, 0.15); color: #e57373; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1023px) and (min-width: 768px) {
	.bsx-pub-cell { font-size: var(--bsx-text-sm); }
	.bsx-pub-rec-title { font-size: 0.85rem; }
	.bsx-pub-perf-badge { font-size: 0.85rem; padding: 0.2rem 0.2rem; }
	.bsx-pub-rec-row-mid { font-size: var(--bsx-text-sm); }
}

@media (max-width: 767px) and (min-width: 568px) {
	.bsx-pub-rec-row-header { grid-template-columns: 52% 12% 12% 24%; }
	.bsx-pub-symbol, .bsx-pub-date-time-price, .bsx-pub-date-time-price-r { display: none; }
	.bsx-pub-rec-row-details { grid-template-columns: 30% 20% 50%; }
	.bsx-pub-cell { font-size: var(--bsx-text-sm); }
	.bsx-pub-rec-title { font-size: 0.85rem; }

	/* .bsx-pub-rec-row-mid had no override at all before — left as a
	   flex-wrap fallback rather than guessing at which of its 7 columns
	   to hide without seeing the PHP template that fills them. */
	.bsx-pub-rec-row-mid {
		display: flex;
		flex-wrap: wrap;
		gap: 0.3rem;
		font-size: var(--bsx-text-sm);
	}
}

@media (max-width: 567px) {
	/* This is the actual outer container (chart + row side by side) —
	   previously only .bsx-pub-rec-row (the inner thumb+text group)
	   switched to column here, so the chart stayed pinned at a fixed
	   24.3% width next to an already-stacked row instead of the whole
	   card going vertical. */
	.bsx-pub-rec-row-wrap { flex-direction: column; }
	.bsx-pub-rec-chart { width: 100%; }

	.bsx-pub-rec-row { flex-direction: column; align-items: stretch; padding: 0.5rem; gap: 0.4rem; }
	/* The container's max-height alone doesn't constrain the <img> —
	   its own max-height:100% is a percentage, which only resolves
	   against a parent with an explicit (non-auto) height. Since this
	   container only ever had max-height (not height), that percentage
	   was ignored and the logo rendered at full intrinsic size,
	   overflowing past the box uncropped. Capping the image itself in
	   px, plus clipping overflow as a safety net, actually shrinks it. */
	.bsx-pub-rec-thumb { width: 100%; max-height: 42px; overflow: hidden; }
	.bsx-pub-rec-thumb img { max-height: 42px; width: auto; max-width: 100%; }

	/* Title (header), performance badge (mid), and status+type (details)
	   were each their own full-width block — 3 stacked rows — because
	   .bsx-pub-rec-row-text (their parent) still had flex-direction:
	   column from the base rule. None of the three comes close to
	   filling a full row's width on its own, so put them in a row
	   instead and let them wrap only if they actually run out of room. */
	.bsx-pub-rec-row-text {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 0.4rem;
	}

	.bsx-pub-rec-row-header,
	.bsx-pub-rec-row-details,
	.bsx-pub-rec-row-mid {
		display: flex;
		flex-wrap: wrap;
		flex: 0 1 auto;
		min-width: 0;
		gap: 0.4rem;
		align-items: center;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.bsx-pub-symbol, .bsx-pub-date-time-price, .bsx-pub-perf-last, .bsx-pub-date-time-price-r,
	.bsx-pub-pnl-lab { display: none; }

	.bsx-pub-cell { font-size: var(--bsx-text-xs); }
	.bsx-pub-rec-title { font-size: 0.85rem; }
	.bsx-pub-perf-badge { font-size: var(--bsx-text-xs); padding: 0.2rem; }
}