/* Glilot site — specialty single template (specialties.css is also loaded here for the
 * shared highlight, reset and FAQ section).
 *
 * Figma "PAGES + mobile": desktop 16587:1332 (1920): px / 1920 * 100vw;
 * mobile 16683:2464 (390): px / 390 * 100vw. Line heights are Figma's rendered whole-pixel
 * line boxes as unitless ratios. Measurements and provenance: validation/specialty-single.md.
 */

/* ---------- Emblem (hero). The ring is the shared emblem component (glilot_site_emblem, mode
   'spin'); its rotation and reduced-motion path live in assets/css/site-motion.css. ---------- */
/* SS1: the emblem lives in a track over the hero + content section (single-glilot_specialty.php).
   The track is anchored right and 100vw wide like the sections, so the emblem keeps the hero's
   coordinates (also with a classic scrollbar, where the 100vw sections overflow to the left). */
.glilot-specialty-intro { position: relative; }
.glilot-specialty-emblem-track {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  pointer-events: none;
}
.glilot-specialty-emblem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  pointer-events: none;
}
.glilot-specialty-emblem__image {
  position: absolute;
  z-index: 1;
  object-fit: fill;
}
.glilot-specialty-emblem__ring {
  position: absolute;
  z-index: 2;
  max-width: none;
}

