/*
 * The Theme Kit in Mosaic's look. The kit (themes/_shared/assets/css/kit.css) draws every block the theme has no
 * template for, and every module section; this file sets its tokens and the look of its parts, linked after kit.css, so
 * the values here win. How whole sections are laid out as clusters of tiles (a big tile beside small ones, a picture
 * tile beside a words tile) is in theme.css, which knows each block's type.
 *
 * The look: every card is a tile, a soft rounded rectangle with a hairline instead of a shadow, set close to its
 * neighbours. Pictures inside a tile are inset a little and rounded again, like a photo in an app's card. Headings are a
 * heavy, tightly set grotesque; numbers are big and friendly. Buttons are pills; the main one ends in a round chip with
 * an arrow. Small labels are chips with a tiny square in the accent colour.
 *
 * Rules for this file: it loads nothing, no picture, font or address of any kind (the kit inlines it into module
 * previews; kit_components.test.php fails for one, and also for these words written in a comment);
 * colours only through the palette tokens the kit already reads (--text-primary, --surface, --primary, ...) or
 * color-mix() of them; weights only through the layout's --mosaic-heading-weight and --mosaic-body-strong.
 *
 * --kit-radius and --kit-button-radius are repeated in this theme's line of the shared button table
 * (themes/_shared/assets/css/resilience.css, --chrome-radius and --chrome-button-radius) so the cookie notice and the
 * phone action bar match the theme's own cards and buttons: theme-chrome.test.mjs compares the two. Change both.
 */

.kit-root {
  --kit-radius: 1.5rem;
  --kit-radius-sm: 0.875rem;
  --kit-button-radius: 999px;
  --kit-input-radius: 0.875rem;
  --kit-media-radius: 1.5rem;
  --kit-chip-radius: 999px;
  --kit-heading-weight: var(--mosaic-heading-weight, 800);
  --kit-heading-tracking: calc(-0.03em * var(--mosaic-tight, 1));
  --kit-button-weight: var(--mosaic-body-strong, 600);
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.005em;
  --kit-focus: var(--accent-ink, #5133d8);
  --kit-star: var(--accent-ink, #5133d8);
  --kit-shadow: none;
  --kit-shadow-hover: 0 18px 40px -22px color-mix(in srgb, var(--text-primary, #17161f) 45%, transparent);
  --kit-card-pad: clamp(1.25rem, 0.95rem + 1vw, 1.875rem);
  --kit-gap-medium: clamp(0.625rem, 0.45rem + 0.6vw, 1rem);
  --kit-gap-large: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  --kit-gutter: clamp(0.75rem, 2.6vw, 2rem);
  --kit-width-normal: 76rem;
  --kit-width-narrow: 46rem;
  --kit-width-wide: 90rem;
  --kit-pad-normal: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --kit-pad-compact: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --kit-pad-spacious: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  --kit-measure: 62ch;
  /* The hairline round a tile: a faint shade of the text, so it shows on a white tile on a light page and on a dark one. */
  --kit-tile-line: color-mix(in srgb, var(--kit-text) 8%, transparent);
  /* The gap between tiles: the same in every cluster, so a page reads as one mosaic. */
  --kit-tile-gap: clamp(0.625rem, 0.45rem + 0.6vw, 1rem);
}

/* ------------------------------------------------------------------ Type */

/* Headings: a heavy grotesque set tight. Sizes are chosen for ordinary words at 320 px (a word of 14 letters fits the
   first heading inside a tile there); the shared script is only the net for a longer one (cms/THEME_DEVELOPMENT.md,
   rule 1). The line stays at 1.06 or more: a heading is never in a box that clips, and the marks of Š and Ų keep
   clear of the line above. */
.kit-heading {
  font-family: var(--font-heading, sans-serif);
  line-height: 1.1;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  letter-spacing: calc(-0.04em * var(--mosaic-tight, 1));
  line-height: 1.06;
}

.kit-heading--2 {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.25rem);
  letter-spacing: calc(-0.035em * var(--mosaic-tight, 1));
  line-height: 1.08;
}

.kit-heading--3 {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  letter-spacing: calc(-0.02em * var(--mosaic-tight, 1));
  line-height: 1.22;
}

.kit-heading--4 {
  font-size: 1.0625rem;
  letter-spacing: calc(-0.01em * var(--mosaic-tight, 1));
}

.kit-heading.kit-heading--long {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  letter-spacing: calc(-0.02em * var(--mosaic-tight, 1));
  line-height: 1.3;
}

.kit-text--lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}

/* Small labels: a chip with a tiny square of the accent colour, the theme's tile in miniature. In the body face, not in
   capitals (capitals make long Lithuanian words much wider). */
.kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kit-text) 7%, transparent);
  color: var(--kit-text);
  font-size: 0.8125rem;
  font-weight: var(--mosaic-body-strong, 600);
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.35;
  text-transform: none;
}

