/* History pictures on the public pages (B332): a great event carries the whole picture, toned down in navy, behind its
   text; another lets it come in from the right behind a light veil, so its text always stands on a calm ground. The
   point a crop keeps comes as classes in steps of ten (the host allows no inline style). The credit goes with it. */

.fx-0 { --fx: 0%; } .fx-10 { --fx: 10%; } .fx-20 { --fx: 20%; } .fx-30 { --fx: 30%; } .fx-40 { --fx: 40%; } .fx-50 { --fx: 50%; } .fx-60 { --fx: 60%; } .fx-70 { --fx: 70%; } .fx-80 { --fx: 80%; } .fx-90 { --fx: 90%; } .fx-100 { --fx: 100%; }
.fy-0 { --fy: 0%; } .fy-10 { --fy: 10%; } .fy-20 { --fy: 20%; } .fy-30 { --fy: 30%; } .fy-40 { --fy: 40%; } .fy-50 { --fy: 50%; } .fy-60 { --fy: 60%; } .fy-70 { --fy: 70%; } .fy-80 { --fy: 80%; } .fy-90 { --fy: 90%; } .fy-100 { --fy: 100%; }
.time-picture, .meanwhile-picture { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }

.fact.time.pictured { position: relative; overflow: hidden; min-height: 92px; }
.fact.time.pictured > .when, .fact.time.pictured > .time-text { position: relative; z-index: 1; }
.fact.time.pictured .time-picture { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; height: 100%; }
.fact.time.pictured::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: linear-gradient(90deg, var(--brass-soft) 0%, color-mix(in srgb, var(--brass-soft) 55%, transparent) 45%, color-mix(in srgb, var(--brass-soft) 25%, transparent) 100%); }
.fact.time.pictured:not(.major) > .time-text { max-width: 58%; }
.picture-credit { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }
.picture-credit a { color: inherit; }

.fact.time.major { min-height: 190px; padding: 24px 28px; border-left: 0; border-radius: 16px; background: var(--navy); grid-template-columns: 116px minmax(0, 1fr); }
.fact.time.major .time-picture { width: 100%; }
.fact.time.major::after { width: 100%; background: linear-gradient(90deg, rgba(11, 45, 77, 0.86) 0%, rgba(11, 45, 77, 0.8) 50%, rgba(11, 45, 77, 0.55) 100%); }
.fact.time.major .when { font-size: 1.9rem; color: #f2c879; }
.fact.time.major .lane-name, .fact.time.major .age { color: #f2c879; }
.fact.time.major .what { font-family: var(--serif); font-size: 1.6rem; color: #ffffff; }
.fact.time.major summary { color: #9fe3da; }
.fact.time.major details p, .fact.time.major .muted, .fact.time.major .picture-credit { color: #dbe5ee; }
.fact.time.major a { color: #9fe3da; }

@media (max-width: 760px) {
  .fact.time.pictured:not(.major) { padding-top: 104px; }
  .fact.time.pictured:not(.major) .time-picture { bottom: auto; width: 100%; height: 92px; }
  .fact.time.pictured:not(.major)::after { bottom: auto; width: 100%; height: 92px; background: linear-gradient(0deg, var(--brass-soft) 0%, transparent 60%); }
  .fact.time.pictured:not(.major) > .time-text { max-width: none; }
  .fact.time.major { padding: 20px; }
}

/* The life story's "Imens i Norge" with its picture */
.meanwhile.pictured { position: relative; overflow: hidden; max-width: none; padding: 28px 30px; border-radius: 18px; background: var(--navy); min-height: 220px; justify-content: flex-end; }
.meanwhile.pictured .meanwhile-picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.meanwhile.pictured::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 45, 77, 0.9) 0%, rgba(11, 45, 77, 0.82) 55%, rgba(11, 45, 77, 0.6) 100%); }
.meanwhile.pictured > :not(img) { position: relative; z-index: 1; }
.meanwhile.pictured .eyebrow, .meanwhile.pictured span { color: #f2c879; }
.meanwhile.pictured strong { font-size: 1.6rem; color: #ffffff; }
.meanwhile.pictured .picture-credit, .meanwhile.pictured .picture-credit a { color: #dbe5ee; }

/* The life line: a picture card while the pointer rests on a pin (history.js) */
.pin-card { position: absolute; z-index: 30; display: flex; gap: 12px; width: 300px; padding: 10px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); pointer-events: none; }
.pin-card img { flex: none; width: 92px; height: 92px; border-radius: 10px; object-fit: cover; }
.pin-card div { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; }
.pin-card .when { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); }
.pin-card strong { color: var(--heading); }
.pin-card .credit { margin-top: auto; font-size: 0.75rem; color: var(--muted); }
.lifecard { position: relative; }