/* KIND demo patterns (kind.app re-skin, 2026-06-02)
 *
 * Owner: frontend-web (per docs/contracts/file-ownership.md per-domain CSS pattern).
 * Scope: the three new kind.app-style patterns + the inline-SVG icon/illustration
 *        chrome. Loaded after kind.css on the public landing + patient login + any
 *        marketing-style surface via the {% block per_domain_css %} hook.
 * Design source: docs/design/kind-app-tokens.md (c) component treatments + (d) new
 *        patterns. Everything below is token-driven so it inherits the theme (light,
 *        dark, high-contrast) with zero per-pattern overrides.
 * A11y target: WCAG 2.1 AA. Decorative SVG is aria-hidden; stat number + label
 *        share one element so a screen reader reads them together; no count-up
 *        animation without a prefers-reduced-motion guard.
 * No frameworks. No JS required for any pattern here.
 *
 * Layers:
 *   1. Inline-SVG icons + decorative blobs + hero illustration
 *   2. Hero (landing + login)
 *   3. Solution card (3-up grid)
 *   4. Stat block (number + label band)
 *   5. Marketing section scaffolding (band, CTA row, eyebrow)
 *   6. Tertiary "link with arrow" affordance (echoes kind.app "Las mer ->")
 */

/* ============ 1. Icons + blobs + illustration ============ */

.kind-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  /* currentColor stroke means the icon takes the surrounding text colour. */
  color: inherit;
}
.kind-icon--accent { color: var(--kind-color-accent); }
.kind-icon--lg { width: 48px; height: 48px; }

/* Decorative blob: positioned + sized by its container; low opacity so it reads
   as a soft background wash, never competing with content. Always aria-hidden in
   the macro, so it carries no meaning and has no contrast requirement.
   ADR-065 §D3 (CP-02): tinted with the PRODUCT accent, not the marketplace
   coral. This blob renders behind the LOGIN pages (patient, telefon, demo-PIN,
   demo-BankID and the clinician login), which are the product's front door and
   must look like the product behind them. --kind-color-brand-coral stays
   declared and keeps its remaining home on the public landing illustration. */
.kind-blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  color: var(--kind-color-accent);
  width: 30rem;
  max-width: 60vw;
  height: auto;
}

.kind-hero-art {
  width: 100%;
  max-width: 26rem;
  height: auto;
  color: var(--kind-color-accent);
  position: relative;
  z-index: 1;
}

/* ============ 2. Hero (landing + login) ============ */

.kind-hero {
  position: relative;
  overflow: hidden;
  background: var(--kind-color-accent-bg);
  border-radius: var(--kind-radius);
  padding: var(--kind-space-7) var(--kind-space-6);
  margin-bottom: var(--kind-space-7);
}
.kind-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kind-space-6);
  align-items: center;
  max-width: var(--kind-container-max);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .kind-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.kind-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kind-space-2);
  font-size: var(--kind-font-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kind-color-accent);
  margin-bottom: var(--kind-space-3);
}
.kind-hero__title {
  font-size: clamp(2rem, 5vw, var(--kind-font-h1));
  line-height: 1.05;
  margin-bottom: var(--kind-space-4);
}
/* CP-04 (issue #89), ADR-065 §D4. `.kind-hero` is shared by the MARKETING
   landing page and by the two LOGIN pages, and only the second pair are product
   surfaces the brief's type scale governs ("Desktop H1 30 till 34 px, INTE
   marknadsföringsstorlek"). So the scale is applied to the --login variant and
   the marketing hero above keeps its own treatment; that split is deliberate and
   is the same boundary ADR-065 §D2 already draws for the coral.

   Two things this fixes on a surface that is measured, not guessed:

   1. §D4 implementation binding 1 forbids a vw-driven type size, because a vw
      term does not answer the data-kind-font-scale control and quietly breaks
      WCAG 2.2 AA SC 1.4.4 for a patient who enlarged the text. Note that after
      CP-04 the clamp above is INERT anyway: its min (2rem) equals the desktop
      band's max (2rem), so it resolves to 32px at every width and the vw term
      can no longer move it. An inert expression that still LOOKS responsive is
      worse than none, it invites the next reader to reason from it.
   2. `docs/contracts/inloggning-320px-budget.md` U2 records /admin/login
      clipping its own h1 at 320px ("Vårdgivarportalen" -> "Vårdgivarportal"),
      a live SC 1.4.10 information-loss breach. 32px -> 26px on the mobile band
      is strictly less ink to fit. It is a contribution to U2, NOT a claim that
      U2 is met: U2 is binary and browser-measured, and the grind that measures
      it is `e2e/inloggning-320-grind.mjs`. */