.kit-eyebrow::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.15rem;
  background: var(--kit-accent);
}

.kit-card__eyebrow {
  width: fit-content;
  max-width: 100%;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kit-text) 7%, transparent);
  color: var(--kit-text);
  font-size: 0.75rem;
  font-weight: var(--mosaic-body-strong, 600);
  letter-spacing: 0.005em;
  line-height: 1.4;
  text-transform: none;
}

.kit-link {
  color: var(--kit-accent-text);
  font-weight: var(--mosaic-body-strong, 600);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}

.kit-rich-text a {
  color: var(--kit-accent-text);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ Buttons */

/* Pills. A label may take two lines; it never runs out of the button. The main button's round chip with an arrow is
   drawn in theme.css, with the theme's own buttons (it needs nothing from outside, but a module preview shows the
   plain pill). */
.kit-button {
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.9375rem;
  letter-spacing: calc(-0.005em * var(--mosaic-tight, 1));
  line-height: 1.25;
}

/* A small button (a row of review links, Next under a list of posts) is still 40 px tall: the kit's own 36 px is under
   what a thumb needs on a phone (verify-theme-stress.mjs, button-small). */
.kit-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.875rem;
}

/* The second button is a soft pill of the text colour, not an outline: it stays readable on a tile of any tint and on a
   coloured band, where the kit turns --kit-text to the band's own ink. */
.kit-button--secondary {
  border-color: transparent;
  background: color-mix(in srgb, var(--kit-text) 8%, transparent);
  color: var(--kit-text);
}

.kit-button--secondary:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--kit-text) 14%, transparent);
  color: var(--kit-text);
}

.kit-button--ghost {
  color: var(--kit-text);
}

.kit-button-group {
  gap: 0.625rem;
}

/* ------------------------------------------------------------------ Cards are tiles */

/* A card is a tile: rounded, flat, a hairline instead of a border and no shadow. A row of them is set close together
   (theme.css gives the clusters their sizes and tints). */
.kit-card {
  border-radius: var(--kit-radius);
}

.kit-card--surface,
.kit-card--outline {
  border-color: var(--kit-tile-line);
  background: var(--kit-surface);
  box-shadow: none;
}

.kit-card__content {
  gap: 0.5rem;
}

/* A picture in a tile is inset a little and rounded again, like a photo in an app's card. */
.kit-card:not(.kit-card--plain) > .kit-card__media {
  margin: 0.5rem 0.5rem 0;
  border-radius: calc(var(--kit-radius) - 0.5rem);
}

.kit-card__title {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  letter-spacing: calc(-0.02em * var(--mosaic-tight, 1));
  line-height: 1.22;
}

.kit-card__meta {
  font-size: 0.8125rem;
}

/* A tile that is a link rises on a soft shadow, and its title takes the accent's ink. */
.kit-card--linked:hover {
  border-color: var(--kit-tile-line);
}

.kit-card--linked.kit-card--surface:hover,
.kit-card--linked.kit-card--outline:hover {
  box-shadow: var(--kit-shadow-hover);
}

