@property --temperature-card-h {
  syntax: '<number>';
  inherits: true;
  initial-value: 137;
}

/* ============================================================================
   BASE CARD
   ============================================================================ */

.card{
    border-radius: var(--radius-md);
    background: var(--colour-surface);
    padding: var(--space-md) var(--space-lg);
    box-shadow: 0 4px 20px oklch(from var(--colour-brand) l c h / 100%);
}

.card--temperature {
    /* border-radius: var(--radius-md);
    background: oklch(from var(--colour-brand) 97% c var(--temperature-card-h) / 6%);
    padding: var(--space-md) var(--space-lg); */
    box-shadow: 0 4px 20px oklch(from var(--colour-brand) l c var(--temperature-col-h) / 100%);

}

.card--temperature-hot{
    --temperature-card-h: 12;
    box-shadow: 0 4px 20px oklch(from var(--colour-brand) l c var(--temperature-card-h) / 100%);
}
.card--temperature-warm{
    --temperature-card-h: 80;
    box-shadow: 0 4px 20px oklch(from var(--colour-brand) l c var(--temperature-card-h) / 100%);
}
.card--temperature-cold{
    --temperature-card-h: 230;
    box-shadow: 0 4px 20px oklch(from var(--colour-brand) l c var(--temperature-card-h) / 100%);
}


/* ============================================================================
   Smartguard — Benefit List (card style)
   Static, no animation, no hover motion, no transitions. Every accent
   colour in every variant below is the same single value —
   oklch(from var(--colour-brand) l c h) — varied only in lightness and
   alpha. No other colour is introduced anywhere in this file.

   Component name: "benefit-list" (BEM: benefit-list__item, __icon,
   __tick, __text). Three look-and-feel variants share this same
   structure via a modifier class:
     .benefit-list--soft   → Option 1, "Soft Card"
     .benefit-list--edge   → Option 2, "Edge Card"
     .benefit-list--chip   → Option 3, "Chip Card"
   Keep whichever one variant you choose; the base .benefit-list rules
   are shared by all three and should stay regardless of which you pick.
   ============================================================================ */


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   BASE — shared by every variant
   ============================================================================ */

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.benefit-list--temperature {
  --temperature-card-h: var(--temperature-col-h);
}

.benefit-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
}

.benefit-list__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-block-start: 0.05em; /* optical alignment with the first line of text */
  color: oklch(from white l 0.2 h / 1);
  &.green {
    background: oklch(from var(--colour-brand) 55% c h / 0.5) !important;
    color: oklch(from var(--colour-brand) 0.9 0.2 h / 1) !important;
  }
  &.red {
    background: oklch(from var(--colour-temp-hot) 55% c h / 0.5) !important;
    color: oklch(from var(--colour-temp-hot) 0.9 0.2 h / 1) !important;
  }
  &.grey {
    background: oklch(from white 55% c h / 1) !important;
    color: oklch(from white l 0.1 h / 1) !important;

  }
}

/* .benefit-list__tick {
  display: block;
  width: 0.6em;
  height: 0.32em;
  transform: rotate(-45deg) translateY(-1px);
} */

.benefit-list__text {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  color: var(--colour-text);
  line-height: 1.6;
}

/* ============================================================================
   OPTION 1 — "Soft Card"
   Faint tinted background + faint border + circular icon chip.
   ============================================================================ */

.benefit-list--soft .benefit-list__item {
  background: oklch(from var(--colour-brand) 97% c h / 6%);
  border: 1px solid oklch(from var(--colour-brand) 85% c h / 16%);
}
.benefit-list--soft.benefit-list--temperature .benefit-list__item {
  background: oklch(from var(--colour-brand) 97% c var(--temperature-card-h) / 6%);
  border: 1px solid oklch(from var(--colour-brand) 85% c var(--temperature-card-h) / 16%);
}

.benefit-list--soft .benefit-list__icon {
  border-radius: 50%;
}

.benefit-list--soft.benefit-list--temperature .benefit-list__icon {
  background: oklch(from var(--colour-brand) 88% c var(--temperature-card-h) / 20%);
  color: oklch(from var(--colour-brand) l 0.2 var(--temperature-card-h) / 1) !important;
}

/* .benefit-list--soft .benefit-list__tick {
  border-inline-start: 2px solid oklch(from var(--colour-brand) 55% c var(--temperature-card-h));
  border-block-end: 2px solid oklch(from var(--colour-brand) 55% c var(--temperature-card-h));
} */

/* ============================================================================
   OPTION 2 — "Edge Card"
   Neutral surface, single accent rule on the leading edge, outlined tick.
   ============================================================================ */

.benefit-list--edge .benefit-list__item {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-inline-start: 3px solid oklch(from var(--colour-brand) 55% c h);
}
.benefit-list--edge.benefit-list--temperature .benefit-list__item {
  border-inline-start: 3px solid oklch(from var(--colour-brand) 55% c var(--temperature-card-h));
}

.benefit-list--edge .benefit-list__icon {
  border-radius: 50%;
  border: 1.5px solid oklch(from var(--colour-brand) 60% c h / 45%);
}
.benefit-list--edge.benefit-list--temperature .benefit-list__icon {
  border: 1.5px solid oklch(from var(--colour-brand) 60% c var(--temperature-card-h) / 45%);
  color: oklch(from var(--colour-brand) l 0.2 var(--temperature-card-h) / 1) !important;
}

.benefit-list--edge .benefit-list__tick {
  width: 0.5em;
  height: 0.28em;
  border-inline-start: 1.5px solid oklch(from var(--colour-brand) 60% c h);
  border-block-end: 1.5px solid oklch(from var(--colour-brand) 60% c h);
}
.benefit-list--edge.benefit-list--temperature .benefit-list__tick {
  border-inline-start: 1.5px solid oklch(from var(--colour-brand) 60% c var(--temperature-card-h));
  border-block-end: 1.5px solid oklch(from var(--colour-brand) 60% c var(--temperature-card-h));
}

/* ============================================================================
   OPTION 3 — "Chip Card"
   Neutral surface card, solid deeper-toned icon chip, light tick inside it.
   ============================================================================ */

.benefit-list--chip .benefit-list__item {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
}

.benefit-list--chip .benefit-list__icon {
  border-radius: var(--radius-sm);
  background: oklch(from var(--colour-brand) 40% c h / 60%);
}

.benefit-list--chip.benefit-list--temperature .benefit-list__icon {
  background: oklch(from var(--colour-brand) 40% c var(--temperature-card-h) / 60%);
  color: oklch(from var(--colour-brand) l 0.2 var(--temperature-card-h) / 1) !important;
}

/* .benefit-list--chip .benefit-list__tick {
  border-inline-start: 2px solid oklch(from var(--colour-brand) 96% c var(--temperature-card-h));
  border-block-end: 2px solid oklch(from var(--colour-brand) 96% c var(--temperature-card-h));
} */

/* ============================================================================
   Responsive — cards keep their shape, just stack full-width
   ============================================================================ */

@media (max-width: 600px) {
  .benefit-list__item {
    padding: var(--space-sm) var(--space-md);
  }
}