/* --- Section Card ------------------------------------------------------------------------------------ */
.card .wp-block-column {
    padding-left: clamp(1rem, 2vw + 1rem, 2.5rem);
    padding-right: clamp(1rem, 2vw + 1rem, 2.5rem);
    padding-top: clamp(1.4rem, 2vw + 1rem, 2.5rem);
    padding-bottom: clamp(1.25rem, 2vw + 1rem, 2.5rem);
    box-shadow: var(--box-shadow--primary);
    border-radius: var(--border-radius--medium);
}

/* Hintergrund-Verlauf, leicht animiert -> nur Test, sieht noch gruusig aus */

/* .card .wp-block-column {
    background: linear-gradient(10deg, #a3d1ff, #f7fbff);
    background: linear-gradient(10deg, #ffa4aa, #fff5f5); 
    animation: gradientAnimation 5s ease infinite;
  } */

  /* Die Keyframes verschieben die Hintergrundposition und animieren so den Verlauf 
  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  */

  .card .wp-block-group.is-vertical.is-layout-flex {
    height: 100%;
}

  /* ---------------------------------------------------------------------------------------- */
  

.card .wp-block-buttons>.wp-block-button {
    margin: 0;
}

.card h2 {
    font-size: var(--font-size--x-large);
    margin-left: 0 !important;
    margin-bottom: clamp(0.75rem, 1vw + 1rem, 1rem);
}

/* keinen Abstand nach bei den Absätzen, sonst ist der Mehr-Lesen-Link zu weit weg */
.card p {
    margin: 0;
}

/* alle Karten untereinander darstellen, auf die gesamte Screen-Breite */
@media (max-width: 850px) {
    section.card .wp-block-columns {
        display: grid;
    }
}

/* ------------------------------------------------------------------------------------------------------------ */


/* Einzelne, grosse Karte */
.card .is-style-card-big .wp-block-column {
    padding-left: clamp(1.25rem, 7vw + 1rem, 5rem);
    padding-right:  clamp(1.25rem, 7vw + 1rem, 5rem);
    padding-top:  clamp(1.25rem, 4vw + 1rem, 3rem);
    padding-bottom:  clamp(1.25rem, 4vw + 1rem, 3rem);
}

.card .is-style-card-big h2 {
  font-size: var(--font-size--xx-large);
}

.card .is-style-card-big p {
    font-size: var(--font-size--medium);
    margin: 0;
}


/* --- Media Queries ------------------------------------------------------------------------------------------- */


@media (max-width: 900px) {
  .card .wp-block-columns.alignwide.is-style-default.is-layout-flex {
    gap: 1rem;
  }
}