/**
 * LSC Eye Clinic — Articles, Media Coverage & Media Listings styles
 * Theme path: /includes/articles.css
 *
 * Naming (since v2.1.0):
 *   .lsc-coverage  → Media Coverage  (grid cards, link/redirect posts)
 *   .lsc-listings  → Media Listings  (year-grouped press rows)
 *
 * Shortcode delivery: every block wraps itself in .lsc-articles, which is
 * where the design tokens live. No page-width container here — the page
 * builder section controls width.
 *
 * Enqueued on demand by the render functions in /includes/articles.php.
 *
 * @version 2.4.0
 */

.lsc-articles {
	/* ---- tokens (tweak the accent to match the exact brand teal) ---- */
	--lsc-accent: #157a63;
	--lsc-accent-ink: #0f6151;
	--lsc-accent-soft: #cfe6e1;   /* sampled mint — chip + arrow fill */
	--lsc-ink: #1d2b36;
	--lsc-muted: #6b7785;
	--lsc-border: #e6e9ec;
	--lsc-panel: #f3f6f5;
	--lsc-radius: 14px;

	color: var(--lsc-ink);
	font-family: inherit;
	line-height: 1.55;
}

.lsc-articles *,
.lsc-articles *::before,
.lsc-articles *::after { box-sizing: border-box; }

/* ===== Section eyebrow ===== */
.lsc-eyebrow {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lsc-accent);
	margin: 0 0 18px;
}

/* ===== Category pill =====
   text-transform handles the casing — the PHP no longer uppercases, which
   would mangle entity-encoded names like "Cataract & Glaucoma". */
.lsc-pill {
	display: inline-block;
	border: 1px solid var(--lsc-accent);
	color: var(--lsc-accent);
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 13px;
	border-radius: 999px;
}

/* ===== Featured ===== */
.lsc-featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 0;
	border: 1px solid var(--lsc-border);
	border-radius: var(--lsc-radius);
	overflow: hidden;
	margin: 0 0 56px;
	background: #fff;
}
.lsc-featured-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	background-size: cover;
	background-position: center;
	text-decoration: none;
}
.lsc-featured-body { padding: 40px; }
.lsc-featured-body .lsc-pill { margin-bottom: 20px; }
.lsc-featured-title { font-size: 27px; line-height: 1.25; font-weight: 800; margin: 0 0 16px; }
.lsc-featured-title a { color: inherit; text-decoration: none; }
.lsc-featured-title a:hover { color: var(--lsc-accent); }
.lsc-featured-excerpt { color: var(--lsc-muted); margin: 0 0 22px; }
.lsc-meta { font-size: 13px; color: var(--lsc-muted); margin: 0 0 22px; }

/* Featured meta: even spacing with CSS-drawn separators */
.lsc-featured-body .lsc-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.lsc-featured-body .lsc-meta span + span::before {
	content: "·";
	margin-right: 16px;
}

.lsc-readlink {
	font-weight: 700;
	color: var(--lsc-accent);
	text-decoration: none;
}
.lsc-readlink:hover { color: var(--lsc-accent-ink); }

/* ===== Tabs ===== */
.lsc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 28px;
	margin-bottom: 36px;
	border-bottom: 1px solid var(--lsc-border);
}
.lsc-tab {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--lsc-border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lsc-ink);
	text-decoration: none;
	transition: all .15s ease;
}
.lsc-tab:hover { border-color: var(--lsc-accent); color: var(--lsc-accent); }
.lsc-tab.is-active {
	background: var(--lsc-accent);
	border-color: var(--lsc-accent);
	color: #fff;
}
/* A tab that links elsewhere (e.g. Media Coverage) rather than filtering —
   accented so it reads as an outbound cross-link, not a category. */
.lsc-tab--link {
	border-color: var(--lsc-accent);
	color: var(--lsc-accent);
}
.lsc-tab--link:hover {
	background: var(--lsc-accent);
	color: #fff;
}

