/*
 * The Theme Kit in Vitrine'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 stock sections are hung on the wall (the heading at the left, a gallery on one line) is
 * in theme.css, which knows each block's type.
 *
 * The look: a white wall and objects hung on it. A photograph sits in a frame: a fine moulding in the palette's main
 * colour, a mat of the surface colour with the hairline of its bevel round the picture, and a soft shadow under it, as
 * if it hung a finger's width off the wall. The words under a picture are its wall label: a name in the body face's
 * strong weight over a few quiet lines, no box. A card without a picture is a label itself: a small mounted plate with
 * a hairline edge. Headings are the heading face's one light weight; titles of cards and items are the body face's
 * strong weight, the way a museum label names a work. The accent colour is the red dot a gallery puts beside a sold
 * work: a small dot before a label, a bullet, the current page. Square corners everywhere.
 *
 * 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, and black for shadows; weights only through the layout's --vitrine-heading-weight and
 * --vitrine-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: 0px;
  --kit-radius-sm: 0px;
  --kit-button-radius: 0px;
  --kit-input-radius: 0px;
  --kit-media-radius: 0px;
  --kit-chip-radius: 0px;
  --kit-heading-weight: var(--vitrine-heading-weight, 300);
  --kit-heading-tracking: -0.012em;
  --kit-button-weight: var(--vitrine-body-strong, 600);
  --kit-button-tracking: 0.01em;
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.14em;
  --kit-focus: var(--accent-ink, #a3241c);
  --kit-star: var(--accent-ink, #a3241c);
  --kit-shadow: none;
  --kit-shadow-hover: none;
  --kit-card-pad: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  --kit-gap-medium: clamp(1.25rem, 1rem + 1vw, 2rem);
  --kit-gap-large: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
  --kit-gutter: clamp(1.25rem, 5vw, 3rem);
  --kit-width-normal: 76rem;
  --kit-width-narrow: 46rem;
  --kit-pad-normal: clamp(4.5rem, 3rem + 5vw, 8.5rem);
  --kit-pad-compact: clamp(2.5rem, 2rem + 2vw, 4rem);
  --kit-pad-spacious: clamp(5.5rem, 3.5rem + 7vw, 10.5rem);
  --kit-measure: 62ch;
  /* The frame every photograph hangs in (theme.css has the same tokens for the theme's own pictures). The mat is the
     surface colour; on a band of the main or accent colour the kit turns --kit-surface into a tint of the band, so the
     mat follows. */
  --vitrine-frame: var(--primary, #1b1a19);
  --vitrine-frame-w: 0.3125rem;
  --vitrine-mat: clamp(0.65rem, 0.4rem + 1vw, 1.1rem);
  --vitrine-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 16px 30px -18px rgb(0 0 0 / 0.55);
  --vitrine-shadow-hover: 0 2px 4px rgb(0 0 0 / 0.12), 0 26px 40px -22px rgb(0 0 0 / 0.6);
}

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

/* Headings: the heading face's light weight, set a little tight. Sizes are chosen for ordinary words at 320 px (a word
   of 14 letters fits the first heading there); the shared script is only the net for a longer one
   (cms/THEME_DEVELOPMENT.md, rule 1). A line height under about 1.1 cuts marks in a box that clips. */
.kit-heading {
  font-family: var(--font-heading, serif);
  line-height: 1.12;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2.3rem, 1.5rem + 3.5vw, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kit-heading--2 {
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
  letter-spacing: -0.016em;
  line-height: 1.12;
}

/* A third-level heading names an item (a feature, a person, a price group): the label's name, in the body face's
   strong weight. A light display weight at this size would read as a hairline. */
.kit-heading--3,
.kit-heading--4 {
  font-family: var(--font-body, sans-serif);
  font-size: 1.0625rem;
  font-weight: var(--vitrine-body-strong, 600);
  letter-spacing: 0;
  line-height: 1.35;
}

.kit-heading.kit-heading--long {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.kit-heading--3.kit-heading--long {
  font-size: 1.0625rem;
}

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

/* Small labels: the body face in small spaced capitals after the red dot. Short words only stand here. */
.kit-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  color: var(--kit-text);
  font-size: 0.75rem;
  font-weight: var(--vitrine-body-strong, 600);
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.4;
}

.kit-text--center > .kit-eyebrow,
.kit-heading-group.kit-text--center .kit-eyebrow {
  justify-content: center;
}

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

/* A card's small label (a post's category, a plan's Recommended): the same spaced capitals after the red dot. A step's
   number is drawn its own way below. */
.kit-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--kit-text);
  font-size: 0.6875rem;
  font-weight: var(--vitrine-body-strong, 600);
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.kit-card__eyebrow::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--kit-accent);
}

.kit-steps .kit-card__eyebrow::before {
  display: none;
}

