/* =============================================================================
   LONDON SPOT: page.css
   The four information pages: about, contact, terms, privacy.   [info unit]
   -----------------------------------------------------------------------------
   Load order:  base.css → layout.css → components.css → page.css

   Tokens only (design.md §2 to §4 and the layout system of §14). Mobile first:
   every media query is a min-width enhancement of the 320px layout. Nothing
   here is sized in ch: a ch is the zero of whichever face is painting, and it
   changes while Google Sans arrives (design.md §3 "Measure", SH13). Links take
   the one link style of base.css (.link, .link--solo); this file draws none.
   Every class is prefixed .pg- so nothing can collide with the shell.

     0  Frame
     1  Page head
     2  Two columns (from 1024px)
     3  Prose
     4  Clause numbers (terms)
     5  Contents (terms, privacy)
     6  Detail rows (contact, the about visit block)
     7  Contact actions
     8  About
     9  Related pages
   ========================================================================== */


/* ── 0. FRAME ──────────────────────────────────────────────────────────────
   One frame for the four pages, and the same one every other page stands in
   (design.md §14.2, §14.6): the crumbs, the head and the text start on the
   container's edge. The pages used to centre a narrower shell and put their
   crumbs at x 391 (about, contact) and x 251 (terms, privacy) at 1440px while
   the catalog's stood at 32 (audit F4). The page adds no padding at either
   end: the crumb bar carries its own air, and the footer owns the page end
   (--gap-page-end, design.md §14.5). Every block of text is at most the
   measure wide, and the measure is in em.
   ---------------------------------------------------------------------- */
:root{
  /* the second column from 1024px (design.md §14.3, §14.11) */
  --pg-lane-w:232px;
}

.pg-head,
.pg-cols > *,
.pg-more{ max-width:var(--measure) }


/* ── 1. PAGE HEAD ──────────────────────────────────────────────────────────
   design.md §14.6: the h1 directly under the crumb row, with no margin of
   its own, exactly as the catalogue and the product page: the crumb row's
   own padding-block (--s-1 above, --s-2 below, layout.css) is the whole of
   the gap, and the head adds nothing on top of it. An added --s-1 here once
   put the info pages' h1 4px lower than the catalogue's under the same
   crumb row (117/188/241 against 113/184/237, B9/S7); removed. Then the
   lede and the edit stamp --gap-head-in apart, then --gap-head-out to the
   page's first block. No rule under the head: space separates it.
   ---------------------------------------------------------------------- */
.pg-head{
  margin-bottom:var(--gap-head-out);
}
.pg-head > * + *{ margin-top:var(--gap-head-in) }

/* The lede role (design.md §3): 16px on phones, which is body size, 18px from
   768px. On terms it is the document's title line, and at 18px on a phone it
   took four lines before the contents (audit F6). */
.pg-lede{
  font-size:var(--t-lede); line-height:var(--lh-lede);
  color:var(--ink-2);
}

/* The meta role: the date a legal page was last edited. */
.pg-stamp{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2);
  font-size:var(--t-small-ka); line-height:var(--lh-small-ka);
  color:var(--ink-3);
}


/* ── 2. TWO COLUMNS ────────────────────────────────────────────────────────
   design.md §14.3: one column at the measure below 1024px; from 1024px a
   second column of --pg-lane-w beside it, --s-12 away. It carries the
   contents on terms and privacy, and the visit block and the related pages
   on about and contact. Below 1024px the second column's content follows
   the text, except the contents, which leads it.
   ---------------------------------------------------------------------- */
.pg-side{ margin-top:var(--gap-tight) }
.pg-side > * + *{ margin-top:var(--gap-tight) }

@media (min-width:1024px){
  .pg-cols{
    display:grid;
    grid-template-columns:minmax(0,var(--measure)) var(--pg-lane-w);
    column-gap:var(--s-12);
    align-items:start;
  }
  .pg-cols > *{ grid-row:1; grid-column:1 }
  .pg-cols > .pg-toc,
  .pg-cols > .pg-side{ grid-column:2 }
  .pg-side{ margin-top:0 }
}


/* ── 3. PROSE ──────────────────────────────────────────────────────────────
   design.md §14.11. Body is the 16px / 1.65 pair of base.css and is never
   overridden: 29 of the 33 everyday mkhedruli letters break the x-height
   band, so a Georgian paragraph at Latin leading reads as a wall.
   Paragraphs --s-4 apart; an h2 has --s-10 above it and --s-6 of padding
   over a hairline, so a new clause shows before a word of it is read; list
   items --s-2 apart. Balance on headings and pretty on paragraphs come from
   base.css. No scroll margin on the headings: html's scroll padding lands
   an anchored heading --s-3 under the chrome, and a margin here doubled it
   to 101px (audit F17).
   ---------------------------------------------------------------------- */