/* ===== Card grid (shared: articles + media coverage) ===== */
.lsc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 48px;
}
.lsc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lsc-border);
	border-radius: var(--lsc-radius);
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s ease, transform .18s ease;
}
.lsc-card:hover { box-shadow: 0 12px 28px rgba(20, 40, 40, .08); transform: translateY(-2px); }
.lsc-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	background-size: cover;
	background-position: center;
	text-decoration: none;
}
.lsc-card-icon svg { width: 40px; height: 40px; color: rgba(20, 40, 40, .22); }
.lsc-featured-media .lsc-card-icon svg { width: 56px; height: 56px; }
.lsc-card-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 22px 20px;
	flex: 1;
}
/* Pill shouldn't stretch to fill the flex column */
.lsc-card-body .lsc-pill { align-self: flex-start; }
.lsc-card-title { font-size: 17px; line-height: 1.35; font-weight: 700; margin: 0; }
.lsc-card-title a { color: inherit; text-decoration: none; }
.lsc-card-title a:hover { color: var(--lsc-accent); }
.lsc-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--lsc-border);
}
.lsc-card-foot .lsc-meta { margin: 0; }
.lsc-arrow {
	flex: none;
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--lsc-accent-soft);
	color: var(--lsc-accent);
	text-decoration: none;
	transition: all .15s ease;
}
.lsc-arrow:hover { background: var(--lsc-accent); color: #fff; }

/* ===== Pagination ===== */
.lsc-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
}
.lsc-pagination a,
.lsc-pagination span {
	min-width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--lsc-border);
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lsc-ink);
	text-decoration: none;
}
.lsc-pagination a:hover { border-color: var(--lsc-accent); color: var(--lsc-accent); }
.lsc-pagination .current {
	background: var(--lsc-accent);
	border-color: var(--lsc-accent);
	color: #fff;
}
.lsc-pagination .dots { border: 0; }

.lsc-empty { color: var(--lsc-muted); padding: 32px 0; }

/* ===== Media Listings (year-grouped press rows) ===== */
.lsc-listings {
	background: var(--lsc-panel);
	border-radius: 18px;
	padding: 40px;
}
.lsc-listings-heading { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.lsc-listings-sub { color: var(--lsc-muted); margin: 0 0 28px; }

/* Year label with a short accent rule beneath (not full width) */
.lsc-listings-year {
	font-size: 13px;
	font-weight: 700;
	color: var(--lsc-accent);
	margin: 24px 0 12px;
	padding-bottom: 12px;
}
.lsc-listings-year::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin-top: 10px;
	background: var(--lsc-border);
}
.lsc-listings-year:first-of-type { margin-top: 0; }

.lsc-listing-row {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--lsc-border);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 10px;
}
.lsc-listing-pub {
	flex: none;
	background: var(--lsc-accent-soft);
	color: var(--lsc-accent-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 6px 12px;
	border-radius: 7px;
	white-space: nowrap;
}
.lsc-listing-head { flex: 1; min-width: 0; font-size: 15px; }
.lsc-listing-link {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--lsc-accent);
	text-decoration: none;
	white-space: nowrap;
}
.lsc-listing-link:hover { color: var(--lsc-accent-ink); }
.lsc-listing-link--muted { color: var(--lsc-muted); }

/* ===== CTA (cross-link button, e.g. back to Articles) ===== */
.lsc-cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}
.lsc-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	background: var(--lsc-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s ease;
}
.lsc-cta:hover { background: var(--lsc-accent-ink); color: #fff; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
	.lsc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsc-featured { grid-template-columns: 1fr; }
	.lsc-featured-media { min-height: 240px; }
}
@media (max-width: 620px) {
	.lsc-grid { grid-template-columns: 1fr; }
	.lsc-featured-body { padding: 28px; }
	.lsc-listings { padding: 26px; }
	.lsc-listing-row { flex-wrap: wrap; }
	.lsc-listing-head { flex-basis: 100%; order: 3; }
}