.kit-link {
  color: var(--kit-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--kit-text) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  transition: text-decoration-color var(--kit-speed) ease;
}

.kit-link:hover {
  color: var(--kit-text);
  text-decoration-color: var(--kit-accent-text);
}

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

.kit-rich-text a:hover {
  color: var(--kit-accent-text);
}

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

/* A plain square button: the main colour with its own ink, the body face's strong weight in sentence case. A label may
   take two lines. theme-chrome.test.mjs holds this shape and the shared notice's together. */
.kit-button {
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  font-size: 0.9375rem;
  line-height: 1.25;
  transition: background-color var(--kit-speed) ease, border-color var(--kit-speed) ease, color var(--kit-speed) ease;
}

.kit-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.875rem;
}

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

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

.kit-button--ghost {
  color: var(--kit-text);
  text-decoration: underline;
  text-decoration-color: var(--kit-accent-text);
  text-underline-offset: 0.3em;
}

.kit-button-group {
  gap: 0.75rem 1rem;
}

/* ------------------------------------------------------------------ Frames */

/* Every photograph hangs in a frame: the moulding (a border in the frame colour, lit a little from above), the mat
   (padding of the surface colour) with the fine line of its bevel round the picture, and the shadow it casts on the
   wall. Logos, badges and seals (a picture that is contained, not cropped) hang unframed. A picture zooms no more when
   its card is hovered: it would slide over its own mat. */
.kit-card__media,
.kit-picture.kit-fit--cover {
  border: var(--vitrine-frame-w) solid var(--vitrine-frame);
  border-top-color: color-mix(in srgb, var(--vitrine-frame) 80%, #fff);
  border-left-color: color-mix(in srgb, var(--vitrine-frame) 90%, #fff);
  border-bottom-color: color-mix(in srgb, var(--vitrine-frame) 86%, #000);
  padding: var(--vitrine-mat);
  overflow: hidden;
  background: var(--kit-surface);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.12), var(--vitrine-shadow);
}

.kit-card__media img,
.kit-picture.kit-fit--cover img {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kit-text) 16%, transparent);
}

.kit-card--linked:hover .kit-card__media img {
  transform: none;
}

.kit-card--linked .kit-card__media {
  transition: box-shadow var(--kit-speed) ease, transform var(--kit-speed) var(--kit-ease);
}

.kit-card--linked:hover .kit-card__media {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.12), var(--vitrine-shadow-hover);
  transform: translateY(-2px);
}

/* A small picture inside a card (a project's further pictures) gets a slimmer frame. */
.kit-card__body .kit-picture.kit-fit--cover {
  --vitrine-frame-w: 2px;
  --vitrine-mat: 0.35rem;
  --vitrine-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 14px -10px rgb(0 0 0 / 0.45);
}

/* A logo, a badge or a seal hangs unframed, straight on the wall. */
.kit-picture.kit-fit--contain {
  background: transparent;
}

.kit-picture,
.kit-picture.kit-rounded,
.kit-card__media,
.kit-frame,
.kit-video,
.kit-compare__frame {
  border-radius: 0;
}

/* A before-and-after picture hangs in the moulding without a mat: its slider measures the picture's own box. */
.kit-compare__frame {
  border: var(--vitrine-frame-w) solid var(--vitrine-frame);
  box-shadow: var(--vitrine-shadow);
}

.kit-compare__label {
  border-radius: 0;
}

/* A video or a map hangs like a screen in a gallery: the moulding and the shadow, no mat. */
.kit-video,
.kit-frame:not(.kit-frame--waiting) {
  border: var(--vitrine-frame-w) solid var(--vitrine-frame);
  box-shadow: var(--vitrine-shadow);
}

/* ------------------------------------------------------------------ Cards */

/* A card with a picture is a framed work and its label: no box, the words straight on the wall under the frame. */
.kit-card {
  overflow: visible;
  border-radius: 0;
}

.kit-card--surface,
.kit-card--outline {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.kit-card:has(> .kit-card__media) > .kit-card__content {
  gap: 0.35rem;
  padding: 1.15rem 0 0;
}

/* A card without a picture is a label itself: a small plate mounted on the wall, with a hairline edge and the thinnest
   shadow under it. */
.kit-card--surface:not(:has(> .kit-card__media)),
.kit-card--outline:not(:has(> .kit-card__media)) {
  border-color: var(--kit-line);
  background: var(--kit-surface);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.05), 0 12px 22px -20px rgb(0 0 0 / 0.5);
}

.kit-card--outline:not(:has(> .kit-card__media)) {
  border-color: var(--kit-line-strong);
}

.kit-card__title {
  font-family: var(--font-body, sans-serif);
  font-size: 1.0625rem;
  font-weight: var(--vitrine-body-strong, 600);
  letter-spacing: 0;
  line-height: 1.35;
}