.pg-prose > * + *{ margin-top:var(--s-4) }

.pg-prose h2{
  margin-top:var(--s-10);
  padding-top:var(--s-6);
  border-top:var(--bw-1) solid var(--bd);
}
.pg-prose > h2:first-child{ margin-top:0; padding-top:0; border-top:0 }

.pg-prose p{ overflow-wrap:break-word }

/* Emphasis is 600, the body strong role (design.md §3). The lawyer's <b>
   rendered at 700, the heading weight, and clause 5.3, bold whole, read as a
   heading (audit F21). */
.pg-prose :is(b, strong){ font-weight:600 }

.pg-prose ul{ padding-inline-start:var(--s-5); list-style:disc }
.pg-prose li + li{ margin-top:var(--s-2) }
.pg-prose li::marker{ color:var(--bd-3) }


/* ── 4. CLAUSE NUMBERS ─────────────────────────────────────────────────────
   Terms types its clause numbers („5.5. ") at the start of each paragraph.
   Each one sits in a span (markup only, the words unchanged), 600 and
   tabular, and every clause has an id (#t5-5) the product page and contact
   can link to. From 768px the numbers hang in their own column, so 4.1 to
   13.2 stand in one line down the page and the text keeps one edge beside
   them (audit F7). The column is --s-12: design.md §14.11 names it 4ch, and
   §3 rules out ch; 48px holds „13.2." at 600 with air to spare. The span
   holds the space after the number, so the text starts on the column's
   edge on the first line as on the others.
   ---------------------------------------------------------------------- */
.pg-cl{ font-weight:600 }

@media (min-width:768px){
  .pg-prose--num > :is(p, ul){ padding-inline-start:var(--s-12) }
  .pg-prose--num .pg-cl{
    display:inline-block;
    inline-size:var(--s-12);
    margin-inline-start:calc(var(--s-12) * -1);
    /* the space after the number is the span's last character; an
       inline-block trims trailing whitespace at its own edge, so copied
       text and the accessibility tree read it glued to the next word
       (verify-r1 V2). white-space:pre keeps it. */
    white-space:pre;
  }
}


/* ── 5. CONTENTS ───────────────────────────────────────────────────────────
   design.md §14.11. Terms runs to 21 screens at 320px and privacy to 10,
   with the contents only at the top (audits F2, F6, M21):
     below 768px   a <details> folded to its summary: the label, the number
                   of sections and a chevron. Clause 1 starts on the first
                   screen at 320px;
     from 768px    open. CSS opens it: the summary steps aside and the list's
                   own heading shows. A browser without ::details-content
                   keeps the disclosure at every width;
     from 1024px   a sticky lane beside the text, with a hairline instead of a
                   card, rows sized to their text under a fine pointer so all
                   13 fit at 1024 and 1280px (audit F18), and the section in
                   :target marked by weight.
   Below 1024px a return link („სარჩევი") closes every section. It targets
   the list inside the <details>, and a fragment link into a closed
   <details> opens it, so the way back is one tap.
   The rows are nav rows (design.md §2): --ink, a --page-2 wash under a
   pointer, --bd pressed. Their wash reaches --s-2 past the text, which
   cancels it with a negative margin and so stands on the column's edge.
   ---------------------------------------------------------------------- */
.pg-toc{ border-block:var(--bw-1) solid var(--bd) }
.pg-cols > .pg-toc{ margin-bottom:var(--gap-tight) }

