/* Homepage (shell v6): data-rijk drie-kolomsmodel zoals i-cu in 2003, met een duidelijke middenkolom.
   ≥1120 px: linkerrail 244 / midden / rechterrail 244, tussen panelen --gap-panels (16 mobiel, 24 vanaf 768 px).
   768–1119 px: midden plus één zijrail van 248 px waarin linker- en rechterrail onder elkaar staan.
   ≤767 px: de kolommen vervallen (display: contents) en de panelen volgen de prioriteit via .home-o*. */

.home { display: grid; gap: var(--gap-panels); grid-template-columns: minmax(0, 1fr); align-items: start; }
.home-col { display: flex; flex-direction: column; gap: var(--gap-panels); min-width: 0; }

@media (min-width: 768px) {
  .home {
    grid-template-columns: minmax(0, 1fr) var(--rail-w-tablet);
    grid-template-rows: auto 1fr;             /* extra hoogte van het midden komt onder de rechterrail, niet ertussen */
    grid-template-areas: "main left" "main right";
  }
  .home-main { grid-area: main; }
  .home-left { grid-area: left; }
  .home-right { grid-area: right; }
}
@media (min-width: 1120px) {
  .home {
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
    grid-template-rows: auto;
    grid-template-areas: "left main right";
  }
}

/* Mobiel: welkom → nu gebeurt dit → online → forum → nieuwe leden → nieuws → gewijzigd → in the spot → stembus →
   actueel → jarigen → extra → contests. Onderdelen die er alleen met inhoud zijn, staan bij hun verwante paneel. */
@media (max-width: 767px) {
  .home-col { display: contents; }
  .home > .home-col > * { order: 50; }
  .home-o1 { order: 1 !important; }   .home-o2 { order: 2 !important; }   .home-o3 { order: 3 !important; }
  .home-o4 { order: 4 !important; }   .home-o5 { order: 5 !important; }   .home-o6 { order: 6 !important; }
  .home-o7 { order: 7 !important; }   .home-o8 { order: 8 !important; }   .home-o9 { order: 9 !important; }
  .home-o10 { order: 10 !important; } .home-o11 { order: 11 !important; } .home-o12 { order: 12 !important; }
  .home-o13 { order: 13 !important; } .home-o14 { order: 14 !important; } .home-o15 { order: 15 !important; }
  .home-o16 { order: 16 !important; } .home-o17 { order: 17 !important; } .home-o18 { order: 18 !important; }
  .home-o19 { order: 19 !important; } .home-o20 { order: 20 !important; }
}

/* ---- Accountblok (app.css): op mobiel staat alleen het inlogblok op de homepage, als eerste (home-o1). Ingelogd doen de header
   en de menulade het al. ---- */
@media (max-width: 767px) {
  .home .account-blok.is-member { display: none; }
}

/* ---- Overige homepanelen ---- */
.home-now .feed-av, .home-now .feed-av .avatar { width: 2rem; height: 2rem; }
.home-now .feed-row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
@container feed (width < 30rem) { .home-now .feed-row { grid-template-columns: 2rem minmax(0, 1fr); } }
.home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-panels); }
.home-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.home .mini-list .status-dot { align-self: center; }
.home .box-body { font-size: var(--text-sm); }
@media (max-width: 959px) { .home-duo { grid-template-columns: minmax(0, 1fr); } }
/* Rails: zinnen mogen daar over twee regels lopen (actueel, extra); titels (forum, nieuws) kappen af met … */
.mini-list.is-wrap li { align-items: baseline; }
.mini-list.is-wrap .grow { white-space: normal; overflow-wrap: anywhere; }
.mini-list.is-wrap > li > .icon { flex-shrink: 0; width: 1rem; height: 1lh; margin: 0; align-self: flex-start; } /* op de eerste regel, ook als de tekst doorloopt */
/* In the spot: alleen een echte pasfoto; zonder foto blijft het een tekstuitnodiging */
.home-spot .spot { align-items: flex-start; gap: var(--space-sm); }
.home-spot .spot .avatar { width: 4rem; height: 4rem; }
.spot-text { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.spot-text .box-sub { margin: 0; }
.spot-quote { font-size: var(--text-sm); line-height: 1.4; quotes: "“" "”"; overflow-wrap: anywhere; }
.spot-also { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-divider); }

@media (max-width: 767px) {
  .home-duo { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Intro voor bezoekers (alleen uitgelogd): korte alinea met twee links onderin, zoals het inlogblok ---- */
.home-intro .box-body > p { margin: 0; max-width: 62ch; line-height: var(--leading-body); }