/* Zwemschool Lotus — kleine globale aanvullingen op Divi.
   Alleen voor effecten die met de native module-instellingen van Divi niet te maken zijn.
   Bewerkbaar via wp-content/uploads/lotus-design.css
   (ingeladen door wp-content/novamira-sandbox/lotus-gf-styles.php). */

/* 1. Koppen en leads in het ontwerp gebruiken text-wrap:balance voor een mooiere
      regelafbreking. Divi heeft daar geen instelling voor. Zet de klasse
      "lotus-balance" op de module (Geavanceerd > CSS-klasse) om dit te gebruiken. */
.lotus-balance .et_pb_module_header,
.lotus-balance .et_pb_text_inner p { text-wrap: balance; }

/* 2. Uitgelichte kaart met verloopkader (blauw > groen > geel > oranje > rood).
      Een verlooprand is met de native randinstellingen van Divi niet te maken.
      Wordt gezet door de kolompreset "Kaart wit – uitgelicht". */
.lotus-kaart-uitgelicht {
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              linear-gradient(115deg, #006BDE 0%, #018D1C 34%, #F5C542 60%, #F08A24 78%, #E0301E 100%) border-box;
  border-color: transparent;
}


/* 3. Divi verwijst al zijn Font Awesome-iconen naar de legacy familie "FontAwesome".
      De Font Awesome-kit levert die familie op de front-end alleen als
      v4-compatibiliteitsset (ongeveer 600 iconen). Iconen die pas in FA5 of later zijn
      toegevoegd - zwemmer, golven, medaille, dobbelsteen, kaartmarkering - vallen
      daarbuiten en renderen als leeg blokje, terwijl ze in de builder wel kloppen
      (daar staat de volledige kit-CSS wel).
      De volledige familie "Font Awesome 6 Pro" is op de front-end al geladen; alleen
      de verwijzing ernaar ontbreekt. Onderstaande regel corrigeert dat.
      Scope: uitsluitend .et-pb-icon. Divi's eigen ETmodules-iconen (knop-pijlen en
      accordeon-toggles) zitten op ::before/::after en blijven ongemoeid. */
#page-container .et-pb-icon,
#et-boc .et-pb-icon {
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", FontAwesome !important;
}


/* 4. Kop van een blogbericht (Theme Builder body-layout).
      Divi genereert de sectie-achtergrond voor body-layouts met de selector-prefix
      '.et-l--body > .et_builder_inner_content', maar rendert de body-layout zonder die
      wrapper. De achtergrond valt daardoor weg en witte tekst wordt onleesbaar.
      Daarom staat de achtergrond hier, gekoppeld aan de CSS-klasse van de sectie. */
#main-content .lotus-post-hero.et_pb_section { background-color: #0a2340; }

/* Uitgelichte afbeelding in de kop van een blogbericht. De post-title-module van Divi
   biedt geen randinstelling voor die afbeelding, dus staat de radius hier.
   24px is dezelfde waarde als de grote losse afbeeldingen elders op de site. */
.lotus-post-hero .et_pb_title_featured_container img { border-radius: 24px; }

/* 5. Blogoverzicht. De Divi-blogmodule haalt de berichten automatisch op; deze regels
      geven hem dezelfde kaartvorm als het handgemaakte blok dat hij vervangt:
      afbeelding links, tekst rechts, witte kaart met 24px radius. Waarden overgenomen
      van die oude kaart, zodat er visueel niets verandert. */
.lotus-blogkaarten .et_pb_post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: center;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(6, 38, 71, .10);
  border: 1px solid #E4EAF0;
  overflow: hidden;
  margin-bottom: 32px;
  padding: 0;
}
.lotus-blogkaarten .et_pb_post .et_pb_image_container {
  grid-column: 1; grid-row: 1 / span 3; align-self: stretch; margin: 0; height: 100%;
}
.lotus-blogkaarten .et_pb_post .et_pb_image_container a,
.lotus-blogkaarten .et_pb_post .et_pb_image_container img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.lotus-blogkaarten .et_pb_post .entry-title {
  grid-column: 2; margin: 0; padding: 36px 40px 0;
  font-family: Nunito, sans-serif; font-size: 24px; font-weight: 700;
  line-height: 1.15em; color: #0A2340;
}
.lotus-blogkaarten .et_pb_post .entry-title a { color: inherit; text-decoration: none; }
.lotus-blogkaarten .et_pb_post .post-meta {
  grid-column: 2; margin: 0; padding: 10px 40px 0;
  font-family: "Nunito Sans", sans-serif; font-size: 15px; color: #5B6B7C;
}
.lotus-blogkaarten .et_pb_post .post-meta a { color: #006BDE; text-decoration: none; }
.lotus-blogkaarten .et_pb_post .post-content { grid-column: 2; padding: 14px 40px 36px; }
.lotus-blogkaarten .et_pb_post .post-content p {
  font-family: "Nunito Sans", sans-serif; font-size: 16px; line-height: 1.55em;
  color: #33414F; margin: 0;
}
.lotus-blogkaarten .et_pb_post .post-content .more-link {
  display: inline-block; margin-top: 20px;
  font-family: Nunito, sans-serif; font-size: 16px; font-weight: 600;
  color: #006BDE; border: 2px solid #006BDE; border-radius: 3px;
  padding: 10px 22px; text-decoration: none;
}
.lotus-blogkaarten .et_pb_post .post-content .more-link:hover { background: #006BDE; color: #FFFFFF; }

@media (max-width: 980px) {
  .lotus-blogkaarten .et_pb_post { grid-template-columns: 1fr; }
  /* Alle onderdelen terug naar een enkele kolom, anders houdt grid-column:2
     uit de desktopregels een lege tweede kolom in stand. */
  .lotus-blogkaarten .et_pb_post .et_pb_image_container,
  .lotus-blogkaarten .et_pb_post .entry-title,
  .lotus-blogkaarten .et_pb_post .post-meta,
  .lotus-blogkaarten .et_pb_post .post-content { grid-column: 1; grid-row: auto; }
  .lotus-blogkaarten .et_pb_post .et_pb_image_container { height: auto; }
  .lotus-blogkaarten .et_pb_post .et_pb_image_container img { height: auto; aspect-ratio: 16 / 10; }
  .lotus-blogkaarten .et_pb_post .entry-title { padding: 28px 24px 0; font-size: 21px; }
  .lotus-blogkaarten .et_pb_post .post-meta { padding: 8px 24px 0; }
  .lotus-blogkaarten .et_pb_post .post-content { padding: 12px 24px 28px; }
}
}