/* ============================================================
   /cms-info: één pagina die er op elk thema hetzelfde uitziet.

   WAAROM EEN EIGEN BESTAND. Deze pagina wordt door élk thema gerenderd (elk `cms_info.php` valt
   terug op die van `default`), maar leunde op klassen die alleen het standaardthema in zijn CSS
   heeft staan. Op de vier thema's met een eigen schil viel de opmaak daardoor helemaal weg: de
   systeemeisen werden een doorlopende zin, de makersfoto ging paginabreed, en de statuskaart
   belandde onderaan. Dat was op 29 augustus 2026 op wieringerwerf.nl te zien.

   GEEN THEMAKLEUREN. Alles is opgebouwd uit `currentColor`, dus de pagina neemt de kleur van het
   thema over zonder er iets van te hoeven weten -- ook in nachtmodus. `color-mix` doet het werk;
   waar dat niet zou werken staat een gewone kleur als terugval vóór de regel.
   ============================================================ */

.ci-pagina {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
    /* Eigen omhulsel, want de pagina kan niet weten of het thema er al een omheen zet. Het
       standaardthema deed dat niet: zonder deze regels plakte de tekst tegen de vensterrand. Een
       thema met een eigen kolom heeft die marge al, en dan valt `auto` gewoon op nul uit. */
    max-width: 1100px;
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2rem) clamp(.75rem, 2vw, 1.25rem);
}

.ci-kop .ci-eyebrow {
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .65;
}

.ci-kop h1 {
    margin: 0 0 .6rem;
    line-height: 1.15;
}

.ci-kop p {
    margin: 0;
    max-width: 68ch;
    opacity: .85;
}

.ci-kaart {
    padding: 1.25rem;
    border: 1px solid rgba(128, 128, 128, .28);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 14px;
    background: rgba(128, 128, 128, .05);
    background: color-mix(in srgb, currentColor 4%, transparent);
}

.ci-kaart > .ci-eyebrow {
    margin: 0 0 .3rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .6;
}

.ci-kaart > h2 {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
    line-height: 1.2;
}

.ci-kaart > h2:last-child {
    margin-bottom: 0;
}

/* De maker: tekst links, foto rechts, en onder elkaar zodra het krap wordt. */
.ci-maker {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    align-items: start;
}

.ci-maker-tekst > p {
    margin: 0 0 .75rem;
    max-width: 60ch;
    opacity: .85;
}

.ci-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .75rem;
}

.ci-tags span {
    padding: .25rem .6rem;
    border: 1px solid rgba(128, 128, 128, .3);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    opacity: .85;
}

.ci-maker-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .5rem;
}

.ci-maker-links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border: 1px solid rgba(128, 128, 128, .3);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}

.ci-maker-rol {
    display: block;
    opacity: .7;
}

/* De foto is een knop: aanklikken opent hem groter. */
.ci-maker-foto {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(128, 128, 128, .3);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 12px;
    background: none;
    overflow: hidden;
    cursor: zoom-in;
}

.ci-maker-foto img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
}

/* Systeemeisen en status: altijd een lijst onder elkaar, nooit een doorlopende zin. */
.ci-lijst {
    display: grid;
    gap: 0;
    margin: 0;
}

.ci-lijst > * {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .6rem 0;
    border-top: 1px solid rgba(128, 128, 128, .22);
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    text-decoration: none;
}

.ci-lijst > *:first-child {
    border-top: 0;
}

.ci-lijst i {
    flex: 0 0 auto;
    opacity: .7;
}

.ci-cijfers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: .75rem;
}

.ci-cijfers article {
    display: grid;
    gap: .15rem;
    padding: .8rem;
    border: 1px solid rgba(128, 128, 128, .28);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 12px;
}

.ci-cijfers strong {
    font-size: 1.05rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ci-cijfers span {
    font-size: .8rem;
    opacity: .7;
}

.ci-changelog h3 {
    margin: 1rem 0 .25rem;
    font-size: 1rem;
}

.ci-changelog h3:first-child {
    margin-top: 0;
}

.ci-changelog p {
    margin: 0;
    max-width: 70ch;
    opacity: .85;
}

@media (max-width: 720px) {
    .ci-maker {
        grid-template-columns: minmax(0, 1fr);
    }

    .ci-maker-foto img {
        max-height: 200px;
    }
}

/* ------------------------------------------------------------
   Het venster waarin de makersfoto groter wordt getoond.

   DEZE REGEL IS DE HELE REDEN DAT HIJ HIER STAAT. Het sjabloon zet het element op `hidden`, maar
   vier thema's geven `.cms-image-modal` een eigen `display: flex` -- en een `display` wint van
   `hidden`. Het venster stond daardoor permanent open, als een leeg kaartje met het woord
   "Afbeelding" midden op de pagina. Dat was op 29 augustus 2026 op wieringerwerf.nl te zien, en
   even goed op franeker, kolhorn en julianadorp.

   De regel in élk themabestand zetten zou werken, maar dan moet de volgende die een thema maakt het
   opnieuw weten. Hier staat hij één keer, op de pagina waar het element bij hoort, met een selector
   die van elke kale `.cms-image-modal` wint. Het uiterlijk van het venster laten we bewust aan het
   thema: dat is smaak, dit is werking.
   ------------------------------------------------------------ */
.cms-image-modal[hidden] {
    display: none;
}

/* ------------------------------------------------------------
   Het grid rechtzetten als een zijkolom ontbreekt.

   `.portal-contact-v1473` heeft drie vaste sporen en plaatst zijn kinderen automatisch. Tekent de
   pagina de linkerkolom niet -- omdat de beheerder het menu uit heeft gezet, of omdat de
   portalmenu's op een verse installatie nog niet klaar zijn -- dan landt de inhoud in het smalle
   menuspoor van 290px, met een lege baan van 900px ernaast. Dat is geen randgeval: een verse uitrol
   zit er meteen in.

   ACHTER DEZELFDE SCHERMGRENS als de mobiele terugval van dat grid (`@media(max-width:1280px)` zet
   hem op één kolom). Zou deze regel daarbuiten staan, dan wint hij door zijn hogere specificiteit
   ook op een telefoon, en dan zijn we het probleem daar aan het maken.
   ------------------------------------------------------------ */
@media (min-width: 1281px) {
    .portal-contact-v1473.ci-zonder-links {
        grid-template-columns: minmax(0, 900px) clamp(230px, 15vw, 290px);
        justify-content: center;
    }

    .portal-contact-v1473.ci-zonder-rechts {
        grid-template-columns: clamp(230px, 15vw, 290px) minmax(0, 900px);
        justify-content: center;
    }

    .portal-contact-v1473.ci-zonder-links.ci-zonder-rechts {
        grid-template-columns: minmax(0, 900px);
        justify-content: center;
    }
}