/* ===============================================================
   HERO: SPLIT  ·  sections/hero-split.css
   ---------------------------------------------------------------
   Niyom: header + hero = thik EK screen. Kono dead space na,
   kono extra scrollbar na.

   hero er ucchota = --vh (ashol screen) - --headH (header)
   Duitoi main.css er token. Ekhane px hardcode korben na.

   Layout aspect ratio dekhe bodlay, sudhu width dekhe na.
   Portrait tablet stacked e thake, karon 460px chowra column
   1294px lomba hole niche ekta boro faka jayga poRe.
   =============================================================== */

.hs{
  --heroTop:clamp(22px,4.6vh,46px);
  --heroPad:20px;

  min-height:calc(var(--vh) - var(--headH));
  display:flex;flex-direction:column;
  padding:var(--heroTop) 0 var(--heroPad);
  overflow:hidden;
  /* background ekhane nai. Section er Background field (.sec.dark etc)
     ta e thik kore, tai hero er rong o editor theke bodlano jay. */
}
/* Announcement bar thakle oi ucchota tuku o bad jabe. --annH main.js set kore. */
body.has-ann .hs{min-height:calc(var(--vh) - var(--headH) - var(--annH,0px))}

@media (min-width:768px){  .hs{--heroPad:28px} }
@media (min-width:1280px){ .hs{--heroTop:32px;--heroPad:32px} }
@media (min-width:768px) and (max-aspect-ratio:1/1){ .hs{--heroTop:clamp(34px,5.6vh,88px)} }
@media (max-height:700px){ .hs{--heroTop:14px;--heroPad:14px} }

.hs > .container{flex:1;display:flex;flex-direction:column;min-height:0}

/* --- Grid --- */
.hs__grid{
  flex:1;min-height:0;
  display:grid;gap:clamp(14px,2.4vh,26px);
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr);
}
/* Duita column SUDHU tokhon, jokhon screen ta lomba r cheye chowra beshi */
@media (min-width:768px) and (min-aspect-ratio:1/1){
  .hs__grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:40px;align-items:center}
}
@media (min-width:1280px) and (min-aspect-ratio:1/1){
  .hs__grid{grid-template-columns:1.06fr .94fr;gap:56px}
}
@media (min-width:768px) and (max-aspect-ratio:1/1){
  .hs__grid{gap:clamp(22px,3.4vh,48px)}
}
/* Ei duita line chara layout bhengey jay: lomba shobdo track ke thele boro kore dey */
.hs__grid > *{min-width:0}
.hs__copy{display:flex;flex-direction:column;justify-content:center;min-height:0}

/* Image bam pashe */
@media (min-width:768px) and (min-aspect-ratio:1/1){
  .hs--flip .hs__media{order:-1}
}

/* --- Breadcrumb --- */
.hs__crumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13px;color:var(--neutral-300);margin-bottom:14px;
}
.hs__crumb .sep{opacity:.55}

/* --- Type. Sob viewport HEIGHT dekhe scale kore, width na,
       karon je somossha ta solve hocche seta ek screen e ata. --- */
.hs__title{
  font-family:var(--font-heading);font-weight:800;color:var(--white);
  letter-spacing:-.035em;line-height:1.04;margin:0;
  font-size:clamp(32px,6.2vh,46px);
  overflow-wrap:break-word;
}
@media (min-width:768px){  .hs__title{font-size:clamp(40px,6.2vh,58px)} }
@media (min-width:1024px){ .hs__title{font-size:clamp(46px,6.8vh,76px)} }
@media (min-width:1280px){ .hs__title{font-size:clamp(52px,8.2vh,84px)} }
@media (min-width:1440px){ .hs__title{font-size:clamp(54px,7.6vh,88px)} }
@media (min-width:1920px){ .hs__title{font-size:clamp(60px,8.2vh,100px)} }

/* Teal er upore orange lekha 2.91:1, fail kore. Tai hero er emph Gold. */
.hs .emph{color:var(--gold-400)}

.hs__lead{
  color:var(--neutral-100);   /* Sand, sada na. Heading ta dominant thake. */
  font-size:clamp(14px,2vh,17px);line-height:1.5;
  margin:clamp(12px,2.6vh,34px) 0 0;max-width:46ch;
  overflow-wrap:break-word;
}
@media (min-width:1280px){ .hs__lead{font-size:clamp(16px,2.4vh,21px);max-width:44ch} }
@media (min-width:1920px){ .hs__lead{font-size:clamp(18px,2.7vh,25px)} }

