/* ==========================================================================
   ফটোকার্ড জেনারেটর — বরিশাল হোস্ট

   ভাবনা : চারপাশের সব কিছু নিরপেক্ষ ধূসর, যাতে পর্দায় একমাত্র
   রঙিন জিনিস হয় ক্লায়েন্টের নিজের কার্ড। ছবির ল্যাবের দেয়াল
   ধূসর রাখার মতো — তাহলেই আসল রঙ ঠিকঠাক বোঝা যায়।
   ========================================================================== */

:root {
	--ink:    #0E1116;
	--panel:  #161A21;
	--raise:  #1D222B;
	--edge:   #2A313C;
	--edge-2: #39424F;
	--tx:     #E6EAF0;
	--dim:    #8B95A5;
	--faint:  #5C6674;

	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;

	--gut: 20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.bpg-body {
	margin: 0;
	min-height: 100vh;
	background: var(--ink);
	color: var(--tx);
	font-family: "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   উপরের বার
   -------------------------------------------------------------------------- */

.bpg-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 var(--gut);
	height: 52px;
	border-bottom: 1px solid var(--edge);
	background: var(--panel);
	position: sticky;
	top: 0;
	z-index: 20;
}

.bpg-bar__mark {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand);
	flex: none;
}

.bpg-bar__name {
	font-weight: 600;
	letter-spacing: .01em;
}

.bpg-bar__back {
	margin-left: auto;
	color: var(--dim);
	text-decoration: none;
	font-size: 14px;
	padding: 6px 12px;
	border: 1px solid var(--edge);
	border-radius: 100px;
	transition: color .15s, border-color .15s;
}

.bpg-bar__back:hover,
.bpg-bar__back:focus-visible {
	color: var(--tx);
	border-color: var(--edge-2);
}

/* --------------------------------------------------------------------------
   মঞ্চ
   -------------------------------------------------------------------------- */

.bpg-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 28px;
	align-items: start;
	max-width: 1060px;
	margin: 0 auto;
	padding: 32px var(--gut) 64px;
}

.bpg-preview {
	position: sticky;
	top: 84px;
}

