/* Layouts (fase 4b): wat Profielhulp, Eigen pagina's (delen), het crewpaneel (keuren), de homepage en /contests delen.
   Het voorbeeld van een layout, de staal van een gedeelde layout en de kaart Layout van de week. Geladen via config
   assets.needs. */

/* ---- Het voorbeeld naast het formulier (uit profielhulp.css, 3b) ---- */
.ph-layout-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap-panels); align-items: start; }
@media (max-width: 59.99rem) { .ph-layout-detail { grid-template-columns: minmax(0, 1fr); } }
.ph-layout-kader { display: block; width: 100%; height: 40rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }

/* ---- Staal: een klein profiel in de kleuren van de stijl (pagina, vak, accent), met het eerste plaatje erin. Zonder stijl
   de kleuren van de site. ---- */
.lv-staal { display: grid; place-items: center; aspect-ratio: 8 / 5; padding: var(--space-md) 12%; background: var(--lv-pagina, var(--color-bg)); }
.lv-staal-vak { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-top: .375rem solid var(--lv-accent, var(--color-action));
                border-radius: var(--radius-sm); background: var(--lv-vak, var(--color-surface)); box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.lv-staal img { display: block; max-width: 70%; max-height: 4.5rem; width: auto; height: auto; object-fit: contain; }
.ph-layout-kaart .lv-staal { border-bottom: 1px solid var(--color-border); }

/* ---- Layout van de week: staal links, tekst rechts; smal onder elkaar ---- */
.lv-week { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.lv-week .lv-staal { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.lv-week-tekst { display: grid; gap: var(--space-2xs); justify-items: start; min-width: 0; }
.lv-week-tekst h3 { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.lv-week-tekst p { margin: 0; }
.lv-week-wanneer { display: flex; align-items: center; gap: var(--space-3xs); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700;
                   letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 29.99rem) { .lv-week { grid-template-columns: minmax(0, 1fr); } }

/* ---- Kopjes in de lijst: Van de crew, Van leden ---- */
.lv-sectie { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-xl); }
.col > .lv-sectie:first-child { margin-top: 0; }

/* ---- De plaatjes die meegaan (delen, keuren) ---- */
.lv-kop { margin: 0 0 var(--space-xs); font-size: var(--text-base); }
.lv-plaatjes { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-xs); padding: 0; list-style: none; }
.lv-plaatjes li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.lv-plaatjes img { width: 3rem; height: 3rem; object-fit: contain; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.lv-plaatjes span { display: grid; font-size: var(--text-sm); overflow-wrap: anywhere; }
.lv-plaatjes small { color: var(--color-text-muted); }

/* ---- Crewpaneel ---- */
.lv-admin-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); }
.lv-redenen { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; border: 0; }
.lv-redenen legend { margin-bottom: var(--space-2xs); padding: 0; font-weight: 600; }