.hs__proof{
  font-family:var(--font-heading);font-weight:800;color:var(--gold-400);
  font-size:clamp(15px,2.2vh,20px);letter-spacing:-.01em;
  margin:clamp(10px,1.8vh,22px) 0 0;
}

/* --- Buttons --- */
.hs__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:clamp(18px,4vh,52px)}
.hs__cta .btn{
  min-height:clamp(46px,6.4vh,66px);
  padding:0 clamp(20px,2.8vh,36px);
  border-radius:var(--radius-sm);
  font-size:clamp(14px,2.1vh,19px);
}
/* Choto phone e duita button soman chowra, kono ta wrap kore na */
@media (max-width:520px){ .hs__cta .btn{flex:1 1 0;min-width:0;padding:0 12px} }

/* --- Trust points --- */
.hs__points{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  margin-top:clamp(14px,3.2vh,42px);
  font-size:clamp(12px,1.9vh,16px);color:var(--neutral-300);
}
.hs__points li{display:inline-flex;align-items:center;gap:8px}
.hs__points .tick{color:var(--gold-400);margin-top:0}
@media (max-height:700px){ .hs__points{display:none} }

/* --- Media panel --- */
.hs__media{
  position:relative;
  width:100%;height:100%;min-height:0;align-self:center;
  border-radius:clamp(12px,1.6vh,20px);
  overflow:hidden;
  background:var(--teal-600);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
}
.hs__media img{width:100%;height:100%;object-fit:cover;display:block}
.hs__ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--neutral-300);font-size:clamp(11.5px,1.5vh,13.5px);text-align:center;padding:16px;
}

/* Landscape: copy er pashe ekta 4:3 panel, vertically centre, row er cheye kokhono lomba na */
@media (min-width:768px) and (min-aspect-ratio:1/1){
  .hs__media{height:auto;aspect-ratio:4/3;max-height:100%}
}
/* Portrait tablet: copy er niche ekta chowra panel */
@media (min-width:768px) and (max-aspect-ratio:1/1){
  .hs__media{height:100%;max-height:min(48vh,calc((100vw - 80px) * .58))}
}
/* Phone: copy ja chere jay ta niye ney, kintu 4:5 card er cheye lomba na */
@media (max-width:767px){
  .hs__media{max-height:calc((100vw - 40px) * 1.15)}
}

/* --- Floating card on the image --- */
.hs__badge{
  position:absolute;left:16px;bottom:16px;
  background:var(--white);border-radius:var(--radius-md);
  padding:12px 16px;box-shadow:var(--shadow-drop);
  display:grid;gap:2px;max-width:60%;
}
.hs__badge-n{font-family:var(--font-heading);font-weight:800;font-size:26px;line-height:1;color:var(--teal-700)}
.hs__badge-l{font-size:13px;font-weight:500;color:var(--neutral-500);line-height:1.35}
@media (min-width:768px){ .hs__badge{left:24px;bottom:24px;padding:14px 20px} .hs__badge-n{font-size:32px} }
@media (max-height:700px){ .hs__badge{display:none} }

/* --- Portrait tablet type. Base rule er PORE, tai ei value gulo jite jay. --- */
@media (min-width:768px) and (max-aspect-ratio:1/1){
  .hs__title{font-size:clamp(42px,5.2vh,70px);max-width:15ch}
  .hs__lead{font-size:clamp(16px,1.7vh,22px);max-width:50ch;margin-top:clamp(16px,2vh,30px)}
  .hs__cta{margin-top:clamp(22px,2.8vh,42px)}
  .hs__points{margin-top:clamp(16px,2.2vh,34px);font-size:clamp(13px,1.4vh,17px)}
}


/* ===============================================================
   Hero jodi light surface e boshano hoy (Background field theke)
   =============================================================== */
.hs:not(.dark):not(.deep) .hs__title{color:var(--text-heading)}
.hs:not(.dark):not(.deep) .hs__lead{color:var(--text-body)}
.hs:not(.dark):not(.deep) .hs__crumb{color:var(--text-muted)}
.hs:not(.dark):not(.deep) .hs__proof{color:var(--gold-700)}
.hs:not(.dark):not(.deep) .emph{color:var(--text-emphasis)}
.hs:not(.dark):not(.deep) .hs__points{color:var(--text-muted)}
.hs:not(.dark):not(.deep) .hs__points .tick{color:var(--teal-700)}
.hs:not(.dark):not(.deep) .hs__media{background:var(--teal-tint);border-color:var(--border-subtle)}
.hs:not(.dark):not(.deep) .hs__ph{color:var(--text-muted)}