/**
 * Project page: "პროექტის შესახებ".
 *
 * Frame and heading come from base.css (.deka-section, .deka-section-head).
 *
 * About block — phones and tablets: one column, heading over the write-up.
 * From 64rem: the heading in a 5/12 column that stays in view, the write-up in
 * 7/12. The heading is sticky inside the about block only, so it never rides
 * over the spec band below.
 *
 * Spec band — one ruled row per project detail, the frame's full width. Each
 * row: a mono index and the display title (plus the lead sentence when the
 * detail is a list) over the body, or beside it from 75rem on the about
 * block's own 5/12 + 7/12 split, so the tiles start on the write-up's left
 * edge. Bodies:
 *  - tiles: the list items as a ruled grid, close to the benefits list — a
 *    line over the grid, one between tile rows, one between columns, the
 *    first column flush left — but read top-down (number, then text) with no
 *    fixed height, since items differ in length and a bottom-set line would
 *    leave a hole above the short ones. The last row has no line under it:
 *    the next row's own rule follows. Two columns; one on phones, number
 *    beside text.
 *  - figures: up to three figures in the display face, ruled like the tiles
 *    and sized with their cell, over the paragraph that states them.
 *  - text: the paragraphs at lead size.
 */

.deka-project-intro {
  --deka-intro-rule: var(--deka-divider-warm);
}

/* ==========================================================================
   About block
   ========================================================================== */

.deka-project-intro__text {
  max-width: 44rem;
  font-family: var(--deka-font-body);
  font-size: 1.125rem; /* 18 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.7;
  color: var(--deka-text);
}

.deka-project-intro__text p { margin: 0 0 1.25em; }
.deka-project-intro__text > :last-child { margin-bottom: 0; }

/* A list in the write-up: small square markers instead of discs, the
   paragraphs' rhythm. Scoped to <ul> so a numbered list keeps its numbers. */
.deka-project-intro__text ul {
  margin: 0 0 1.25em;
  padding: 0;
  list-style: none;
}

.deka-project-intro__text ul > li {
  position: relative;
  padding-left: 1.25rem;
}

.deka-project-intro__text li + li { margin-top: var(--deka-space-2xs); }
.deka-project-intro__text li > p { margin: 0; }

/* Centred on the first line: half the line box less half the square. */
.deka-project-intro__text ul > li::before {
  content: '';
  position: absolute;
  top: calc(0.85em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--deka-action);
}

/* ==========================================================================
   Spec band
   ========================================================================== */

.deka-project-intro__specs {
  display: grid;
  gap: clamp(2rem, 1.25rem + 2vw, 3.5rem); /* 32 → 56 */
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); /* 40 → 64 */
}

/* No write-up: the heading is the about block's only child, and the band's
   own top margin is the gap under it. */
.deka-project-intro__head:last-child { margin-bottom: 0; }

.deka-project-intro__spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--deka-space-md);
  border-top: 1px solid var(--deka-intro-rule);
}

/* --- Row head: index, title, lead ------------------------------------------ */

.deka-project-intro__spec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--deka-space-xs);
  padding-top: var(--deka-space-md);
}

.deka-project-intro__spec-index,
.deka-project-intro__tile-index {
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--deka-text-muted);
}

.deka-project-intro__spec-title {
  max-width: 22em;
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); /* 20 → 26, a step under the section title */
  font-weight: var(--deka-weight-medium);
  line-height: 1.15;
  color: var(--deka-text);
}

.deka-project-intro__spec-lead {
  max-width: 34rem;
  margin-top: var(--deka-space-2xs);
  font-family: var(--deka-font-body);
  font-size: 1rem;
  font-weight: var(--deka-weight-regular);
  line-height: 1.6;
  color: var(--deka-text-muted);
}

/* Paragraph rhythm in every wysiwyg part of the band. */
:is(.deka-project-intro__spec-lead, .deka-project-intro__spec-text, .deka-project-intro__spec-note) p { margin: 0 0 0.75em; }
:is(.deka-project-intro__spec-lead, .deka-project-intro__spec-text, .deka-project-intro__spec-note) > :last-child { margin-bottom: 0; }

/* Brand names and figures picked out of the copy. */
.deka-project-intro__specs strong {
  font-weight: var(--deka-weight-semibold);
  color: var(--deka-text);
}

/* --- Tiles ----------------------------------------------------------------- */

.deka-project-intro__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--deka-intro-rule);
}

.deka-project-intro__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--deka-space-sm);
  padding: var(--deka-space-md);
  border-bottom: 1px solid var(--deka-intro-rule);
}

.deka-project-intro__tile:nth-child(2n) { border-left: 1px solid var(--deka-intro-rule); }
.deka-project-intro__tile:nth-child(2n + 1) { padding-left: 0; }

/* The last row (one tile, or an odd tile and the one after it) closes open:
   the gap and the next row's rule follow, not a second line. A little
   padding stays so the column rule runs on past the text. */
.deka-project-intro__tile:last-child,
.deka-project-intro__tile:nth-child(2n + 1):nth-last-child(2) {
  padding-bottom: var(--deka-space-sm);
  border-bottom: 0;
}

