/* Journal — frames `BLOG` (347:12415, canvas 1728x2906) and `BLOG vidinis` (347:12478,
   canvas 1728x2702), with `BLOG mobile` (434:5250) and `BLOG vidinis mobile` (347:12604) at
   360. Offsets are frame-absolute values from design/figma-cache/frames/, rebased on the
   section start (the header bottom, y72 desktop / y141 minus the 43px status bar on mobile).
   Both pages flow, because the number of posts is the client's; the card itself is home.css's
   `.bcard` — the comp draws the same card in three widths.
   Text tops are line-box tops: Figma cap-trims, so each margin is the comp's gap minus the
   font's cap offset. */

/* ---- List: the hero band, Rectangle 6 @0,72 — 1728x400 with a 50% scrim ---- */
.jl__hero { position: relative; height: 400px; overflow: hidden; }
.jl__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jl__hero::after {                                    /* Rectangle 8 — #2c2420 at 50% */
  content: ""; position: absolute; inset: 0; background: var(--ink); opacity: .5;
}
.jl__title {                                          /* 367:4938 @764,236 — 80/72, centred */
  position: absolute; left: 0; right: 0; top: 164px; margin: 0; z-index: 1;
  color: var(--cream); text-align: center; font-family: var(--font-display);
  font-weight: 500; font-size: 80px; line-height: 72px;
}

