/*
Theme Name: 64hubBangla
Description: 64hubবাংলা custom theme with hero domain banner, Facebook CTA, right sidebar (login + date/time), mission block, extras section (map + farmer + artisan), and slider gallery.
Version: 1.3.0
Requires PHP: 8.0
Text Domain: 64hubbangla
*/

* { box-sizing: border-box; } html { scroll-behavior: smooth; }
body { margin:0; font-family: 'Noto Serif Bengali','Noto Sans Bengali',Arial,sans-serif; color:#111; background:linear-gradient; line-height:1.7; }
a { color:#0c4a6e; text-decoration:none; } a:hover { text-decoration:underline; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.site-header { position:sticky; top:0; z-index:50; background:#ffffffeb; backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eee; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.main-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap; }

.hero .hero-media { position:relative; min-height: 420px; background-size: cover; background-position:center; }
.hero .overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55)); }
.hero .hero-content { position:relative;  min-height: 500px; inset:0; display:flex; align-items:center; }
.hero .hero-box { background: rgba(0,0,0,.55); padding: 24px; border-radius: 14px; margin-left: 7%; max-width: 700px; color:#fff; }
.hero .domain-banner { position:absolute; top:18px; left:50%; transform:translateX(-50%); background:#ffffffd9; color:#0f172a; border-radius:14px; padding:10px 18px; font-weight:800; font-size: 32px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.hero .social-cta { position:absolute; top:76px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:#0c4a6e; color:#fff; padding:8px 14px; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.hero .social-cta svg { width:20px; height:20px; fill:#fff; }

.content { padding: 26px 0; }
.layout { display:grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.sidebar { position:sticky; top:80px; height:max-content; border:1px solid #eee; border-radius:12px; padding:14px; background:#fafafa; }
.side-block { margin-bottom:16px; }
.side-block h3 { margin:0 0 8px; font-size:16px; }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card { border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
.card img { width:200%; height:180px; object-fit:cover; }
.card .card-body { padding:14px; }
.card h3 { margin:0 0 8px; font-size: 18px; }
.meta { color:#555; font-size: 13px; }

.mission { border:1px solid #eee; background:#fcfcfc; padding:18px; border-radius:12px; }
.mission h2 { margin-top:0; }

.extras { margin-top:40px; }
.extras .extras-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.extras figure { margin:0; border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.extras img { width:100%; height:500px; object-fit:cover; display:block; }
.extras figcaption { padding:10px 12px; font-weight:600; }

/* Slider */
.hb-slider { position:relative; overflow:hidden; border-radius:14px; border:1px solid #eee; height:420px; }
@media (max-width: 640px) { .hb-slider { height: 300px; } }
.hb-slider .hb-slide { position:absolute; inset:0; width:100%; height:100%; transform:translateX(100%); transition: transform .6s ease; }
.hb-slider .hb-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.hb-slider .hb-prev, .hb-slider .hb-next {
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:50px; border-radius:6%;
  border:none; background:rgba(0,0,0,.5); color:#fff; font-size:26px; cursor:pointer;
}
.hb-slider .hb-prev { left:12px; } .hb-slider .hb-next { right:12px; }
.hb-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.hb-dots button { width:10px; height:10px; border-radius:50%; border:none; background:#d1d5db; cursor:pointer; }
.hb-dots button.active { background:#111827; }

.site-footer { margin-top: 20px; padding: 28px 0; border-top:1px solid #eee; background:#fafafa; color:#444; }
.footer-cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(800px, 1fr)); gap: 10px; }