/* LHE Op-Eds — listing, article, cards. Inherits the site font (Poppins).
   Colours are variables on .lhe-opeds so the theme can retune them. */

.lhe-opeds {
	--lhe-accent: #0080a3;
	--lhe-accent-ink: #ffffff;
	--lhe-ink: #121212;
	--lhe-muted: #54595f;
	--lhe-line: #e3e6e8;
	--lhe-soft: #f4f8f9;
	--lhe-card: #ffffff;
	--lhe-radius: 16px;
	--lhe-shadow: 0 10px 30px rgba(18, 18, 18, 0.08);
	--lhe-wrap: 1140px;
	--lhe-measure: 46rem;
	color: var(--lhe-ink);
	line-height: 1.5;
}
.lhe-opeds *, .lhe-opeds *::before, .lhe-opeds *::after { box-sizing: border-box; }
.lhe-opeds a { color: var(--lhe-accent); text-decoration: none; }
.lhe-opeds a:hover { text-decoration: underline; }
.lhe-opeds img { max-width: 100%; height: auto; display: block; }
.lhe-opeds__wrap { width: min(var(--lhe-wrap), 100% - 2.5rem); margin-inline: auto; }

/* Full-bleed bands: the theme wraps content in a centred column; the coloured
   header (listing) and hero (article) break out to the viewport edges while
   their text stays in the column. overflow-x: clip swallows the scrollbar-width
   overspill that 100vw causes on desktops with a visible scrollbar. */
body.lhe-opeds-page { overflow-x: clip; }
.lhe-opeds .lhe-opeds__head,
.lhe-opeds .lhe-oped__hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.lhe-opeds .lhe-opeds__head { padding-left: 1.25rem; padding-right: 1.25rem; }
.lhe-opeds .lhe-opeds__head > .lhe-opeds__wrap { width: min(var(--lhe-wrap), 100%); }

