/* Glilot site — blog single template (page-blog-single.php).
   Generated from validation/blog/css-src/blog-single.src.css. Loads after blog.css
   (shared card) and style.css. D(px) = px / 1920 * 100vw (desktop frame 16587:2315),
   M(px) = px / 390 * 100vw (mobile frame 16691:4041). Line heights of multi-line text
   use Figma's whole-pixel line pitch (18 x 1.3 = 23.4 -> 23; 16 x 1.35 = 21.6 -> 22). */

/* ---------- HERO — 16587:2316 (1920 x 3056) ---------- */
.glilot-blog-single__hero {
  position: relative;
  padding: 54.114583vw 0 5.833333vw;        /* article 16587:2366 at y 1039; 3056 - 2944 */
  overflow: clip;                   /* the shared form's off-screen honeypot must not widen the page */
  background: #fff;
}
.glilot-blog-single__media {        /* 16587:2399: 832 x 656 at 96, 193, r32, clip */
  position: absolute;
  top: 10.052083vw;
  left: 5vw;
  width: 43.333333vw;
  height: 34.166667vw;
  margin: 0;
  overflow: hidden;
  border-radius: 1.666667vw;
}
.glilot-blog-single__media img {    /* 16587:2400: box 832 x 662; image 189.66% x 134.15% at -4.09%, -34.15% */
  position: absolute;
  top: -11.774635vw;
  left: -1.772344vw;
  width: 82.18599vw;
  height: 46.253802vw;
  max-width: none;
  object-fit: cover;
}
.glilot-blog-single__head {         /* 16587:2395: 844 x 455 at 980, 280 (right 96), gap 30, MAX */
  position: absolute;
  top: 14.583333vw;
  right: 5vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5625vw;
  width: 43.958333vw;
  direction: ltr;
}
.glilot-blog-single__breadcrumb {   /* 16587:2396: 668, 18/1.3 ls 3% #537b88 (2 x 23) */
  width: 34.791667vw;
  margin: 0;
  color: var(--glilot-text-accent);
  font-size: 0.9375vw;
  font-weight: 400;
  line-height: 1.277778;
  letter-spacing: 0.03em;
  text-align: right;
}
.glilot-blog-single__title {        /* 16587:2397: 844, 70/1 Bold (4 lines = 280); feedback 2026-10-10 AR2 / G6:
                                       the global "fit" title step (56 / mobile 30) so long titles take fewer lines */
  width: 43.958333vw;
  margin: 0;
  color: var(--glilot-dark);
  font-size: var(--glilot-type-h1-fit);
  font-weight: 700;
  line-height: 1;
  text-align: right;
}
.glilot-blog-single__intro {        /* 16587:2398: 668, 18/1.3, ls 0 (3 x 23) */
  width: 34.791667vw;
  margin: 0;
  color: var(--glilot-dark);
  font-size: 0.9375vw;
  font-weight: 400;
  line-height: 1.277778;
  text-align: right;
}

/* Article — 16587:2366: 844 wide (right 96), vertical, gap 96, MAX */
.glilot-blog-single__article {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5vw;
  width: 43.958333vw;
  margin: 0 5vw 0 auto;
  direction: ltr;
}
.glilot-blog-single__block {        /* 16587:2367: 668, gap 30, MAX */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5625vw;
  width: 34.791667vw;
}
.glilot-blog-single__block h2, .glilot-blog-single__block [data-h="h2"] {     /* 16587:2368: 40/1 Medium */
  width: 100%;
  margin: 0;
  color: var(--glilot-dark);
  font-size: 2.083333vw;
  font-weight: 500;
  line-height: 1;
  text-align: right;
}
.glilot-blog-single__text {         /* 16587:2369: 668, 18/1.3 (8 x 23 = 184) */
  width: 100%;
  color: var(--glilot-dark);
  font-size: 0.9375vw;
  font-weight: 400;
  line-height: 1.277778;
  text-align: right;
}
.glilot-blog-single__text p { margin: 0; }
.glilot-blog-single__text p + p { margin-top: 1.277778em; }   /* INFERRED: one empty line between CM paragraphs */
.glilot-blog-single__text a { color: var(--glilot-accent); }
/* Lists in a content block (rich text, T7). Bullets use the design-system list mark (the asterisk of
   16712:396 / 16587:1093, here as a mask so it takes the accent colour), numbers are Bold accent.
   Rows keep the paragraph pitch; a list sits one empty line from the paragraphs around it. */
