/* ================================================
   SJ Read More – siatka artykułów "Czytaj Dalej"
   v1.1.0 | Autor: Światło Jogi
   ================================================ */

.sj-rm-block {
	width:        100%;
	margin:       2em 0;
	/* Padding identyczny z .entry-content (sj-styles.css) */
	padding-left:  20px;
	padding-right: 20px;
	box-sizing:    border-box;
}

@media (max-width: 768px) {
	.sj-rm-block {
		padding-left:  10px;
		padding-right: 10px;
	}
}

.sj-rm-block__label {
	font-size: 11px; font-weight: 700;
	letter-spacing: 2.5px; text-transform: uppercase;
	color: #999; margin-bottom: 14px;
	padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,.08);
}

.sj-rm-block__grid {
	display: grid;
	grid-template-columns: repeat(2,1fr); /* nadpisywane przez PHP inline */
	gap: 12px;
}

@media (max-width: 640px) {
	.sj-rm-block__grid { grid-template-columns: 1fr !important; }
}

.sj-rm-block__card {
	display: flex; align-items: center; gap: 12px;
	padding: 10px; text-decoration: none; color: inherit;
	border: 1px solid rgba(0,0,0,.07); border-radius: 10px;
	background: #fafafa; position: relative;
	transition: background .2s, box-shadow .2s, transform .18s;
}
.sj-rm-block__card:hover {
	background: #fff; color: inherit; text-decoration: none;
	box-shadow: 0 4px 20px rgba(0,0,0,.10); transform: translateY(-2px);
}

.sj-rm-block__img {
	flex-shrink: 0;
	/* width/height nadpisywane inline przez PHP */
	width: 72px; height: 72px;
	border-radius: 7px;
	background-size: cover; background-position: center;
	background-color: #ddd;
}
.sj-rm-block__img--empty {
	background: linear-gradient(135deg,#D80000,#9a0000);
	opacity: .65;
}

.sj-rm-block__body {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 3px;
}
.sj-rm-block__cat {
	font-size: 10px; font-weight: 700;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: #D80000; line-height: 1;
}
.sj-rm-block__title {
	font-size: 15px; font-weight: 700; line-height: 1.3;
	margin: 0; color: #111;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sj-rm-block__date { font-size: 11px; color: #aaa; line-height: 1; }

.sj-rm-block__arrow {
	font-size: 18px; color: #D80000;
	opacity: 0; flex-shrink: 0;
	transition: opacity .18s, transform .18s;
	transform: translateX(-6px);
}
.sj-rm-block__card:hover .sj-rm-block__arrow {
	opacity: 1; transform: translateX(0);
}