/* ─────────────────────────────────────────────────────────────────────────────
   Forløb-A — vandret ikon-tidslinje (genbrugelig komponent).

   Farve/ikon pr. begivenhedstype, titel under punktet, hover = beskrivelse
   (genbruger .jtl-hovercard fra journal-timeline.css + journalTimelineInterop.js),
   klik = åbn kilde. Markup: Components/Shared/ForlobTimeline.razor (.fpt-*).

   NB: skal loades EFTER journal-timeline.css, da markørerne bærer .jtl-note for
   at genbruge hover-kortet — .fpt-mk overstyrer de .jtl-note-regler der kolliderer.
   ───────────────────────────────────────────────────────────────────────────── */

.fpt { padding: 4px 2px 2px; }

.fpt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.fpt-title { font-size: 0.95rem; font-weight: 600; color: #15405e; }

.fpt-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.fpt-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; color: #5a6f85; }
.fpt-lg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.fpt-yeargroup { margin-top: 4px; }
.fpt-yearlabel {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #8496ab;
    margin: 8px 6px 0;
}

.fpt-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 14px;
}
.fpt-axis {
    position: absolute;
    left: 1.5%;
    right: 1.5%;
    top: 33px;
    height: 2px;
    background: rgba(47, 108, 143, 0.18);
}

.fpt-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2px;
}
.fpt-item-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }

/* Overstyrer de kolliderende .jtl-note-regler (border-radius/padding/display). */
.fpt-mk {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    padding: 0;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.12s ease;
}
.fpt-mk:hover, .fpt-mk:focus-visible { transform: scale(1.12); outline: none; }
.fpt-mk svg { width: 18px; height: 18px; display: block; }

.fpt-date { font-size: 0.66rem; color: #6a82a0; margin-top: 6px; white-space: nowrap; }
.fpt-tt {
    font-size: 0.7rem;
    font-weight: 600;
    color: #33526f;
    line-height: 1.2;
    margin-top: 2px;
    text-align: center;
    max-width: 84px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere; /* lange ord ("Telefonkonsultation") ombrydes i stedet for at klippes */
    hyphens: auto;
}

.fpt-foot { text-align: center; margin-top: 8px; }
.fpt-more {
    border: 0;
    background: transparent;
    color: #2f6c8f;
    font-size: 0.74rem;
    cursor: pointer;
    border-bottom: 1.5px solid transparent;
    padding-bottom: 1px;
}
.fpt-more:hover { border-bottom-color: rgba(47, 108, 143, 0.4); }

/* ── Lodret variant: tidslinje-skinne i højre side (Vertical=true) ────────────── */
.fpt--vertical .fpt-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.fpt--vertical .fpt-legend { gap: 6px 12px; }

/* Lodret akse med markørerne stablet ovenpå. */
.fpt--vertical .fpt-track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 6px 0 0 0;
}
.fpt--vertical .fpt-axis {
    left: 17px;
    right: auto;
    top: 12px;
    bottom: 10px;
    height: auto;
    width: 2px;
}
.fpt--vertical .fpt-item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    padding: 0;
}
.fpt--vertical .fpt-item-text { align-items: flex-start; padding-top: 2px; }

/* Mindre markør i skinnen, så rækkerne står tæt. */
.fpt--vertical .fpt-mk { width: 34px; height: 34px; flex-shrink: 0; }
.fpt--vertical .fpt-mk svg { width: 16px; height: 16px; }

.fpt--vertical .fpt-date { margin-top: 0; font-size: 0.64rem; }
.fpt--vertical .fpt-tt {
    max-width: none;
    text-align: left;
    margin-top: 1px;
    -webkit-line-clamp: 2;
}
.fpt--vertical .fpt-yeargroup { margin-top: 0; }
.fpt--vertical .fpt-yearlabel { margin: 6px 0 2px 40px; }
.fpt--vertical .fpt-foot { text-align: left; padding-left: 40px; }