/* =====================================================
   Bangla Lyrics — site styles (v2019-12 layout match)
   ===================================================== */

:root {
	--bl-primary:    #dc2626;
	--bl-accent:     #ea580c;
	--bl-accent-2:   #f59e0b;
	--bl-text:       #222222;
	--bl-text-soft:  #555555;
	--bl-bg:         #ffffff;
	--bl-bg-soft:    #f5f5f5;
	--bl-border:     #e5e5e5;
	--bl-link:       #1f5fad;
	--bl-link-hover: #dc2626;
	--bl-radius:     4px;
	--bl-shadow:     0 1px 2px rgba(0,0,0,.04);
	--bl-container:  1180px;
	--bl-gap:        1.5rem;
}

/* Layout container */
.bl-container { max-width: var(--bl-container); margin-inline: auto; padding-inline: 1.25rem; }

/* ---------------- Header ---------------- */
.bl-site-header {
	background: #fff;
	border-bottom: 1px solid var(--bl-border);
	padding: .75rem 0;
}
.bl-site-header__inner {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	align-items: center;
	gap: 1.5rem;
}
.bl-logo { display: inline-flex; align-items: center; line-height: 0; }
.bl-logo img { display: block; height: 44px; max-height: 44px; width: auto; }
.bl-search { position: relative; width: 100%; max-width: 460px; }
.bl-search input[type="search"],
.bl-search input[type="text"] {
	width: 100%;
	padding: .55rem .9rem;
	border: 1px solid var(--bl-border);
	border-radius: 999px;
	background: var(--bl-bg-soft);
	font-size: .95rem;
}
.bl-search input:focus { outline: 2px solid var(--bl-accent-2); border-color: var(--bl-accent); }
.bl-search-results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0;
	background: #fff; border: 1px solid var(--bl-border);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
	max-height: 420px; overflow: auto;
	z-index: 1000;
}
.bl-search-results[hidden] { display: none; }
.bl-search-results__item {
	display: flex; flex-direction: column; gap: 2px;
	padding: .65rem .9rem;
	border-bottom: 1px solid var(--bl-border);
	color: var(--bl-text); text-decoration: none;
}
.bl-search-results__item:last-child { border-bottom: 0; }
.bl-search-results__item:hover,
.bl-search-results__item.is-active { background: var(--bl-bg-soft); }
.bl-search-results__title { font-weight: 600; color: var(--bl-text); font-size: .95rem; }
.bl-search-results__meta { font-size: .8rem; color: var(--bl-text-soft); }
.bl-search-results__empty,
.bl-search-results__loading { padding: .75rem .9rem; color: var(--bl-text-soft); font-size: .9rem; text-align: center; }
.bl-search-results__more { display: block; padding: .65rem .9rem; text-align: center; font-weight: 600; background: var(--bl-bg-soft); color: var(--bl-primary); text-decoration: none; }
.bl-search-results__more:hover { background: var(--bl-primary); color: #fff; }

.bl-mainnav {
	display: flex; gap: 1.25rem; align-items: center;
	font-size: .95rem;
}
.bl-mainnav a { color: var(--bl-link); text-decoration: none; }
.bl-mainnav a:hover { color: var(--bl-link-hover); }

@media (max-width: 860px) {
	.bl-site-header__inner { grid-template-columns: 1fr; }
	.bl-search { max-width: none; }
	.bl-mainnav { flex-wrap: wrap; }
}

/* ---------------- Content wrapper (2-column) ---------------- */
.bl-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2rem;
	align-items: start;
}
.bl-layout--full { grid-template-columns: 1fr; }

@media (max-width: 860px) {
	.bl-layout { grid-template-columns: 1fr; }
}

/* ---------------- Sidebar ---------------- */
.bl-sidebar { font-size: .95rem; }
.bl-sidebar h3 {
	font-size: 1.05rem;
	margin: 0 0 .75rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--bl-border);
	letter-spacing: .01em;
}
.bl-sidebar .widget { margin-bottom: 1.75rem; }
.bl-sidebar ul { list-style: none; padding: 0; margin: 0; }
.bl-sidebar li { padding: 4px 0; }
.bl-sidebar a { color: var(--bl-link); text-decoration: none; }
.bl-sidebar a:hover { color: var(--bl-link-hover); text-decoration: underline; }

/* Genre list as 2-col compact */
.bl-genres { columns: 2; column-gap: .75rem; }
.bl-genres a { display: block; padding: 3px 0; }