.kit-card--linked:hover .kit-card__link {
  color: var(--kit-text);
}

.kit-grid.kit-gap--large:has(> .kit-card),
.kit-grid.kit-gap--medium:has(> .kit-card) {
  --kit-gap: var(--kit-tile-gap);
}

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

/* Big friendly numbers. theme.css sets them larger in the big tiles of a cluster; these hold "1500 m²" on one line in a
   quarter of a desktop row and in half of a phone's. */
.kit-stat {
  gap: 0.35rem;
}

.kit-stat__value {
  font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.1rem);
  letter-spacing: calc(-0.045em * var(--mosaic-tight, 1));
  line-height: 1.05;
}

.kit-stat__suffix {
  margin-inline-start: 0.04em;
  color: inherit;
}

.kit-stat__label {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.kit-price__amount {
  letter-spacing: calc(-0.03em * var(--mosaic-tight, 1));
}

/* ------------------------------------------------------------------ Questions, lists, quotes */

/* Each question is a tile of its own; its chevron stands in a small round button. The question and its answer start at
   the same place (faq-rows.test.mjs). */
.kit-accordion {
  display: grid;
  gap: 0.5rem;
  border-top: 0;
}

.kit-accordion__item {
  border: 1px solid var(--kit-tile-line);
  border-radius: 1.25rem;
  background: var(--kit-surface);
}

.kit-accordion__title {
  padding: 1.05rem 1.1rem 1.05rem 1.35rem;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  font-weight: var(--mosaic-heading-weight, 800);
  letter-spacing: calc(-0.012em * var(--mosaic-tight, 1));
  line-height: 1.35;
}

.kit-accordion__title:hover {
  color: var(--kit-text);
}

.kit-accordion__chevron {
  box-sizing: content-box;
  padding: 0.35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kit-text) 7%, transparent);
  color: var(--kit-text);
}

.kit-accordion__item[open] .kit-accordion__chevron {
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

.kit-accordion__body {
  padding: 0 1.35rem 1.25rem;
}

/* A quotation is upright: no font palette loads slanted letters, and a browser's own slant is a fake. No bar at its side
   either; the tile it stands in frames it. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-style: normal;
  font-weight: var(--mosaic-body-strong, 600);
  letter-spacing: calc(-0.01em * var(--mosaic-tight, 1));
  line-height: 1.5;
}

.kit-quote__author {
  font-weight: var(--mosaic-body-strong, 600);
}

.kit-list--menu .kit-list-item__title,
.kit-list--menu .kit-list-item__meta {
  font-weight: var(--mosaic-body-strong, 600);
}

.kit-chip {
  padding: 0.2rem 0.7rem;
  border-color: transparent;
  font-weight: var(--mosaic-body-strong, 600);
}

/* Avatars are rounded squares, the tile's shape. */
.kit-avatar {
  border-radius: 32%;
}

/* ------------------------------------------------------------------ Forms */

.kit-field__label {
  font-size: 0.875rem;
  font-weight: var(--mosaic-body-strong, 600);
}

.kit-input {
  min-height: 3rem;
  border-color: color-mix(in srgb, var(--kit-text) 15%, transparent);
  background-color: color-mix(in srgb, var(--kit-text) 3%, var(--kit-surface));
}

.kit-input:hover {
  border-color: color-mix(in srgb, var(--kit-text) 32%, transparent);
}

.kit-input:focus {
  border-color: var(--kit-focus);
  background-color: var(--kit-surface);
}

/* ------------------------------------------------------------------ Pictures and frames */

.kit-picture.kit-rounded,
.kit-frame,
.kit-video,
.kit-compare__frame {
  border-radius: var(--kit-media-radius);
}

.kit-frame,
.kit-video {
  overflow: hidden;
}

.kit-carousel__button,
.kit-slideshow__button {
  border-color: var(--kit-tile-line);
  background: var(--kit-surface);
  color: var(--kit-text);
}

.kit-carousel__progress {
  height: 4px;
  border-radius: 999px;
}