/* Daylight theme — pages/om-oss. Split from daylight.css (see docs/adr/0002).
   v3 layout per the design handoff Om-oss.dc.html. */

/* The key figures overlapping the hero seam use the shared .seam-cards
   device (heroes.css) with the core .card--tight .card--fact vocabulary. */

/* ---------- Vision/uppdrag columns ---------- */
.duo-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.duo-cols .sec-head {
  margin-bottom: 16px;
}

/* ---------- Values on the spruce band ----------
   Tone-on-tone surface and text come from the core .sec--gran .card rules;
   the band is tighter than a full section, the numeral is the bare mono
   "facts voice", and hover inverts the card to white (the core --lift hover
   turns cards spruce, which would vanish on this band). */
.values-sec {
  padding-block: clamp(36px, 5vw, 56px) clamp(40px, 5vw, 64px);
}

.value-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--text-on-gran);
  margin-bottom: 12px;
}

.values-sec .card :is(h3, p, .value-no) {
  transition: color var(--speed);
}

.values-sec .card:hover {
  background: var(--c-vit);
  border-color: var(--c-vit);
}

.values-sec .card:hover h3 { color: var(--c-granit); }
.values-sec .card:hover p { color: var(--c-ink-muted); }
.values-sec .card:hover .value-no { color: var(--c-gran); }

/* ---------- The model flow: owner → GM → tenant ---------- */
.model-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}

.model-flow .card {
  padding: 30px 28px;
  background: var(--c-dagsljus);
  border-color: var(--c-line-soft);
}

/* The pop itself comes from the core card default; hover adds the accent */
.model-flow .card:hover {
  border-color: var(--c-gran);
}

/* Re-assert the spruce card: .model-flow .card above outranks .card--gran */
.model-flow .card--gran {
  background: var(--c-fill);
  border-color: var(--c-fill);
}

.model-arrow {
  align-self: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--c-gran);
}

/* The karriär/partnerskap strip on mist uses the shared .gran-cta--dis
   variant (strips.css). */

@media (max-width: 900px) {
  .duo-cols {
    grid-template-columns: 1fr;
  }

  /* Stack the flow; arrows turn to point down the column */
  .model-flow {
    grid-template-columns: 1fr;
  }

  .model-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}