/*
  Eigen aanpassingen, na de Webflow-stylesheets geladen.

  Alles in css/adnew.webflow.css komt uit Webflow en blijft ongemoeid: dat is
  de bron waar de 1-op-1-controle tegenaan legt. Wat hier staat is bewust
  anders dan het origineel, met de reden erbij.
*/

/* ---------------------------------------------------------------------------
   Kunstenaarsoverzicht: portretten gelijk, vlag naast de naam vandaan

   De portretten kwamen in hun eigen verhouding binnen — de een vierkant, de
   ander staand — waardoor de foto's op verschillende hoogtes eindigden en de
   namen niet op één lijn stonden. Ze worden nu allemaal vierkant bijgesneden
   vanuit het midden, zodat het raster rustig wordt.

   Daarbij hing het landvlaggetje 39px onder de foto terwijl de naam op 32px
   begon; die twee liepen dus door elkaar heen. De vlag staat nu strak onder
   de foto en de naam heeft ruimte gekregen.
--------------------------------------------------------------------------- */

.link-blok-kunstenaars .portrait-kunstenaar {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%; /* iets hoger: gezichten zitten zelden in het midden */
  width: 100%;
}

.link-blok-kunstenaars .vlag-land {
  inset: auto 0% -1.75rem 50%;
}

.link-blok-kunstenaars .margin-top.margin-medium {
  margin-top: 3.25rem;
}

@media screen and (max-width: 767px) {
  .link-blok-kunstenaars .margin-top.margin-medium {
    margin-top: 2.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Kaders houden hun vorm, ook zonder foto

   Niet elke kunstenaar heeft een portret in de CMS staan. Zonder deze regels
   klapt zo'n tegel in elkaar en staat de rest van het raster scheef. Nu blijft
   er een rustig grijs vlak staan, even groot als de foto's ernaast.
--------------------------------------------------------------------------- */

.link-blok-kunstenaars .frame {
  aspect-ratio: 1 / 1;
  background-color: #ececec;
  width: 100%;
}

.image-kunstenaar-wrapper {
  aspect-ratio: 1 / 1;
  background-color: #ececec;
}

.image-kunstenaar-wrapper .portrait-kunstenaarpagina {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   De banner op de homepage: een sluitknop die je kunt raken

   Het was een kaal 'x'-tekentje zonder ruimte eromheen. Op een telefoon is dat
   een doelwit van een paar millimeter. Het wordt nu een rond vlak van 44 bij
   44 pixels — de maat die als minimum geldt voor iets wat je met een vinger
   moet raken — met een duidelijke rand eromheen.
--------------------------------------------------------------------------- */

.popup-topbar-2 {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: auto;
}

.close-btn-malaga-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 0 1px #0000001a;
  font-size: 1.25rem;
  line-height: 1;
  text-transform: lowercase;
  transition: background-color 0.2s, transform 0.2s;
}

.close-btn-malaga-2:hover {
  background-color: var(--accent, #d9534f);
  color: #fff;
  transform: scale(1.05);
}

.close-btn-malaga-2:focus-visible {
  outline: 2px solid var(--accent, #d9534f);
  outline-offset: 2px;
}

/* Ruimte voor de knop, zodat hij niet over het beeld valt. */
.popup-inner-2 {
  padding-top: 3.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .close-btn-malaga-2 {
    transition: none;
  }
  .close-btn-malaga-2:hover {
    transform: none;
  }
}