/* Text pages — frame `Text pages` (347:12746), canvas 1728x1404. Offsets are frame-absolute
   values from design/figma-cache/frames/text-pages.json; the section starts at the header
   bottom (y72) and the footer sits at 1044, so the block is 972px tall at minimum.
   Text tops are ink tops (Figma cap-trims). */

.tp { position: relative; min-height: 972px; padding-bottom: 120px; }

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

/* ---- Tab strip: Group 5298 @295,144 — 16/20.832 UPPER ls1.6, gap 64 ---- */
.tp__tabs {
  position: absolute; left: 295px; top: 67.7px; margin: 0; padding: 0; list-style: none;
  display: flex; align-items: flex-start; gap: 64px;
}
.tp__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);
}
.tp__tab:hover { color: var(--accent); }
.tp__tab[aria-current] { color: var(--accent); font-weight: 400; }
.tp__tab[aria-current]::after {                       /* Vector 46 @295,163 — 185px rule */
  content: ""; position: absolute; left: 0; right: 0; top: 23.3px;
  height: 1px; background: var(--accent);
}

.tp__title {                                          /* 366:4575 @294,203 — 32/41.7 ls3.2 */
  position: absolute; left: 294px; top: 122.4px; width: 1140px; margin: 0;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}

.tp__body {                                           /* 366:4589 @294,265 — 1140x659, 16/24 */
  position: absolute; left: 294px; top: 187.1px; width: 1140px;
  color: var(--ink); font-weight: 400; font-size: 16px; line-height: 24px;
  overflow-wrap: break-word;        /* the withdrawal form's ____ blanks wrap on a phone */
}
.tp__body > :first-child { margin-top: 0; }
.tp__body p { margin: 0 0 24px; }
.tp__body h2, .tp__body h3 {
  margin: 32px 0 8px; color: var(--accent);
  font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.8px;
}
/* A legal document's „N.N.“ sub-section sits under its section: closer, one weight lighter. */
.tp__body h3 { margin-top: 24px; color: var(--ink); }
.tp__body ul, .tp__body ol { margin: 0 0 24px; padding-left: 20px; }
.tp__body li { margin-bottom: 4px; }
.tp__body img { display: block; max-width: 100%; height: auto; }   /* an editor image (PH-14) */
.tp__body a { color: var(--accent); text-decoration: underline; }
.tp__body a:hover { color: var(--ink); }

/* ---- New arrivals: no comp — the category grid's 4-up card row (home.css .pcard) ---- */
.tp-grid {
  position: absolute; left: 294px; top: 187.1px; width: 1140px;
  display: grid; grid-template-columns: repeat(4, 267px); gap: 24px;
}
.tp--grid { min-height: 972px; }
/* `/naujovės` has no comp of its own, and its grid is as tall as the catalogue makes it: kept
   absolute inside the frame's 972px it buried row 3 onwards under the footer at every width
   ≥768 (layout-audit: .pcard over .fcol__toggle / .site-footer). In FLOW at the same 294/187.1
   origin, so the ten seeded cards land exactly where they did and the section grows. */
@media (min-width: 768px) {
  /* the 187.1px is the SECTION's padding, not the grid's margin: a margin on the only in-flow
     child collapses out of `.tp` and takes the whole section down with it. The crumbs and the
     title are absolute against the padding box, so they do not move. The text body is in flow
     for the same reason — the client's legal documents run far past the frame's 972px. */
  .tp--grid, .tp:has(> .tp__body) { padding-top: 187.1px; }
  .tp--grid .tp-grid, .tp__body { position: static; margin: 0 0 0 294px; }
}
.tp__empty { position: absolute; left: 294px; top: 187.1px; margin: 0; color: var(--muted); }

/* ---- Mobile: no comp for this frame — a declared reflow (design/DEVIATIONS.md).
       One column inside 16px gutters; the tab strip scrolls sideways. ---- */
@media (max-width: 767px) {
  .tp { min-height: 0; padding: 16px 0 48px; }
  .tp__crumbs, .tp__tabs, .tp__title, .tp__body, .tp-grid, .tp__empty {
    position: static; left: auto; top: auto; width: auto; margin-inline: 16px;
  }
  /* 40px tap rows: each tab's unpainted 10px band above and below is paid back by the strip's
     own padding/margin, so no ink moves; the strip fades at the right edge while it scrolls.
     V18: four legal titles are 2.3x the phone's width, so a scroller always cut one mid-word —
     they wrap instead, every page in view; the 20px row gap is exactly the two 10px bands. */
  .tp__tabs {
    margin: 14px 0 0; padding: 10px 16px; gap: 20px 32px; flex-wrap: wrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tp__tabs::-webkit-scrollbar { display: none; }
  .js .tp__tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .js .tp__tabs.is-scroll-end { mask-image: none; }
  .tp__tab { white-space: nowrap; padding: 10px 0; margin: -10px 0; }
  .tp__tab[aria-current]::after { top: 33.3px; }
  .tp__title { margin: 22px 16px 0; font-size: 24px; line-height: 32px; letter-spacing: 2.4px; }
  .tp__body, .tp-grid, .tp__empty { margin-top: 24px; }
  .tp-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* /slapuku-politika: the pill that reopens the consent card's settings, above the policy text */
.tp__body .tp__consent { margin: 0 0 32px; }
.tp__body .tp__consent .btn-pill { text-decoration: none; }