.glilot-blog-single__text :is(ul, ol) {
  margin: 1.277778em 0 0;
  padding: 0;
  list-style: none;
}
.glilot-blog-single__text :is(ul, ol):first-child { margin-top: 0; }
.glilot-blog-single__text :is(ul, ol) + p { margin-top: 1.277778em; }
.glilot-blog-single__text li {
  position: relative;
  padding-right: 1.75em;
}
.glilot-blog-single__text li + li { margin-top: 0.555556em; }    /* 10 px at 18 px */
.glilot-blog-single__text li :is(ul, ol) { margin-top: 0.555556em; }
.glilot-blog-single__text ul > li::before {
  content: "";
  position: absolute;
  top: 0.25em;
  right: 0;
  width: 0.833333em;                    /* 15 x 13.75 at 18 px: the 24 x 22 mark at body size */
  height: 0.763889em;
  background: var(--glilot-text-accent);
  -webkit-mask: url("../specialty-single/list-mark.svg") center / contain no-repeat;
  mask: url("../specialty-single/list-mark.svg") center / contain no-repeat;
}
.glilot-blog-single__text ol { counter-reset: glilot-article-list; }
.glilot-blog-single__text ol > li { counter-increment: glilot-article-list; }
.glilot-blog-single__text ol > li::before {
  content: counter(glilot-article-list) ".";
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.25em;
  color: var(--glilot-text-accent);
  font-weight: 700;
  text-align: right;
}
.glilot-blog-single__faq h2, .glilot-blog-single__faq [data-h="h2"] { font-weight: 700; }            /* 16587:2377: Bold */
.glilot-blog-single__faq-list {     /* shared site-faq accordion (user decision 2026-09-29; Figma 16587:2376 draws static Q&A) */
  --site-faq-answer-w: 33.125vw;       /* INFERRED: 668 row - 32 question lane = 636 */
}
.glilot-blog-single__summary h2, .glilot-blog-single__summary [data-h="h2"] {   /* 16587:2386: 40/1 Bold #537b88 */
  color: var(--glilot-text-accent);
  font-weight: 700;
}
.glilot-blog-single .glilot-blog-single__tour {  /* 16587:2388: h44, 4/20, gap 38, 1px #022d38 inside, r500 */
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  padding: 0.208333vw 1.041667vw;
  gap: 1.979167vw;
  border: 0;
  box-shadow: inset 0 0 0 0.052083vw var(--glilot-dark);
  color: var(--glilot-accent);
  text-decoration: none;
}
.glilot-blog-single__tour img {      /* 16587:2389: 19.392, dark arrow, physical left */
  width: 1.01vw;
  height: 1.01vw;
}
.glilot-blog-single__tour span {     /* 16587:2391: 178 x 26, 18/1.18 Medium ls 5% #044c5f */
  min-width: 9.270833vw;
  font-size: 0.9375vw;
  font-weight: 500;
  line-height: 1.444444;            /* derived: single-line text box 26 / 18 */
  letter-spacing: 0.05em;
  text-align: right;
  white-space: nowrap;
}
.glilot-blog-single__disclaimer {   /* 16587:2392: 590 x 73, #fafafa, r20; text 498 at 21, 16 */
  position: relative;
  width: 30.729167vw;
  min-height: 3.802083vw;
  padding: 0.833333vw 3.697917vw 0.78125vw 1.09375vw;  /* 16 + 2 x 21 + 15 = 73 */
  border-radius: var(--glilot-radius-inset);
  background: var(--glilot-surface);
}
.glilot-blog-single__disclaimer p { /* 16587:2393: 498, 18/1.18 Medium ls 5% #044c5f (2 x 21) */
  width: 25.9375vw;
  margin: 0;
  color: var(--glilot-accent);
  font-size: 0.9375vw;
  font-weight: 500;
  line-height: 1.166667;
  letter-spacing: 0.05em;
  text-align: right;
}
.glilot-blog-single__mark {         /* 16587:2394: 126 x 126 at 495, -22 (right -31) */
  position: absolute;
  top: -1.145833vw;
  right: -1.614583vw;
  width: 6.5625vw;
  height: 6.5625vw;
  overflow: hidden;
}
.glilot-blog-single__mark img {
  position: absolute;
  top: 0;
  left: 0;
  width: 6.5625vw;
  height: 6.5625vw;
  max-width: none;
  object-fit: cover;
}

