/* ============================================================
   publiek/over.css - de rij onder de speler: het blok "About this
   walkthrough" (de feitenzin en de eigen tekst bij het spel) en
   rechts het vak "Stuck?" (vastzoek.css).
   Hoort bij templates/public/delen/_over.html.
   ============================================================ */

.over-rij { margin-top: 20px; }
/* met het zoekvak erbij: links het blok, rechts het vak, even hoog */
.over-rij.met-zoek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 360px);
    gap: 16px;
    align-items: stretch;
}

/* met de knop Stuck Wiki naast het zoekvak is het vak iets breder */
.over-rij.met-zoek.met-wiki { grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 430px); }

.over {
    padding: 16px 18px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: var(--vlak);
}
.over h2 { margin-bottom: 10px; font-size: 16px; }

/* De tekst onder de kop staat in een vak van een vaste hoogte: de
   feitenzin en drie regels eigen tekst. Wat langer is, schuift in het
   vak; de kop blijft staan. Door de vaste hoogte is het blok op elke
   pagina even hoog, en het vak "Stuck?" ernaast ook. */
.over-tekst {
    --regel: calc(14.5px * 1.6);
    height: calc(4 * var(--regel) + 10px);   /* 1 feitenzin + 10px ruimte + 3 regels */
    padding-right: 10px;         /* ruimte voor de schuifbalk */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6d4df0 #10143c;
}
.over-tekst:focus-visible { outline: 2px solid var(--paars-licht); outline-offset: 4px; }
.over p {
    margin: 0 0 10px;
    max-width: 110ch;            /* een regel blijft leesbaar op een breed scherm */
    font-size: 14.5px;
    line-height: 1.6;
    color: #c8cdf0;
    overflow-wrap: anywhere;
}
.over p:last-child { margin-bottom: 0; }

/* de feitenzin: wat de site zelf weet van deze walkthrough */
.over .over-feit { font-weight: 700; color: #ebe8ff; }

/* Zonder script is er geen zoekvak (zie vastzoek.css): het blok krijgt
   dan de hele breedte. */
@media (scripting: none) {
    .over-rij.met-zoek,
    .over-rij.met-zoek.met-wiki { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    /* het zoekvak komt onder het blok */
    .over-rij.met-zoek,
    .over-rij.met-zoek.met-wiki { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .over-rij { margin-top: 16px; }
    .over { padding: 12px 14px; }
    .over p { font-size: 14px; }
    /* Smal scherm: de feitenzin alleen is al drie of vier regels. Geen
       vaste hoogte meer, wel een grens: ongeveer acht regels. */
    .over-tekst { --regel: calc(14px * 1.6); height: auto; max-height: calc(8 * var(--regel) + 10px); }
}