.glilot-specialty-when__list { list-style: none; }
.glilot-specialty-when__list li {
  display: flex;
  direction: ltr;
}
.glilot-specialty-when__list li > span {
  flex: none;
  direction: rtl;
  text-align: right;
  color: var(--glilot-dark);
  font-weight: 400;
}
/* 16712:396: 24 x 22 vector, flipped vertically (-scale-y-100). */
.glilot-specialty-when__mark {
  display: block;
  flex: none;
  transform: scaleY(-1);
}
.glilot-specialty-disclaimer {
  position: relative;
  background: var(--glilot-surface);
}
.glilot-specialty-disclaimer p {
  position: absolute;
  color: var(--glilot-accent);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.glilot-specialty-disclaimer img { position: absolute; }
.glilot-specialty-environment { position: relative; width: 100vw; overflow: hidden; }
.glilot-specialty-environment__media {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.glilot-specialty-environment__media img {
  position: absolute;
  max-width: none;
}
.glilot-specialty-environment__panel { color: var(--glilot-dark); }
.glilot-specialty-environment__panel h2, .glilot-specialty-environment__panel [data-h="h2"] { font-weight: 500; line-height: 1; }
.glilot-specialty-environment__panel p { font-weight: 400; }

@media (min-width: 768px) {
  /* ---------- Hero 16587:1333 (1920 x 920) ---------- */
  .glilot-specialty-hero {
    position: relative;
    width: 100vw;
    height: 47.916667vw;
    overflow: hidden;
    background: #fff;
  }
  /* SS1: desktop sticky. The emblem box is the hero frame (920 tall), so its children keep the
     measured hero coordinates; sticky at top 0 = it stays exactly where it is at scroll 0 (ring
     140 px from the top, under the 90 px header) and releases when the track (hero + content
     section) ends, i.e. before the environment image. */
  .glilot-specialty-emblem {
    position: sticky;
    height: 47.916667vw;
  }
  /* 16587:1335: 487 x 487 at (204, 234), CROP fill (stretched). */
  .glilot-specialty-emblem__image {
    top: 12.1875vw;
    left: 10.625vw;
    width: 25.364583vw;
    height: 25.364583vw;
  }
  /* 16587:1336: 660.7 x 654.69 at (118, 140.31). */
  .glilot-specialty-emblem__ring {
    top: 7.307813vw;
    left: 6.145833vw;
    width: 34.411719vw;
    height: 34.098438vw;
  }
  /* 16587:1460: x 841 w 985 (right 94), y 285, gap 27. */
  .glilot-specialty-hero__copy {
    position: absolute;
    top: 14.84375vw;
    right: 4.895833vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 51.302083vw;
    direction: ltr;
  }
  .glilot-specialty-hero__breadcrumb {
    width: 34.791667vw;
    color: var(--glilot-text-accent);
    font-size: 0.9375vw;
    font-weight: 400;
    line-height: 1.277778;
    letter-spacing: 0.03em;
  }
  .glilot-specialty-hero__title {
    width: 51.302083vw;
    color: var(--glilot-dark);
    font-size: 5.729167vw;
    font-weight: 700;
    line-height: 0.990909;
  }
  .glilot-specialty-hero__body {
    width: 30.364583vw;
    margin-top: 1.40625vw;
    color: var(--glilot-dark);
    font-size: 0.9375vw;
    font-weight: 400;
    line-height: 1.277778;
  }

  /* ---------- Content 16587:1465 (1920 x 1264) ---------- */
  /* 16712:413: column x 1106 w 719 (right 95), y 108, gap 93; disclaimer 16712:409 last. */
  .glilot-specialty-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100vw;
    min-height: 65.833333vw;
    padding: 5.625vw 4.947917vw 10.15625vw 0;
    direction: ltr;
  }
  .glilot-specialty-content__column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 37.447917vw;
  }
  .glilot-specialty-content h2, .glilot-specialty-content [data-h="h2"] {
    width: 37.083333vw;
    color: var(--glilot-dark);
    font-size: 3.645833vw;
    font-weight: 500;
    line-height: 1;
  }
  /* 16587:1466: fixed 294 tall block, gap 30. */
  .glilot-specialty-overview {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 37.447917vw;
    min-height: 15.3125vw;
  }
  /* 16587:1468: 636 wide, Regular 18/23, ls 3%. */
  .glilot-specialty-overview__body {
    width: 33.125vw;
    margin-top: 1.5625vw;
    color: var(--glilot-dark);
    font-size: 0.9375vw;
    font-weight: 400;
    line-height: 1.277778;
    letter-spacing: 0.03em;
  }
  .glilot-specialty-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 37.447917vw;
    margin-top: 4.84375vw;
  }
  /* 16712:392: 719 wide, Regular 22/29, gap 30. */
  .glilot-specialty-when__intro {
    width: 37.447917vw;
    margin-top: 1.5625vw;
    color: var(--glilot-dark);
    font-size: 1.145833vw;
    font-weight: 400;
    line-height: 1.318182;
  }
  /* 16712:393: 680 wide, rows 23 tall, gap 16. Row: text 628 + gap 28 + mark 24 x 22 (bottom aligned). */
  .glilot-specialty-when__list {
    display: flex;
    flex-direction: column;
    gap: 0.833333vw;
    width: 35.416667vw;
    margin-top: 1.5625vw;
  }
  .glilot-specialty-when__list li {
    align-items: flex-end;
    gap: 1.458333vw;
  }
  .glilot-specialty-when__list li > span {
    width: 32.708333vw;
    font-size: 0.9375vw;
    line-height: 1.277778;
  }
  .glilot-specialty-when__mark {
    width: 1.25vw;
    height: 1.145833vw;
    color: var(--glilot-accent);
  }
  /* 16712:409: 590 x 73, radius 20, 93 below the column. */
  .glilot-specialty-disclaimer {     /* SS4: shared .glilot-notice; Figma 590 x 73 = the minimum */
    width: 30.729167vw;
    min-height: 3.802083vw;
    padding: 0.78125vw 0 0.78125vw 1.09375vw; /* text x 21; 15 above / below, so two lines (42) keep the 73 box */
    margin-top: 4.84375vw;
    border-radius: var(--glilot-radius-inset);
  }
  /* 16712:410: x 21 y 26, 498 wide, Medium 18/21, ls 5%. */
  .glilot-specialty-disclaimer p {
    top: 1.354167vw;
    left: 1.09375vw;
    width: 25.9375vw;
    font-size: 0.9375vw;
    line-height: 1.166667;
  }
  /* 16712:411: 126 x 126 at (495, -22). */
  .glilot-specialty-disclaimer img {
    top: -1.145833vw;
    left: 25.78125vw;
    width: 6.5625vw;
    height: 6.5625vw;
  }

  /* ---------- Environment 16587:1568 (1920 x 920) ---------- */
  .glilot-specialty-environment { height: 47.916667vw; }
  .glilot-specialty-environment__media {
    width: 100vw;
    height: 47.916667vw;
  }
  /* 16587:1569: frame mirrored (relTransform [-1,0,1920]) with fill CROP
     [[-0.80796,0,0.85344],[0,0.68753,0.03372]] -> unmirrored image 2376.37 x 1338.12 at (-108.09, -45.12). */
  .glilot-specialty-environment__media img {
    top: -2.349896vw;
    left: -5.629531vw;
    width: 123.769115vw;
    height: 69.693646vw;
  }
  /* 16587:1570: x 1030 y 217, 890 x 440, rgba(255,255,255,.9), radius 26 0 0 26,
     padding 33 96 44 96, content centred vertically, items end. */
  .glilot-specialty-environment__panel {
    position: absolute;
    top: 11.302083vw;
    left: 53.645833vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 46.354167vw;
    min-height: 22.916667vw; /* G12: Figma 440 is the minimum; longer copy grows the panel (still centred) */
    padding: 1.71875vw 5vw 2.291667vw;
    border-radius: var(--glilot-radius-panel) 0 0 var(--glilot-radius-panel);
    background: rgba(255, 255, 255, 0.9);
    direction: ltr;
  }
  .glilot-specialty-environment__panel h2, .glilot-specialty-environment__panel [data-h="h2"] {
    width: 36.354167vw;
    font-size: 3.645833vw;
  }
  .glilot-specialty-environment__panel p {
    margin-top: 1.041667vw;
    font-size: 0.9375vw;
    line-height: 1.277778;
  }
  .glilot-specialty-environment__first { width: 26.875vw; }
  .glilot-specialty-environment__second { width: 23.333333vw; }
}