/* the summary: the compact disclosure trigger of design.md §6, 48px */
.pg-toc__s{
  display:flex; align-items:center; gap:var(--s-2);
  min-height:48px;
  padding-block:var(--s-2);
  list-style:none;
  cursor:pointer;
  font-weight:600; line-height:var(--lh-ui);
  color:var(--ink);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.pg-toc__s::-webkit-details-marker{ display:none }
.pg-toc__n{
  font-size:var(--t-small-ka); line-height:var(--lh-ui);
  font-weight:400; color:var(--ink-3);
}
.pg-toc__chev{
  margin-inline-start:auto;
  color:var(--ink-2);
  transition:transform var(--d-ui) var(--ease);
}
.pg-toc[open] .pg-toc__chev{ transform:rotate(180deg) }
@media (hover:hover){
  .pg-toc__s:hover,
  .pg-toc__s:hover .pg-toc__chev{ color:var(--ink-link) }
}
.pg-toc__s:active{ color:var(--slate-900) }

/* the list's heading: the group label role (design.md §3). The summary says
   it while the list is folded. */
.pg-toc__h{
  display:none;
  padding-block:var(--s-4) var(--s-1);
  font-size:var(--t-small-ka); line-height:var(--lh-ui);
  font-weight:600; color:var(--ink-2);
}

.pg-toc ol{ padding-block-end:var(--s-2) }

.pg-toc a{
  display:block;
  min-height:44px;
  padding:var(--s-3) var(--s-2);
  margin-inline:calc(var(--s-2) * -1);
  border-radius:var(--r-sm);
  font-size:var(--t-small-ka); line-height:var(--lh-small-ka);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
@media (hover:hover){
  .pg-toc a:hover{ background:var(--page-2); color:var(--ink-strong) }
}
.pg-toc a:active{ background:var(--bd) }

/* terms: the section number in its own column, wrapped lines under the name */
.pg-toc--num a{ padding-inline-start:calc(var(--s-2) + var(--s-8)) }
.pg-toc__i{
  display:inline-block;
  inline-size:var(--s-8);
  margin-inline-start:calc(var(--s-8) * -1);
  color:var(--ink-3);
  /* same trailing-space trim as .pg-cl above (verify-r1 V2) */
  white-space:pre;
}

/* the section being read, when it is the page's target */
.pg-cols:has(:is(#t1, [id^="t1-"]):target) a[href="#t1"],
.pg-cols:has(:is(#t2, [id^="t2-"]):target) a[href="#t2"],
.pg-cols:has(:is(#t3, [id^="t3-"]):target) a[href="#t3"],
.pg-cols:has(:is(#t4, [id^="t4-"]):target) a[href="#t4"],
.pg-cols:has(:is(#t5, [id^="t5-"]):target) a[href="#t5"],
.pg-cols:has(:is(#t6, [id^="t6-"]):target) a[href="#t6"],
.pg-cols:has(:is(#t7, [id^="t7-"]):target) a[href="#t7"],
.pg-cols:has(:is(#t8, [id^="t8-"]):target) a[href="#t8"],
.pg-cols:has(:is(#t9, [id^="t9-"]):target) a[href="#t9"],
.pg-cols:has(:is(#t10, [id^="t10-"]):target) a[href="#t10"],
.pg-cols:has(:is(#t11, [id^="t11-"]):target) a[href="#t11"],
.pg-cols:has(:is(#t12, [id^="t12-"]):target) a[href="#t12"],
.pg-cols:has(:is(#t13, [id^="t13-"]):target) a[href="#t13"],
.pg-cols:has(#p1:target) a[href="#p1"],
.pg-cols:has(#p2:target) a[href="#p2"],
.pg-cols:has(#p3:target) a[href="#p3"],
.pg-cols:has(#p4:target) a[href="#p4"],
.pg-cols:has(#p5:target) a[href="#p5"],
.pg-cols:has(#p6:target) a[href="#p6"],
.pg-cols:has(#p7:target) a[href="#p7"]{ font-weight:600; color:var(--ink-strong) }

/* the return link that closes every section below 1024px: a standalone
   link, 44px, end-aligned, the label role */
.pg-back{ display:flex; justify-content:flex-end }
.pg-prose > .pg-back{ margin-top:var(--s-2) }
.pg-back .link{ font-size:var(--t-small-ka); line-height:var(--lh-ui) }
.pg-back .icon{ transform:rotate(180deg) }

@media (min-width:768px){
  @supports selector(::details-content){
    .pg-toc::details-content{ content-visibility:visible }
    .pg-toc > .pg-toc__s{ display:none }
    .pg-toc__h{ display:block }
  }
}

@media (min-width:1024px){
  .pg-cols > .pg-toc{
    position:sticky;
    top:calc(var(--chrome-top) + var(--s-6));
    max-height:calc(100dvh - var(--chrome-top) - var(--s-12));
    overflow-y:auto;
    margin-bottom:0;
    padding-inline:var(--s-4) var(--s-2);
    border-block:0;
    border-inline-start:var(--bw-1) solid var(--bd);
  }
  .pg-toc__h{ padding-block-start:0 }
  /* the lane scrolls when it must, and a scroller clips a ring drawn outside */
  .pg-toc :focus-visible{ outline-offset:var(--ring-in) }
  .pg-back{ display:none }
}
@media (min-width:1024px) and (pointer:fine){
  .pg-toc a{ min-height:0; padding-block:var(--s-1) }
}


/* ── 6. DETAIL ROWS ────────────────────────────────────────────────────────
   Contact details, and the about page's visit block, which reuses them. A
   list of facts is a definition list with a hairline between rows, never a
   row of cards. From 480px the label takes a column as wide as the longest
   label in either language (a subgrid, so every row shares it; it was a
   fixed 172px). In the 232px lane the label stays above its value.
   A standalone link in a row is 44px tall (design.md §6 "Links"; it was
   20px, audit F1): its target reaches into the row's padding, so the row
   keeps the height of a text row.
   ---------------------------------------------------------------------- */
.pg-rows{ border-top:var(--bw-1) solid var(--bd) }
.pg-rows > div{
  display:grid; row-gap:var(--s-1);
  padding-block:var(--s-4);
  border-bottom:var(--bw-1) solid var(--bd);
}
.pg-rows dt{
  font-size:var(--t-small-ka); line-height:var(--lh-small-ka);
  font-weight:500; color:var(--ink-2);
}
.pg-rows dd{ overflow-wrap:break-word }
.pg-rows .link--solo{ margin-block:calc((var(--t-body) * var(--lh-body) - 44px) / 2) }

@media (min-width:480px){
  .pg-rows{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    column-gap:var(--s-8);
  }
  .pg-rows > div{
    grid-column:1 / -1;
    grid-template-columns:subgrid;
    align-items:baseline;
  }
}
@media (min-width:1024px){
  .pg-side .pg-rows{ display:block }
  .pg-side .pg-rows > div{ grid-template-columns:none }
}


/* ── 7. CONTACT ACTIONS ────────────────────────────────────────────────────
   The contact page's primary action (design.md §14.14): a full-width call
   button with the number, the e-mail button under it, both 48px; from 480px
   side by side, each as wide as its label. The page's call was a 20px body
   link, the weakest of four copies of the number on the screen (audit F1).
   ---------------------------------------------------------------------- */
.pg-acts{
  display:grid; gap:var(--s-3);
  margin-bottom:var(--gap-tight);
}
@media (min-width:480px){
  .pg-acts{ display:flex; flex-wrap:wrap }
}

/* The call button's own label, below and from 768px (design.md §6 "Button",
   §14.14: every call button says "დარეკვა" below 768px and carries the
   number from 768px). Contact showed the number as its only visible label
   at every width, with the word hidden for screen readers only, unlike the
   product and catalog call buttons (S3). Written the same way catalog's
   .cx-tel and product's .buybox__call already are; a shared rule in
   components.css would let the three agree from one place (S3, filed for
   the shared pass). */
.pg-call .l-long{ display:none }
@media (min-width:768px){
  .pg-call .l-short{ display:none }
  .pg-call .l-long{ display:inline }
}

.pg-rows + .pg-prose{ margin-top:var(--s-6) }


/* ── 8. ABOUT ──────────────────────────────────────────────────────────────
   The letter's signature is a paragraph under the salutation, not a section
   heading (audit F11). The visit block is section 6's rows.
   ---------------------------------------------------------------------- */
.pg-prose > .pg-sign{ margin-top:var(--s-1); font-weight:600 }

/* privacy: the closing e-mail stands on its own line as a 44px link, 600 */
.pg-mail{ display:flex }


/* ── 9. RELATED PAGES ──────────────────────────────────────────────────────
   The way on from every information page: the other three, in the footer's
   order (audit F23). A wrapped row of standalone links under a hairline;
   in the lane from 1024px, one per line.
   ---------------------------------------------------------------------- */
.pg-more{
  padding-top:var(--s-6);
  border-top:var(--bw-1) solid var(--bd);
}
.pg-cols + .pg-more{ margin-top:var(--gap-tight) }
/* under the visit block's last hairline a second rule would only repeat it */
.pg-rows + .pg-more{ padding-top:0; border-top:0 }

.pg-more__h{
  margin-bottom:var(--s-1);
  font-size:var(--t-small-ka); line-height:var(--lh-ui);
  font-weight:600; color:var(--ink-2);
}

.pg-more ul{ display:flex; flex-wrap:wrap; column-gap:var(--s-6) }

@media (min-width:1024px){
  .pg-side .pg-more ul{ flex-direction:column }
}