/* ==========================================================================
   Homepage — reference-site sections
   ========================================================================== */

/* Shared: "title + thumb" row card with excerpt spanning below */
.dn-card--l3side, .dn-card--l3two {
	display: grid; grid-template-columns: minmax(0, 1fr) 92px; column-gap: 12px; row-gap: 6px;
	padding: 0 0 14px; margin-bottom: 14px; border-top: 0; border-bottom: 1px solid var(--dn-line);
}
.dn-card--l3side .dn-card-body, .dn-card--l3two .dn-card-body { display: contents; }
.dn-card--l3side .dn-card-media, .dn-card--l3two .dn-card-media { grid-column: 2; grid-row: 1; order: 0; }
.dn-card--l3side .dn-title, .dn-card--l3two .dn-title { grid-column: 1; grid-row: 1; font-size: 17px; line-height: 1.45; }
.dn-card--l3side .dn-excerpt, .dn-card--l3two .dn-excerpt { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 14.5px; line-height: 1.55; color: #555; }
.dn-card--l3side .dn-time, .dn-card--l3two .dn-time { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.dn-card--l3side .dn-thumb, .dn-card--l3two .dn-thumb { aspect-ratio: 4 / 3; border-radius: 0; }
.dn-card--l3side .dn-cat-label, .dn-card--l3two .dn-cat-label { display: none; }
.dn-shoulder::after { content: " •"; color: #9a9a9a; font-weight: 400; }

/* ---------- Lead (3 columns) ---------- */
.dn-lead3 { padding-top: 22px; }
.dn-lead3-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); gap: 0; }
.dn-l3-left { grid-column: 1; grid-row: 1; padding-right: 16px; }
.dn-l3-mid { grid-column: 2; grid-row: 1; padding: 0 16px; border-left: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf; }
.dn-l3-right { grid-column: 3; grid-row: 1; padding-left: 16px; }
.dn-l3-left > .dn-card--text { padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--dn-line); }
.dn-l3-left > .dn-card--text .dn-title { font-size: 16.5px; }