/* ---------- More articles — 16587:2442 (1920 x 961) ---------- */
.glilot-blog-single__related {
  padding: 4.947917vw 0 7.083333vw;          /* 3151 - 3056; 961 - 95 - 730 */
  background: #fff;
}
.glilot-blog-single__related-title {  /* 16587:2444: 1720 x 70 at 100, 70/1 Bold #537b88, centered */
  width: 89.583333vw;
  margin: 0 auto;
  color: var(--glilot-text-accent);
  font-size: 3.645833vw;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.glilot-blog-related {              /* 16587:2445: 1720 x 600, gap 40, CENTER */
  position: relative;
  width: 89.583333vw;
  margin: 3.125vw auto 0;
}
.glilot-blog-related__viewport {    /* three 500 cards + 2 x 40 = 1580, centered (170 .. 1750) */
  width: 82.291667vw;
  margin: 0 auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  direction: rtl;                   /* row 1 = physical right card (16587:2468) */
}
.glilot-blog-related__viewport::-webkit-scrollbar { display: none; }
.glilot-blog-related__track {
  display: flex;
  justify-content: flex-start;      /* fewer than three cards start at the right (user rule 2026-10-10); three fill the viewport */
  gap: 2.083333vw;
  width: max-content;
  min-width: 100%;
}
.glilot-blog-related__track .glilot-blog-card { scroll-snap-align: start; }
.glilot-blog-related__arrow {       /* 16587:2479 / 2482: 44 x 44, 1px #022d38 inside, r500; y 3545 - 3281 */
  position: absolute;
  top: 13.75vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.291667vw;
  height: 2.291667vw;
  padding: 0;
  border: 0;
  border-radius: 26.041667vw;
  background: #fff;
  box-shadow: inset 0 0 0 0.052083vw var(--glilot-dark);
  cursor: pointer;
  transition: opacity 180ms ease;
}
.glilot-blog-related__arrow img { width: 1.01vw; height: 1.01vw; }
.glilot-blog-related__arrow--next { left: 0; }
.glilot-blog-related__arrow--prev { right: 0; }
.glilot-blog-related__arrow--prev img { transform: rotate(180deg); }   /* 16587:2482 rot 180 */
.glilot-blog-related__arrow:hover,
.glilot-blog-related__arrow:focus-visible { opacity: 0.72; }
.glilot-blog-related__arrow:focus-visible { outline: 0.104167vw solid var(--glilot-dark); outline-offset: 0.15625vw; }
.glilot-blog-related__arrow:disabled { opacity: 0.35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .glilot-blog-related__arrow { transition: none; }
}

/* =================== Mobile — frame 16691:4041 (390) =================== */
@media (max-width: 767px) {
  /* Hero 16691:4042 (920) + article 16691:4107 (top padding 20) */
  /* Feedback 2026-10-10 AR1: the header -> image gap is 40 shorter (Figma: image at 131, head at
     430; now 91 and 390). */
  .glilot-blog-single__hero {
    padding: 100vw 0 0;                  /* head 16691:4061 at y 430 - 40 */
  }
  .glilot-blog-single__media {      /* 16691:4216: 350 x 275.96 at 20, 131 - 40, r32 */
    top: 23.333333vw;
    left: 5.128205vw;
    width: 89.74359vw;
    height: 70.759487vw;
    border-radius: 8.205128vw;
  }
  .glilot-blog-single__media img {  /* 16691:4217: box 350 x 278.486; same crop percentages */
    top: -24.385385vw;
    left: -3.670513vw;
    width: 170.207692vw;
    height: 95.792051vw;
  }
  .glilot-blog-single__head {       /* 16691:4061: 350, pad 10/0, gap 10; 16691:4062 gap 18 */
    position: relative;
    top: auto;
    right: auto;
    gap: 0;
    width: 89.74359vw;
    margin: 0 5.128205vw;
    padding: 2.564103vw 0;
  }
  .glilot-blog-single__breadcrumb { /* 16691:4063: 314, 16/1.3 ls 3% (3 x 21) */
    width: 80.512821vw;
    font-size: 4.102564vw;
    line-height: 1.3125;
  }
  .glilot-blog-single__title {      /* 16691:4066: 314, 36/1 Bold, 18 below the breadcrumb; AR2: the full
                                       350 head width and the global fit step (30) */
    width: 89.74359vw;
    margin-top: 4.615385vw;
  }
  .glilot-blog-single__intro {      /* 16691:4067: 342, 16/1.35 (5 x 22), 10 below the title group */
    width: 87.692308vw;
    margin-top: 2.564103vw;
    font-size: 4.102564vw;
    line-height: 1.375;
  }
  .glilot-blog-single__aside { display: none; }  /* no top form in 16691:4107 */

  .glilot-blog-single__article {    /* 16691:4107: 350, gap 64; 89 below the hero copy + 20 padding */
    gap: 16.410256vw;
    width: 89.74359vw;
    margin: 27.948718vw 5.128205vw 0;
  }
  .glilot-blog-single__block {      /* 16691:4108: 350, gap 20 */
    gap: 5.128205vw;
    width: 89.74359vw;
  }
  .glilot-blog-single__block h2, .glilot-blog-single__block [data-h="h2"] {   /* 16691:4111: 36/1 Medium */
    font-size: 9.230769vw;
  }
  .glilot-blog-single__text {       /* 16691:4113: 350, 16/1.35 (15 x 22 = 330) */
    font-size: 4.102564vw;
    line-height: 1.375;
  }
  .glilot-blog-single__faq { gap: 8.205128vw; }   /* 16691:4231 */
  .glilot-blog-single__summary h2, .glilot-blog-single__summary [data-h="h2"] { font-size: 10.25641vw; }   /* 16691:4240: 40/1 Bold #537b88 */
  .glilot-blog-single .glilot-blog-single__tour {  /* 16691:4250: 243 x 34, 2.558/12.789, space-between, 0.639 inside */
    justify-content: space-between;
    width: 62.307692vw;
    padding: 0.655846vw 3.279179vw;
    gap: 0;
    box-shadow: inset 0 0 0 0.163949vw var(--glilot-dark);
  }
  .glilot-blog-single__tour img {   /* frame 16691:4251 at 12.79; its vector 16691:4252 renders 10px further right */
    width: 3.179487vw;
    height: 3.179487vw;
    margin-left: 2.564103vw;
  }
  .glilot-blog-single__tour span {   /* 16691:4253: 178 x 24, 18/1.18 Medium ls 5% */
    min-width: 45.641026vw;
    font-size: 4.615385vw;
    line-height: 1.333333;          /* derived: text box 24 / 18 */
  }
  .glilot-blog-single__disclaimer { /* 16691:4136: 350 x 90; text 269 at 13, 16 */
    width: 89.74359vw;
    min-height: 23.076923vw;
    padding: 3.076923vw 17.435897vw 3.076923vw 3.333333vw; /* SS4: 16 / 8 -> 12 / 12, text centred in the 90 box */
    border-radius: var(--glilot-radius-inset);
  }
  .glilot-blog-single__disclaimer p { /* 16691:4137: 269, 16/1.35 Regular ls 0 (3 x 22) */
    width: 68.974359vw;
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0;
  }
  .glilot-blog-single__mark {       /* 16691:4138: 71 x 145 at 279, -21 (right 0) */
    top: -5.384615vw;
    right: 0;
    width: 18.205128vw;
    height: 37.179487vw;
  }
  .glilot-blog-single__mark img {   /* image 204.23% x 100% at -50.7%: 145 x 145 at -36 */
    left: -9.230769vw;
    width: 37.179487vw;
    height: 37.179487vw;
  }

  /* More articles — 16691:4255 (350, gap 34), section bottom 103 */
  .glilot-blog-single__related {
    padding: 16.410256vw 5.128205vw 26.410256vw;
  }
  .glilot-blog-single__related-title {  /* 16691:4301: 350 x 40, 40/1 Bold #537b88, right */
    width: 100%;
    font-size: 10.25641vw;
    text-align: right;
  }
  .glilot-blog-related {
    width: 89.74359vw;
    margin: 8.717949vw 0 0;
  }
  .glilot-blog-related__viewport {
    width: 100%;
    overflow: visible;
    scroll-snap-type: none;
  }
  .glilot-blog-related__track {
    flex-direction: column;
    gap: 8.717949vw;
    width: 100%;
  }
  .glilot-blog-related__arrow { display: none; }
  /* Mobile (user decision 2026-10-10): no swipe, three cards; blog-single.js puts a different
     three first on every visit. */
  .glilot-blog-related__track > .glilot-blog-card:nth-child(n + 4) { display: none; }
}
