/* =========================================================================
   figurer.css — øvelsesfigurerne og træningssidens pc-visning.
   Ejes af figurer-modulet (figurer.js + traening.js). Indlæses efter app.css.

   Figuren tegner selv sit gulv; rammen omkring den er bare isblå bund.
   ========================================================================= */

.figur { display: block; position: relative; }
.figur svg { width: 100%; height: 100%; display: block; }

/* Lille figur på øvelseskortet: lidt større end før, så man kan se hvad personen
   laver, og uden indre luft, så gulvet går helt ud til kanten. */
.traening-side .oevelse-top { grid-template-columns: 72px minmax(0, 1fr) auto; }
.traening-side .oevelse-top .fig { width: 72px; height: 54px; padding: 0; display: block; overflow: hidden; border-radius: 12px; background: var(--himmel); }
.traening-side .oevelse-top .fig .figur { height: 100%; }

/* Stor figur: i arket på telefonen og i panelet på pc. */
.figur.stor { aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: var(--himmel); }
.ark .figur.stor { margin-top: 6px; }
.figur-knap {
    position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; background: var(--hvid); color: var(--blaa); box-shadow: var(--skygge);
    transition: background .15s, color .15s;
}
.figur-knap svg { width: 18px; height: 18px; }
.figur-knap:hover { background: var(--blaa); color: var(--hvid); }
/* Startstillingen som skygge giver kun mening når figuren står stille. */
.figur.spiller .f-skygge { display: none; }

/* ------------------------------------------- pc: liste til venstre, øvelsen til højre
   Fra 1200px skjuler pc-layoutet Buddy-panelet på træningssiden, så siden har
   hele bredden. Man vælger øvelsen i listen og logger i panelet ved siden af. */
@media (min-width: 1200px) {
    .indhold.smal.traening-side.delt { max-width: 1160px; }
    .tr-delt { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }

    .tr-liste .oevelse { transition: background .15s; }
    .tr-liste .oevelse-top { padding: 12px 14px; gap: 12px; }
    .tr-liste .oevelse:not(.valgt):hover { background: var(--himmel-2, #f6f9ff); }
    /* Den valgte øvelse er kobolt, ligesom den valgte dag og den valgte chip. */
    .tr-liste .oevelse.valgt { background: var(--blaa); }
    .tr-liste .oevelse.valgt h3 { color: var(--hvid); }
    .tr-liste .oevelse.valgt small, .tr-liste .oevelse.valgt .skema { color: rgba(255, 255, 255, .82); }

    .tr-detalje {
        position: sticky; top: 24px; display: grid; gap: 12px;
        background: var(--hvid); border-radius: var(--r-l); box-shadow: var(--skygge); padding: 16px 16px 20px;
    }
    .tr-detalje .figur.stor { aspect-ratio: 2 / 1; }
    .tr-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 6px 0; }
    .tr-titel h2 { font-size: 26px; }
    .tr-titel small { display: block; color: var(--marine-2); font-size: 14.5px; margin-top: 2px; }
    .tr-titel .skema { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--blaa); white-space: nowrap; }
    .tr-krop { display: grid; gap: 10px; padding: 0 6px; }
    .tr-krop .lille { font-size: 15.5px; }
    .tr-fod { padding: 4px 6px 0; }
    .tr-fod a { font-weight: 650; text-decoration: none; white-space: nowrap; }
    .tr-fod .tr-saadan { display: inline; padding: 0; font: inherit; font-weight: 650; color: var(--blaa); white-space: nowrap; }
}