/* About page (page-id-9) — Figma "About me - tablet" (744 x 2732) and "About me - mobile" (393 x 3262).
 * Loaded by mu-plugins/beheshti-inner-responsive.php after inner-chrome.css. Everything is inside
 * max-width:1024px, so desktop (>=1025px) is untouched. The hero photo, title, hairlines and the cyan
 * edge strip are exported from the Figma file (assets/about/). Selectors use the html:not(#a):not(#a)
 * bump to beat beheshti-about.css, which also targets <=1024px with !important.
 */

br.bh-br { display: none; }

@media (max-width: 1024px) {
  br.bh-br { display: inline; }
  :root {
    --ab-text: #fff;
    --ab-cyan: var(--e-global-color-accent, #99f1ff);
    --ab-navy: var(--e-global-color-secondary, #021a51);
    --ab-photo: url("assets/about/hero-photo.jpg");
    --ab-title: url("assets/about/title.svg");
  }

  /* ---- Hero ---- */
  html:not(#a):not(#a) body.page-id-9 #beheshti-about-hero { background: var(--ab-navy) !important; overflow: hidden !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  html:not(#a):not(#a) body.page-id-9 #beheshti-about-hero > .elementor-container,
  html:not(#a):not(#a) body.page-id-9 #beheshti-about-hero .elementor-column,
  html:not(#a):not(#a) body.page-id-9 #beheshti-about-hero .elementor-widget-wrap,
  html:not(#a):not(#a) body.page-id-9 #beheshti-about-hero .elementor-widget,
  html:not(#a):not(#a) body.page-id-9 #beheshti-about-hero .elementor-widget-container { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero {
    position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important;
    height: var(--ab-hero-h) !important; min-height: var(--ab-hero-h) !important; max-height: var(--ab-hero-h) !important;
    background: var(--ab-navy) !important; overflow: hidden !important; isolation: isolate;
  }
  /* photo: the Figma crop, with the navy fade drawn as its own layer */
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__media {
    position: absolute !important; inset: 0 auto auto 0 !important; z-index: 1 !important; overflow: hidden !important;
    width: var(--ab-photo-w) !important; height: var(--ab-photo-h) !important; clip-path: var(--ab-clip) !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__media img { display: none !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__media::before {
    content: ""; position: absolute; inset: 0; background: var(--ab-photo) var(--ab-photo-x) 0 / cover no-repeat; filter: contrast(var(--ab-contrast));
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--ab-fade); }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__lines { display: none !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__content {
    position: relative !important; z-index: 2 !important; display: block !important; box-sizing: border-box !important;
    width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; text-align: right !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__titles {
    position: absolute !important; margin: 0 !important; padding: 0 !important;
    width: var(--ab-title-w) !important; height: var(--ab-title-h) !important;
    left: var(--ab-title-l) !important; right: auto !important; top: var(--ab-title-t) !important;
    background: var(--ab-title) 0 0 / 100% 100% no-repeat;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__titles > * { display: none !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__bio {
    position: absolute !important; margin: 0 !important; padding: 0 !important; max-width: none !important;
    width: var(--ab-bio-w) !important; right: var(--ab-bio-r) !important; left: auto !important; top: var(--ab-bio-t) !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__bio p {
    margin: 0 !important; padding: 0 !important; color: var(--ab-text) !important; font-family: Aria, sans-serif !important;
    font-size: var(--ab-bio-fs) !important; line-height: var(--ab-bio-lh) !important; font-weight: 400 !important; text-align: right !important;
  }

  /* ---- Cyan edge strip: one 2073/1760-tall image running down the right edge of hero + story ---- */
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero::after,
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story::after {
    content: "" !important; position: absolute !important; display: block !important; right: 0 !important; left: auto !important; width: var(--ab-strip-w) !important; pointer-events: none !important; z-index: 3 !important;
    background: url("assets/about/edge-strip.png") no-repeat !important; background-size: var(--ab-strip-w) var(--ab-strip-h) !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero::after { top: var(--ab-strip-hero-top) !important; bottom: 0 !important; height: auto !important; background-position: 0 0 !important; }
  /* the story's half of the strip is sized to the story's own height (the art is uniform top to bottom apart from the end
     fades), so the strip always runs into the footer however the copy wraps on the device */
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story::after { top: 0 !important; bottom: 0 !important; height: auto !important; background-position: 0 var(--ab-strip-story-y) !important; background-size: var(--ab-strip-w) calc(100% - var(--ab-strip-story-y)) !important; }
  /* the last star's vertical line ends where the lines artwork ends; carry it on (same x, width and 0.2 white) down to the footer */
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story::before {
    content: "" !important; position: absolute !important; display: block !important; z-index: 2 !important; pointer-events: none !important;
    top: calc(var(--ab-lines-t) + var(--ab-lines-h) - 1px) !important; bottom: 0 !important; left: calc(50% + var(--ab-vline-x)) !important; width: var(--ab-vline-w) !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }

  /* ---- Story ---- */
  html:not(#a):not(#a) body.page-id-9 #beheshti-about-story { display: block !important; background: var(--ab-navy) !important; overflow-x: clip !important; overflow-y: visible !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story {
    padding: var(--ab-story-pt) 0 var(--ab-story-pb) !important; max-width: none !important; width: 100% !important; margin: 0 !important; min-height: 0 !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__lines {
    display: block !important; position: absolute !important; z-index: 2 !important; pointer-events: none !important; transform: none !important;
    left: var(--ab-lines-l) !important; top: var(--ab-lines-t) !important; width: var(--ab-lines-w) !important; height: var(--ab-lines-h) !important;
    background: var(--ab-lines) 0 0 / 100% 100% no-repeat !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__list {
    display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important;
    padding: 0 var(--ab-list-pr) 0 var(--ab-list-pl) !important; box-sizing: border-box !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__item { padding: 0 !important; margin: 0 !important; width: 100% !important; grid-column: auto !important; grid-row: auto !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__item:nth-child(2) { margin-top: var(--ab-gap-in) !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__item:nth-child(3) { margin-top: var(--ab-gap-out) !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__item:nth-child(4) { margin-top: var(--ab-gap-in) !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__card { margin: 0 !important; max-width: none !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__title {
    position: relative !important; margin: 0 0 8px !important; padding: 0 var(--ab-mk-pad) 0 0 !important; color: var(--ab-text) !important;
    font-size: var(--ab-h-fs) !important; line-height: var(--ab-h-lh) !important; font-weight: 350 !important; text-align: right !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__title::after {
    display: block !important; content: "" !important; position: absolute !important; right: 0 !important; left: auto !important; top: var(--ab-mk-top) !important;
    width: var(--ab-mk) !important; height: var(--ab-mk) !important; background: var(--ab-cyan) !important;
  }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__item:nth-child(4) .beheshti-about-story__title { padding-right: var(--ab-mk4-pad) !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__item:nth-child(4) .beheshti-about-story__title::after { top: var(--ab-mk4-top) !important; width: var(--ab-mk4) !important; height: var(--ab-mk4) !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__body,
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__points {
    margin: 0 !important; padding: 0 !important; color: var(--ab-text) !important; font-size: var(--ab-b-fs) !important; line-height: var(--ab-b-lh) !important;
    font-weight: 300 !important; text-align: right !important;
  }
  /* item 3: the three questions are plain lines, then one blank line (Figma text has real line breaks) */
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__points li { padding: 0 !important; margin: 0 !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__points li::before { display: none !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__points + .beheshti-about-story__body { margin-top: var(--ab-b-lh) !important; }
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__body + .beheshti-about-story__points { margin-top: 0 !important; }
}

/* ---- Mobile: Figma 393 ---- */
@media (max-width: 743px) {
  :root {
    --ab-hero-h: 680px; --ab-photo-w: 100%; --ab-photo-h: 500px; --ab-clip: none; --ab-photo-x: 26.1%; --ab-contrast: 1.15;
    --ab-fade: linear-gradient(to top, #000a2d 1.6%, rgba(0, 10, 45, 0) 65.3%);
    --ab-title-w: 161px; --ab-title-h: 64.6px; --ab-title-l: 36px; --ab-title-t: 399.4px;
    --ab-bio-w: calc(100% - 64px); --ab-bio-r: 32px; --ab-bio-t: 540px; --ab-bio-fs: 16px; --ab-bio-lh: 20px;
    --ab-strip-w: 59px; --ab-strip-h: 1760px; --ab-strip-hero-top: 500px; --ab-strip-story-y: -181px;
    --ab-story-pt: 180px; --ab-story-pb: 80px; --ab-list-pr: 40px; --ab-list-pl: 40px; --ab-gap-in: 80px; --ab-gap-out: 180px;
    --ab-h-fs: 20px; --ab-h-lh: 25px; --ab-b-fs: 14px; --ab-b-lh: 17px;
    --ab-mk: 7px; --ab-mk-pad: 17px; --ab-mk-top: 9px; --ab-mk4: 7px; --ab-mk4-pad: 17px; --ab-mk4-top: 8px;
    --ab-lines: url("assets/about/lines-m.svg"); --ab-lines-l: calc(50% - 651.5px); --ab-lines-t: -274.66px; --ab-lines-w: 1170.77px; --ab-lines-h: 1846.56px;
    --ab-vline-x: 0.09px; --ab-vline-w: 0.684px;
  }
}

/* Figma's line 4 of the last paragraph is 314.7px in a 313px box (Chrome wraps it one word earlier, adding a line):
   give the box the 2px Figma lets it overflow by, towards the left (text is right-aligned) */
@media (max-width: 743px) {
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-story__item:nth-child(4) .beheshti-about-story__body { width: calc(100% + 2px) !important; margin-left: -2px !important; }
}

/* ---- Tablet: Figma 744 ---- */
@media (min-width: 744px) and (max-width: 1024px) {
  :root {
    --ab-hero-h: 441px; --ab-photo-w: 53.09%; --ab-photo-h: 441px; --ab-clip: polygon(0 0, 100% 0, 88.89% 100%, 0 100%); --ab-photo-x: 29.4%; --ab-contrast: 1.17;
    --ab-fade: linear-gradient(to bottom, rgba(0, 10, 45, 0) 37.4%, #000a2d 98%);
    --ab-title-w: 257px; --ab-title-h: 103.2px; --ab-title-l: auto; --ab-title-t: 40px;
    --ab-bio-w: 257px; --ab-bio-r: 52px; --ab-bio-t: 247px; --ab-bio-fs: 18px; --ab-bio-lh: 22px;
    --ab-strip-w: 87px; --ab-strip-h: 2073px; --ab-strip-hero-top: 0px; --ab-strip-story-y: -441px;
    --ab-story-pt: 100px; --ab-story-pb: 100px; --ab-list-pr: 120px; --ab-list-pl: 80px; --ab-gap-in: 80px; --ab-gap-out: 400px;
    --ab-h-fs: 26px; --ab-h-lh: 32px; --ab-b-fs: 16px; --ab-b-lh: 20px;
    --ab-mk: 10px; --ab-mk-pad: 22px; --ab-mk-top: 11px; --ab-mk4: 7px; --ab-mk4-pad: 17px; --ab-mk4-top: 12px;
    --ab-lines: url("assets/about/lines-t.svg"); --ab-lines-l: calc(50% - 517.7px); --ab-lines-t: -441px; --ab-lines-w: 1463.46px; --ab-lines-h: 2078.35px;
    --ab-vline-x: 296.63px; --ab-vline-w: 0.855px;
  }
  /* tablet hero: title sits top-right in the 349px text column (x 435..692 of 744), bio under it */
  html:not(#a):not(#a) body.page-id-9 .beheshti-about-hero__titles { right: var(--ab-bio-r) !important; left: auto !important; }
}