/* =========================================================
   LUMISCHEMA POST CARDS + PAGER
   Shared by the homepage (Latest News / Latest Reviews), News archives,
   author pages and the Reviews archive. Markup: lumischema_post_card().
   ========================================================= */

/* =========================================================
   SHARED POST CARD (.ls-pcard) — News archives + author page
   White card, photo with the views chip on it, coloured category
   pill, two-line title, date + reading time footer.
   ========================================================= */
.ls-pcard-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.ls-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e1e9f4;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(7, 29, 51, .04);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ls-pcard:hover {
	transform: translateY(-2px);
	border-color: #c5d8f6;
	box-shadow: 0 10px 24px rgba(7, 29, 51, .10);
}
.ls-pcard-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eef3fa;
	text-decoration: none !important;
}
.ls-pcard-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.ls-pcard:hover .ls-pcard-media img { transform: scale(1.04); }
/* Review cards: the device's product shot, whole (not cropped). */
.ls-pcard-media img.is-device { object-fit: contain; padding: 10px; box-sizing: border-box; background: #f6f9fe; }
.ls-pcard:hover .ls-pcard-media img.is-device { transform: scale(1.03); }
.ls-pcard-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #98a2b3;
	font-size: 12px;
	font-weight: 700;
}
/* Views chip sits on the photo, bottom-right. */
.ls-pcard-media .ls-pcard-views {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--ls-v, #16a34a) !important;
	color: var(--ls-v-on, #fff) !important;
	box-shadow: 0 2px 6px rgba(7, 29, 51, .25);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	backdrop-filter: blur(4px);
}
.ls-pcard-media .ls-pcard-views .lumischema-views-icon {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}
.ls-pcard-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 11px 12px 12px;
	min-width: 0;
}
.ls-pcard-cat {
	display: inline-block;
	max-width: 100%;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--ls-cat, #0b5fd8);
	color: #fff !important;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
a.ls-pcard-cat:hover { filter: brightness(1.12); }
.ls-pcard-title {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 750;
	letter-spacing: -.1px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.ls-pcard-title a { color: #071D33; text-decoration: none !important; }
.ls-pcard-title a:hover { color: #0b5fd8; }
/* Stretch the title link over the card so the whole card is clickable. */
.ls-pcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ls-pcard-cat { position: relative; z-index: 2; }
.ls-pcard-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px dashed #e1e9f4;
	color: #667085;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}
.ls-pcard-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ls-pcard-meta svg { width: 12px; height: 12px; flex: 0 0 12px; fill: none; stroke: #0b5fd8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1100px) {
	.ls-pcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.ls-pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ls-pcard-body { padding: 9px 10px 10px; gap: 6px; }
	.ls-pcard-title { font-size: 13.5px; }
	.ls-pcard-meta { font-size: 10px; }
	.ls-pcard-meta svg { display: none; }
}
@media (max-width: 360px) {
	.ls-pcard-meta { flex-wrap: wrap; }
}

/* =========================================================
   SHARED PAGINATION (.ls-pager) — News archive + author page
   "Page X of Y" on the left; Previous / numbers / Next as rounded buttons on
   the right. Current page navy; Previous / Next outlined with arrows.
   ========================================================= */
.ls-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 24px 0 0;
    padding: 12px 14px;
    background: #f6f9fe;
    border: 1px solid #d6e4fb;
    border-radius: 12px;
}
.ls-pager-info { color: #4a5d7a; font-size: 13px; font-weight: 600; }
.ls-pager ul.page-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; border: 0; background: none; }
.ls-pager ul.page-numbers li { margin: 0; padding: 0; border: 0; }
.ls-pager .page-numbers:not(ul) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #d3deec;
    border-radius: 10px;
    background: #fff;
    color: #071D33;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
}
.ls-pager a.page-numbers:hover,
.ls-pager a.page-numbers:focus-visible { border-color: #0b5fd8; color: #0b5fd8; background: #fff; text-decoration: none; }
.ls-pager .page-numbers.current { background: #071D33; border-color: #071D33; color: #fff; }
.ls-pager .page-numbers.dots { border: 0; background: transparent; min-width: 24px; padding: 0 4px; color: #667085; }
.ls-pager .page-numbers.prev,
.ls-pager .page-numbers.next { padding: 0 16px; border-color: #0b5fd8; color: #0b5fd8; }
.ls-pager a.page-numbers.prev:hover,
.ls-pager a.page-numbers.next:hover { background: #0b5fd8; color: #fff; }
.ls-pager .page-numbers.prev span,
.ls-pager .page-numbers.next span { font-size: 18px; line-height: 1; margin-top: -2px; }

@media (max-width: 640px) {
    .ls-pager { justify-content: center; }
    .ls-pager-info { width: 100%; text-align: center; }
    .ls-pager .page-numbers:not(ul) { min-width: 38px; height: 38px; }
    /* Numbers on one row, Previous / Next side by side underneath. */
    .ls-pager ul.page-numbers { justify-content: center; width: 100%; }
    .ls-pager ul.page-numbers li:has(.prev),
    .ls-pager ul.page-numbers li:has(.next) { order: 2; flex: 1 1 40%; }
    .ls-pager ul.page-numbers li:has(.prev) .page-numbers,
    .ls-pager ul.page-numbers li:has(.next) .page-numbers { width: 100%; }
}


/* =========================================================
   REVIEW CARD (.ls-pcard.ls-rcard)
   Score badge on the photo, stars + x/10 + verdict, author and date.
   ========================================================= */
.ls-rcard-score {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #15803d;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(7, 29, 51, .25);
}
.ls-rcard-score.is-good { background: #0b5fd8; }
.ls-rcard-score.is-ok   { background: #c2410c; }
.ls-rcard-score.is-low  { background: #b91c1c; }
.ls-rcard-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	min-width: 0;
	font-size: 12px;
	line-height: 1.2;
	color: #071D33;
}
.ls-rcard-rating strong { font-size: 12px; font-weight: 800; }
.ls-rcard-stars {
	position: relative;
	display: inline-block;
	color: #d6dfeb;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1;
	white-space: nowrap;
}
.ls-rcard-stars > span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #f5a524;
	white-space: nowrap;
}
.ls-rcard-verdict {
	padding: 2px 7px;
	border-radius: 999px;
	background: #e8f5ec;
	color: #15803d;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.ls-rcard-verdict.is-good { background: #e8f0fd; color: #0b5fd8; }
.ls-rcard-verdict.is-ok   { background: #fdf0e7; color: #c2410c; }
.ls-rcard-verdict.is-low  { background: #fdecec; color: #b91c1c; }
.ls-rcard-by { overflow: hidden; text-overflow: ellipsis; }
.ls-rcard-by a { position: relative; z-index: 2; color: #0b5fd8; font-weight: 700; text-decoration: none !important; }
.ls-rcard-by a:hover { text-decoration: none !important; }

/* Homepage sections + Reviews archive use the same grid as everywhere else. */
.lumicrib-reviews-archive-grid.ls-pcard-grid { gap: 16px; }
.ls-reviews-empty { grid-column: 1 / -1; }
.lumicrib-reviews-pagination.ls-pager { margin-top: 24px; }

@media (max-width: 768px) {
	.ls-rcard-score { min-width: 34px; height: 34px; font-size: 12px; }
	.ls-rcard-verdict { display: none; }
	.lumicrib-reviews-archive-grid.ls-pcard-grid { gap: 12px; }
}
/* Keep the rating on one line: the verdict word only shows where there is room
   (it hides itself rather than wrapping), and the review footer gives the
   author name the space (date icon dropped). */
.ls-rcard-rating { flex-wrap: nowrap; overflow: hidden; }
.ls-rcard-verdict { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.ls-rcard .ls-pcard-meta svg { display: none; }
.ls-rcard .ls-rcard-by { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.ls-rcard .ls-pcard-meta > span:last-child { flex: 0 0 auto; }
/* Author on the left, date pinned to the far right, on every screen size. */
.ls-rcard .ls-pcard-meta { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; }
.ls-rcard .ls-rcard-by { overflow: hidden; text-overflow: ellipsis; }
.ls-rcard .ls-pcard-meta > span:last-child { margin-left: auto; text-align: right; }
@media (max-width: 768px) {
	.ls-rcard .ls-pcard-meta { gap: 6px; }
	.ls-rcard .ls-rcard-by { font-size: 10px; }
}

/* Multicolour meta icons (date, reading time). */
.ls-pcard-meta svg.ls-ico { width: 14px; height: 14px; flex: 0 0 14px; }
@media (max-width: 768px) { .ls-pcard-meta svg.ls-ico { display: none; } }

/* Review type tag on review cards */
.ls-rcard-type { display: inline-flex; padding: 1px 7px; border-radius: 5px; background: #e8eef7; color: #071D33; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.ls-rcard-type.is-specs { background: #f3f0ff; color: #5b21b6; }