/* ---------- Listing header ---------- */
.lhe-opeds__head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem; background: var(--lhe-soft); border-bottom: 1px solid var(--lhe-line); margin-bottom: 2.5rem; }
.lhe-opeds .lhe-opeds__head { margin-bottom: 2.5rem; }
.lhe-opeds .lhe-opeds__kicker { margin: 0 0 0.5rem; color: var(--lhe-accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lhe-opeds h1.lhe-opeds__page-title { margin: 0 0 0.6rem; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--lhe-ink); }
.lhe-opeds__intro { max-width: var(--lhe-measure); color: var(--lhe-muted); font-size: 1.1rem; }
.lhe-opeds__intro p { margin: 0; }
.lhe-opeds__topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.lhe-opeds .lhe-opeds__chip {
	display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem;
	border: 1px solid var(--lhe-line); border-radius: 999px; background: var(--lhe-card);
	color: var(--lhe-ink); font-size: 0.875rem; font-weight: 500; text-decoration: none;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.lhe-opeds .lhe-opeds__chip:hover { border-color: var(--lhe-accent); color: var(--lhe-accent); }
.lhe-opeds .lhe-opeds__chip.is-active { background: var(--lhe-accent); border-color: var(--lhe-accent); color: var(--lhe-accent-ink); }

/* ---------- Grid & cards ---------- */
.lhe-opeds__grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lhe-opeds__grid--1 { grid-template-columns: minmax(0, 1fr); }
.lhe-opeds__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lhe-opeds__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .lhe-opeds__grid, .lhe-opeds__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lhe-opeds__grid, .lhe-opeds__grid--2, .lhe-opeds__grid--4 { grid-template-columns: minmax(0, 1fr); } }

.lhe-opeds .lhe-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--lhe-card); border: 1px solid var(--lhe-line); border-radius: var(--lhe-radius);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhe-opeds .lhe-card:hover { transform: translateY(-3px); box-shadow: var(--lhe-shadow); }
.lhe-opeds .lhe-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lhe-soft); }
.lhe-opeds .lhe-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.lhe-opeds .lhe-card:hover .lhe-card__media img { transform: scale(1.03); }
.lhe-opeds .lhe-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--lhe-accent); font-size: 6rem; font-weight: 700; line-height: 1; opacity: 0.35; }
.lhe-opeds .lhe-card__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.lhe-opeds .lhe-card__topics { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lhe-opeds .lhe-card__topics a { color: var(--lhe-accent); }
.lhe-opeds .lhe-card__topics a + a::before { content: "·"; margin: 0 0.5em; color: var(--lhe-muted); }
.lhe-opeds h3.lhe-card__title { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.lhe-opeds .lhe-card__title a { color: var(--lhe-ink); }
.lhe-opeds .lhe-card__title a:hover { color: var(--lhe-accent); text-decoration: none; }
.lhe-opeds .lhe-card__excerpt { margin: 0; color: var(--lhe-muted); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lhe-opeds .lhe-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: auto 0 0; padding-top: 0.5rem; color: var(--lhe-muted); font-size: 0.85rem; }
.lhe-opeds .lhe-card__meta span { font-weight: 600; color: var(--lhe-ink); }
.lhe-opeds .lhe-card__meta span + time::before { content: "·"; margin-right: 0.75rem; }

/* List rows */
.lhe-opeds__list { display: flex; flex-direction: column; }
.lhe-opeds .lhe-row { display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--lhe-line); }
.lhe-opeds .lhe-row:last-child { border-bottom: 1px solid var(--lhe-line); }
.lhe-opeds .lhe-row__media { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--lhe-soft); }
.lhe-opeds .lhe-row__media img { width: 100%; height: 100%; object-fit: cover; }
.lhe-opeds .lhe-row__body { display: flex; flex-direction: column; gap: 0.4rem; }
.lhe-opeds h3.lhe-row__title { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.lhe-opeds .lhe-row__title a { color: var(--lhe-ink); }
.lhe-opeds .lhe-row__title a:hover { color: var(--lhe-accent); text-decoration: none; }
.lhe-opeds .lhe-row__excerpt { margin: 0; color: var(--lhe-muted); font-size: 0.95rem; }
@media (max-width: 640px) { .lhe-opeds .lhe-row { grid-template-columns: 1fr; gap: 0.75rem; } }

/* Featured card */
.lhe-opeds .lhe-featured {
	display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; margin-bottom: 2.5rem;
	background: var(--lhe-card); border: 1px solid var(--lhe-line); border-radius: var(--lhe-radius); box-shadow: var(--lhe-shadow);
}
.lhe-opeds .lhe-featured__media { display: block; min-height: 320px; background: var(--lhe-soft); }
.lhe-opeds .lhe-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.lhe-opeds .lhe-featured__body { display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; padding: clamp(1.5rem, 3vw, 2.75rem); }
.lhe-opeds .lhe-featured__kicker { margin: 0; color: var(--lhe-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lhe-opeds h2.lhe-featured__title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.lhe-opeds .lhe-featured__title a { color: var(--lhe-ink); }
.lhe-opeds .lhe-featured__title a:hover { color: var(--lhe-accent); text-decoration: none; }
.lhe-opeds .lhe-featured__quote { margin: 0; color: var(--lhe-muted); font-size: 1.15rem; font-style: italic; line-height: 1.45; }
.lhe-opeds .lhe-featured__excerpt { margin: 0; color: var(--lhe-muted); font-size: 1.05rem; }
.lhe-opeds .lhe-featured .lhe-card__meta { margin-top: 0; }
@media (max-width: 860px) { .lhe-opeds .lhe-featured { grid-template-columns: 1fr; } .lhe-opeds .lhe-featured__media { min-height: 0; aspect-ratio: 16 / 9; } }

/* Embedded section header (shortcode / widget / related) */
.lhe-opeds__embed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.lhe-opeds h2.lhe-opeds__embed-title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.lhe-opeds .lhe-opeds__more { font-weight: 600; white-space: nowrap; }
.lhe-opeds--empty { padding: 1rem; border: 1px dashed var(--lhe-line); border-radius: 10px; color: var(--lhe-muted); }
.lhe-opeds__empty { margin: 2rem 0 4rem; color: var(--lhe-muted); text-align: center; }

/* Pagination */
.lhe-opeds .lhe-opeds__pagination { margin: 3rem 0 4rem; }
.lhe-opeds .lhe-opeds__pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.lhe-opeds .lhe-opeds__pagination .page-numbers {
	display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.9rem;
	border: 1px solid var(--lhe-line); border-radius: 999px; background: var(--lhe-card);
	color: var(--lhe-ink); font-size: 0.9rem; font-weight: 500; text-decoration: none;
}
.lhe-opeds .lhe-opeds__pagination a.page-numbers:hover { border-color: var(--lhe-accent); color: var(--lhe-accent); }
.lhe-opeds .lhe-opeds__pagination .page-numbers.current { background: var(--lhe-accent); border-color: var(--lhe-accent); color: var(--lhe-accent-ink); }
.lhe-opeds .lhe-opeds__pagination .page-numbers.dots { border-color: transparent; }
.lhe-opeds .lhe-opeds__pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Single ---------- */
.lhe-opeds .lhe-oped__hero {
	position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 52vh, 560px);
	padding: clamp(3rem, 7vw, 5rem) 0 clamp(6rem, 10vw, 8rem);
	background: var(--lhe-accent); color: #fff; isolation: isolate;
}
.lhe-opeds .lhe-oped__hero.has-image { background-image: var(--lhe-hero-image); background-size: cover; background-position: center; }
.lhe-opeds .lhe-oped__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 128, 163, 0.72) 0%, rgba(0, 128, 163, 0.88) 100%); }
.lhe-opeds .lhe-oped__hero.no-image::before { background: linear-gradient(135deg, var(--lhe-accent) 0%, #005f7a 100%); }
.lhe-opeds .lhe-oped__hero-inner { width: min(900px, 100% - 2.5rem); margin-inline: auto; text-align: center; }
.lhe-opeds .lhe-oped__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; }
.lhe-opeds .lhe-oped__kicker, .lhe-opeds .lhe-oped__topic {
	display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.75rem;
	border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.lhe-opeds .lhe-oped__kicker { background: #fff; color: var(--lhe-accent); }
.lhe-opeds .lhe-oped__topic { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }
.lhe-opeds .lhe-oped__topic:hover { background: rgba(255, 255, 255, 0.3); text-decoration: none; }
.lhe-opeds h1.lhe-oped__title { margin: 0 0 1rem; color: #fff; font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.lhe-opeds .lhe-oped__dateline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; }
.lhe-opeds .lhe-oped__dateline strong { font-weight: 600; color: #fff; }
.lhe-opeds .lhe-oped__dateline > * + *::before { content: "·"; margin-right: 1rem; opacity: 0.7; }

.lhe-opeds .lhe-oped__card {
	position: relative; width: min(920px, 100% - 2.5rem); margin: clamp(-4.5rem, -8vw, -6rem) auto 0;
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 4.5rem);
	background: var(--lhe-card); border-radius: 24px; box-shadow: var(--lhe-shadow);
}

.lhe-opeds .lhe-oped__byline { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--lhe-line); }
.lhe-opeds .lhe-oped__byline-photo img, .lhe-opeds .lhe-oped__author-photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.lhe-opeds .lhe-oped__byline-name { margin: 0; font-weight: 600; line-height: 1.3; }
.lhe-opeds .lhe-oped__byline-title { display: block; font-weight: 400; color: var(--lhe-muted); font-size: 0.9rem; }
.lhe-opeds .lhe-oped__byline-pub { margin: 0.25rem 0 0; color: var(--lhe-muted); font-size: 0.9rem; }

.lhe-opeds blockquote.lhe-oped__pull { margin: 0 0 2rem; padding: 0 0 0 1.5rem; border: 0; border-left: 4px solid var(--lhe-accent); background: none; }
.lhe-opeds blockquote.lhe-oped__pull p { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 500; line-height: 1.35; color: var(--lhe-ink); }

.lhe-opeds .lhe-oped__content { font-size: 1.2rem; line-height: 1.65; color: var(--lhe-muted); }
.lhe-opeds .lhe-oped__content > * { max-width: var(--lhe-measure); margin-left: auto; margin-right: auto; }
.lhe-opeds .lhe-oped__content p { margin: 0 auto 1.4em; }
.lhe-opeds .lhe-oped__content h2, .lhe-opeds .lhe-oped__content h3 { margin: 2em auto 0.6em; color: var(--lhe-ink); line-height: 1.25; letter-spacing: 0; }
.lhe-opeds .lhe-oped__content h2 { font-size: 1.6rem; font-weight: 600; }
.lhe-opeds .lhe-oped__content h3 { font-size: 1.3rem; font-weight: 600; }
.lhe-opeds .lhe-oped__content a { text-decoration: underline; text-underline-offset: 2px; }
.lhe-opeds .lhe-oped__content ul, .lhe-opeds .lhe-oped__content ol { padding-left: 1.4em; margin-bottom: 1.4em; }
.lhe-opeds .lhe-oped__content blockquote { margin: 1.5em auto; padding-left: 1.25em; border-left: 3px solid var(--lhe-line); font-style: italic; }
.lhe-opeds .lhe-oped__content figure, .lhe-opeds .lhe-oped__content .wp-block-image { max-width: 100%; margin: 2em auto; }
.lhe-opeds .lhe-oped__content figcaption { color: var(--lhe-muted); font-size: 0.85rem; text-align: center; }
.lhe-opeds .lhe-oped__content .alignwide { max-width: 100%; }

.lhe-opeds .lhe-oped__button {
	display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 1.25rem;
	border-radius: 999px; background: var(--lhe-accent); color: var(--lhe-accent-ink); font-weight: 600; font-size: 0.95rem; text-decoration: none;
	transition: background 0.15s;
}
.lhe-opeds .lhe-oped__button:hover { background: #006a87; color: #fff; text-decoration: none; }
.lhe-opeds .lhe-oped__button--ghost { background: transparent; color: var(--lhe-accent); border: 1px solid var(--lhe-accent); align-self: flex-start; margin-top: 0.5rem; }
.lhe-opeds .lhe-oped__button--ghost:hover { background: var(--lhe-accent); color: #fff; }

.lhe-opeds .lhe-oped__share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: var(--lhe-measure); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--lhe-line); }
.lhe-opeds .lhe-oped__share-label { margin-right: 0.25rem; color: var(--lhe-muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lhe-opeds .lhe-oped__share-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0;
	border: 1px solid var(--lhe-line); border-radius: 50%; background: var(--lhe-card); color: var(--lhe-ink); cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lhe-opeds .lhe-oped__share-btn svg { width: 1.1rem; height: 1.1rem; }
.lhe-opeds .lhe-oped__share-btn:hover { border-color: var(--lhe-accent); color: var(--lhe-accent); text-decoration: none; }
.lhe-opeds .lhe-oped__share-btn.is-copied { background: var(--lhe-accent); border-color: var(--lhe-accent); color: #fff; }
.lhe-opeds .lhe-oped__share-toast { margin-left: 0.25rem; color: var(--lhe-accent); font-size: 0.85rem; font-weight: 600; }

.lhe-opeds .lhe-oped__author { display: flex; gap: 1rem; align-items: center; max-width: var(--lhe-measure); margin: 2rem auto 0; padding: 1.25rem 1.5rem; background: var(--lhe-soft); border-radius: 14px; }
.lhe-opeds .lhe-oped__author-name { margin: 0; font-weight: 600; }
.lhe-opeds .lhe-oped__author-title { margin: 0.15rem 0 0; color: var(--lhe-muted); font-size: 0.9rem; }

.lhe-opeds .lhe-oped__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.lhe-opeds .lhe-oped__nav-link { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--lhe-line); border-radius: var(--lhe-radius); color: var(--lhe-ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.lhe-opeds .lhe-oped__nav-link:hover { border-color: var(--lhe-accent); box-shadow: var(--lhe-shadow); text-decoration: none; }
.lhe-opeds .lhe-oped__nav-link span { color: var(--lhe-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lhe-opeds .lhe-oped__nav-link strong { font-weight: 600; line-height: 1.3; }
.lhe-opeds .lhe-oped__nav-link--next { text-align: right; align-items: flex-end; }
@media (max-width: 640px) { .lhe-opeds .lhe-oped__nav { grid-template-columns: 1fr; } .lhe-opeds .lhe-oped__nav-link--next { text-align: left; align-items: flex-start; } }

.lhe-opeds .lhe-oped__related { margin: 3.5rem auto 4.5rem; }

@media print {
	.lhe-opeds .lhe-oped__hero { min-height: 0; padding: 1rem 0; color: #000; background: none !important; }
	.lhe-opeds .lhe-oped__hero::before { display: none; }
	.lhe-opeds h1.lhe-oped__title, .lhe-opeds .lhe-oped__dateline { color: #000; }
	.lhe-opeds .lhe-oped__card { margin-top: 0; box-shadow: none; }
	.lhe-opeds .lhe-oped__share, .lhe-opeds .lhe-oped__nav, .lhe-opeds .lhe-oped__related, .lhe-opeds .lhe-oped__topic { display: none !important; }
}