/* ============================================================
   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;
	background-color: #21201e;
}
.bsx-pub-rec-thumb img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;

}

.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: 40% 10% 13% 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: 25% 15% 10% 13% 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: 20% 20% 10% 13% 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(--pb-bsx-text-sm); }
	.bsx-pub-rec-title { font-size: 0.85rem; }
	.bsx-pub-perf-badge { font-size: 0.85rem; padding: 0.2rem 0.2rem; }
}

@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(--pb-bsx-text-sm); }
	.bsx-pub-rec-title { font-size: 0.85rem; }
}

@media (max-width: 567px) {
	.bsx-pub-rec-row { flex-direction: column; align-items: stretch; padding: 0.5rem; gap: 0.4rem; }
	.bsx-pub-rec-thumb { width: 100%; max-height: 80px; }

	.bsx-pub-rec-row-header,
	.bsx-pub-rec-row-details {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		align-items: center;
	}

	.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(--pb-bsx-text-xs); }
	.bsx-pub-rec-title { font-size: 0.85rem; }
	.bsx-pub-perf-badge { font-size: var(--pb-bsx-text-xs); padding: 0.2rem; }
}