.bpg-canvas {
	display: flex;
	justify-content: center;
	padding: 24px;
	background:
		linear-gradient(var(--panel), var(--panel)) padding-box,
		repeating-conic-gradient(#1A1F27 0 25%, #151A21 0 50%) 0 0 / 16px 16px;
	border: 1px solid var(--edge);
	border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   কার্ড — সব ডিজাইনের সাধারণ অংশ
   -------------------------------------------------------------------------- */

.bpg-card {
	/*
	 * নিচের দুইটা মাপ ধরে বাকি সব হিসাব হয়।
	 * বিজ্ঞাপন বসলে --ad বেড়ে যায়, তখন শিরোনামের জায়গা
	 * নিজে থেকেই কমে — প্রতিটা ডিজাইনে আলাদা করে বলতে হয় না।
	 */
	--foot: 38px;
	--ad: 0px;

	position: relative;
	width: 480px;
	height: 480px;
	overflow: hidden;
	background: var(--brand);
	color: var(--card-text);
	font-family: "Noto Serif Bengali", serif;
	display: flex;
	flex-direction: column;
	flex: none;
	user-select: none;
}

.bpg-card__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bpg-card__top,
.bpg-card__media,
.bpg-card__title,
.bpg-card__foot {
	position: relative;
	z-index: 2;
}

.bpg-card__top {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 19px 0;
	flex: none;
}

.bpg-card__logo {
	height: 35px;
	width: auto;
	max-width: 173px;
	object-fit: contain;
	display: block;
}

.bpg-card__word {
	white-space: nowrap;
	font-weight: 800;
	font-size: 23px;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.bpg-card__meta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 11px;
	/* Hind Siliguri ছোট মাপে বাংলা সংখ্যা ঘোলা দেখায় — শিরোনামের
	   ফন্টটাই এখানে পরিষ্কার আসে */
	font-family: "Noto Serif Bengali", "Hind Siliguri", serif;
	font-size: 15px;
	line-height: 1.6;
}

.bpg-card__cat:not(:empty) {
	font-weight: 600;
	padding: 3px 13px 5px;
	border-radius: 100px;
	background: var(--accent);
	color: #fff;
	line-height: 1.6;
}

.bpg-card__date {
	opacity: .92;
	font-weight: 600;
	line-height: 1.6;
	/* উপরে-নিচে একটু ফাঁকা, নইলে মাত্রা আর কার কাটা পড়ে */
	padding: 2px 0 3px;
	white-space: nowrap;
}

.bpg-card__media {
	margin: 0;
	flex: none;
}

.bpg-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bpg-card__title {
	display: flex;
	align-items: flex-start;
	margin: 0;
	font-weight: 700;
	overflow: hidden;
	flex: 1 1 auto;
	min-height: 0;
}

.bpg-card__words {
	display: block;
	width: 100%;
}

.bpg-card__words span {
	cursor: pointer;
	border-radius: 2px;
	transition: color .12s;
}

.bpg-card__words span:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.bpg-card__words span.is-hi {
	color: var(--hi, var(--accent));
}

.bpg-card__badge,
.bpg-card__qr {
	display: none;
}

.bpg-card__badge,
.bpg-card__seam {
	display: none;
}

.bpg-card__foot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 11px;
	font-family: "Noto Serif Bengali", "Hind Siliguri", serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	padding: 9px 19px 11px;
	background: rgba(0, 0, 0, .35);
}

.bpg-card__note { opacity: .8; }
.bpg-card__url  { letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   ডিজাইন ১ — স্বদেশ

   ছবি উপরে, নিচে প্যানেল। সংযোগস্থলে হাইলাইট রঙের সরু রেখা,
   তার উপরেই তারিখের ব্যাজ — দুইটা মিলে কার্ডটার চেনা চিহ্ন।
   -------------------------------------------------------------------------- */

/*
   এই কার্ডের রঙ ব্র‍্যান্ড রঙ থেকে আসে না — পতাকার লাল-সবুজই এর
   পরিচয়। ব্যবহারকারী ব্র‍্যান্ড রঙ যাই দিন, স্বদেশ স্বদেশই থাকবে।
*/
.bpg-card--shadesh {
	--sd-green: #006A4E;
	--sd-red:   #F42A41;
	background: var(--sd-green);
}

.bpg-card--shadesh .bpg-card__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 58%;
	z-index: 1;
}

/* ছবির উপরে ছায়া, নইলে সাদা লোগো হারিয়ে যায় */
.bpg-card--shadesh .bpg-card__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 110px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.bpg-card--shadesh .bpg-card__wash {
	top: 58%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .24));
	z-index: 2;
}

.bpg-card--shadesh .bpg-card__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: 16px 19px 0;
}

.bpg-card--shadesh .bpg-card__logo { height: 34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.bpg-card--shadesh .bpg-card__word { text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }

/* উপরের কোণে তারিখ নয় — সংযোগস্থলের ব্যাজেই দেখাবে */
.bpg-card--shadesh .bpg-card__date {
	display: none;
}

/* সংযোগরেখা */
.bpg-card--shadesh .bpg-card__seam {
	display: block;
	position: absolute;
	top: 58%;
	left: 0;
	right: 0;
	height: 3px;
	margin-top: -1.5px;
	z-index: 5;
	background: var(--sd-red);
}

.bpg-card--shadesh .bpg-card__badge {
	display: block;
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	padding: 8px 26px 10px;
	background: var(--sd-red);
	color: #fff;
	font-family: "Noto Serif Bengali", serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
	border-radius: 3px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.bpg-card--shadesh .bpg-card__title {
	position: absolute;
	top: 58%;
	left: 0;
	right: 0;
	bottom: calc(var(--foot) + var(--ad));
	z-index: 4;
	align-items: center;
	text-align: center;
	padding: 30px 24px 6px;
}

.bpg-card--shadesh .bpg-card__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	background: rgba(0, 0, 0, .30);
}

/* --------------------------------------------------------------------------
   বিজ্ঞাপনের পটি

   নিচের বারের ঠিক উপরে। ছবি না থাকলে জায়গাটাই থাকে না —
   --ad শূন্য, তাই শিরোনাম পুরো জায়গা পায়।
   -------------------------------------------------------------------------- */

.bpg-card.has-ad { --ad: 56px; }

.bpg-card__ad {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--foot);
	z-index: 6;
	height: var(--ad);
	background: #fff;
	overflow: hidden;
}