.kit-card__meta {
  color: var(--kit-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.kit-card__body {
  font-size: 0.9375rem;
  line-height: 1.65;
}

.kit-card--linked:hover {
  border-color: transparent;
}

.kit-card--linked:hover .kit-card__link {
  color: var(--kit-text);
  text-decoration: underline;
  text-decoration-color: var(--kit-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.kit-card--linked.kit-card--surface:not(:has(> .kit-card__media)):hover {
  border-color: var(--kit-line-strong);
}

.kit-grid.kit-features .kit-icon,
.kit-card__body > .kit-icon:first-child {
  color: var(--kit-accent-text);
}

.kit-chip {
  border-radius: 0;
}

.kit-chip--accent {
  border: 1px solid var(--kit-line-strong);
  background: transparent;
  color: var(--kit-text);
}

/* Steps: numbered like the works of a catalogue, the number in the heading face over a hairline. */
.kit-grid.kit-steps > .kit-card {
  border-top: 1px solid var(--kit-line-strong);
}

.kit-grid.kit-steps .kit-card__content {
  padding: 1.25rem 0 0;
}

.kit-grid.kit-steps .kit-card__content > .kit-card__eyebrow {
  margin-bottom: 0.4rem;
  color: var(--kit-text);
  font-family: var(--font-heading, serif);
  font-size: 2.25rem;
  font-weight: var(--vitrine-heading-weight, 300);
  letter-spacing: 0;
  line-height: 1.1;
}

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

/* A statistic: the figure large in the heading face over a hairline, its label small under it. From 1200 px five stand
   in a row of about 200 px each; the sizes keep "1500 m²" on one line there. */
.kit-stat {
  gap: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--kit-line-strong);
}

.kit-stat__value {
  font-family: var(--font-heading, serif);
  font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem);
  font-weight: var(--vitrine-heading-weight, 300);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kit-stat__suffix {
  color: var(--kit-accent-text);
}

.kit-stat__label {
  font-size: 0.875rem;
  line-height: 1.45;
}

.kit-price__amount {
  font-family: var(--font-heading, serif);
  font-weight: var(--vitrine-heading-weight, 300);
}

/* ------------------------------------------------------------------ Lists, questions, quotes */

.kit-list--check .kit-list-item__icon,
.kit-list .kit-list-item > .lucide:first-child {
  color: var(--kit-accent-text);
}

.kit-accordion {
  border-top-color: var(--kit-line-strong);
}

.kit-accordion__title {
  padding: 1.3rem 0;
  font-family: var(--font-body, sans-serif);
  font-size: 1.0625rem;
  font-weight: var(--vitrine-body-strong, 600);
  line-height: 1.4;
}

.kit-accordion__title:hover {
  color: var(--kit-text);
  text-decoration: underline;
  text-decoration-color: var(--kit-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.kit-accordion__chevron {
  color: var(--kit-accent-text);
}

.kit-accordion__body {
  padding-bottom: 1.5rem;
}

/* A quotation is in the heading face's italic, which every font palette loads; no bar at its side. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__text {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  font-style: italic;
  font-weight: var(--vitrine-heading-weight, 300);
  line-height: 1.4;
  font-synthesis: none;
}

.kit-quote__author {
  color: var(--kit-text);
  font-size: 0.875rem;
  font-weight: var(--vitrine-body-strong, 600);
  letter-spacing: 0.01em;
}

.kit-quote__role {
  font-weight: 400;
}

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

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

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

.kit-field__label {
  font-size: 0.8125rem;
  font-weight: var(--vitrine-body-strong, 600);
  letter-spacing: 0.01em;
}

.kit-input {
  min-height: 3rem;
  border-color: var(--kit-line-strong);
  background: var(--kit-surface);
}

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

/* ------------------------------------------------------------------ Portraits, carousels */

/* A portrait is a miniature in an oval frame: the moulding, a slim mat and the picture, taller than wide. */
.kit-avatar {
  border-radius: 50%;
  font-weight: var(--vitrine-heading-weight, 300);
}

.kit-avatar--medium {
  width: 3.25rem;
  height: 4rem;
  padding: 0.18rem;
  border: 2px solid var(--vitrine-frame);
  background: var(--kit-surface);
}

.kit-avatar--medium img {
  border-radius: 50%;
}

.kit-avatar--large {
  width: 7.5rem;
  height: 9.25rem;
  padding: 0.3rem;
  border: 3px solid var(--vitrine-frame);
  background: var(--kit-surface);
  box-shadow: var(--vitrine-shadow);
}

.kit-avatar--large img {
  border-radius: 50%;
}

.kit-carousel__button,
.kit-slideshow__button,
.kit-slideshow__dot {
  border-radius: 0;
}

.kit-carousel__progress,
.kit-carousel__progress-bar {
  border-radius: 0;
}