.kind-hero--login .kind-hero__title {
  font-size: var(--kind-font-h1);
}
/* Two-tone serif headline like kind.app (some words in coral). The accented words
   sit in the AA-safe deep-coral accent so the coloured text still clears 4.5:1 on
   the hero section wash (--kind-color-accent on --kind-color-accent-bg; the floor
   is asserted in tests/test_classic_plus_tokens_css.py). NOT the brand coral,
   which would fail as text. The colour is decorative emphasis only: the full
   headline reads identically without it, so no meaning is colour-dependent. */
.kind-hero__accent { color: var(--kind-color-accent); }
.kind-hero__lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--kind-color-text);
  max-width: 42ch;
  margin-bottom: var(--kind-space-5);
}
.kind-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kind-space-3);
  align-items: center;
}
.kind-hero__media {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
/* Login variant: the hero wraps the login box on the right instead of art. */
.kind-hero--login .kind-hero__media { align-items: stretch; }
.kind-hero--login .kind-login-box { margin: 0; width: 100%; }

/* ============ 3. Solution card (3-up grid) ============ */

.kind-solutions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kind-space-5);
  margin-bottom: var(--kind-space-7);
}
@media (min-width: 720px) {
  .kind-solutions { grid-template-columns: repeat(3, 1fr); }
}
.kind-solution-card {
  background: var(--kind-color-surface);
  border: 1px solid var(--kind-color-border-soft);
  border-radius: var(--kind-radius);
  padding: var(--kind-space-6);
  box-shadow: var(--kind-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--kind-space-3);
}
.kind-solution-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kind-radius);
  background: var(--kind-color-accent-soft);
  color: var(--kind-color-accent);
  margin-bottom: var(--kind-space-2);
}
.kind-solution-card__title { margin: 0; font-size: var(--kind-font-h3); }
.kind-solution-card__lede { margin: 0; color: var(--kind-color-text-muted); }
.kind-solution-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--kind-space-2);
  margin: var(--kind-space-2) 0 0 0;
  padding: 0;
}
.kind-solution-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--kind-space-2);
  color: var(--kind-color-text);
}
.kind-solution-card__feature .kind-icon {
  color: var(--kind-color-accent);
  margin-top: 2px;
}
.kind-solution-card__more { margin-top: auto; padding-top: var(--kind-space-3); }

/* ============ 4. Stat block (number + label band) ============ */

.kind-stat-band {
  position: relative;
  overflow: hidden;
  background: var(--kind-color-accent-bg);
  border-radius: var(--kind-radius);
  padding: var(--kind-space-6);
  margin-bottom: var(--kind-space-7);
}
.kind-stat-band__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kind-space-5);
  text-align: center;
}
@media (min-width: 720px) {
  .kind-stat-band__grid { grid-template-columns: repeat(4, 1fr); }
}
/* The number + label live in ONE block so a screen reader reads them together
   (e.g. "80 procent, farre sena avbokningar"), never the number alone. */
