/* ============================================================
   SWISS CLUSTER CARDS — component styles
   Framework-free. Three card types.

   Base class:  .sc-card
   Modifiers:   .sc-card--solid    1px solid stroke, default fill
                .sc-card--dashed   1px dashed stroke, default fill
                .sc-card--white    1px solid stroke, white fill

   Usage:  <div class="sc-card sc-card--solid"> ... </div>

   Theming: override the CSS variables in :root or on the card.
   ============================================================ */

.sc-card {
  /* ---- design tokens (override to re-theme) ---- */
  --sc-card-bg: var(--sc-surface); /* card fill colour          */
  --sc-card-stroke: var(--sc-gray); /* stroke / border colour    */
  --sc-card-pad: 24px; /* inner padding             */
  --sc-card-max: 1920px; /* maximum width             */
  --sc-card-dash: 16px; /* dash length (dashed type) */
  --sc-card-gap: 10px; /* gap between dashes        */

  /* ---- shared layout ---- */
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: var(--sc-card-max);
  background-color: var(--sc-card-bg);
  border-radius: var(--sc-card-radius);
  padding: var(--sc-card-pad);
}

.sc-card *,
.sc-card *::before,
.sc-card *::after {
  box-sizing: border-box;
}

/* ---- TYPE 1: SOLID stroke ---- */
.sc-card--solid {
  border: 1px solid var(--sc-card-stroke);
}

/* ---- TYPE 2: DASHED stroke ----
   Built with background gradients so dash length is tunable
   (browser default dashes are too short). */
.sc-card--dashed {
  border: none;
  background-image:
    /* top edge — horizontal repeat */
    linear-gradient(
      90deg,
      var(--sc-card-stroke-top, var(--sc-card-stroke)) 0 var(--sc-card-dash),
      transparent var(--sc-card-dash) calc(var(--sc-card-dash) + var(--sc-card-gap))
    ),
    /* bottom edge */
    linear-gradient(
        90deg,
        var(--sc-card-stroke-bottom, var(--sc-card-stroke)) 0 var(--sc-card-dash),
        transparent var(--sc-card-dash) calc(var(--sc-card-dash) + var(--sc-card-gap))
      ),
    /* left edge — vertical repeat */
    linear-gradient(
        0deg,
        var(--sc-card-stroke-left, var(--sc-card-stroke)) 0 var(--sc-card-dash),
        transparent var(--sc-card-dash) calc(var(--sc-card-dash) + var(--sc-card-gap))
      ),
    /* right edge */
    linear-gradient(
        0deg,
        var(--sc-card-stroke-right, var(--sc-card-stroke)) 0 var(--sc-card-dash),
        transparent var(--sc-card-dash) calc(var(--sc-card-dash) + var(--sc-card-gap))
      );
  background-size:
    calc(var(--sc-card-dash) + var(--sc-card-gap)) 1px,
    calc(var(--sc-card-dash) + var(--sc-card-gap)) 1px,
    1px calc(var(--sc-card-dash) + var(--sc-card-gap)),
    1px calc(var(--sc-card-dash) + var(--sc-card-gap));
  background-position:
    left top,
    left bottom,
    left top,
    right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* ---- TYPE 3: WHITE card, solid stroke ----
   Same shape as --solid but with a 60% white fill and black stroke.
   Inherits all .sc-card base layout; only the two visual tokens
   are re-aimed so the card reads as a softer-than-pure-white band
   against the page's grey background. */
.sc-card--white {
  --sc-card-bg: rgba(255, 255, 255, 0.6);
  --sc-card-stroke: var(--sc-black);
  background-color: var(--sc-card-bg);
  border: 1px solid var(--sc-card-stroke);
}