/**
 * Office of Public Awareness (OPA) — library landing page + single entry.
 *
 * A dark, editorial "record-label library" UI: DOI house brand meets a
 * Spotify-style browse experience. Self-contained dark surface so it reads
 * correctly regardless of the theme's light/dark toggle.
 *
 * Palette
 *   base   #0e0e0e   surface #1a1a1a  surface-hover #262626
 *   ink    #fbfbf4   accent  #ff4571 (DOI)
 *   accent serif: Libre Baskerville italic
 */

.opa-page {
	/* Fill the theme's flex .row wrapper */
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;

	--opa-bg: #232323; /* DOI --dark */
	--opa-bg-2: #2a2a2a;
	--opa-surface: #2e2e2e;
	--opa-surface-2: #3a3a3a;
	--opa-ink: #fbfbf4;
	--opa-muted: rgba(251, 251, 244, 0.62);
	--opa-faint: rgba(251, 251, 244, 0.40);
	--opa-line: rgba(251, 251, 244, 0.10);
	--opa-accent: #ff4571;
	--opa-max: 1480px;
	--opa-sans: "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--opa-serif: "Libre Baskerville", Georgia, serif;

	background: var(--opa-bg);
	color: var(--opa-ink);
	font-family: var(--opa-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* contain the 100vw hero */
	padding-bottom: 100px;
}

/* ===================================================== OPA header seal */
/* Sits to the right of the DOI seal in the header, same size, ~1em gap.
   Matches #doi-logo.header-logo (max-width 54px, margin 1.2em 0). */
.opa-header-seal-link {
	display: block;
	float: left;
}
.opa-header-seal {
	display: block;
	width: 54px;
	height: auto;
	margin: 1.2em 0 1.2em 1em;
}

/* ==================================================================== Hero */
/* The hero is full-bleed and sits flush under the DOI header. Its inner content
   rides the theme's own .container grid so the floating page title and the
   featured block line up exactly with the header. */
.opa-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: clamp(460px, 66vh, 680px);
	display: flex;
	background-size: cover;
	background-position: center;
	background-color: #232323;
	overflow: hidden;
}

.opa-hero--noimg {
	background-image:
		radial-gradient(120% 120% at 15% 15%, rgba(255, 69, 113, 0.28), transparent 55%),
		linear-gradient(135deg, #303030, #1c1c1c);
}

/* Scrim: light top darkening for the floating title, heavier bottom for the
   featured block, fading into the page below. */
.opa-hero-grad {
	flex: 1;
	display: flex;
	background:
		linear-gradient(to top, var(--opa-bg) 1%, rgba(35, 35, 35, 0.85) 24%, rgba(35, 35, 35, 0.12) 55%, rgba(35, 35, 35, 0.55) 100%),
		linear-gradient(to right, rgba(35, 35, 35, 0.50) 0%, rgba(35, 35, 35, 0) 55%);
}

.opa-hero-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	padding-top: 1em;
	padding-bottom: 52px;
}

/* Page title floating top-left on the hero image */
.opa-hero-pagetitle {
	align-self: flex-start;
	margin: 0;
	font-size: 2em;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--opa-ink);
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.opa-hero-content { max-width: 720px; }

.opa-hero-flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--opa-accent);
	margin-bottom: 16px;
}
.opa-hero-flag::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--opa-accent);
	box-shadow: 0 0 0 4px rgba(255, 69, 113, 0.20);
}

.opa-hero-type {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(251, 251, 244, 0.72);
	margin-bottom: 10px;
}

.opa-hero-title {
	font-size: clamp(40px, 6.5vw, 86px);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.03em;
	margin: 0 0 14px;
	color: #fff;
}

.opa-hero-artist {
	font-family: var(--opa-serif);
	font-style: italic;
	font-size: clamp(18px, 2.2vw, 26px);
	color: rgba(251, 251, 244, 0.92);
	margin-bottom: 18px;
}

.opa-hero-excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(251, 251, 244, 0.78);
	max-width: 58ch;
	margin: 0 0 26px;
}

/* .opa-page a.… beats the theme's .dark a link colour so the dark button text stays visible */
.opa-page a.opa-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #232323;
	background: var(--opa-ink);
	border-radius: 4px;
	padding: 14px 30px;
	text-decoration: none;
	transition: transform 0.18s ease, background 0.18s ease;
}
.opa-page a.opa-hero-cta:hover {
	background: #fff;
	color: #232323;
	transform: scale(1.04);
	text-decoration: none;
}

/* Fallback title bar shown when there are no entries (no hero image) */
.opa-titlebar { padding-block: 44px 8px; }

/* ================================================================= Library */
.opa-library { padding-top: 54px; }

.opa-library-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 24px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.opa-library-heading {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.opa-section-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
	color: var(--opa-ink);
}

.opa-count {
	font-size: 12px;
	color: var(--opa-faint);
	font-variant-numeric: tabular-nums;
}