.kind-stat-fig { display: flex; flex-direction: column; gap: var(--kind-space-1); }
.kind-stat-fig__num {
  font-family: var(--kind-font-serif);
  font-size: clamp(2.25rem, 6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--kind-color-accent);
  letter-spacing: -0.02em;
}
.kind-stat-fig__label {
  font-size: var(--kind-font-small);
  color: var(--kind-color-text-muted);
  line-height: 1.4;
}

/* ============ 5. Marketing section scaffolding ============ */

.kind-band { padding: var(--kind-space-6) 0; }
.kind-band__head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto var(--kind-space-6);
}
.kind-eyebrow {
  display: inline-block;
  font-size: var(--kind-font-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kind-color-accent);
  margin-bottom: var(--kind-space-2);
}
.kind-band__lede {
  font-size: 1.125rem;
  color: var(--kind-color-text-muted);
  margin-top: var(--kind-space-2);
}
.kind-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kind-space-3);
  justify-content: center;
  align-items: center;
  margin-top: var(--kind-space-5);
}

/* ============ 6. Tertiary "link with arrow" (echoes kind.app "Las mer ->") ============ */

.kind-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kind-space-2);
  color: var(--kind-color-accent);
  font-weight: 600;
  text-decoration: none;
}
.kind-link-arrow:hover { text-decoration: underline; color: var(--kind-color-accent-hover); }
.kind-link-arrow .kind-icon { transition: transform 0.15s ease; }
.kind-link-arrow:hover .kind-icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .kind-link-arrow .kind-icon { transition: none; }
  .kind-link-arrow:hover .kind-icon { transform: none; }
}

/* The primary CTA can carry a trailing arrow icon too; keep it visually aligned. */
.kind-btn .kind-icon { margin-left: var(--kind-space-2); }
.kind-btn .kind-icon:first-child { margin-left: 0; margin-right: var(--kind-space-2); }