.bpg-card.has-ad .bpg-card__ad { display: block; }

.bpg-card__ad img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   ডিজাইন বদলানোর চিপ
   -------------------------------------------------------------------------- */

.bpg-designs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	justify-content: center;
}

.bpg-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 100px;
	color: var(--dim);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}

.bpg-chip:hover { color: var(--tx); border-color: var(--edge-2); }

.bpg-chip.is-on {
	color: var(--tx);
	border-color: var(--accent);
	background: var(--raise);
}

.bpg-chip__art {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background: var(--brand);
	overflow: hidden;
	flex: none;
}

.bpg-chip__art i,
.bpg-chip__art b {
	position: absolute;
	display: block;
	background: rgba(255, 255, 255, .82);
}

/* প্রতিটা চিপের ভিতরের ছোট নকশা — কোন ডিজাইন সেটা বোঝায় */

.bpg-art--shadesh i { inset: 0 0 44% 0; background: rgba(255, 255, 255, .28); }
.bpg-art--shadesh b {
	inset: 54% auto auto 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 4px;
	border-radius: 1px;
	background: var(--accent);
}




/* --------------------------------------------------------------------------
   কন্ট্রোল প্যানেল
   -------------------------------------------------------------------------- */

.bpg-panel {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--r-lg);
	padding: 20px;
}

.bpg-group + .bpg-group { margin-top: 18px; }

.bpg-group--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.bpg-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--dim);
	margin-bottom: 6px;
	letter-spacing: .01em;
}

.bpg-input {
	width: 100%;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
	color: var(--tx);
	font: inherit;
	padding: 9px 11px;
	transition: border-color .15s;
}

.bpg-input:focus {
	outline: none;
	border-color: var(--accent);
}

.bpg-input--area {
	resize: vertical;
	min-height: 74px;
	font-family: "Noto Serif Bengali", serif;
	line-height: 1.6;
}

.bpg-tip {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--faint);
	line-height: 1.45;
}

.bpg-tip__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
	margin-top: 6px;
}

/* স্লাইডার */

.bpg-slider__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.bpg-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--tx);
	background: var(--raise);
	border-radius: 4px;
	padding: 1px 6px;
	margin-bottom: 6px;
}

input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 22px;
	background: none;
	cursor: pointer;
	margin: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 3px;
	background: var(--edge-2);
	border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--tx);
	border: 3px solid var(--panel);
	box-shadow: 0 0 0 1px var(--edge-2);
}

input[type="range"]::-moz-range-track {
	height: 3px;
	background: var(--edge-2);
	border-radius: 2px;
}

input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tx);
	border: 3px solid var(--panel);
	box-shadow: 0 0 0 1px var(--edge-2);
}

input[type="range"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* রঙ */

.bpg-swatch input[type="color"] {
	width: 100%;
	height: 38px;
	padding: 3px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
	cursor: pointer;
}

.bpg-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bpg-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }

/* ফাইল */

.bpg-file {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ink);
	border: 1px dashed var(--edge-2);
	border-radius: var(--r-sm);
	padding: 8px 8px 8px 12px;
	cursor: pointer;
	transition: border-color .15s;
}