/* Controls */
.opa-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.opa-search-wrap { position: relative; display: flex; align-items: center; }
.opa-search-wrap svg {
	position: absolute;
	left: 14px;
	width: 16px; height: 16px;
	color: var(--opa-faint);
	pointer-events: none;
}
.opa-search {
	font: inherit;
	font-size: 14px;
	color: var(--opa-ink);
	background: var(--opa-surface);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 11px 16px 11px 40px;
	min-width: 220px;
	transition: border-color 0.18s, background 0.18s;
}
.opa-search::placeholder { color: var(--opa-faint); }
.opa-search:focus {
	outline: none;
	background: var(--opa-surface-2);
	border-color: rgba(251, 251, 244, 0.28);
}

.opa-select {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--opa-ink);
	background: var(--opa-surface);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 11px 38px 11px 16px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fbfbf4' stroke-opacity='0.6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	transition: background-color 0.18s, border-color 0.18s;
}
.opa-select:hover { background-color: var(--opa-surface-2); }
.opa-select:focus { outline: none; border-color: rgba(251, 251, 244, 0.28); }

/* Grid of releases */
.opa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
	gap: 8px;
}

.opa-card {
	display: block;
	color: var(--opa-ink);
	text-decoration: none;
	background: transparent;
	border-radius: 12px;
	padding: 14px;
	transition: background 0.2s ease;
}
.opa-card:hover { background: var(--opa-surface); color: var(--opa-ink); text-decoration: none; }
.opa-card:focus-visible { outline: 2px solid var(--opa-accent); outline-offset: 2px; }

.opa-card-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--opa-surface-2);
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	margin-bottom: 14px;
}
.opa-card-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.opa-card:hover .opa-card-thumb img { transform: scale(1.05); }

.opa-card-thumb--empty::after {
	content: "OPA";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--opa-faint);
}

/* Spotify-style play/explore affordance */
.opa-card-play {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--opa-accent);
	color: #0e0e0e;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}
.opa-card-play svg { width: 18px; height: 18px; }
.opa-card:hover .opa-card-play { opacity: 1; transform: translateY(0); }

.opa-card-type {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--opa-faint);
	margin-bottom: 5px;
}

.opa-card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 3px;
	color: var(--opa-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.opa-card-artist {
	font-family: var(--opa-serif);
	font-style: italic;
	font-size: 13px;
	color: var(--opa-muted);
	margin-bottom: 8px;
}

.opa-card-meta {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: var(--opa-faint);
	font-variant-numeric: tabular-nums;
}
.opa-card-meta span { position: relative; }
.opa-card-meta span + span::before {
	content: "·";
	position: absolute;
	left: -7px;
}

.opa-empty {
	font-family: var(--opa-serif);
	font-style: italic;
	color: var(--opa-muted);
	padding: 40px 0;
	text-align: center;
	grid-column: 1 / -1;
}

/* Hide any auto-injected social-share widgets that slip through on OPA pages */
.opa-single .addtoany_share_save_container,
.opa-single .a2a_kit,
.opa-single .sharedaddy,
.opa-single .sd-sharing,
.opa-single .heateor_sss_sharing_container,
.opa-single .swp_social_panel,
.opa-page .addtoany_share_save_container,
.opa-page .a2a_kit,
.opa-page .sharedaddy,
.opa-page .sd-sharing,
.opa-page .heateor_sss_sharing_container,
.opa-page .swp_social_panel {
	display: none !important;
}

/* ============================================================ Single entry */
/* The theme's single-post view is light by default, so paint the whole content
   area with the DOI dark brand (otherwise the off-white text is invisible). */
body.single-opa_media,
body.single-opa_media #content.site-content,
body.single-opa_media #content.site-content > .row {
	background-color: #232323;
}

.opa-single {
	--opa-bg: #232323;
	--opa-surface: #2e2e2e;
	--opa-surface-2: #3a3a3a;
	--opa-ink: #fbfbf4;
	--opa-muted: rgba(251, 251, 244, 0.62);
	--opa-faint: rgba(251, 251, 244, 0.40);
	--opa-line: rgba(251, 251, 244, 0.10);
	--opa-accent: #ff4571;
	--opa-serif: "Libre Baskerville", Georgia, serif;

	/* Fill the theme .container (flush with the header) instead of a narrow
	   centered column. The .container class supplies max-width + side gutter. */
	flex: 0 0 100%;
	min-height: 70vh;
	padding: 40px 0 100px;
	color: var(--opa-ink);
	font-family: "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	background: transparent;
}

.opa-back {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--opa-faint);
	text-decoration: none;
	margin-bottom: 34px;
}
.opa-back:hover { color: var(--opa-ink); text-decoration: none; }