.dn-card--lead3 { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #cfcfcf; }
.dn-card--lead3 .dn-thumb { aspect-ratio: 4 / 3; border-radius: 0; }
.dn-lead3-cap { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-card--lead3 .dn-title { font-size: 29px; line-height: 1.38; font-weight: 400; }
.dn-card--lead3 .dn-excerpt { font-size: 15px; line-height: 1.6; margin-top: 10px; color: #444; }

.dn-l3-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 33px; padding-top: 14px; border-bottom: 1px solid #cfcfcf; margin-bottom: 16px; }
.dn-l3-two .dn-card--l3two { border-bottom: 0; margin-bottom: 0; position: relative; }
.dn-l3-two .dn-card--l3two + .dn-card--l3two::before { content: ""; position: absolute; left: -17px; top: 0; bottom: 14px; border-left: 1px solid var(--dn-line); }

.dn-l3-cards, .dn-l3-texts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 33px; }
.dn-l3-cards { padding-bottom: 16px; border-bottom: 1px solid #cfcfcf; }
.dn-l3-cards .dn-card, .dn-l3-texts .dn-card { position: relative; }
.dn-l3-cards .dn-card + .dn-card::before, .dn-l3-texts .dn-card + .dn-card::before { content: ""; position: absolute; left: -17px; top: 0; bottom: 0; border-left: 1px solid var(--dn-line); }
.dn-l3-cards .dn-thumb { aspect-ratio: 16 / 10; border-radius: 0; }
.dn-l3-cards .dn-title, .dn-l3-texts .dn-title { font-size: 16.5px; line-height: 1.45; }
.dn-l3-texts .dn-card--text { border-top: 0; padding: 14px 0 0; }
.dn-l3-texts .dn-excerpt { font-size: 14px; line-height: 1.55; color: #555; margin-top: 6px; }

/* ---------- আলোচিত বিষয় ---------- */
.dn-topics-sec { padding: 34px 0 0; }
.dn-topics { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid #00a3e0; }
.dn-topics-label { flex-shrink: 0; font-size: 15px; font-weight: 700; font-synthesis: weight; color: #222; }
.dn-topics-track { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.dn-topics-track::-webkit-scrollbar { display: none; }
.dn-topic { flex-shrink: 0; padding: 4px 14px; border: 1px solid #c9c9c9; border-radius: 20px; background: #f7f7f7; font-size: 14.5px; color: #333; white-space: nowrap; }
.dn-topic:hover { border-color: #1a6fc7; color: #1a6fc7; background: #fff; }
.dn-topics-nav { display: flex; gap: 8px; flex-shrink: 0; }
.dn-round-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1.5px solid #222; border-radius: 50%; background: #fff; color: #222; cursor: pointer; }
.dn-round-btn:hover { background: #222; color: #fff; }
.dn-round-btn[disabled] { opacity: .35; cursor: default; background: #fff; color: #222; }

/* ---------- ভিডিও carousel ---------- */
.dn-vc-sec { padding-top: 18px; }
.dn-vc-sec .dn-sec-head { border-top: 0; padding-top: 0; }
.dn-carousel { position: relative; }
.dn-carousel-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; }
.dn-carousel-track::-webkit-scrollbar { display: none; }
.dn-vc-card { flex: 0 0 calc((100% - 4 * 22px) / 4.55); scroll-snap-align: start; background: #e3f1fb; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.dn-vc-media { position: relative; display: block; }
.dn-vc-media .dn-thumb { aspect-ratio: 3 / 2; border-radius: 0; }
.dn-vc-play { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; line-height: 0; }
.dn-vc-play svg { width: 28px; height: 28px; }
.dn-vc-body { padding: 16px 16px 20px; text-align: center; }
.dn-vc-body .dn-title { font-size: 17px; line-height: 1.45; }
.dn-vc-body .dn-excerpt { font-size: 14.5px; color: #555; margin-top: 12px; }
.dn-vc-body .dn-time { margin-top: 12px; }
.dn-car-btn {
	position: absolute; top: 36%; z-index: 3; width: 44px; height: 46px; display: flex; align-items: center; justify-content: center;
	border: 0; background: rgba(20,20,20,.88); color: #fff; cursor: pointer; transition: opacity .2s;
}
.dn-car-prev { left: 0; } .dn-car-next { right: 0; }
.dn-car-btn[disabled] { opacity: 0; pointer-events: none; }
.dn-car-dots { display: flex; justify-content: center; gap: 10px; padding: 22px 0 0; }
.dn-car-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #b9b9b9; cursor: pointer; }
.dn-car-dots button.is-active { background: #222; }

/* ---------- বিনোদন: list | big | list ---------- */
.dn-e3-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 0; }
.dn-e3-left { grid-column: 1; grid-row: 1; padding-right: 16px; }
.dn-e3-center { grid-column: 2; grid-row: 1; padding: 0 16px; border-left: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf; }
.dn-e3-right { grid-column: 3; grid-row: 1; padding-left: 16px; }
.dn-card--e3 { grid-template-columns: minmax(0, 1fr) 140px; gap: 16px; border-top: 0; padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--dn-line); }
.dn-card--e3:last-child { border-bottom: 0; margin-bottom: 0; }
.dn-card--e3 .dn-thumb { aspect-ratio: 3 / 2; border-radius: 0; }
.dn-card--e3 .dn-title { font-size: 18.5px; line-height: 1.45; }
.dn-card--e3big .dn-thumb { aspect-ratio: 3 / 2; border-radius: 0; }
.dn-card--e3big .dn-title { font-size: 26px; line-height: 1.4; font-weight: 400; }
.dn-card--e3big .dn-excerpt { font-size: 15px; }

/* ---------- Category columns (4 per row) ---------- */
.dn-columns { padding-top: 26px; }
.dn-columns-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 30px; }
.dn-col-block + .dn-col-block::before { display: none; }
.dn-col-block .dn-sec-head { margin-bottom: 14px; }
.dn-col-block .dn-sec-title { font-size: 23px; }
.dn-card--colfirst { margin-bottom: 0 !important; }
.dn-card--colfirst .dn-thumb { aspect-ratio: 3 / 2; border-radius: 0; }
.dn-card--colfirst .dn-title { font-size: 18.5px !important; font-weight: 700; font-synthesis: weight; line-height: 1.45; }
.dn-col-block .dn-card--text { padding: 12px 0; border-top: 1px solid var(--dn-line); margin-top: 12px; }
.dn-col-block .dn-card--text + .dn-card--text { margin-top: 0; }
.dn-col-block .dn-card--text .dn-title { font-size: 17px; line-height: 1.5; }

/* ---------- মতামত: featured box + author list ---------- */
.dn-op2-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding: 8px 56px 0 70px; }
.dn-op2-feature { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: 22px 22px 18px; border: 1px solid #9a9a9a; }
.dn-op2-feature-link { display: block; color: inherit; }
.dn-op2-hl { margin: 0 0 0 -38px; font-size: 24px; line-height: 1.62; font-weight: 400; }
.dn-op2-hl > span { background: #0c1f4d; color: #fff; padding: 2px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dn-op2-sh { color: #ffc400; }
.dn-op2-feature-link:hover .dn-op2-hl > span { background: #173175; }
.dn-op2-ex { margin: 18px 0 0 16px; font-size: 16px; line-height: 1.65; color: #555; }
.dn-op2-by { margin: auto 0 0 16px; padding-top: 20px; font-size: 13px; color: #555; }
.dn-op2-bar { display: block; width: 30px; height: 3px; background: #ddd; margin-bottom: 14px; }
.dn-op2-by strong { color: #222; font-weight: 700; font-synthesis: weight; margin-right: 6px; }
.dn-op2-list { min-width: 0; }
.dn-op2-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 22px; align-items: center; padding: 12px 0 14px; border-bottom: 1px solid var(--dn-line); }
.dn-op2-item:last-child { border-bottom: 0; }
.dn-op2-avatar { line-height: 0; }
.dn-op2-av { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: #e6e6e6; }
.dn-op2-item .dn-title { font-size: 21px; line-height: 1.5; font-weight: 400; }
.dn-op2-author { display: inline-block; margin: 8px 0 0; padding-bottom: 3px; border-bottom: 2px solid #ddd; font-size: 14px; color: #333; }

/* ---------- আপনার জন্য ---------- */
.dn-sec-foryou .dn-title { font-size: 18px; }
.dn-sec-foryou .dn-thumb { aspect-ratio: 3 / 2; border-radius: 0; }
.dn-sec-foryou .dn-excerpt { font-size: 14.5px; }

/* ---------- ছবি: slider + side cards ---------- */
.dn-ph2-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.dn-ph2-slider .dn-gal-track { aspect-ratio: 16 / 10.4; }
.dn-ph2-slider .dn-gal-cap { padding: 60px 22px 20px; }
.dn-ph2-slider .dn-gal-title { font-size: 24px; }
.dn-ph2-progress { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 4; background: rgba(255,255,255,.18); }
.dn-ph2-progress span { display: block; height: 100%; width: 0; background: var(--dn-accent); }
.dn-ph2-progress.is-running span { animation: dnProgress var(--dn-dur, 6s) linear forwards; }
.dn-ph2-progress.is-paused span { animation-play-state: paused; }
@keyframes dnProgress { from { width: 0; } to { width: 100%; } }
.dn-ph2-count { position: absolute; top: 18px; left: 16px; z-index: 3; padding: 3px 12px; border-radius: 16px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; }
.dn-ph2-ctrl { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; }
.dn-ph2-ctrl button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dn-ph2-ctrl button:hover { background: rgba(0,0,0,.8); }
.dn-gal-pause .i-play { display: none; }
.dn-gal-pause[aria-pressed="true"] .i-play { display: inline; }
.dn-gal-pause[aria-pressed="true"] .i-pause { display: none; }
.dn-ph2-side { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dn-card--ph2 .dn-thumb { aspect-ratio: 1 / 1; border-radius: 0; }
.dn-card--ph2 .dn-title { font-size: 17px; }
.dn-force-cam .dn-thumb::after {
	top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%;
	background: var(--dn-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='13' rx='1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='12' cy='12.5' r='3' fill='%23fff'/%3E%3Cpath d='M8 6l1.5-2h5L16 6' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- Highlight band ---------- */
.dn-hl-sec { background: #fdf0f0; padding: 30px 0; margin: 40px 0 10px; }
.dn-hl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.dn-hl-card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #333; color: #fff; }
.dn-hl-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dn-hl-card:hover img { transform: scale(1.04); }
.dn-hl-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.25) 55%, rgba(0,0,0,.05)); }
.dn-hl-text { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.dn-hl-cat { display: block; font-size: 15px; color: #ffc400; margin-bottom: 2px; }
.dn-hl-title { display: block; font-family: var(--dn-font-head); font-size: 18px; line-height: 1.4; color: #fff; }
.dn-hl-card:hover { color: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.dn-lead3-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
	.dn-l3-right { grid-column: 1 / -1; grid-row: 2; padding: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; border-top: 1px solid #cfcfcf; margin-top: 16px; }
	.dn-l3-mid { border-right: 0; padding-right: 0; }
	.dn-vc-card { flex-basis: calc((100% - 2 * 22px) / 3.3); }
	.dn-columns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dn-op2-grid { padding: 8px 0 0; }
	.dn-op2-hl { margin-left: -16px; }
	.dn-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.dn-lead3 { padding-top: 0; }
	.dn-lead3-grid { grid-template-columns: 1fr; }
	.dn-l3-mid, .dn-l3-left, .dn-l3-right { grid-column: 1; padding: 0; border: 0; margin: 0; }
	.dn-l3-mid { grid-row: 1; }
	.dn-l3-left { grid-row: 2; }
	.dn-l3-right { grid-row: 3; display: block; }
	.dn-card--lead3 { grid-template-columns: 1fr; gap: 10px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--dn-line); }
	.dn-card--lead3 .dn-card-body { padding: 0; }
	.dn-card--lead3 .dn-thumb { aspect-ratio: 16 / 10; }
	.dn-lead3-cap { display: none; }
	.dn-card--lead3 .dn-title { font-size: 25px; }
	.dn-card--lead3 .dn-excerpt { font-size: 16px; }
	.dn-card--l3side { grid-template-columns: minmax(0, 1fr) 132px; }
	.dn-card--l3side .dn-title { font-size: 18.5px; }
	.dn-card--l3side .dn-excerpt { grid-column: 1; grid-row: 2; font-size: 15px; }
	.dn-card--l3side .dn-card-media { grid-row: 1 / span 2; }

	/* middle two → 2 image cards */
	.dn-l3-two { gap: 0 30px; padding-top: 0; }
	.dn-card--l3two { display: block; padding-bottom: 14px; }
	.dn-card--l3two .dn-card-body { display: block; padding-top: 10px; }
	.dn-card--l3two .dn-thumb { aspect-ratio: 3 / 2; }
	.dn-card--l3two .dn-excerpt { display: none; }
	.dn-card--l3two .dn-title { font-size: 17.5px; }
	.dn-l3-two .dn-card--l3two + .dn-card--l3two::before { left: -15px; bottom: 14px; }
	.dn-l3-cards { grid-template-columns: 1fr 1fr; gap: 16px 30px; }
	.dn-l3-cards .dn-card:nth-child(3) { display: none; }
	.dn-l3-texts { grid-template-columns: 1fr; }
	.dn-l3-texts .dn-card + .dn-card::before { display: none; }
	.dn-l3-texts .dn-card--text { padding: 14px 0; border-bottom: 1px solid var(--dn-line); }

	.dn-topics { flex-wrap: wrap; row-gap: 14px; }
	.dn-topics-label { order: 1; }
	.dn-topics-nav { order: 2; margin-left: auto; }
	.dn-topics-track { order: 3; flex-basis: 100%; }

	.dn-vc-card { flex-basis: 78%; }
	.dn-car-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(60,60,60,.7); top: 34%; }
	.dn-car-prev { left: 4px; } .dn-car-next { right: 4px; }

	.dn-e3-grid { grid-template-columns: 1fr; }
	.dn-e3-left, .dn-e3-center, .dn-e3-right { grid-column: 1; padding: 0; border: 0; }
	.dn-e3-center { grid-row: 1; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--dn-line); }
	.dn-e3-left { grid-row: 2; }
	.dn-e3-right { grid-row: 3; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dn-line); }
	.dn-card--e3big .dn-title { font-size: 23px; }
	.dn-card--e3 { grid-template-columns: minmax(0, 1fr) 124px; }

	.dn-columns-grid { grid-template-columns: 1fr; }

	.dn-op2-grid { grid-template-columns: 1fr; gap: 20px; }
	.dn-op2-feature { min-height: 0; margin-left: 16px; }
	.dn-op2-hl { font-size: 21px; margin-left: -30px; }
	.dn-op2-item { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
	.dn-op2-av { width: 62px; height: 62px; }
	.dn-op2-item .dn-title { font-size: 18px; }

	.dn-ph2-grid { grid-template-columns: 1fr; }
	.dn-ph2-slider { margin: 0 -14px; }
	.dn-ph2-slider .dn-gal-stage { margin: 0; }
	.dn-ph2-slider .dn-gal-track { aspect-ratio: 4 / 3; }
	.dn-ph2-slider .dn-gal-title { font-size: 19px; }
	.dn-ph2-side { gap: 16px; }

	.dn-hl-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
	.dn-hl-card { scroll-snap-align: start; }
}

.dn-vc-media .dn-badge-play, .dn-vc-media .dn-badge-cam { display: none; }

.dn-sec-op2 { background: none; margin-top: 0; padding-bottom: 8px; }
.dn-sec-op2 .dn-sec-head { border-top-color: #9b9b9b; }

/* ---------- Phones: text-only items get a small thumbnail + balanced spacing ---------- */
.dn-card-mthumb { display: none; }
@media (max-width: 900px) {
	.dn-card--text.has-mthumb { display: grid; grid-template-columns: minmax(0, 1fr) 108px; grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; }
	.dn-card--text.has-mthumb > .dn-card-mthumb { display: block; grid-column: 2; grid-row: 1 / span 3; overflow: hidden; border-radius: 2px; }
	.dn-card--text.has-mthumb > .dn-card-mthumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
	.dn-card--text.has-mthumb > :not(.dn-card-mthumb) { grid-column: 1; }
	.dn-card--text.has-mthumb .dn-title { font-size: 17px; line-height: 1.5; }
	.dn-card--text.has-mthumb .dn-excerpt { display: none; }

	/* Lead: left headlines + right column read as one tidy list */
	.dn-l3-left > .dn-card--text { padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--dn-line); }
	.dn-l3-right { padding-top: 0; }
	.dn-l3-right > .dn-card:first-child { padding-top: 16px; }
	.dn-l3-texts .dn-card--text.has-mthumb { padding: 14px 0; }

	/* Column blocks (শিক্ষা, চাকরি, প্রযুক্তি…) */
	.dn-col-block { padding-bottom: 8px; }
	.dn-card--colfirst .dn-card-body { padding-top: 12px; }
	.dn-card--colfirst .dn-title { font-size: 20px; line-height: 1.45; font-weight: 700; }
	.dn-col-block .dn-card--text { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--dn-line); }
	.dn-col-block .dn-card--text + .dn-card--text { margin-top: 14px; }
	.dn-col-block .dn-card--text .dn-title { font-size: 17px; }
	.dn-columns-grid { gap: 30px; }
}
@media (max-width: 900px) {
	/* Numbered tabs (পঠিত / আলোচিত / সুখবর): number beside the headline */
	.dn-tl-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 0; }
	.dn-tl-num { margin: 0; font-size: 32px; text-align: center; }
}