.bpg-file:hover { border-color: var(--accent); }

.bpg-file__text {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--dim);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpg-file__btn {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--tx);
	background: var(--raise);
	border-radius: 4px;
	padding: 5px 12px;
}

/* ডাউনলোড */

.bpg-go {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 22px;
	padding: 13px 16px;
	background: var(--accent);
	border: none;
	border-radius: var(--r-md);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	overflow: hidden;
	transition: filter .15s;
}

.bpg-go:hover { filter: brightness(1.08); }

.bpg-go:disabled {
	cursor: progress;
	filter: saturate(.4) brightness(.8);
}

.bpg-go__size {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 500;
	opacity: .7;
}

/* কাজ চলার সময় উপরে সরু আলো — সম্প্রচারের ট্যালি লাইটের মতো */
.bpg-go.is-busy::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	width: 40%;
	background: #fff;
	animation: bpg-sweep 1s linear infinite;
}

@keyframes bpg-sweep {
	from { transform: translateX(-100%); }
	to   { transform: translateX(350%); }
}

.bpg-credit {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--faint);
}

.bpg-credit a {
	color: var(--dim);
	text-decoration: none;
}

.bpg-credit a:hover { color: var(--tx); }

/* --------------------------------------------------------------------------
   খালি অবস্থা
   -------------------------------------------------------------------------- */

.bpg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 70vh;
	padding: var(--gut);
	text-align: center;
}

.bpg-empty__msg { margin: 0; color: var(--dim); }

.bpg-empty__link {
	color: var(--tx);
	text-decoration: none;
	border: 1px solid var(--edge);
	border-radius: 100px;
	padding: 8px 18px;
	font-size: 14px;
}

.bpg-empty__link:hover { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   ছোট পর্দা
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.bpg-stage {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-top: 20px;
	}

	.bpg-preview { position: static; }

	.bpg-canvas { padding: 16px; }
}

/*
   কার্ডের আসল মাপ সবসময় ৪৮০px — ডাউনলোডের ছবি যেন সব যন্ত্রে এক হয়।
   ছোট পর্দায় শুধু দেখতে ছোট করা হয়, ভিতরের কিছু বদলায় না।
*/
@media (max-width: 560px) {
	.bpg-canvas {
		padding: 12px;
		display: block;
	}

	.bpg-fit {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.bpg-card {
		transform: scale(var(--fit, 1));
		transform-origin: top center;
	}
}

@media (max-width: 420px) {
	.bpg-panel { padding: 16px; }
	.bpg-group--pair { grid-template-columns: 1fr; gap: 14px; }
}

/* --------------------------------------------------------------------------
   কম নড়াচড়ার পছন্দ
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   লেখার অবস্থান
   -------------------------------------------------------------------------- */

.bpg-align--left   { text-align: left; }
.bpg-align--center { text-align: center; }
.bpg-align--right  { text-align: right; }

/* তিন বোতামের দল */

.bpg-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
}

.bpg-seg__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 6px;
	background: none;
	border: none;
	border-radius: 4px;
	color: var(--dim);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color .15s, background .15s;
}

.bpg-seg__btn:hover { color: var(--tx); }

.bpg-seg__btn.is-on {
	color: var(--tx);
	background: var(--raise);
}

.bpg-seg__btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* বোতামের ভিতরের ছোট দাগ — কোন দিকে বোঝায় */

.bpg-seg__art {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 13px;
	flex: none;
}