/* ---------------- Cards (post grid) ---------------- */
.bl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
	margin: 1rem 0 2rem;
}
.bl-card {
	background: #fff;
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-radius);
	overflow: hidden;
	box-shadow: var(--bl-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
	/* Flex column so cards in the same grid row stretch to equal height */
	display: flex;
	flex-direction: column;
	height: 100%;
}
.bl-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(31,29,24,.08); }
.bl-card__body { flex: 1 1 auto; }
.bl-card__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--bl-bg-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c89b3c' width='32' height='32'><path d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/></svg>") center/40px no-repeat;
	overflow: hidden;
}
.bl-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card__body { padding: .9rem 1rem 1.1rem; }
.bl-card__title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 .35rem;
	line-height: 1.3;
	/* Lock to 2 lines so 1-liners and 2-liners align card heights uniformly */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}
.bl-card__title a { color: var(--bl-link); text-decoration: none; }
.bl-card__title a:hover { color: var(--bl-link-hover); }
.bl-card__meta { font-size: .9rem; color: var(--bl-text-soft); line-height: 1.6; margin: 0; }
/* Render artist + album on the same line in card body (consistent card height) */
.bl-card__body .bl-card__meta { display: inline; }
.bl-card__body .bl-card__meta + .bl-card__meta::before { content: " · "; color: var(--bl-text-soft); margin: 0 .25rem; }
.bl-card__meta strong { font-weight: 600; color: var(--bl-text); }
.bl-card__meta-label { color: var(--bl-text); font-weight: 500; }
/* Card term links: neutral dark gray, accent on hover (no red) */
.bl-card__meta-link,
.bl-card__meta a {
	color: var(--bl-text);
	text-decoration: none;
	font-weight: 500;
}
.bl-card__meta-link:hover,
.bl-card__meta a:hover {
	color: var(--bl-accent);
	text-decoration: none;
}

/* [bl_lyrics_grid] — column-count driven by inline --bl-cols */
.bl-lyrics-grid-cards {
	display: grid;
	grid-template-columns: repeat(var(--bl-cols, 2), minmax(0, 1fr));
	gap: 1.25rem;
	margin: 1rem 0 2rem;
}
@media (max-width: 720px) {
	.bl-lyrics-grid-cards { grid-template-columns: 1fr; }
}
.bl-lyrics-grid-cards .bl-card__thumb { aspect-ratio: 16 / 10; background: #1a1c1f; }
.bl-lyrics-grid-cards .bl-card__thumb img { object-fit: cover; }

/* Page heading */
.bl-page-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--bl-border);
}

/* Single page — title + share buttons row */
.bl-single-header {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding-bottom: .75rem; border-bottom: 1px solid var(--bl-border); margin-bottom: 1.25rem;
	flex-wrap: wrap;
}
.bl-single-header__title { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.bl-single-header h1 { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.bl-single-header__views {
	display: inline-flex; align-items: center;
	background: var(--bl-bg-soft);
	color: var(--bl-text-soft);
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 500;
}
.bl-single-share .bl-share { margin: 0; }

/* Centered video with border + shadow */
.bl-single__video-wrap {
	display: flex; justify-content: center;
	margin: 0 0 1.25rem;
}
.bl-single__video {
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16/9;
	background: #000;
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-radius);
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}
.bl-single__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* When there's no transliteration, let the Bengali column take the full width. */
.bl-lyrics-grid--single { grid-template-columns: 1fr; }

/* Vertical ad column between Bangla and Roman: BN | Ad | RO */
.bl-lyrics-grid--with-ad { grid-template-columns: minmax(0,1fr) 180px minmax(0,1fr); gap: 1rem; }
.bl-lyrics-ad {
	display: flex; align-items: flex-start; justify-content: center;
	margin: 0; min-width: 0;
}
.bl-lyrics-ad .bl-ad,
.bl-lyrics-ad .bl-ad-placeholder {
	width: 100%;
	min-height: 480px;
	margin: 0;
	position: sticky; top: 80px;
}
.bl-lyrics-ad .bl-ad-placeholder {
	display: flex; flex-direction: column; justify-content: center;
}
/* Below 900px viewport: stack to single column (BN, ad, RO) */
@media (max-width: 900px) {
	.bl-lyrics-grid--with-ad { grid-template-columns: 1fr; }
	.bl-lyrics-ad .bl-ad, .bl-lyrics-ad .bl-ad-placeholder { min-height: 200px; position: static; }
}

/* Compact meta bar — pill-style chips with icons, low height */
.bl-meta-bar {
	display: flex; flex-wrap: wrap; gap: 6px 10px;
	background: var(--bl-bg-soft);
	padding: 10px 14px;
	border-radius: var(--bl-radius);
	margin: 0 0 1.25rem;
	font-size: .9rem; line-height: 1.4;
}
.bl-meta-bar__item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: #fff; border: 1px solid var(--bl-border); border-radius: 999px; }
.bl-meta-bar__icon { display: inline-flex; color: var(--bl-primary); }
.bl-meta-bar__label { color: var(--bl-text-soft); font-weight: 500; }
.bl-meta-bar__value a { color: var(--bl-link); text-decoration: none; }
.bl-meta-bar__value a:hover { color: var(--bl-link-hover); text-decoration: underline; }

/* 2-column lyrics grid */
.bl-lyrics-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
	align-items: start;
	margin: 0 0 1.25rem;
}
@media (max-width: 860px) { .bl-lyrics-grid { grid-template-columns: 1fr; } }

