/* ============================================================
   K1 — Brand patterns & surface treatments
   Requires colors_and_type.css for tokens.
   ============================================================ */

/* ---- CONSTRUCTION GRID OVERLAY ----------------------------
   The drafting-grid motif from the brand. Place as an absolutely
   positioned overlay layer inside a positioned parent.
   Tint with --grid-color (default thin dark lines).
   ------------------------------------------------------------ */
.k1-grid {
  --grid-color: rgba(14,19,22,.16);
  --grid-gap: 64px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-gap) var(--grid-gap);
}
/* Diagonal drafting lines layered on top — the radiating "engineered" feel */
.k1-grid-diag {
  --grid-color: rgba(14,19,22,.14);
  --grid-gap: 64px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 calc(var(--grid-gap) - 1px), var(--grid-color) calc(var(--grid-gap) - 1px) var(--grid-gap)),
    repeating-linear-gradient(-45deg, transparent 0 calc(var(--grid-gap) - 1px), var(--grid-color) calc(var(--grid-gap) - 1px) var(--grid-gap));
}
/* On dark surfaces */
.k1-grid--light  { --grid-color: rgba(255,255,255,.12); }

/* ---- ACCENT EDGE — thin orange rule on a panel edge ---- */
.k1-edge-top    { box-shadow: inset 0 3px 0 var(--accent); }
.k1-edge-left   { box-shadow: inset 3px 0 0 var(--accent); }

/* ---- BRAND GRADIENT FIELDS (poster treatment) ----------
   Anchored in black for an elite, cutting-edge feel.
   Desaturated/brand hue → black, as in the reference posters. ---- */
.k1-field-teal   { background: linear-gradient(152deg, var(--k1-teal) 0%, var(--k1-deep) 48%, #000 100%); }
.k1-field-orange { background: linear-gradient(152deg, var(--k1-orange) 0%, var(--k1-rust) 46%, #000 100%); }
.k1-field-deep   { background: linear-gradient(160deg, var(--k1-deep) 0%, #0A1418 55%, #000 100%); }
.k1-field-night  { background: linear-gradient(150deg, #000 0%, #0E2A33 100%); }

/* ---- IMAGE TREATMENT — cool, slightly cinematic ---- */
.k1-photo { display:block; width:100%; height:100%; object-fit:cover; }
.k1-photo--cool { filter: saturate(.95) contrast(1.03); }

/* Duotone-ish deep wash for photo headers behind text */
.k1-photo-scrim::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(14,19,22,.62) 100%);
}