.jl__crumbs {                                         /* Group 5360 @294,488 — 12/15.6 */
  display: flex; align-items: center; gap: 16px; height: 16px; margin-top: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.jl__crumbs a, .jp__crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.jl__crumbs a:hover, .jp__crumbs a:hover { color: var(--accent); }
.jl__crumbs [aria-current], .jp__crumbs [aria-current] { color: var(--muted); font-weight: 400; }
.jl__crumbs img, .jp__crumbs img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

/* ---- Category strip: Group 5298 @294,544 — 16/20.832 UPPER ls1.6, gap 64 ---- */
.jl__tabs {
  display: flex; align-items: flex-start; gap: 64px;
  margin: 35.7px 0 0; padding: 0; list-style: none;
}
.jl__tab {
  position: relative; display: block; text-transform: uppercase; color: var(--muted);
  font-weight: 300; font-size: 16px; line-height: 20.832px; letter-spacing: 1.6px;
  transition: color var(--t-tint) var(--ease-out);
}
.jl__tab:hover, .jl__tab:focus-visible { color: var(--accent); }
.jl__tab[aria-current] { color: var(--accent); font-weight: 400; }
/* The active key draws Vector 46. Hover grows that SAME rule out of its left edge instead of
   blinking a second decoration on, so the two states rhyme; at rest it has no ink. */
.jl__tab::after {                                     /* Vector 46 @294,563 */
  content: ""; position: absolute; left: 0; right: 0; top: 23.3px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform var(--t-move) var(--ease-out), opacity var(--t-tint) var(--ease-out);
}
.jl__tab:hover::after, .jl__tab:focus-visible::after, .jl__tab[aria-current]::after {
  transform: scaleX(1); opacity: 1;
}

/* ---- Card rows: half @603 (558x367), full @1095 (1140x480), thirds @1700 (364x240) ---- */
.jl__row { display: flex; gap: 24px; margin-top: 42.5px; }
.jl__row + .jl__row { margin-top: 74.4px; }           /* 80 from the excerpt's ink bottom (client 2026-10-29; comp 40) */
.jl .bcard { width: 364px; }
.jl .bcard--half { width: 558px; }
.jl .bcard--full { width: 1140px; }
.jl .bcard img { width: 100%; height: 240px; }
.jl .bcard--half img { height: 367px; }
.jl .bcard--full img { height: 480px; }
/* The comp keeps the category and the title in a 364 box on every card width; only the
   excerpt runs the full card (366:3161/366:3167 against 366:3157/366:3159). */
.jl .bcard--half .bcard__cat, .jl .bcard--half .bcard__title,
.jl .bcard--full .bcard__cat, .jl .bcard--full .bcard__title { width: 364px; }
.jl .bcard__cat, .jp .bcard__cat { margin-top: 21.4px; }     /* cap +24 from the photo */
.jl .bcard__title, .jp .bcard__title { margin-top: 6.6px; }  /* cap +24 from the category */
.jl .bcard__excerpt, .jp .bcard__excerpt { margin-top: 5.4px; }   /* cap +29 from the title */
/* The excerpt's clamp follows the comp's own line count per card width (home.css sets the 364
   card's two lines): one line across the wide cards (558x8 / 1140x8), two at 360 (328x26). */
.jl .bcard--half .bcard__excerpt, .jl .bcard--full .bcard__excerpt { height: 1lh; -webkit-line-clamp: 1; }
.jl .bcard__excerpt { height: 2lh; -webkit-line-clamp: 2; }
.jl__empty { margin: 42.5px 0 0; color: var(--muted); }
.jl { padding-bottom: 114.4px; }                      /* 120 to the footer, ink to edge */

/* ---- Article: the 1140 cover, then a centred 752 column ---- */
.jp { padding-bottom: 114.4px; }
.jp__crumbs {                                         /* Group 5360 @294,88 — 12/15.6 */
  display: flex; align-items: center; gap: 16px; height: 16px; margin-top: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.jp__cover {                                          /* 367:5085 @294,120 — 1140x509 */
  display: block; width: 1140px; height: 509px; object-fit: cover; margin-top: 16px;
}
.jp__meta, .jp__title, .jp__body { width: 752px; margin-inline: auto; }
.jp__meta {                                           /* 367:5097 @488,669 — 14/18.2 UPPER */
  margin-top: 35.8px; margin-bottom: 0; text-transform: uppercase; color: var(--muted);
  font-weight: 300; font-size: 14px; line-height: 18.2px;
}
.jp__title {                                          /* 367:5095 @488,711 — 32/41.7 ls3.2 */
  margin-top: 19.4px; margin-bottom: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}
.jp__body {                                           /* 367:5083 @488,773 — 752 wide, 14/24 */
  margin-top: 21.8px; color: var(--ink); font-weight: 400; font-size: 14px; line-height: 24px;
}
/* The comp draws the body as one flat column of 14/24 text; these are the blocks an
   admin-authored article may carry (see design/DEVIATIONS.md — the seeded body is shorter). */
.jp__body > :first-child { margin-top: 0; }
.jp__body > img:first-child { margin-top: 0; }
.jp__body p { margin: 0 0 24px; }
.jp__body h2, .jp__body h3 {
  margin: 32px 0 8px; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 18px; line-height: 23.4px; letter-spacing: 1.8px;
}
.jp__body ul, .jp__body ol { margin: 0 0 24px; padding-left: 20px; }
.jp__body li { margin-bottom: 4px; }
.jp__body blockquote {
  margin: 32px 0; padding-left: 24px; border-left: 1px solid var(--accent);
  color: var(--accent); font-weight: 300; font-size: 18px; line-height: 27px;
}
.jp__body img { display: block; width: 100%; height: auto; margin: 48px 0; }
.jp__body a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; }   /* a source's bare URL breaks inside the column */
.jp__body a:hover { color: var(--ink); }

.jp__rule {                                           /* Vector 46 @294,1703 — 1140px rule */
  width: 1140px; height: 0; margin: 73.6px 0 0; border: 0; border-top: 1px solid var(--sand);
}
.jp__rel-title {                                      /* 367:5114 @294,1767 — 32/41.7 ls3.2 */
  margin: 54.4px 0 0; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}
.jp__rel .carousel { margin-top: 30px; }              /* Group 5513 @294,1829 */
.jp__rel-track { gap: 24px; }
.jp__rel .dots { margin-top: 34.4px; }                /* 40 from the excerpt's ink bottom */

/* ---- Mobile: frames `BLOG mobile` 434:5250 and `BLOG vidinis mobile` 347:12604.
       The list card is the full-width 328 card; the article's related rows keep the 120px
       thumb row mobile.css already gives every `.bcard`. ---- */
@media (max-width: 767px) {
  .jl__hero { height: 240px; }
  .jl__title { top: 84px; font-size: 40px; }          /* 434:5326 @129,225 */
  .jl__crumbs, .jp__crumbs { height: 13px; font-size: 10px; line-height: 13px; }
  .jl__crumbs img, .jp__crumbs img { width: 4px; height: 7px; }
  .jl__tabs {                                         /* Group 5298 @16,450 — scrolls sideways */
    gap: 64px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .jl__tab { white-space: nowrap; }
  .jl__row { display: block; }
  /* every card is the same 328 card, so one card gap is the only rhythm: 40 (client 2026-10-29; comp 24) */
  .jl__row + .jl__row, .jl__row .bcard + .bcard { margin-top: 34.4px; }
  .jl .bcard, .jl .bcard--half, .jl .bcard--full { display: block; width: 100%; }
  .jl .bcard img, .jl .bcard--half img, .jl .bcard--full img {  /* 434:5336 — 328x216 */
    width: 100%; height: 216px;
  }
  .jl .bcard--half .bcard__cat, .jl .bcard--half .bcard__title,
  .jl .bcard--full .bcard__cat, .jl .bcard--full .bcard__title { width: auto; }
  .jl .bcard__cat { font-size: 12px; line-height: 15.6px; }
  .jl .bcard__title { font-size: 18px; line-height: 23.4px; font-weight: 300; }
  .jl .bcard--half .bcard__excerpt, .jl .bcard--full .bcard__excerpt { height: 2lh; -webkit-line-clamp: 2; }
  .jl { padding-bottom: 58.4px; }                     /* 64 to the footer */

  .jp__cover {                                        /* 434:5373 @0,141 — full-bleed 360x240 */
    width: calc(100% + 32px); max-width: none; height: 240px; margin: 0 -16px;
  }
  .jp { display: flex; flex-direction: column; padding-bottom: 58.4px; }
  .jp .container { display: flex; flex-direction: column; }
  .jp__cover { order: -1; }                           /* mobile draws the cover above the crumbs */
  .jp__meta, .jp__title, .jp__body { width: auto; margin-inline: 0; }
  .jp__meta { margin-top: 35.8px; }
  .jp__title { margin-top: 12.8px; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px; }
  .jp__body { margin-top: 9.9px; }
  .jp__body img { margin: 32px 0; }
  .jp__body h2, .jp__body h3 { font-size: 16px; line-height: 20.8px; letter-spacing: 1.6px; }
  .jp__rule { display: none; }                        /* the mobile frame draws no rule */
  .jp__rel-title {                                    /* 434:5383 @16,2279 — 18/23.4 ls1.8 */
    margin-top: 35.6px; font-size: 18px; line-height: 23.4px; letter-spacing: 1.8px;
  }
  .jp__rel .carousel { margin-top: 19.6px; }          /* Group 5421 @16,2316 */
  .jp__rel-track { flex-direction: column; gap: 17px; }
  /* mobile.css keeps the first three rows and the list is static, so the comp's pager
     would not move anything (see design/DEVIATIONS.md) */
  .jp__rel .dots { display: none; }
  /* the related rows keep mobile.css's 120px thumb row — its own cap offsets, not the desktop card's */
  .jp .bcard__cat { margin-top: 12px; }               /* cap +15 */
  .jp .bcard__title { margin-top: 5.2px; }            /* cap +34 */
  .jp .bcard__excerpt { margin-top: 2.4px; }          /* cap +61 */
}