/* ============ 2b. 320px-budget for inloggningsytorna ============
   Kontrakt: docs/contracts/inloggning-320px-budget.md (agents-repot).
   Underlag: docs/ux/inloggning-320px-beslutsunderlag-2026-07-29.md, variant G.

   ROTORSAKEN, tre led, alla uppmatta och inget av dem "hero ar tvaspaltig":
   `.kind-hero__grid` ar REDAN `1fr` under 768px, alltsa var enspaltigheten nulaget
   och inte atgarden. Det trasiga var (1) att 96 av 320px gick till NASTLAD padding
   sa spalten blev 224, (2) att grid-items har `min-width: auto` och darfor inte kan
   krympa under sin min-content (295,7px uppmatt), och (3) att `overflow: hidden` gjorde
   den resulterande oversvamningen TYST i stallet for horbar.

   Konsekvensen av (3) ar varfor kontraktet forbjuder `document.scrollWidth` som bevis:
   den laste 320 och sa "ingen oversvamning" medan text klipptes bort, eftersom
   klippningen ar precis det som tar bort rullningen. Kontrollen var biased mot tystnad.

   `min-width: 0` ensam avvisades forst, eftersom den mot en 224px spalt gav 547px hojd.
   Den var RATT deklaration mot FEL forutsattning: tillsammans med atervunnen padding ger
   den 277px och noll klippning. Bada leden behovs, ingetdera racker.
*/
@media (max-width: 400px) {
  .kind-hero--login {
    /* Sidan behover EN gutter, inte tre. `.kind-main` ager den. */
    padding-inline: 0;
    padding-block: var(--kind-space-4);
    /* Klipp DEKORATIONEN, inte innehallet. Blobben goms nedan, sa det finns inget
       kvar att klippa, och en framtida horisontell oversvamning blir da en SYNLIG
       rullningslist i stallet for tyst dataforlust. Vakten blir biased mot larm. */
    overflow: visible;
  }
  /* Dekorativ blob (aria-hidden) bar noll information och ar det enda som behovde
     klippningen. Vid 320px ar den dessutom rent brus. */
  .kind-hero--login .kind-blob { display: none; }

  /* Inget barn ska kunna tvinga upp spaltbredden over sin container.
     `.kind-safety__body` har redan `min-width: 0` i kind.css, monstret finns i huset,
     det var bara inte applicerat uppat i kedjan. */
  .kind-hero--login .kind-hero__grid > *,
  .kind-hero--login .kind-hero__copy,
  .kind-hero--login .kind-hero__media,
  .kind-hero--login .kind-login-box { min-width: 0; }

  /* Eyebrow ar den andra av tre "Patientportal"/"Vardgivarportal" och bar ingen
     information vid 320px (sidhuvudet sager det redan). Den tredje ar borttagen
     ur BADA mallarna (C-2). */
  .kind-hero--login .kind-hero__eyebrow { display: none; }
  .kind-hero--login .kind-hero__title {
    font-size: 1.5rem;
    margin-bottom: var(--kind-space-2);
    /* Uppmatt vid xxlarge (150%, 36px): "Vardgivarportalen" ar ETT
       obrytbart sammansatt ord utan mellanslag, och overskrider viewportens
       320px som ett enda block (scrollWidth 362 mot 320) i stallet for att
       radbrytas, eftersom normal white-space inte bryter MITT I ett ord.
       overflow-wrap later det braces vid behov sa det bryts till en andra
       rad, INGEN informationsforlust, bara en annan radbrytningspunkt. */
    overflow-wrap: break-word;
  }
  /* Vid xxlarge (150%) balanserar hero-copyn inte langre budgeten mot
     akutradens (B4c) och falternas hojd, som INTE far krympa (a11y vinner,
     regel 48/49). Rubriken far den sr-only-behandling kontraktet redan kraver
     for h1 (kvar i DOM och tillganglighetstradet, noll VISUELL yta), i
     stallet for display:none som hade tagit bort den ur tradet. Leden ar
     valfri beskrivande text utan strukturkrav, sa display:none racker dar. */
  html[data-kind-font-scale="xxlarge"] .kind-hero--login .kind-hero__title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html[data-kind-font-scale="xxlarge"] .kind-hero--login .kind-hero__lede {
    display: none;
  }

  /*
    xxlarge-komprimering av KROM, aldrig av innehall eller textstorlek.
    Tillagt 2026-07-30 pa konsultdirektiv att stanga xxlarge-gapet.

    Principen: en anvandare som satt 150 procent textskala har bett om STORRE
    text. Att krympa font-size for den anvandaren vore att aktivt motverka den
    instillningen, sa ingenting harunder ror textstorlek. Det som komprimeras ar
    mellanrum, padding, och en synlig etikett vars information redan finns i ett
    aria-label.

    Uppmatt effekt vid 320x664, xxlarge, STANGT lage (det hogsta tillstandet per
    B4c): sidhuvudet 169 -> 94px, akutraden 200 -> 156px, U1 12 -> 34 procent.
  */

  /* Sidhuvudet staplade logotyp och a11y-knapp pa varsin rad, eftersom knappens
     SYNLIGA etikett ("Tillganglighet") inte far plats bredvid logotypen vid 320px
     och 150 procent text. Etiketten goms visuellt, INTE tas bort: knappen bar redan
     hela det tillgangliga namnet i sitt aria-label ("Tillganglighet, anpassa text
     och kontrast"), och "Aa"-ikonen star kvar som synlig affordans. Da ryms de
     bredvid varandra igen. Traffytan ar overkt kvar over 44px (uppmatt 67x50).

     Scopat med :not(.kind-header--patient) sa den INLOGGADE patientytans sidhuvud,
     som bar den klistrade akutraden och en annan struktur, inte rors.

     #142-NOT: den har regeln ar INTE overflodig efter att kind.css fatt en
     OBETINGAD motsvarighet for `.kind-body--admin`. De tva overlappar bara pa
     vardgivarytan vid xxlarge. Den som star kvar och gor jobbet ensam ar
     PATIENTENS INLOGGNINGSSIDA: `templates/patient/login.html` och
     `telefon_login.html` bar `kind-body--patient` men renderar det GENERISKA
     sidhuvudet (de satter inte nav_role=patient), sa admin-regeln nar dem inte.
     Tas den har regeln bort atervander etiketten pa inloggningssidan vid 320px
     och 150 procent text, alltsa exakt for den lagseende patient som ska logga in. */
  html[data-kind-font-scale="xxlarge"] .kind-header:not(.kind-header--patient) .kind-a11y-trigger > span:not(.kind-a11y-trigger__icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Akutradens radgap. Det befintliga vardet ar HARLETT ur 44px-golvet for
     traffytepitch (kind.css: "20.8 + 26 = 46.8px > 44px" vid 13px radhojd). Vid
     xxlarge ar radhojden ~34px, sa samma golv nas med ett mindre gap. 14px ger
     uppmatt pitch 47px, alltsa samma marginal till golvet som den ursprungliga
     harledningen har. 10px provades och gav 43px, UNDER golvet, och forkastades. */
  html[data-kind-font-scale="xxlarge"] .kind-safety--kompakt .kind-safety__kompakt-line {
    gap: 14px var(--kind-space-2);
  }

  html[data-kind-font-scale="xxlarge"] .kind-hero--login { padding-block: var(--kind-space-2); }
  html[data-kind-font-scale="xxlarge"] .kind-hero--login .kind-login-box { padding: var(--kind-space-3); }
  .kind-hero--login .kind-hero__lede {
    font-size: 1rem;
    /* Tatare radhojd, ren densitet, ingen informationsforlust. Uppmatt att
       detta plus tatare marginaler ensamt gav admin-ytan U1 51 procent utan
       att andra en bokstav i dess lopande text, som INTE var en del av
       ux-underlagets granskning (den galler bara /patient/login). */
    line-height: 1.3;
    margin-bottom: var(--kind-space-2);
    max-width: none;
  }
  .kind-hero--login .kind-hero__grid { gap: var(--kind-space-3); }
  /* Login-boxen som kort UTAN egen gutter: falten gar fran 230 till 254px. */
  .kind-hero--login .kind-login-box { padding: var(--kind-space-4); max-width: none; }

  /*
    Akutraden (kompakt) BLOR UT till kortets kant i stallet for att krympa
    ytterligare. Dess egen radbrytningsmatematik (kind.css-kommentaren vid
    .kind-safety--kompakt .kind-safety__kompakt-line) antar en 288px LADA,
    alltsa viewportens 320px minus BARA dess egna 16px marginaler, eftersom
    den ursprungligen levde direkt i base.html:s sidhuvud. Nastlad har inuti
    login-boxens EGEN padding (16px per sida vid den har brytpunkten) atergav
    den bara 254px och tvang "Ring 112." och "Radgivning 1177." till varsin
    rad AVEN i oppet lage, ett regression jag sjalv orsakade genom att krympa
    login-boxen for U1:s skull.

    Fixen ateranvander kortets EGNA 16px som raden reklaimar med negativ
    margin, sa den fair samma 288px yttre bredd den designades for, i stallet
    for att fa 254. Bara den kompakta akutraden gor detta, resten av kortets
    innehall (rubrik, falt, knappar) behaller sin padding.
  */
  .kind-hero--login .kind-login-box .kind-safety--kompakt {
    margin-inline: calc(-1 * var(--kind-space-4));
    width: auto;
    /* Aterstoden av gapet efter ateranvunnen bredd: matt 226px tillgangligt
       for raden mot 235px behovt (icon+etikett+bada segment). 8px per sida
       istallet for 16 tacker mellanskillnaden med marginal, uppmatt nedan. */
    padding-inline: var(--kind-space-2);
  }
}