/* Glilot site — specialties archive (also loaded on the specialty single template).
 *
 * Figma file toMRddnZWZyDa6LLFhHAoF, page 16587:322 "PAGES + mobile".
 * Desktop 16587:1187 (1920): px / 1920 * 100vw.  Mobile 16679:2199 (390): px / 390 * 100vw.
 * Line heights are Figma's rendered line boxes (Figma rounds percentage line heights to
 * whole pixels: 16/135% -> 22, 18/130% -> 23, 110/99% -> 109, 24/130% -> 31), written as
 * unitless ratios. Measurements and provenance: validation/specialties.md.
 */

/* Shared inline treatment: Figma colored-bold ranges (#537b88, Bold). */
.glilot-specialties-archive .lp-text-highlight,
.glilot-specialty-single .lp-text-highlight {
  color: var(--glilot-text-accent);
  font-weight: 700;
}
:where(.glilot-specialties-archive, .glilot-specialty-single) :where(h1, h2, h3, p, ul), :where(.glilot-specialties-archive, .glilot-specialty-single) :where([data-h="h1"], [data-h="h2"], [data-h="h3"], p, ul) {
  margin: 0;
  padding: 0;
}
:where(.glilot-specialties-archive, .glilot-specialty-single) [dir="rtl"] {
  text-align: right;
}

@media (min-width: 768px) {
  /* ---------- Hero 16587:1188 (1920 x 920) ---------- */
  .glilot-specialties-hero {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 47.916667vw;
    background: #fff;
  }
  /* 16587:1190: 1068 x 1017 at (15, 89). Image fill CROP [[1,0,0],[0,0.95249,0]] ->
     1068 x 1067.73 from the top. The hero frame does not clip: the art runs 186px into
     section "2" (transparent), as in the full-frame export. */
  .glilot-specialties-hero__media {
    position: absolute;
    top: 4.635417vw;
    left: 0.78125vw;
    width: 55.625vw;
    height: 52.96875vw;
    overflow: hidden;
    pointer-events: none;
  }
  .glilot-specialties-hero__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 55.625vw;
    height: 55.610937vw;
  }
  /* 16587:1240: column, gap 30, items end; x 800 w 1026 -> right 94, y 266. */
  .glilot-specialties-hero__copy {
    position: absolute;
    top: 13.854167vw;
    right: 4.895833vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 53.4375vw;
    direction: ltr;
  }
  .glilot-specialties-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-specialties-hero__title {
    width: 53.4375vw;
    color: var(--glilot-dark);
    font-size: 5.729167vw;
    font-weight: 700;
    line-height: 0.990909;
  }
  .glilot-specialties-hero__body {
    width: 33.125vw;
    margin-top: 1.5625vw;
    color: var(--glilot-dark);
    font-size: 0.9375vw;
    font-weight: 400;
    line-height: 1.277778;
  }

  /* ---------- Grid 16587:1245 (1920 x 1551) ---------- */
  .glilot-specialties-grid {
    position: relative;
    width: 100vw;
    min-height: 80.78125vw;
    padding: 24.010417vw 4.791667vw 4.375vw 0; /* RTL block: grid x 94 + 1734 = 1828 -> right 92. */
  }
  /* 16587:1246: x 954 w 869 (right 97), y 151, gap 30, items end. */
  .glilot-specialties-grid__intro {
    position: absolute;
    top: 7.864583vw;
    right: 5.052083vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 45.260417vw;
    direction: ltr;
  }
  .glilot-specialties-grid__intro h2, .glilot-specialties-grid__intro [data-h="h2"] {
    width: 42.604167vw;
    color: var(--glilot-dark);
    font-size: 3.645833vw;
    font-weight: 500;
    line-height: 1;
  }
  .glilot-specialties-grid__intro p {
    width: 38.90625vw;
    margin-top: 1.5625vw;
    color: var(--glilot-dark);
    font-size: 0.9375vw;
    font-weight: 400;
    line-height: 1.277778;
  }
  /* 16587:1249: 3 x 530 cards, gap 68 x 72 (x 94 .. 1828). SA2 / SA4 (user, 2026-10-10): RTL reading
     order: the specialty "order" 1 is the top-right card, and an incomplete last row starts at the
     right. The six launch cards keep their Figma positions through their order values
     (dermatology 1, women's health 2, [neurology 3], cardiology 4, orthopedics 5, surgical 6,
     aesthetics 7). */
  .glilot-specialties-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, 27.604167vw);
    grid-auto-rows: 24.427083vw;
    width: 90.3125vw;
    gap: 3.541667vw 3.75vw;
    list-style: none;
    direction: rtl;
  }
}

