/* ==========================================================================
   English / left-to-right overrides.
   Loaded only by /en/index.html, after every other stylesheet.
   The base design is written for RTL (Persian) with many explicit right/left
   rules, so every direction-specific rule is mirrored here under html[dir=ltr].
   ========================================================================== */

/* ---- typography ---- */
html[dir="ltr"] body,
html[dir="ltr"] button,html[dir="ltr"] input,html[dir="ltr"] select,html[dir="ltr"] textarea,
html[dir="ltr"] .marker .lbl,html[dir="ltr"] .panel .pnum,html[dir="ltr"] .stat .n{
  font-family:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
}
html[dir="ltr"] .h-lead,html[dir="ltr"] .h-display,html[dir="ltr"] .cons-h,
html[dir="ltr"] .about-lead,html[dir="ltr"] .quote .qmark,html[dir="ltr"] .stat .n{
  font-family:"Newsreader","Georgia","Times New Roman",serif;
}
html[dir="ltr"] .h-lead,html[dir="ltr"] .h-display{font-weight:500;letter-spacing:-.015em}
html[dir="ltr"] .hero h1{letter-spacing:-.02em !important;line-height:1.08 !important}
html[dir="ltr"] .stat .n{font-weight:400;letter-spacing:-.02em}
html[dir="ltr"] .panel .pnum{font-weight:300}
html[dir="ltr"] .marker .lbl{letter-spacing:.04em}
html[dir="ltr"] body{line-height:1.7}

/* ---- header / menu ---- */
html[dir="ltr"] .menu a::after{transform-origin:left}
html[dir="ltr"] .marker .hair{transform-origin:left}
html[dir="ltr"] .drawer-courses{padding:0 0 .65rem .8rem}
html[dir="ltr"] .drawer-courses a:hover,html[dir="ltr"] .drawer-courses a:focus-visible{transform:translateX(3px)}
html[dir="ltr"] .site-footer .f-col a:hover,html[dir="ltr"] .site-footer .footer-contact-col > a:hover{transform:translateX(3px)}

/* ---- arrows: the SVG chevrons are drawn for RTL, flip them ---- */
html[dir="ltr"] .btn .arw,html[dir="ltr"] .lnk svg{transform:scaleX(-1)}
html[dir="ltr"] .btn:hover .arw{transform:scaleX(-1) translateX(-4px)}
html[dir="ltr"] .tab[aria-selected="true"]::before{transform:translateX(2px)}

/* ---- phone / contact alignment ---- */
html[dir="ltr"] footer .phone,html[dir="ltr"] footer .contact-phone,html[dir="ltr"] footer a[href^="tel:"],
html[dir="ltr"] .contact a[href^="tel:"],html[dir="ltr"] .footer-phone-number,
html[dir="ltr"] footer .contact-item,html[dir="ltr"] footer .contact-row{text-align:left !important}

/* ---- desktop hero: copy on the LEFT, portrait on the RIGHT ---- */
@media (min-width:901px){
  html[dir="ltr"] .hero-scene{left:auto !important;right:0 !important}
  html[dir="ltr"] .hero-scene .scene-photo{left:auto !important;right:0 !important;object-position:center bottom !important}
  html[dir="ltr"] .hero-scrim{
    background:linear-gradient(270deg,rgba(4,19,33,.03) 0%,rgba(4,19,33,.1) 34%,rgba(4,19,33,.66) 53%,rgba(4,19,33,.96) 73%,#041321 100%) !important;
  }
  html[dir="ltr"] .hero-in{direction:ltr !important;text-align:left !important}
  html[dir="ltr"] .hero-kicker,html[dir="ltr"] .hero h1,html[dir="ltr"] .hero-lede,html[dir="ltr"] .hero-cta{
    margin-left:0 !important;margin-right:0 !important;justify-self:start !important;text-align:left !important;
  }
  html[dir="ltr"] .hero-kicker{margin-bottom:1rem !important}
  html[dir="ltr"] .hero h1{max-width:15ch !important;font-size:clamp(2.7rem,4.3vw,4.9rem) !important;margin-bottom:1.15rem !important}
  html[dir="ltr"] .hero-lede{max-width:34rem !important;margin-bottom:1.6rem !important;line-height:1.7 !important}
  html[dir="ltr"] .hero-foot{text-align:left !important}
}
@media (min-width:901px) and (max-width:1200px){
  html[dir="ltr"] .hero h1{font-size:clamp(2.5rem,4.2vw,3.8rem) !important}
}

/* ---- mobile hero ---- */
@media (max-width:900px){
  html[dir="ltr"] .hero-in,html[dir="ltr"] .hero-foot,html[dir="ltr"] .hero h1,html[dir="ltr"] .hero-lede{text-align:left !important}
  html[dir="ltr"] .hero h1{font-size:clamp(2.1rem,9vw,3.1rem) !important;line-height:1.12 !important}
  html[dir="ltr"] .hero-lede{line-height:1.7 !important}
}
@media (max-width:520px){
  html[dir="ltr"] .hero h1{font-size:clamp(2rem,9.6vw,2.6rem) !important;line-height:1.14 !important}
}

/* ---- course rows: image on the left, text on the right (mirror of RTL) ---- */
@media (min-width:1081px){
  html[dir="ltr"] #courses .course .art{grid-column:1}
  html[dir="ltr"] #courses .course .txt{grid-column:2}
}

/* ---- English copy is wider than Persian in a few tight spots ---- */
html[dir="ltr"] .brand .txt b{white-space:nowrap}
html[dir="ltr"] .brand em{white-space:nowrap}
html[dir="ltr"] .menu a{white-space:nowrap}
html[dir="ltr"] .specs span{white-space:normal}
html[dir="ltr"] .tab .tt{line-height:1.35}

/* ---- stats: English numerals/words are wider than Persian ones ---- */
html[dir="ltr"] .stat .n{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.6rem);flex-wrap:wrap}

/* ---- tab hint arrow points forward (→) in LTR ---- */
html[dir="ltr"] .tab::before{content:"→"}

/* ---- header: English labels are wider, keep the bar inside the viewport on laptops/tablets ---- */
@media (min-width:901px) and (max-width:1240px){
  html[dir="ltr"] .brand em{display:none}
  html[dir="ltr"] .bar{gap:.6rem}
  html[dir="ltr"] .menu{gap:0}
  html[dir="ltr"] .menu a{padding-inline:.55rem;font-size:.84rem}
  html[dir="ltr"] .head-cta{gap:.45rem}
  html[dir="ltr"] .head-cta .btn{padding-inline:1rem}
  html[dir="ltr"] .lang-switch{padding-inline:.65rem}
}
@media (min-width:901px) and (max-width:980px){
  html[dir="ltr"] .head-cta .btn{display:none}
}