/* images.css - aanvullende afbeeldingsklassen
   Laad dit bestand NA layout.css:
   <link rel='stylesheet' href='https://kbo-fryslan.nl/styles/layout.css' type='text/css'>
   <link rel='stylesheet' href='https://kbo-fryslan.nl/styles/images.css' type='text/css'>

   Gebruik (direct op de <img>, ook binnen een <p>):
   <img class="img-links"           src="..." alt="...">  tekst loopt rechts om de foto heen
   <img class="img-rechts"          src="..." alt="...">  tekst loopt links om de foto heen
   <img class="img-midden"          src="..." alt="...">  foto gecentreerd, op eigen regel
   <img class="img-gekanteld-links" src="..." alt="...">  links, 30 graden naar links gekanteld
   <img class="img-gekanteld-rechts" src="..." alt="..."> rechts, 30 graden naar rechts gekanteld

   Na een foto met tekst eromheen kun je met class="clear-both" op het
   volgende element het omstromen stoppen.
   De kantelhoek aanpassen kan met: style="--hoek: 15deg" op de <img>.
*/

.img-links,
.img-rechts,
.img-midden,
.img-gekanteld-links,
.img-gekanteld-rechts{
   --hoek: 30deg;
   --img-breedte: 40%;
   --img-max: 18rem;
   inline-size: var(--img-breedte);
   max-inline-size: var(--img-max);
   block-size: auto;
}

/* links: tekst stroomt rechts van de foto */
.img-links{
   float: left;
   margin-block: 0.25rem 0.75rem;
   margin-inline: 0 1.25rem;
}

/* rechts: tekst stroomt links van de foto */
.img-rechts{
   float: right;
   margin-block: 0.25rem 0.75rem;
   margin-inline: 1.25rem 0;
}

/* midden: eigen regel, gecentreerd */
.img-midden{
   --img-breedte: 80%;
   --img-max: 30rem;
   display: block;
   float: none;
   clear: both;
   margin-block: 1rem;
   margin-inline: auto;
}

/* gekanteld: draait om het midden, daarom extra ruimte rondom */
.img-gekanteld-links,
.img-gekanteld-rechts{
   --img-breedte: 35%;
   --img-max: 15rem;
   box-shadow: var(--schaduw);
   margin-block: 1.5rem 3rem;
}
.img-gekanteld-links{
   float: left;
   margin-inline: 1.5rem 2.5rem;
   transform: rotate(calc(var(--hoek) * -1));
}
.img-gekanteld-rechts{
   float: right;
   margin-inline: 2.5rem 1.5rem;
   transform: rotate(var(--hoek));
}

/* smalle schermen: geen omstromen, foto gecentreerd en niet gekanteld */
@media (max-width: 30rem){
   .img-links,
   .img-rechts,
   .img-gekanteld-links,
   .img-gekanteld-rechts{
      --img-breedte: 80%;
      --img-max: 20rem;
      float: none;
      display: block;
      margin-block: 1rem;
      margin-inline: auto;
      transform: none;
   }
}