/* ---------- Card (16587:1250 family) ---------- */
.glilot-specialty-card--archive { position: relative; }
.glilot-specialty-card--archive a {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--glilot-surface);
  color: var(--glilot-dark);
  text-decoration: none;
}
.glilot-specialty-card--archive a:focus-visible {
  outline: 2px solid var(--glilot-accent);
  outline-offset: 3px;
}
:where(.glilot-specialty-card--archive) .glilot-specialty-card__media {
  position: absolute;
  mix-blend-mode: multiply;
  pointer-events: none;
}
:where(.glilot-specialty-card--archive) .glilot-specialty-card__media img {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0.5;
  object-fit: fill;
}
/* Default art fills: CROP [[0.99943,0,0.00028],[0,1,0]] -> width 100.0568%, left -0.0284%. */
:where(.glilot-specialty-card--archive) .glilot-specialty-card__media img { left: -0.0284%; width: 100.0568%; }
/* Every card image (built-in art, an image chosen in the admin, the SA3 placeholder) gets the Figma
   treatment of 16587:1271: the media box is filled (the square glass images stretch to 594 x 535
   exactly as in the design). Per-slug Figma exceptions below apply to any image of that slug. */
/* Orthopedics art 16587:1263: CROP [[0.99784,0,0.07237],[0,1,0]] -> width 100.2167%, left -7.2526%. */
.glilot-specialty-card--orthopedics .glilot-specialty-card__media img { left: -7.2526%; width: 100.2167%; }
/* Women's health art 16587:1255: FIT. */
.glilot-specialty-card--womens-health .glilot-specialty-card__media img { left: 0; width: 100%; object-fit: contain; }
/* SA4 instance exception (no Figma card): the glass brain is a wide object filling its whole square,
   so stretched into the box it ran off the card's top-left corner. Whole image (contain) at 82% of
   the media box, centred on the card (x 265 of 530, like the other objects) -> left 14%, top 12%. */
.glilot-specialty-card--neurology .glilot-specialty-card__media img { top: 12%; left: 14%; width: 82%; height: 82%; object-fit: contain; }
.glilot-specialty-card--archive h3,
.glilot-specialty-card--archive p,
.glilot-specialty-card--archive [data-h="h3"] {
  position: absolute;
  direction: rtl;
  text-align: right;
}
.glilot-specialty-card--archive h3, .glilot-specialty-card--archive [data-h="h3"] {
  color: var(--glilot-accent);
  font-weight: 700;
}
.glilot-specialty-card--archive p {
  color: var(--glilot-dark);
  font-weight: 400;
}

@media (min-width: 768px) {
  .glilot-specialty-card--archive a {
    width: 27.604167vw;
    height: 24.427083vw;
    border-radius: var(--glilot-radius-card);
  }
  /* 16587:1251: 594 x 535 at (-64, -157), multiply, fill opacity 0.5. */
  :where(.glilot-specialty-card--archive) .glilot-specialty-card__media {
    top: -8.177083vw;
    left: -3.333333vw;
    width: 30.9375vw;
    height: 27.864583vw;
  }
  /* 16587:1253: x 127 w 355 (right 48), y 352, Bold 40/1. */
  .glilot-specialty-card--archive h3, .glilot-specialty-card--archive [data-h="h3"] {
    top: 18.333333vw;
    right: 2.5vw;
    width: 18.489583vw;
    font-size: 2.083333vw;
    line-height: 1;
  }
  /* 16587:1252: x 57 w 425 (right 48), y 402, Regular 18/23. */
  .glilot-specialty-card--archive p {
    top: 20.9375vw;
    right: 2.5vw;
    width: 22.135417vw;
    font-size: 0.9375vw;
    line-height: 1.277778;
  }
  /* 16587:1268 exception: x 53 -> right 52. */
  .glilot-specialty-card--surgical-consultations p { right: 2.708333vw; }

  /* ---------- FAQ 16587:1274 / 16587:1575 (1920 x 920) ---------- */
  .glilot-specialties-faq {
    position: relative;
    width: 100vw;
    min-height: 47.916667vw;
    background: #fff;
  }
  /* 16587:1288: 879 x 733 at (0, 104), radius 0 100 100 0, image FILL. */
  .glilot-specialties-faq__media {
    position: absolute;
    top: 5.416667vw;
    left: 0;
    width: 45.78125vw;
    height: 38.177083vw;
    overflow: hidden;
    border-radius: 0 var(--glilot-radius-media) var(--glilot-radius-media) 0;
  }
  .glilot-specialties-faq__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  /* 16587:1275: x 987 w 837 (right 96), y 128. */
  .glilot-specialties-faq__content {
    position: absolute;
    top: 6.666667vw;
    right: 5vw;
    width: 43.59375vw;
  }
  /* 16587:1276: 691 x 184 (fixed box), Medium 70/1, bold range #537b88. */
  .glilot-specialties-faq__content h2, .glilot-specialties-faq__content [data-h="h2"] {
    width: 35.989583vw;
    height: 9.583333vw;
    margin-left: auto;
    color: var(--glilot-dark);
    font-size: 3.645833vw;
    font-weight: 500;
    line-height: 1;
  }
  /* Items use the shared [data-single-open-accordion] surface from style.css
     (16587:1278 open 837 x 106, 16587:1282 44, 16587:1285 39, gap 20). */
}