@media (max-width: 767px) {
  /* ---------- Hero 16683:2635 (390 x 920) ---------- */
  .glilot-specialty-hero {
    position: relative;
    width: 100vw;
    height: 235.897436vw;
    overflow: hidden;
    background: #fff;
  }
  .glilot-specialty-emblem { height: 235.897436vw; overflow: hidden; } /* SS1: mobile keeps the emblem in the hero frame */
  /* 16683:2747: 253.1 x 253.1 at (67.46, 216.07). */
  .glilot-specialty-emblem__image {
    top: 55.402564vw;
    left: 17.297436vw;
    width: 64.897436vw;
    height: 64.897436vw;
  }
  /* 16683:2748: 343.37 x 340.25 at (22.76, 167.38). */
  .glilot-specialty-emblem__ring {
    top: 42.917949vw;
    left: 5.835897vw;
    width: 88.04359vw;
    height: 87.24359vw;
  }
  /* 16683:2655 at (20, 571), padding 10 0, gap 10, items end (right 370). */
  .glilot-specialty-hero__copy {
    position: absolute;
    top: 148.974359vw;
    right: 5.128205vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 89.74359vw;
    direction: ltr;
  }
  .glilot-specialty-hero__breadcrumb {
    width: 80.512821vw;
    color: var(--glilot-text-accent);
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.3125;
    letter-spacing: 0.03em;
  }
  /* 16683:2659 (Bold 46/1, #537b88) + 16683:2660 (Bold 36/1), gap 2. */
  .glilot-specialty-hero__title {
    width: 80.512821vw;
    margin-top: 0.512821vw;
    color: var(--glilot-dark);
    font-size: 9.230769vw;
    font-weight: 700;
    line-height: 1;
  }
  .glilot-specialty-hero__title .lp-text-highlight {
    display: block;
    font-size: 11.794872vw;
    line-height: 1;
    text-wrap: balance;
  }
  /* T4: a name wider than the 314 lane at 46 px ("ייעוצים כירורגיים", "אסתטיקה רפואית") is fitted
     to one line by assets/js/specialty-single.js, down to the 36 px of the line below; the title then
     keeps the design's two lines. Without JS it wraps (balanced). */
  /* 16683:2661: 342 wide at x 28, Regular 16/22, gap 10. */
  .glilot-specialty-hero__body {
    width: 87.692308vw;
    margin-top: 2.564103vw;
    color: var(--glilot-dark);
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.375;
  }

  /* ---------- Content 16683:2521 (390 x 935) ---------- */
  /* 16683:2526: column x 20 w 350, gap 79; disclaimer 16683:2831 64 below; 69 to the frame end. */
  .glilot-specialty-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100vw;
    min-height: 239.74359vw;
    padding: 0 5.128205vw 17.692308vw;
    direction: ltr;
  }
  .glilot-specialty-content__column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 89.74359vw;
  }
  .glilot-specialty-content h2, .glilot-specialty-content [data-h="h2"] {
    color: var(--glilot-dark);
    font-size: 9.230769vw;
    font-weight: 500;
    line-height: 1;
  }
  .glilot-specialty-overview {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 89.74359vw;
  }
  /* 16683:2529: 350 x 72. */
  .glilot-specialty-overview h2, .glilot-specialty-overview [data-h="h2"] { width: 89.74359vw; }
  /* 16683:2531: 350 wide, Regular 16/22, gap 50. */
  .glilot-specialty-overview__body {
    width: 89.74359vw;
    margin-top: 12.820513vw;
    color: var(--glilot-dark);
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.375;
  }
  .glilot-specialty-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 89.74359vw;
    margin-top: 20.25641vw;
  }
  /* 16683:2535: 341 wide (x 29). */
  .glilot-specialty-when h2, .glilot-specialty-when [data-h="h2"] { width: 87.435897vw; }
  /* 16683:2538: 316 wide (x 54), Regular 16/22, gap 50. */
  .glilot-specialty-when__intro {
    width: 81.025641vw;
    margin-top: 12.820513vw;
    color: var(--glilot-dark);
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.375;
  }
  /* 16683:2539: 344 wide (x 26), rows 22 tall, gap 16, 20 below the intro.
     Row: text 292 + gap 28 + mark 24 x 22 (#022d38), top aligned. */
  .glilot-specialty-when__list {
    display: flex;
    flex-direction: column;
    gap: 4.102564vw;
    width: 88.205128vw;
    margin-top: 5.128205vw;
  }
  .glilot-specialty-when__list li {
    align-items: flex-start;
    gap: 7.179487vw;
  }
  .glilot-specialty-when__list li > span {
    width: 74.871795vw;
    font-size: 4.102564vw;
    line-height: 1.375;
  }
  .glilot-specialty-when__mark {
    width: 6.153846vw;
    height: 5.641026vw;
    color: var(--glilot-dark);
  }
  /* 16683:2831: 350 x 73, radius 20. */
  .glilot-specialty-disclaimer {     /* SS4: Figma 350 x 73 = the minimum; text x 0, 16 above / below */
    width: 89.74359vw;
    min-height: 18.717949vw;
    padding: 4.102564vw 0;
    margin-top: 16.410256vw;
    border-radius: var(--glilot-radius-inset);
  }
  /* 16683:2832: x 0 y 16, 264 wide, Medium 18/21, ls 5%. */
  .glilot-specialty-disclaimer p {
    top: 4.102564vw;
    left: 0;
    width: 67.692308vw;
    font-size: 4.615385vw;
    line-height: 1.166667;
  }
  /* 16683:2833: 126 x 126 at (248, -22). */
  .glilot-specialty-disclaimer img {
    top: -5.641026vw;
    left: 63.589744vw;
    width: 32.307692vw;
    height: 32.307692vw;
  }

  /* ---------- Environment 16683:2556 (390 x 674) ---------- */
  .glilot-specialty-environment {
    min-height: 172.820513vw;
    padding: 91.282051vw 0 6.923077vw;
  }
  /* 16683:2557: 1083 x 519 rect at (-32, -54), mirrored, same CROP fill ->
     visible box 390 x 465, unmirrored image 1340.42 x 754.87 at (-92.97, -79.45). */
  .glilot-specialty-environment__media {
    width: 100vw;
    height: 119.230769vw;
  }
  .glilot-specialty-environment__media img {
    top: -20.372564vw;
    left: -23.837179vw;
    width: 343.696923vw;
    height: 193.557179vw;
  }
  /* 16683:2559: 390 x 291 white, radius 100 0 0 0, padding 20 19 41 19, gap 17, items end. */
  .glilot-specialty-environment__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100vw;
    min-height: 74.615385vw; /* G12: Figma frame 291 as the minimum (its own content overflowed it: 2px at 430) */
    padding: 5.128205vw 4.871795vw 10.512821vw;
    border-radius: var(--glilot-radius-panel) 0 0 0;
    background: #fff;
    direction: ltr;
  }
  /* 16683:2562: 346 x 72 (x 25), Medium 36/1 with a Bold #537b88 range. */
  .glilot-specialty-environment__panel h2, .glilot-specialty-environment__panel [data-h="h2"] {
    width: 88.717949vw;
    font-size: 9.230769vw;
  }
  /* 16683:2563 / 16683:2564: 328 wide (x 43), Regular 16/22, gap 17. */
  .glilot-specialty-environment__panel p {
    width: 84.102564vw;
    margin-top: 4.358974vw;
    font-size: 4.102564vw;
    line-height: 1.375;
  }

  /* FAQ 16683:2565: the third question wraps in a 230 box — the shared site-faq default. */
}