/* ==========================================================================
   Yoosl — left-to-right overrides (English pages only)

   Loaded after the other stylesheets by the pages build.py writes to en/.
   The layout is written in logical properties (inline-start / -end), so
   under dir="ltr" it mirrors by itself. This file covers what is drawn for
   the RTL page in physical terms: arrows that point "forward", the reveal
   offsets, select chevrons, the CTA photo's orange wash, and the stats band,
   whose photographer keeps his place on the left because the photo and the
   Figma timeline are composed around him.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

/* Reveals come in from the inline-start side, which is now the left */
.js [data-reveal="start"] { transform: translateX(-36px); }
.js [data-reveal="end"]   { transform: translateX(36px); }

/* --------------------------------------------------------------------------
   Directional icons — "forward" is up-and-to-the-right here
   -------------------------------------------------------------------------- */

.btn__icon { transform: rotate(45deg); }
.btn:hover .btn__icon { transform: rotate(45deg) translate(-2px, -2px); }

.case-link__icon { transform: rotate(45deg); }
.case-link:hover .case-link__icon { transform: rotate(45deg) translate(-2px, -2px); }

.read-link__icon { transform: rotate(45deg); }
.read-link:hover .read-link__icon { transform: rotate(45deg) translate(-2px, -2px); }

.svc-card__badge { transform: rotate(45deg); }
.svc-card:hover .svc-card__badge { transform: rotate(45deg) translate(-3px, -3px); }

/* The plan buttons already point up-right on the Arabic page; keep them */
.plan__cta .btn__icon { transform: rotate(45deg); }
.plan__cta:hover .btn__icon { transform: rotate(45deg) translateY(-3px); }

/* Paper plane flies right, "back to podcast" points left */
.newsletter__send img { transform: none; }
.ep-crumbs__icon img { transform: none; }

/* Previous sits on the left now, so the two chevrons swap */
.testi__arrow svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Forms — chevrons move to the right edge
   -------------------------------------------------------------------------- */

.select,
.select--glass { background-position: right var(--sp-4) center; }
.contact-select__icon { left: auto; right: var(--sp-4); }
.input--soft[type="tel"] { text-align: left; }

/* --------------------------------------------------------------------------
   About — the two photo cards fan out the other way
   -------------------------------------------------------------------------- */

.photo-stack__card--back { left: auto; right: 8.929%; rotate: -1.85deg; }
.photo-stack__card--front { left: auto; right: 2.353%; rotate: 2.45deg; }
.photo-stack:hover .photo-stack__card--back { rotate: -3.5deg; }
.photo-stack:hover .photo-stack__card--front { rotate: 4.5deg; }
.photo-stack.is-flipped .photo-stack__card--back { left: auto; right: 2.353%; rotate: 2.45deg; }
.photo-stack.is-flipped .photo-stack__card--front { left: auto; right: 8.929%; rotate: -1.85deg; }
.photo-stack.is-flipped:hover .photo-stack__card--back { rotate: 4.5deg; }
.photo-stack.is-flipped:hover .photo-stack__card--front { rotate: -3.5deg; }

/* --------------------------------------------------------------------------
   CTA over photo — the text sits on the left now, so the orange wash and the
   photo's crop mirror with it (the couple moves to the right-hand edge)
   -------------------------------------------------------------------------- */

.cta-photo::after {
  background: linear-gradient(116deg, rgb(218, 102, 54) 42.7%, rgba(229, 105, 50, 0) 93%);
}
.cta-photo__bg { scale: -1 1; }
@media (min-width: 901px) {
  .cta-photo__bg { left: auto; right: -14.77%; }
}

/* --------------------------------------------------------------------------
   Stats band (home) — kept physically as on the Arabic page: the photographer
   enters from the left and the figures sit on the right, clear of him.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  .stats-photo__frame > .stats-photo__bg { inset-inline-end: auto; inset-inline-start: -3.47%; }
  .stats-photo__grid { margin-inline-end: 0; margin-inline-start: auto; }
}
.stats-photo__shot { inset-inline-end: auto; inset-inline-start: 0; }
.stats-photo__flash { inset-inline-end: auto; inset-inline-start: -20.5%; }
@media (max-width: 900px) {
  .stats-photo__flash { inset-inline-start: 10.5%; }
}
@media (max-width: 700px) {
  .stats-photo__flash { inset-inline-start: 25.5%; }
}

/* --------------------------------------------------------------------------
   Copy that was set flush to the far edge for the Arabic reader
   -------------------------------------------------------------------------- */

/* The Arabic cards sit flush to the left edge (the design's `text-left`,
   i.e. the RTL end). Mirrored that would push English paragraphs flush
   right, so here they read from the left like the rest of the page. */
.why-card,
.work-card__body,
.guest-card__bio { text-align: start; }

/* The packages heading is right-aligned in Figma, the RTL start side, so in
   English it takes the left: the start side again. */
.section-head--end { margin-inline-start: 0; text-align: start; }



/* --------------------------------------------------------------------------
   Longer English labels (Trello, 2026-10-01)
   -------------------------------------------------------------------------- */

/* The phone hero keeps its two buttons on one no-wrap row for the Arabic
   labels; "Choose Your Package" + "Download Our Profile" are ~390px together
   and ran off both sides of the screen. Stack them, full width, instead. */
@media (max-width: 700px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    inline-size: min(100%, 22rem);
    margin-inline: auto;
  }
  .hero__actions .btn { justify-content: center; }
}

/* "تواصل معنا" is two short words at H1 size; "Contact Us" at the same size
   reads as a shout next to the other cards' prices and broke onto two lines
   in the narrow desktop column. Set it a step down, on one line. */
.plan__price--text {
  font-size: calc(var(--fs-h3) * var(--plan-k, 1));
  white-space: nowrap;
  min-block-size: calc(var(--fs-h1) * var(--plan-k, 1) * 1.4);   /* the other cards' price row, so the buttons still line up */
}

/* "Request a Custom Package" is wider than the 334px button at the Arabic
   label's 24px, so the label overflowed the pill. One step down fits all
   three plan buttons. */
.plan__cta { --btn-fs: calc(var(--fs-p3) * var(--plan-k, 1)); }