/* ---------- Mobile (390 frames) ---------- */
@media (max-width: 767px) {
  /* Hero 16679:2200 (390 x 920). Header lane 390 x 54 is the shared site header. */
  .glilot-specialties-hero {
    position: relative;
    width: 100vw;
    height: 235.897436vw;
    overflow: hidden;
    background: #fff;
  }
  /* 16681:2423: 368 x 351 at (11, 153); CROP [[1,0,0],[0,0.95249,0]] -> 368 x 368.51. */
  .glilot-specialties-hero__media {
    position: absolute;
    top: 39.230769vw;
    left: 2.820513vw;
    width: 94.358974vw;
    height: 90vw;
    overflow: hidden;
  }
  .glilot-specialties-hero__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 94.358974vw;
    height: 94.489744vw;
  }
  /* 16681:2421 at (29, 529), padding 10 -> content lane x 39..353, y 539. */
  .glilot-specialties-hero__copy {
    position: absolute;
    top: 138.205128vw;
    left: 10vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 80.512821vw;
    direction: ltr;
  }
  /* 16681:2412: 314 x 21, Regular 16/130% (21), ls 3%. */
  .glilot-specialties-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;
  }
  /* 16681:2413 (Bold 46/1, #537b88) + 16681:2416 (Bold 36/1), gap 2. */
  .glilot-specialties-hero__title {
    width: 80.512821vw;
    margin-top: 0.512821vw;
    color: var(--glilot-dark);
    font-size: 9.230769vw;
    font-weight: 700;
    line-height: 1;
  }
  .glilot-specialties-hero__title .lp-text-highlight {
    display: block;
    font-size: 11.794872vw;
    line-height: 1;
  }
  /* 16681:2414: 309 x 88 at x 41.5 (centered in the 314 lane), gap 10, Regular 16/22. */
  .glilot-specialties-hero__body {
    width: 79.230769vw;
    margin-top: 2.564103vw;
    margin-right: 0.641026vw;
    color: var(--glilot-dark);
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.375;
  }

  /* Grid 16682:2425 (390 x 2590). TEXT frame 16682:2427 starts 13px above the section
     (clipped) with padding 20 19 41 19 and gap 80. */
  .glilot-specialties-grid {
    position: relative;
    width: 100vw;
    min-height: 664.102564vw;
    padding: 1.794872vw 0 14.358974vw;
  }
  .glilot-specialties-grid__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 90.25641vw;
    margin-right: 4.871795vw; /* RTL block: anchor the physical right edge (x 19 + 352 = 371). */
    direction: ltr;
  }
  /* 16682:2430: x 38 w 333, 108 tall; Bold 36 (#537b88) + Regular 36. */
  .glilot-specialties-grid__intro h2, .glilot-specialties-grid__intro [data-h="h2"] {
    width: 85.384615vw;
    color: var(--glilot-dark);
    font-size: 9.230769vw;
    font-weight: 400;
    line-height: 1;
  }
  /* 16682:2432: x 19 w 352, fixed box 83 tall, gap 35; Regular 16/22. */
  .glilot-specialties-grid__intro p {
    width: 90.25641vw;
    height: 21.282051vw; /* Figma fixed text box (textAutoResize NONE); 4 lines overflow it by 5px. */
    margin-top: 8.974359vw;
    color: var(--glilot-dark);
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.375;
  }
  /* 16682:2433: x 21, 350 wide column, gap 42, 80 below the intro. */
  .glilot-specialties-grid__cards {
    display: flex;
    flex-direction: column;
    gap: 10.769231vw;
    width: 89.74359vw;
    margin: 20.512821vw 4.871795vw 0 0; /* x 21 + 350 = 371 -> right 19 (RTL block). */
    list-style: none;
  }
  .glilot-specialty-card--archive a {
    width: 89.74359vw;
    height: 85.897436vw;
    border-radius: var(--glilot-radius-card);
  }
  /* 16682:2447 exception: the dermatology card is 336 tall. */
  .glilot-specialty-card--dermatology a { height: 86.153846vw; }
  /* 16682:2435: 400.54 x 360.55 at (-78.2, -105.84). */
  :where(.glilot-specialty-card--archive) .glilot-specialty-card__media {
    top: -27.138462vw;
    left: -20.051282vw;
    width: 102.702564vw;
    height: 92.448718vw;
  }
  /* 16682:2441 family: x 98.3 w 239.31 (right 33.39), y 217.29, Bold 24/31. */
  .glilot-specialty-card--archive h3, .glilot-specialty-card--archive [data-h="h3"] {
    top: 55.715385vw;
    right: 8.561538vw;
    width: 61.361538vw;
    font-size: 6.153846vw;
    line-height: 1.291667;
  }
  /* 16682:2440 family: y 251, right 33, Regular 16/22; widths differ per card. */
  .glilot-specialty-card--archive p {
    top: 64.358974vw;
    right: 8.461538vw;
    font-size: 4.102564vw;
    line-height: 1.375;
  }
  .glilot-specialty-card--womens-health p { width: 61.538462vw; }
  .glilot-specialty-card--orthopedics p,
  .glilot-specialty-card--dermatology p { right: 8.561538vw; width: 73.461538vw; }
  .glilot-specialty-card--medical-aesthetics p { width: 68.461538vw; }
  .glilot-specialty-card--surgical-consultations p { width: 71.025641vw; }
  /* 16682:2436/2437 exception (cardiology): title y 237.29, right 53.39; body y 271, w 221, right 53. */
  .glilot-specialty-card--cardiology h3, .glilot-specialty-card--cardiology [data-h="h3"] { top: 60.84359vw; right: 13.689744vw; }
  .glilot-specialty-card--cardiology p { top: 69.487179vw; right: 13.589744vw; width: 56.666667vw; }

  /* FAQ 16679:2300 / 16683:2565 (390 x 501). No image on mobile. */
  .glilot-specialties-faq {
    position: relative;
    width: 100vw;
    min-height: 128.461538vw;
    padding-top: 19.74359vw;
    background: #fff;
  }
  .glilot-specialties-faq__media { display: none; }
  .glilot-specialties-faq__content {
    width: 89.74359vw;
    margin-right: 5.128205vw; /* x 20 (RTL block anchored right). */
  }
  /* 16679:2302: 350 x 72, Medium 36/1 with a Bold #537b88 range; gap 22. */
  .glilot-specialties-faq__content h2, .glilot-specialties-faq__content [data-h="h2"] {
    width: 89.74359vw;
    color: var(--glilot-dark);
    font-size: 9.230769vw;
    font-weight: 500;
    line-height: 1;
  }
  .glilot-specialties-faq__items { margin-top: 5.641026vw; }
  /* Rows: shared site-faq component (assets/css/site-faq.css), 16679:2305 / 2309 / 2312.
     Instance exception 16679:2313: the archive's third question wraps in a 242 box (x 88). */
  .glilot-specialties-faq:not(.glilot-specialties-faq--single) .site-faq__item:nth-of-type(3):not([open]) .site-faq__question { width: 62.051282vw; }
}

/* Mobile card order from 16682:2425 (user decision, 2026-09-27): cardiology, women's health,
   orthopedics, dermatology, aesthetics, surgical. One repeater; desktop keeps DOM order.
   Cards with other slugs follow in DOM order after these. */
@media (max-width: 767px) {
  .glilot-specialties-grid__cards > * { order: 10; }
  .glilot-specialties-grid__cards > .glilot-specialty-card--cardiology { order: 1; }
  .glilot-specialties-grid__cards > .glilot-specialty-card--womens-health { order: 2; }
  .glilot-specialties-grid__cards > .glilot-specialty-card--orthopedics { order: 3; }
  .glilot-specialties-grid__cards > .glilot-specialty-card--dermatology { order: 4; }
  .glilot-specialties-grid__cards > .glilot-specialty-card--medical-aesthetics { order: 5; }
  .glilot-specialties-grid__cards > .glilot-specialty-card--surgical-consultations { order: 6; }
}