/* ESPFlight v54 · Home hero composition.
   Global width and overflow rules are maintained only in site-responsive-v53-20261020.css.
   Removed duplicate v52 container and shadow overrides. */

/* Home hero: the copy must start beside the image rather than be vertically
   centered below it. Do not crop or transform the genuine quadcopter photo. */
@media (min-width:1021px){
  body.homePage .hero {
    min-height:0 !important;
    padding-block:clamp(22px,2.5vw,36px) clamp(32px,3vw,48px) !important;
  }
  body.homePage .heroGrid {
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    align-items:start !important;
    gap:clamp(30px,3vw,52px) !important;
    max-width:none;
  }
  body.homePage .heroCopy {
    align-self:start;
    padding:clamp(8px,1.2vw,18px) 0 0 !important;
  }
  html[lang="en"] body.homePage .hero h1.heroSlogan {
    font-size:clamp(43px,3.5vw,56px);
    line-height:1.10;
    margin:14px 0 14px;
  }
  html[lang="fa"] body.homePage .hero h1.heroSlogan {
    font-size:clamp(39px,3.3vw,51px);
    line-height:1.36;
    margin:12px 0 13px;
  }
  body.homePage .heroLead {font-size:clamp(15.5px,1.1vw,17px);line-height:1.65;max-width:60ch;}
  body.homePage .heroButtons {margin-top:18px;gap:12px;align-items:center;}
  body.homePage .heroButtons .button {min-height:48px;}
  body.homePage .hero .hardwarePhotoVisual {
    height:clamp(470px,39vw,550px);
    min-height:0;
  }
  body.homePage .trustStrip {margin-top:clamp(22px,2.5vw,35px);}
}
/* The old 780px desktop/touch max was another inconsistent page-width cap. */
@media (max-width:1020px){
  body.homePage .heroGrid {max-width:none;grid-template-columns:minmax(0,1fr);}
  body.homePage .heroCopy {padding:0;}
  body.homePage .hero {padding-top:clamp(24px,4.3vw,40px);}
  body.homePage .hero .hardwarePhotoVisual {max-width:780px;width:100%;margin-inline:auto;}
  body.homePage .heroButtons {margin-top:22px;}
}
/* Make sure that both CTAs fit inside their own content column, and that
   long Persian labels do not force horizontal scrolling. */
body.homePage .heroButtons {display:flex;flex-wrap:wrap;min-width:0;}
body.homePage .heroButtons .button {box-sizing:border-box;max-width:100%;}
@media (max-width:700px){
  body.homePage .heroButtons {align-items:stretch;}
  body.homePage .heroButtons .button{width:100%;white-space:normal;}
}