.bpg-seg__art i {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.bpg-seg__art i:nth-child(1) { width: 100%; }
.bpg-seg__art i:nth-child(2) { width: 62%; }
.bpg-seg__art i:nth-child(3) { width: 85%; }

.bpg-seg__art--center { align-items: center; }
.bpg-seg__art--right  { align-items: flex-end; }

@media (max-width: 420px) {
	.bpg-seg__btn span:last-child { display: none; }
}


/* --------------------------------------------------------------------------
   উদ্ধৃতি

   বক্তব্যের কার্ড। খবরের কাগজে উদ্ধৃতি ছাপার চিরাচরিত চিহ্ন —
   বড় একটা কোটেশন মার্ক, তার নিচ থেকে লেখা শুরু।

   বাকি সব কার্ডে লেখা মাঝ বরাবর, এখানে বাঁ ঘেঁষা। ছবিও কিনারা
   ছোঁয় না, ফ্রেমে বাঁধা — তাই এক নজরেই আলাদা চেনা যায়।
   -------------------------------------------------------------------------- */

.bpg-card--quote {
	background: var(--brand);
}

.bpg-card--quote .bpg-card__wash {
	background:
		radial-gradient(90% 65% at 76% 8%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .34));
}

.bpg-card--quote .bpg-card__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 16px 20px 0;
}

.bpg-card--quote .bpg-card__logo { height: 30px; }

/* ছবি ফ্রেমে বাঁধা — কিনারা ছোঁয় না */
.bpg-card--quote .bpg-card__media {
	position: absolute;
	top: 58px;
	left: 20px;
	right: 20px;
	height: 176px;
	z-index: 2;
	border-radius: 4px;
	overflow: hidden;
}

/* নিচে হাইলাইট রঙের সরু পায়া */
.bpg-card--quote .bpg-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--accent);
}

.bpg-card--quote .bpg-card__title {
	position: absolute;
	top: 250px;
	left: 0;
	right: 0;
	bottom: calc(var(--foot) + var(--ad) + 2px);
	z-index: 4;
	align-items: center;
	text-align: left;
	padding: 30px 22px 6px 62px;
}

/* বড় উদ্ধৃতি চিহ্ন — লেখার বাঁ পাশে ঝুলে থাকে */
.bpg-card--quote .bpg-card__title::before {
	content: "\201C";
	position: absolute;
	top: 4px;
	left: 16px;
	z-index: 1;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 92px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
	pointer-events: none;
}

.bpg-card--quote .bpg-card__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	background: rgba(0, 0, 0, .32);
}

/* --------------------------------------------------------------------------
   ডিজাইন ১ — সিগন্যাল
   ছবি উপরে, শিরোনাম নিচে। বাঁ দিকে হাইলাইট রঙের দাগ।
   -------------------------------------------------------------------------- */

.bpg-card--signal .bpg-card__wash {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(0deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, 0) 55%);
}

.bpg-card--signal .bpg-card__media {
	height: 211px;
	margin: 13px 19px 0;
	border-radius: var(--r-sm);
	overflow: hidden;
	border-left: 3px solid var(--accent);
}

.bpg-card--signal .bpg-card__title {
	padding: 16px 19px 11px;
}


/* --------------------------------------------------------------------------
   ডিজাইন ২ — ব্রেকিং
   গাঢ় ব্যাকগ্রাউন্ড, ছবির কোণায় ব্র‍্যাকেট।
   -------------------------------------------------------------------------- */

.bpg-card--breaking {
	background: #0B0D10;
}

.bpg-card--breaking .bpg-card__wash {
	background:
		radial-gradient(120% 85% at 50% 8%, var(--brand) 0%, rgba(0, 0, 0, 0) 62%),
		linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .5));
	opacity: .9;
}

.bpg-card--breaking .bpg-card__media {
	position: relative;
	height: 200px;
	margin: 16px 24px 0;
}

.bpg-card--breaking .bpg-card__media::before,
.bpg-card--breaking .bpg-card__media::after {
	content: "";
	position: absolute;
	width: 35px;
	height: 35px;
	border: 4px solid var(--accent);
	z-index: 3;
}

.bpg-card--breaking .bpg-card__media::before {
	top: -8px;
	left: -8px;
	border-right: 0;
	border-bottom: 0;
	border-top-left-radius: 4px;
}

.bpg-card--breaking .bpg-card__media::after {
	bottom: -8px;
	right: -8px;
	border-left: 0;
	border-top: 0;
	border-bottom-right-radius: 4px;
}