.bl-lyrics-col {
	background: var(--bl-bg-soft);
	border-radius: var(--bl-radius);
	padding: 1.25rem 1.5rem;
}
.bl-lyrics-col__head {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	margin: 0 0 .75rem; padding-bottom: .5rem;
	border-bottom: 1px solid var(--bl-border);
}
.bl-lyrics-col__title {
	margin: 0;
	font-size: 1.05rem; font-weight: 700;
	color: var(--bl-primary);
}
.bl-copy-btn {
	display: inline-flex; align-items: center; gap: 4px;
	background: #fff; color: var(--bl-text-soft);
	border: 1px solid var(--bl-border);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: .8rem; font-weight: 500; cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.bl-copy-btn:hover { background: var(--bl-primary); color: #fff; border-color: var(--bl-primary); }
.bl-copy-btn.is-copied { background: #16a34a; color: #fff; border-color: #16a34a; }
.bl-copy-btn svg { flex: 0 0 auto; }
/* Floating icon-only copy button at top-right corner of lyrics body */
.bl-copy-btn--float {
	position: absolute; top: 8px; right: 8px;
	width: 32px; height: 32px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 6px;
	background: rgba(255,255,255,.92);
	border: 1px solid var(--bl-border);
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
	z-index: 2;
}
.bl-copy-btn--float:hover { background: var(--bl-primary); color: #fff; border-color: var(--bl-primary); }
.bl-lyrics-col__body { position: relative; line-height: 1.85; font-size: 1rem; text-align: center; }
.bl-lyrics-col__body p { margin: .5em 0; }
.bl-lyrics-col__body--pre {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .92rem;
	white-space: pre-wrap;
	text-align: left;
	margin: 0;
	background: transparent;
	padding: 0;
}

/* Strip the inline translit-section style we used previously (now superseded by 2-col grid) */
.bl-lyrics-col .bl-translit { display: none; }

/* FAQ */
.bl-faq { margin: 2.5rem 0; }
.bl-faq__title { font-size: 1.4rem; margin: 0 0 1rem; }
.bl-faq__item {
	background: #fff;
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-radius);
	padding: .9rem 1.1rem;
	margin-bottom: .6rem;
}
.bl-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	list-style: none;
	display: flex; justify-content: space-between; align-items: center;
}
.bl-faq__item summary::after { content: "＋"; color: var(--bl-accent); font-size: 1.2rem; }
.bl-faq__item[open] summary::after { content: "－"; }
.bl-faq__answer { padding-top: .6rem; color: var(--bl-text-soft); line-height: 1.7; }

/* Hero on home — clean white block */
.bl-hero { background: #ffffff; padding: 0 0 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bl-border); text-align: center; }
.bl-hero h1 { margin: 0 0 .75rem; line-height: 1.18; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.bl-hero p { margin: 0 auto 1rem; color: var(--bl-text-soft); max-width: 60ch; }
/* Centered section headings on homepage */
.bl-content .bl-page-title,
.bl-content .bl-faq__title { text-align: center; }
.bl-content .bl-page-title { padding-bottom: .75rem; }

/* Ad band: vertical breathing room around an in-article ad on the homepage */
.bl-ad-band { padding-block: 2rem; }
.bl-ad-band .bl-ad,
.bl-ad-band .bl-ad-placeholder { margin: 0; }
/* Sidebar variant — narrower spacing, sits between widgets */
.bl-ad-band--sidebar { padding-block: 1rem; }

/* AdSense container + dev placeholder — used on every page (single, homepage, sidebar) */
.bl-ad { margin: 1.5rem 0; }
.bl-ad-placeholder {
	border: 2px dashed #c89b3c;
	background: #fff7e6;
	padding: 1.25rem 1.5rem;
	border-radius: 6px;
	text-align: center;
	color: #6b5018;
}
.bl-ad-placeholder-title { font-weight: 700; margin-bottom: 4px; letter-spacing: .05em; text-transform: uppercase; font-size: .75rem; }
.bl-ad-placeholder-meta  { font-size: .875rem; margin-bottom: 6px; }
.bl-ad-placeholder-note  { font-size: .75rem; color: #8a6f33; }
.bl-ad-placeholder code  { background: #f0e7d2; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Footer affiliate emphasis */
.bl-affiliate { margin-top: .35rem; }
.bl-affiliate a { color: var(--bl-accent); font-weight: 600; }

/* WP block-system overrides where useful */
body { background: var(--bl-bg); }
.wp-block-search__inside-wrapper { border-radius: 999px; overflow: hidden; }