.opa-entry {
	display: grid;
	grid-template-columns: 1fr; /* single column by default (no cover) */
	gap: 52px;
	align-items: start;
}
/* Two columns only when a square cover image exists */
.opa-entry.opa-entry--has-cover {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
/* Keep line lengths readable when the body spans the full width */
.opa-entry:not(.opa-entry--has-cover) .opa-entry-body {
	max-width: 820px;
}

.opa-entry-cover img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* Embedded media player (Bandcamp slim player etc.) — full width, above links */
.opa-entry-player {
	margin: 2px 0 24px;
}
.opa-entry-player iframe {
	width: 100%;
	max-width: none;
	border: 0;
	display: block;
}

.opa-entry-type {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--opa-faint);
	margin-bottom: 12px;
}

.opa-entry-title {
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	color: #fff;
	overflow-wrap: break-word;
}

.opa-entry-artist {
	font-family: var(--opa-serif);
	font-style: italic;
	font-size: 22px;
	color: var(--opa-muted);
	margin-bottom: 20px;
}

.opa-entry-meta {
	display: flex;
	gap: 18px;
	font-size: 13px;
	color: var(--opa-faint);
	border-top: 1px solid var(--opa-line);
	border-bottom: 1px solid var(--opa-line);
	padding: 14px 0;
	margin-bottom: 26px;
	font-variant-numeric: tabular-nums;
}

.opa-entry-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.opa-single a.opa-link-btn {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #232323;
	background: var(--opa-ink);
	border-radius: 4px;
	padding: 12px 22px;
	text-decoration: none;
	transition: transform 0.16s ease, opacity 0.16s ease;
}
.opa-single a.opa-link-btn:hover { color: #232323; transform: scale(1.04); text-decoration: none; }
.opa-single a.opa-link-btn.opa-link--bandcamp { background: #62a0b0; }
.opa-single a.opa-link-btn.opa-link--spotify { background: #1db954; }
.opa-single a.opa-link-btn.opa-link--youtube { background: #ff4444; }
.opa-single a.opa-link-btn.opa-link--soundcloud { background: #ff7733; }
.opa-single a.opa-link-btn.opa-link--tomato-lab,
.opa-single a.opa-link-btn.opa-link--tomato-lab:hover { background: #ff223c; color: #fff; }

.opa-entry-content {
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(251, 251, 244, 0.85);
}
.opa-entry-content p { margin-bottom: 1.1em; }
.opa-entry-content a { color: var(--opa-accent); }

/* Additional images + related */
.opa-entry-gallery,
.opa-entry-more { margin-top: 68px; }

.opa-entry-gallery .opa-section-title,
.opa-entry-more .opa-section-title {
	border-bottom: 1px solid var(--opa-line);
	padding-bottom: 16px;
	margin-bottom: 26px;
}

.opa-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}
.opa-gallery-grid img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
/* Gallery thumbs are buttons that open the lightbox. Override the theme's
   global button styling (it forces a blue background !important). */
.opa-single .opa-gallery-grid .opa-gallery-item,
.opa-single .opa-gallery-grid .opa-gallery-item:hover,
.opa-single .opa-gallery-grid .opa-gallery-item:focus,
.opa-single .opa-gallery-grid .opa-gallery-item:active {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	overflow: hidden;
	cursor: zoom-in;
}
.opa-single .opa-gallery-grid .opa-gallery-item:focus-visible {
	outline: 2px solid var(--opa-accent);
	outline-offset: 2px;
}

/* Lightbox overlay — click anywhere (or Esc) to close */
.opa-lightbox[hidden] { display: none; }
.opa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(14, 14, 14, 0.92);
	cursor: zoom-out;
}
.opa-lightbox img {
	max-width: 100%;
	max-height: 92vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.opa-more-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
}
.opa-more-item {
	color: var(--opa-ink);
	text-decoration: none;
	display: block;
	padding: 14px;
	border-radius: 12px;
	transition: background 0.2s ease;
}
.opa-more-item:hover { color: var(--opa-ink); text-decoration: none; background: var(--opa-surface); }
.opa-more-thumb {
	aspect-ratio: 1 / 1;
	background: var(--opa-surface-2);
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.opa-more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opa-more-title { font-size: 15px; font-weight: 700; line-height: 1.25; }
.opa-more-artist {
	font-family: var(--opa-serif);
	font-style: italic;
	font-size: 13px;
	color: var(--opa-muted);
}

/* ============================================================== Responsive */
@media (max-width: 900px) {
	.opa-entry, .opa-entry.opa-entry--has-cover { grid-template-columns: 1fr; gap: 30px; }
	.opa-entry-cover { max-width: 420px; }
}

@media (max-width: 782px) {
	.opa-hero { min-height: clamp(400px, 60vh, 520px); }
	.opa-hero-inner { padding-bottom: 40px; gap: 28px; }
	.opa-hero-pagetitle { font-size: 1.5em; }
	.opa-library-head { align-items: flex-start; }
	.opa-controls { width: 100%; }
	.opa-search-wrap, .opa-search { flex: 1 1 100%; width: 100%; }
	.opa-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.opa-single { padding-inline: 20px; }
}