/* The number, after a small square: the tiles are the list's items, so they
   take the write-up's list marker. */
.deka-project-intro__tile-index {
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-2xs);
}

.deka-project-intro__tile-index::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--deka-action);
}

.deka-project-intro__tile-text {
  max-width: 34rem;
  font-family: var(--deka-font-body);
  font-size: 1.0625rem; /* 17 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.45;
  color: var(--deka-text);
}

.deka-project-intro__tile-main { display: block; }

/* Sentences after the first: the detail behind the headline. */
.deka-project-intro__tile-note {
  display: block;
  margin-top: var(--deka-space-2xs);
  font-size: 0.9375rem; /* 15 */
  line-height: 1.55;
  color: var(--deka-text-muted);
}

/* An item the author wrote as blocks (paragraphs, a nested list). */
.deka-project-intro__tile-text :is(p, ul, ol) { margin: 0; }
.deka-project-intro__tile-text p + p { margin-top: 0.5em; }

.deka-project-intro__tile-text :is(ul, ol) {
  margin-top: 0.5em;
  padding-left: 1.1em;
  font-size: 0.9375rem;
  color: var(--deka-text-muted);
}

/* After the tiles: whatever paragraph followed the list. */
.deka-project-intro__spec-note {
  max-width: 44rem;
  padding-top: var(--deka-space-md);
  font-family: var(--deka-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--deka-text-muted);
}

/* --- Figures --------------------------------------------------------------- */

/* As many equal columns as figures (one to three). */
.deka-project-intro__figures {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-top: 1px solid var(--deka-intro-rule);
}

.deka-project-intro__figure {
  container-type: inline-size;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: var(--deka-space-md) var(--deka-space-md) var(--deka-space-lg);
  border-bottom: 1px solid var(--deka-intro-rule);
}

.deka-project-intro__figure + .deka-project-intro__figure { border-left: 1px solid var(--deka-intro-rule); }
.deka-project-intro__figure:first-child { padding-left: 0; }

/* Sized with the cell (container query units), so a narrow cell takes a
   smaller figure and one on a wide screen is not timid. Never wraps; three on
   a phone go two to a row (end of file). */
.deka-project-intro__figure-value {
  font-family: var(--deka-font-display);
  font-size: 3rem; /* without container query units */
  font-size: clamp(2rem, 19cqi, 3.5rem); /* 32 → 56 */
  font-weight: var(--deka-weight-regular);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  white-space: nowrap;
  color: var(--deka-text);
}

/* --- Paragraph bodies ------------------------------------------------------ */

.deka-project-intro__spec-text {
  max-width: 44rem;
  padding-top: var(--deka-space-md);
  font-family: var(--deka-font-body);
  font-size: 1.0625rem;
  font-weight: var(--deka-weight-regular);
  line-height: 1.65;
  color: var(--deka-text-muted);
}

/* The paragraphs are the whole body: set like the write-up above. */
.deka-project-intro__spec-text--lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--deka-text);
}

/* ==========================================================================
   Layout
   ========================================================================== */

@media (min-width: 64rem) {
  .deka-project-intro__about {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--deka-space-2xl);
    align-items: start;
  }

  /* Keeps the project's name beside the text while a long write-up scrolls. */
  .deka-project-intro__head {
    position: sticky;
    top: calc(var(--deka-header-height, 5rem) + var(--deka-space-lg));
    margin-bottom: 0;
  }
}

/* Head beside body, on the about block's split. The row's own rule runs over
   the tiles and figures here, so theirs goes. */
@media (min-width: 75rem) {
  .deka-project-intro__spec {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--deka-space-2xl);
  }

  .deka-project-intro__spec :is(.deka-project-intro__tiles, .deka-project-intro__figures) { border-top: 0; }

  .deka-project-intro__spec-head { padding-right: var(--deka-space-lg); }
}

/* Phones: tiles become plain rows, number beside text. */
@media (max-width: 40rem) {
  .deka-project-intro__text { font-size: 1.0625rem; } /* 17 */

  .deka-project-intro__tiles { grid-template-columns: minmax(0, 1fr); }

  .deka-project-intro__tile,
  .deka-project-intro__tile:nth-child(n) {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
    gap: 0;
    padding: var(--deka-space-sm) 0;
    border-left: 0;
  }

  /* One column: only the very last tile ends the list. */
  .deka-project-intro__tile:nth-child(2n + 1):nth-last-child(2) { border-bottom: 1px solid var(--deka-intro-rule); }
  .deka-project-intro__tile:last-child { padding-bottom: 0; }

  /* On the text's first line. */
  .deka-project-intro__tile-index { margin-top: 0.4rem; }

  .deka-project-intro__tile-text { font-size: 1rem; }

  .deka-project-intro__figure {
    padding: var(--deka-space-sm) var(--deka-space-sm) var(--deka-space-md);
  }

  .deka-project-intro__figure:first-child { padding-left: 0; }

  /* Three figures: two to a row (a third of a phone is too narrow for
     "40 000+"), the third starting the next row flush left. */
  .deka-project-intro__figures--three {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deka-project-intro__figures--three .deka-project-intro__figure:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .deka-project-intro__spec-text--lead { font-size: 1.0625rem; }
}