/* ==========================================================================
   Pages: search, topic/tag, area, latest, photo & video hubs, archive,
   converter, contact — reference layouts
   ========================================================================== */

/* ---------- Shared list ("আরও - X") ---------- */
.dn-cat-more--plain { margin-top: 10px; }
.dn-cat-list { max-width: 660px; margin: 0 auto; }
.dn-card--list .dn-title { font-size: 19px; line-height: 1.5; }
.dn-card--list .dn-cat-label { display: none; }
.dn-card--list .dn-thumb { aspect-ratio: 3 / 2; }
.dn-more-btn { padding: 7px 38px; border-radius: 22px; background: #1a73e8; color: #fff; font-size: 16px; }

/* ---------- Topic / tag / author / date ---------- */
.dn-topic-page { padding-top: 26px; }
.dn-topic-head { max-width: 900px; margin: 0 auto; padding-bottom: 18px; border-bottom: 1px solid var(--dn-line); margin-bottom: 8px; }
.dn-topic-head .dn-cat-title { margin: 0; }
.dn-topic-page .dn-cat-list { max-width: 620px; }

/* ---------- Area (বিভাগ / জেলা / উপজেলা) ---------- */
.dn-area-arch .dn-topic-head { max-width: none; }
.dn-area-level { display: flex; align-items: center; gap: 12px; margin: 0 0 4px !important; font-size: 21px; color: #222; }
.dn-area-pick { display: none; padding: 4px 12px; border: 1px solid #c9d6ea; border-radius: 3px; background: #fff; color: #1a6fc7; font: inherit; font-size: 14px; cursor: pointer; }
.dn-area-pick-box { max-width: 420px; margin: 16px 0 6px; }
.dn-area-arch .dn-cat-subs { margin-top: 12px; }

/* ---------- Search ---------- */
.dn-srch { padding-top: 20px; }
.dn-srch-form { max-width: 885px; }
.dn-srch-title { font-size: 36px; line-height: 1.3; font-weight: 700; font-synthesis: weight; margin: 0 0 16px; }
.dn-srch-box { display: flex; align-items: center; height: 58px; padding: 0 8px 0 18px; border: 1px solid #9a9a9a; border-radius: 3px; background: #fff; }
.dn-srch-box input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 22px; color: #222; background: transparent; }
.dn-srch-box input::placeholder { color: #777; }
.dn-srch-box button { width: 48px; height: 42px; border: 0; border-radius: 4px; background: #1a73e8; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dn-srch-box button:hover { background: #0f5fcc; }
.dn-srch-ftoggle { display: none; }
.dn-srch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; margin-top: 22px; }
.dn-sf { position: relative; display: flex; align-items: center; height: 56px; background: #f4f4f4; border-bottom: 1px solid #555; color: #555; }
.dn-sf input, .dn-sf select, .dn-sf-btn {
	width: 100%; height: 100%; padding: 0 40px 0 14px; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: #333; outline: 0; -webkit-appearance: none; appearance: none; text-align: left; cursor: pointer;
}
.dn-sf input::placeholder { color: #666; }
.dn-sf > .dn-icon, .dn-sf-btn svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.dn-sf-select::after { content: ""; position: absolute; right: 16px; top: 50%; margin-top: -2px; border: 5px solid transparent; border-top: 6px solid #555; pointer-events: none; }
.dn-sf:focus-within { border-bottom-color: #1a73e8; background: #eef4fd; }
.dn-sf-date { position: relative; }
.dn-sf-btn span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dn-sf-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 300px; padding: 16px; background: #fff; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: grid; gap: 12px; }
.dn-sf-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-sf-presets button { padding: 4px 10px; border: 1px solid #d0d0d0; border-radius: 14px; background: #fff; font: inherit; font-size: 13.5px; cursor: pointer; }
.dn-sf-presets button:hover { border-color: #1a73e8; color: #1a73e8; }
.dn-sf-pop label { display: grid; gap: 4px; font-size: 13.5px; color: #555; }
.dn-sf-pop input[type=date] { height: 40px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.dn-sf-pop-actions { display: flex; justify-content: space-between; }
.dn-sf-clear { border: 0; background: none; color: #777; font: inherit; cursor: pointer; }
.dn-sf-apply { padding: 6px 16px; border: 0; border-radius: 4px; background: #1a73e8; color: #fff; font: inherit; cursor: pointer; }
.dn-srch-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding-bottom: 16px; border-bottom: 2px solid #9a9a9a; }
.dn-srch-count { margin: 0; font-size: 15.5px; }
.dn-srch-count strong, .dn-srch-sort strong { font-weight: 700; font-synthesis: weight; }
.dn-srch-sort { display: flex; align-items: center; gap: 12px; }
.dn-srch-sort .dn-sf-select { position: relative; display: block; width: 165px; }
.dn-srch-sort select { width: 100%; height: 32px; padding: 0 30px 0 10px; border: 1px solid #ccc; border-radius: 3px; background: #fff; font: inherit; font-size: 14.5px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.dn-srch .dn-cat-more { max-width: 885px; margin-top: 0; }
.dn-srch .dn-cat-list { max-width: 670px; margin: 0 0 0 108px; }
.dn-srch-empty { max-width: 885px; padding: 40px 0; color: #666; }

/* ---------- Tabs (reference sidebar style) ---------- */
.dn-tabs--ref { border: 0; border-top: 3px solid #9a9a9a; border-radius: 0; }
.dn-tabs--ref .dn-tabs-nav { display: flex; gap: 30px; padding: 12px 16px 0; border-bottom: 1px solid #cfcfcf; }
.dn-tabs--ref .dn-tabs-nav button { flex: 0 0 auto; padding: 0 0 12px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; font-family: var(--dn-font-body); font-size: 19px; font-weight: 400; color: #333; }
.dn-tabs--ref .dn-tabs-nav button.is-active { color: #111; border-bottom-color: var(--dn-accent); background: none; }
.dn-tabs--ref .dn-tabs-panel { padding: 0; max-height: none; }
.dn-tabs--ref .dn-tabs-panel li { gap: 18px; align-items: flex-start; padding: 16px 0; }
.dn-tabs--ref .dn-num { font-size: 30px; color: #a3a3a3; min-width: 18px; }
.dn-tabs--ref .dn-title { font-size: 17px; line-height: 1.5; font-weight: 400; }

/* ---------- নির্বাচিত carousel ---------- */
.dn-sel-sec { margin-top: 40px; padding-top: 0; }
.dn-sel-title { font-size: 20px; font-weight: 400; margin: 0 0 16px; padding-top: 12px; border-top: 3px solid #00a3e0; }

/* ---------- Photo / video hubs ---------- */
.dn-hub .dn-cat-head { padding-top: 14px; }
.dn-mbadge { position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: #e5202a no-repeat center; z-index: 2; }
.dn-mbadge--cam { background-image: 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"); background-size: 16px; }
.dn-mbadge--play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E"); background-size: 18px; }
.dn-mbadge--lg { width: 40px; height: 40px; left: 18px; top: 18px; background-size: 22px; }
.dn-mcard { position: relative; min-width: 0; }
.dn-mcard-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #e8e8e8; }
.dn-mcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dn-mcard:hover .dn-mcard-media img { transform: scale(1.04); }
.dn-mcard-body { padding-top: 10px; }
.dn-mcard .dn-title { font-size: 16.5px; line-height: 1.45; }
.dn-mcard--overlay .dn-mcard-media { aspect-ratio: auto; height: 100%; }
.dn-mcard--overlay .dn-mcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2) 50%, transparent 75%); }
.dn-mcard--overlay .dn-mcard-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; z-index: 2; }
.dn-mcard--overlay .dn-title a, .dn-mcard--overlay .dn-time { color: #fff; }
.dn-mcard--cream { flex: 0 0 calc((100% - 4 * 20px) / 4.6); scroll-snap-align: start; background: #fdf1d9; }
.dn-mcard--cream .dn-mcard-media { aspect-ratio: 3 / 2; }
.dn-mcard--cream .dn-mcard-body { padding: 14px; text-align: center; }
.dn-hub-sec--0 .dn-sec-head { border-top-color: #f2b705; }
.dn-hub-sec .dn-carousel-track { gap: 20px; }

.dn-phub-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--dn-line); }
.dn-hub-slider .dn-gal-stage { overflow: visible; background: none; border-top: 3px solid var(--dn-accent); }
.dn-hub-slider .dn-gal-track { aspect-ratio: auto; height: 0; padding-bottom: calc(66% + 70px); }
.dn-hub-slider .dn-gal-slide > a { display: block; position: relative; height: calc(100% - 70px); background: #111; }
.dn-hub-capbar { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 12px; background: rgba(0,0,0,.6); color: #eee; font-size: 12.5px; }
.dn-hub-title { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; padding-top: 10px; background: #fff; }
.dn-hub-title a { display: block; font-family: var(--dn-font-head); font-size: 20px; line-height: 1.4; color: #111; }
.dn-hub-title .dn-time { margin-top: 2px; }
.dn-hub-slider .dn-ph2-progress { top: -3px; }
.dn-phub-row { margin-top: 22px; }
.dn-phub-row .dn-mcard-media { aspect-ratio: 1 / 1; }

.dn-mosaic { display: grid; grid-template-columns: 1fr .5fr .5fr; grid-template-rows: 230px 230px; gap: 16px; }
.dn-mosaic-0 { grid-row: span 2; }
.dn-mosaic-3 { grid-column: 2 / span 2; }
.dn-mosaic .dn-title { font-size: 17px; }
.dn-mosaic-0 .dn-title { font-size: 24px; }
.dn-mosaic .dn-mbadge { width: 30px; height: 30px; }

.dn-mslider .dn-gal-track { aspect-ratio: 16 / 6; }
.dn-mslider .dn-gal-cap { padding: 80px 44px 26px; }
.dn-mslider .dn-gal-title { font-size: 26px; }
.dn-mslider .dn-gal-excerpt { display: block; max-width: 760px; margin-top: 8px; font-size: 15px; }
.dn-gal-time { display: block; margin-top: 8px; font-size: 13px; color: #ccc; }
.dn-mslider .dn-gal-nav { width: 36px; height: 36px; background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.dn-gal-dots { display: flex; justify-content: center; gap: 8px; padding-top: 14px; }
.dn-gal-dots .dn-gal-thumb { width: 10px; height: 10px; border-radius: 50%; padding: 0; aspect-ratio: auto; background: #bbb; opacity: 1; }
.dn-gal-dots .dn-gal-thumb.is-active { background: #222; box-shadow: none; }
.dn-gal-dots .dn-gal-thumb.is-active::after { display: none; }

/* Video hub top (dark band) */
.dn-vhub-top { background: #2b2b2b; padding: 14px 0 44px; margin-bottom: 30px; }
.dn-vhub-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.8fr); gap: 22px; align-items: start; }
.dn-vhub-top .dn-mcard { background: #1f1f1f; }
.dn-vhub-top .dn-mcard-media { aspect-ratio: 16 / 9; }
.dn-vhub-top .dn-mcard-body { padding: 12px 14px 16px; }
.dn-vhub-top .dn-title a { color: #fff; }
.dn-vhub-top .dn-title a:hover .dn-title-text { color: #ffd5d5; }
.dn-vhub-top .dn-time { color: #aaa; }
.dn-vhub-top .dn-shoulder { color: #ffb54d; }
.dn-vhub-main { min-height: 100%; }
.dn-vhub-main .dn-title { font-size: 24px; }
.dn-vhub-side { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dn-vhub-side .dn-title { font-size: 15.5px; }
.dn-hub--video .dn-mcard-media { aspect-ratio: 16 / 10; }
.dn-hub--video .dn-mcard--cream { background: #eef3fb; }

/* ---------- আর্কাইভ ---------- */
.dn-arc-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.dn-arc-form .dn-sf { width: 220px; height: 46px; }
.dn-arc-date { margin: 12px 0 0 !important; color: #555; }

/* ---------- কনভার্টার ---------- */
.dn-conv-page { padding-top: 26px; }
.dn-conv-page .dn-topic-head { max-width: none; }
.dn-conv-tabs .dn-tl-nav { padding: 12px 0 0; margin-bottom: 20px; }
.dn-conv-help { color: #555; }
.dn-conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dn-conv-grid label { display: grid; gap: 8px; font-weight: 600; font-synthesis: weight; }
.dn-conv-grid textarea, .dn-conv-grid input { width: 100%; padding: 12px 14px; border: 1px solid #bbb; border-radius: 4px; font: inherit; font-size: 17px; font-weight: 400; line-height: 1.6; }
.dn-conv-grid textarea[readonly] { background: #f7f9fc; }
.dn-conv-results { padding: 16px 18px; background: #f7f9fc; border-radius: 4px; }
.dn-conv-results p { margin: 0 0 10px; font-size: 17px; }
.dn-conv-actions { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.dn-conv-clear { border: 0; background: none; color: #777; font: inherit; cursor: pointer; }
.dn-conv-content { margin-top: 40px; }

/* ---------- যোগাযোগ ---------- */
.dn-contact-page { padding-top: 26px; }
.dn-contact-page .dn-topic-head { max-width: none; }
.dn-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 20px; }
.dn-contact-list { list-style: none; padding: 0; }
.dn-contact-list li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dn-line); }
.dn-contact-form { display: grid; gap: 14px; padding: 24px; background: #f7f7f7; border-radius: 6px; }
.dn-contact-form h2 { font-size: 22px; font-weight: 400; margin: 0; }
.dn-contact-form label { display: grid; gap: 6px; font-size: 15px; }
.dn-contact-form input, .dn-contact-form textarea { padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.dn-contact-form button { justify-self: start; }
.dn-form-ok { color: #067647; } .dn-form-err { color: #c20d14; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.dn-srch-title { font-size: 26px; }
	.dn-srch-box { height: 52px; }
	.dn-srch-box input { font-size: 18px; }
	.dn-srch-filters { margin-top: 18px; padding: 0 14px 16px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
	.dn-srch-ftoggle { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 0 12px; border: 0; border-bottom: 1px solid #ddd; background: none; font: inherit; font-size: 16px; font-weight: 700; font-synthesis: weight; color: #222; cursor: pointer; }
	.dn-srch-filters:not(.is-open) .dn-srch-grid { display: none; }
	.dn-srch-filters:not(.is-open) .dn-srch-ftoggle { border-bottom: 0; padding-bottom: 14px; }
	.dn-srch-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
	.dn-sf-pop { width: 100%; }
	.dn-srch-bar { align-items: flex-end; }
	.dn-srch-count { display: grid; }
	.dn-srch-sort { display: grid; gap: 6px; }
	.dn-srch .dn-cat-list { margin: 0; }

	.dn-area-pick { display: inline-block; }
	.dn-area-level { font-size: 16px; }

	.dn-phub-top { grid-template-columns: 1fr; }
	.dn-phub-row.dn-grid-4 { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
	.dn-phub-row .dn-mcard .dn-title { font-size: 15.5px; }
	.dn-hub-slider { margin: 0 -14px; }
	.dn-hub-title { padding: 10px 14px 0; }
	.dn-mcard--cream { flex-basis: 62%; }
	.dn-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 170px 170px; }
	.dn-mosaic-0 { grid-column: 1 / -1; grid-row: auto; }
	.dn-mosaic-3 { grid-column: 1 / -1; }
	.dn-mslider { margin: 0 -14px; }
	.dn-mslider .dn-gal-track { aspect-ratio: 4 / 3; }
	.dn-mslider .dn-gal-cap { padding: 50px 16px 16px; }
	.dn-mslider .dn-gal-title { font-size: 20px; }
	.dn-vhub-grid { grid-template-columns: 1fr; }
	.dn-vhub-top { padding-top: 0; }
	.dn-vhub-main { margin: 0 -14px; }
	.dn-vhub-side { gap: 14px; }

	.dn-conv-grid, .dn-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.dn-card--list .dn-title { font-size: 17px; }
	.dn-arc-form .dn-sf { width: 100%; }
}
.dn-mosaic .dn-mcard { height: 100%; }
.dn-mosaic .dn-mcard-media, .dn-hub--video .dn-mosaic .dn-mcard-media { aspect-ratio: auto; height: 100%; }