/* gplanr: tablets. Every @media rule for tablets lives here (phones: main_gsm.css, loaded after this file, so it can
   refine what is set here). Tablet = up to 900px wide: too narrow for the sign-up form to sit on top of the picture. */

/* Tablets and smaller */
@media (max-width: 900px) {
    /* Room under the content for the fixed footer. */
    .divbody { padding-bottom: 4.5rem; }
    .page-landing .divbody { padding-bottom: 4.5rem; }

    /* Landing page: put the real form under the picture instead of on top of it. */
    .status { position: static; margin: .8rem 1rem .4rem; }
    .privacy, .privacy2 { position: static; margin: 0 1rem .6rem; }
    .privacy { margin-bottom: 1.5rem; }
    .signup { position: static; width: auto; height: auto; margin: 1rem 1rem 0; flex-wrap: wrap; gap: .6rem; }
    .signup input[type=email], .signup button { height: 3rem; font-size: 1rem; border-radius: 6px; box-shadow: none; }
    .signup input[type=email] { flex: 1 1 14rem; padding: 0 1rem; }
    .signup button { flex: 1 1 8rem; }
}

/* Tablet range only: a little more room for the cards and the headings. */
@media (min-width: 641px) and (max-width: 900px) {
    .card { width: min(460px, 100%); padding: 2rem; }
    .page-title { font-size: 2rem; }
    .brand { width: min(460px, 70vw); }
    .org-image { max-width: min(460px, 70vw); }
}

/* Beheer: the menu becomes a bar above the content. */
@media (max-width: 900px) {
    .page-beheer .divbody { padding: 0 0 4.5rem; gap: 0; }
    .sidemenu {
        position: static; width: 100%; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center;
        gap: .4rem; padding: .75rem 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }
    .sidemenu-title { flex: 0 0 100%; margin: 0; }
    .sidemenu .sidemenu-back { margin: 0 0 0 auto; }
    .beheer { padding: 1rem; max-width: none; }
    .beheer-split { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .beheer-list { max-height: 16rem; }
}

/* Beheer, activities: participant rows get two lines on tablets (kind + choice, then required + remove). */
@media (max-width: 900px) {
    .beheer-prow { grid-template-columns: 9rem minmax(0, 1fr); }
    .beheer-prow .beheer-preq { grid-column: 1; }
    .beheer-prow .beheer-premove { grid-column: 2; justify-self: start; }
}