/* TehranWeb Portfolio English — LTR adjustments scoped to the English page only.
   Preserve existing typography, imagery, colors, card sizing, animation, and Persian layout. */
html[lang^="en"] body.twpf-portfolio-page .twpf-page-main,
html[lang^="en"] body.twpf-portfolio-page .twpf-page-main > .twpf,
html[lang^="en"] body.twpf-portfolio-page .twpf-modal {
  direction:ltr !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-hero,
html[lang^="en"] body.twpf-portfolio-page .twpf-hero__content,
html[lang^="en"] body.twpf-portfolio-page .twpf-project-card__body,
html[lang^="en"] body.twpf-portfolio-page .twpf-modal__meta,
html[lang^="en"] body.twpf-portfolio-page .twpf-modal__detail,
html[lang^="en"] body.twpf-portfolio-page .twpf-case-study__content,
html[lang^="en"] body.twpf-portfolio-page .twpf-process__step,
html[lang^="en"] body.twpf-portfolio-page .twpf-process__copy,
html[lang^="en"] body.twpf-portfolio-page .twpf-cta,
html[lang^="en"] body.twpf-portfolio-page .twpf-cta__content {
  direction:ltr !important;
  text-align:left !important;
}
html[lang^="en"] body.twpf-portfolio-page :is(
  .twpf-hero__title,.twpf-case-study__title,.twpf-case-study__description,
  .twpf-cta__title,.twpf-project-card__text,.twpf-project-card__title,
  .twpf-process__step-title,.twpf-process__step-description,
  .twpf-modal__title,.twpf-modal__text,.twpf-modal__wysiwyg
){text-align:left !important;}
html[lang^="en"] body.twpf-portfolio-page .twpf-service-pill,
html[lang^="en"] body.twpf-portfolio-page .twpf-hero__actions,
html[lang^="en"] body.twpf-portfolio-page .twpf-cta__actions,
html[lang^="en"] body.twpf-portfolio-page .twpf-project-card__footer{
  direction:ltr !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-project-card__tag{
  inset-inline-start:14px !important;
  inset-inline-end:auto !important;
  right:auto !important;
  left:14px !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-modal__dialog,
html[lang^="en"] body.twpf-portfolio-page .twpf-modal__content{
  direction:ltr !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-modal__close{
  right:16px !important;
  left:auto !important;
}
html[lang^="en"] body.twpf-portfolio-page :is(
  .twpf-hero__button--gold,.twpf-cta__button--gold,
  .twpf-project-card__arrow,.twpf-case-study__button
) svg{transform:rotate(180deg);transform-origin:center;}
html[lang^="en"] body.twpf-portfolio-page .twpf-modal__detail-grid{
  direction:ltr !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-modal__detail strong{
  text-align:left !important;
}
/* Service filters: preserve existing responsive wrapping and filter selection logic. */
html[lang^="en"] body.twpf-portfolio-page .twpf-services__grid{
  direction:ltr !important;
  justify-content:flex-start !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-services__grid .twpf-service-pill{
  direction:ltr !important;
}
/* Featured process: cards read left to right, chevrons point to the next card. */
html[lang^="en"] body.twpf-portfolio-page .twpf-process__steps{
  direction:ltr !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-process__step{
  direction:ltr !important;
  text-align:left !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-process__step:not(:last-child)::after{
  left:auto !important;
  right:calc(clamp(22px,2.2vw,36px) * -.65) !important;
  transform:translate(50%,-50%) rotate(225deg) !important;
}
/* Client marquee uses RTL scroll coordinates in the source JS. Isolate its internal
   scrolling direction instead of breaking drag, autoscroll, keyboard or wrap logic. */
html[lang^="en"] body.twpf-portfolio-page .twpf-clients__viewport,
html[lang^="en"] body.twpf-portfolio-page .twpf-clients__track,
html[lang^="en"] body.twpf-portfolio-page .twpf-clients__cycle{
  direction:rtl !important;
}
html[lang^="en"] body.twpf-portfolio-page .twpf-client-card,
html[lang^="en"] body.twpf-portfolio-page .twpf-client-card__name{
  direction:ltr !important;
  text-align:center !important;
}
/* Content and artwork remain separate; never mirror logos, screenshots or flags. */
html[lang^="en"] body.twpf-portfolio-page .twpf-hero__media img,
html[lang^="en"] body.twpf-portfolio-page .twpf-case-study__visual img,
html[lang^="en"] body.twpf-portfolio-page .twpf-cta__visual img,
html[lang^="en"] body.twpf-portfolio-page .twpf-client-card img{
  transform:none !important;
}
@media (min-width:768px){
  /* Hero: Persian is image-left/copy-right; English is image-right/copy-left. */
  html[lang^="en"] body.twpf-portfolio-page .twpf-hero__inner{
    direction:ltr !important;
    justify-content:flex-start !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-hero__media{
    left:auto !important;
    right:0 !important;
    -webkit-mask-image:linear-gradient(to left,#000 0%,#000 66%,rgba(0,0,0,.92) 76%,transparent 100%) !important;
    mask-image:linear-gradient(to left,#000 0%,#000 66%,rgba(0,0,0,.92) 76%,transparent 100%) !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-hero__content{
    width:48% !important;
    max-width:730px !important;
    text-align:left !important;
  }
  /* Case-study image shifts from right to left as its source grid direction changes. */
  html[lang^="en"] body.twpf-portfolio-page .twpf-case-study__shell{
    direction:ltr !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-case-study__visual{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-case-study__content{
    grid-column:2 !important;
    grid-row:1 !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-case-study__visual::after{
    background:linear-gradient(90deg,transparent 52%,rgba(0,26,38,.06) 67%,#001e2a 100%) !important;
  }
  /* CTA: reverse copy and media without flipping the photo or lettering. */
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__visual{
    left:auto !important;
    right:0 !important;
    -webkit-mask-image:linear-gradient(to left,#000 0%,#000 63%,rgba(0,0,0,.65) 81%,transparent 100%) !important;
    mask-image:linear-gradient(to left,#000 0%,#000 63%,rgba(0,0,0,.65) 81%,transparent 100%) !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__visual::after{
    background:linear-gradient(0deg,rgba(0,15,22,.16),transparent 44%),linear-gradient(270deg,transparent 30%,rgba(0,15,23,.12) 100%) !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__content{
    margin:0 auto 0 0 !important;
    padding-left:clamp(24px,5.8vw,105px) !important;
    padding-right:12px !important;
    text-align:left !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__handwritten{
    left:9% !important;right:auto !important;
    transform:rotate(10deg) !important;
  }
}
@media (min-width:768px) and (max-width:1199px){
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__content{
    padding-left:clamp(24px,4vw,52px) !important;
    padding-right:10px !important;
  }
}
@media (max-width:767px){
  /* Keep the proven mobile stack and image dimensions; change only text flow. */
  html[lang^="en"] body.twpf-portfolio-page .twpf-hero__inner,
  html[lang^="en"] body.twpf-portfolio-page .twpf-hero__content,
  html[lang^="en"] body.twpf-portfolio-page .twpf-case-study__content,
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__content{
    direction:ltr !important;
    text-align:left !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-hero__media{
    left:auto !important;
    right:auto !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__visual{
    left:auto !important;
    right:auto !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-cta__handwritten{
    left:8% !important;
    right:auto !important;
  }
  html[lang^="en"] body.twpf-portfolio-page .twpf-process__step::after{
    display:none !important;
  }
}