.bpg-card--breaking .bpg-card__title {
	padding: 19px 24px 11px;
}

.bpg-card--breaking .bpg-card__foot {
	background: var(--brand);
}


/* --------------------------------------------------------------------------
   ডিজাইন ৩ — ফ্রেম
   ছবি পুরো কার্ড জুড়ে, শিরোনাম তার উপরে।
   -------------------------------------------------------------------------- */

.bpg-card--frame .bpg-card__media {
	position: absolute;
	inset: 0;
	height: auto;
	z-index: 0;
}

.bpg-card--frame .bpg-card__wash {
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .92) 0%,
		rgba(0, 0, 0, .60) 34%,
		rgba(0, 0, 0, .05) 64%,
		rgba(0, 0, 0, .45) 100%
	);
}

.bpg-card--frame .bpg-card__title {
	align-items: flex-end;
	padding: 0 21px 13px;
}

.bpg-card--frame .bpg-card__foot {
	background: var(--brand);
}


/* --------------------------------------------------------------------------
   ডিজাইন ৫ — লেটেস্ট কার্ড

   বড় ছবি উপরে, নিচে গাঢ় প্যানেল। তারিখের ব্যাজটা ঠিক দুইয়ের
   সংযোগস্থলে বসে — এটাই এই ডিজাইনের চেনা চিহ্ন।

   প্যানেলের রঙ ব্র‍্যান্ড রঙ থেকেই আসে, উপরে কালো আস্তরণ দিয়ে গাঢ়
   করা হয়। ফলে ব্যাজটা প্যানেলের চেয়ে উজ্জ্বল দেখায় আর চোখে পড়ে।
   -------------------------------------------------------------------------- */

.bpg-card--latest {
	background: var(--card-panel, #0E2A5C);
}

/* ছবি — উপরের ৫৮% */
.bpg-card--latest .bpg-card__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 58%;
	z-index: 1;
}

/* ছবির উপরে হালকা ছায়া, নইলে সাদা লোগো হারিয়ে যায় */
.bpg-card--latest .bpg-card__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 90px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/* আস্তরণ শুধু নিচের প্যানেলে — হালকা গভীরতা দিতে */
.bpg-card--latest .bpg-card__wash {
	top: 58%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .18));
	z-index: 2;
}

/* লোগো ছবির উপরে ভাসবে */
.bpg-card--latest .bpg-card__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: 14px 18px 0;
}

.bpg-card--latest .bpg-card__logo {
	height: 40px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.bpg-card--latest .bpg-card__word {
	text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.bpg-card--latest .bpg-card__meta {
	align-items: flex-start;
}

/* উপরের কোণে তারিখ নয় — নিচের ব্যাজেই দেখাবে */
.bpg-card--latest .bpg-card__date {
	display: none;
}

/* তারিখের ব্যাজ — ছবি আর প্যানেলের সংযোগস্থলে */
.bpg-card--latest .bpg-card__badge {
	display: block;
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	padding: 9px 28px 11px;
	background: var(--card-panel, #0E2A5C);
	color: #fff;
	font-family: "Noto Serif Bengali", "Hind Siliguri", serif;
	font-size: 16px;
	font-weight: 600;
	/* বাংলার মাত্রা আর কার যেন কাটা না পড়ে */
	line-height: 1.7;
	white-space: nowrap;
	border-radius: 3px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

/* শিরোনাম — প্যানেলের মাঝ বরাবর */
.bpg-card--latest .bpg-card__title {
	position: absolute;
	top: 58%;
	left: 0;
	right: 0;
	bottom: calc(var(--foot) + var(--ad) + 6px);
	z-index: 4;
	align-items: center;
	padding: 30px 24px 8px;
}

.bpg-card--latest .bpg-card__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	background: rgba(0, 0, 0, .3);
}

/* ঠিকানা বাঁ কোণে, লেখা ডান কোণে */
.bpg-card--latest .bpg-card__url {
	order: -1;
}

/* QR থাকলে লেখাটা তার নিচে ঢুকে যেত */
.bpg-card--latest.has-qr .bpg-card__note {
	margin-right: 74px;
}

/* QR — নিচের বারের ঠিক উপরে, ডান কোণে */
.bpg-card--latest .bpg-card__qr {
	display: block;
	position: absolute;
	right: 16px;
	bottom: 52px;
	z-index: 6;
	width: 58px;
	height: 58px;
	padding: 4px;
	background: #fff;
	border-radius: 4px;
	object-fit: contain;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* QR থাকলে শিরোনাম তার উপরে থামবে — লেখা আর ঢাকা পড়বে না */
.bpg-card--latest.has-qr .bpg-card__title {
	padding-bottom: 64px;
}


.bpg-art--signal i { inset: 3px 3px auto 3px; height: 8px; }
.bpg-art--signal b { inset: auto 3px 3px 3px; height: 5px; opacity: .55; }
.bpg-art--breaking { background: #0B0D10; }
.bpg-art--breaking i { inset: 4px; border: 1.5px solid var(--accent); background: none; }
.bpg-art--breaking b { inset: auto 0 0 0; height: 5px; background: var(--brand); }
.bpg-art--frame i { inset: 0; background: rgba(255, 255, 255, .3); }
.bpg-art--frame b { inset: auto 3px 3px 3px; height: 7px; }
.bpg-art--latest { background: #0E2A5C; }
.bpg-art--latest i { inset: 0 0 auto 0; height: 12px; background: rgba(255, 255, 255, .55); }
.bpg-art--latest b {
	inset: 9px auto auto 50%;
	transform: translateX(-50%);
	width: 13px;
	height: 5px;
	border-radius: 1px;
	background: var(--brand);
}

/* লেখার অবস্থান */

.bpg-align--left   { text-align: left; }
.bpg-align--center { text-align: center; }
.bpg-align--right  { text-align: right; }

/* তিন বোতামের দল */

.bpg-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
}

.bpg-seg__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 6px;
	background: none;
	border: none;
	border-radius: 4px;
	color: var(--dim);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color .15s, background .15s;
}

.bpg-seg__btn:hover { color: var(--tx); }
.bpg-seg__btn.is-on { color: var(--tx); background: var(--raise); }

.bpg-seg__btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.bpg-seg__art {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 13px;
	flex: none;
}

.bpg-seg__art i {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.bpg-seg__art i:nth-child(1) { width: 100%; }
.bpg-seg__art i:nth-child(2) { width: 62%; }
.bpg-seg__art i:nth-child(3) { width: 85%; }

.bpg-seg__art--center { align-items: center; }
.bpg-seg__art--right  { align-items: flex-end; }

@media (max-width: 420px) {
	.bpg-seg__btn span:last-child { display: none; }
}

/* QR — শুধু লেটেস্ট কার্ডে */

.bpg-card__qr { display: none; }

.bpg-card--latest .bpg-card__qr {
	display: block;
	position: absolute;
	right: 16px;
	bottom: 52px;
	z-index: 6;
	width: 58px;
	height: 58px;
	padding: 4px;
	background: #fff;
	border-radius: 4px;
	object-fit: contain;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}


.bpg-art--quote i {
	inset: 3px auto auto 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
}
.bpg-art--quote b { inset: auto 4px 5px 4px; height: 4px; opacity: .7; background: rgba(255, 255, 255, .9); }

/* ছবি বাছাই আর সরানোর বোতাম পাশাপাশি */

.bpg-file-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.bpg-file-row .bpg-file { flex: 1; min-width: 0; }

.bpg-clear {
	flex: none;
	width: 40px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
	color: var(--dim);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.bpg-clear:hover { color: #fff; border-color: var(--accent); }

.bpg-clear:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}