/* ==========================================================================
   MK Newsletter – Clean & Consistent (2025-11-08)
   - Einheitliche Typo & Icon-Sizes
   - TEC: Monatsansicht hart überschreiben (rechtsbündig)
   - Mobil: immer stapeln & mittig
   ========================================================================== */

/* --- Base Layout --------------------------------------------------------- */
.mk-newsletter-section {
  margin: 20px auto;
}

.mk-newsletter-header,
.mk-newsletter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 10px auto;
}

.mk-newsletter-left { display: flex; align-items: center; gap: 10px; }
.mk-newsletter-right { display: flex; flex-direction: column; gap: 8px; }

/* --- Titel / Typo -------------------------------------------------------- */
/* Standard: rechtsbündig auf Desktop */
.mk-newsletter-title,
.tribe-events .mk-newsletter-title {
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  font-size: clamp(1.125rem, 1.6vw, 1.4rem) !important;
  text-align: right !important;
}

/* --- Icons: Größe & Ausrichtung (Desktop rechts) ------------------------ */
.mk-newsletter-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.mk-newsletter-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

.mk-newsletter-icons img {
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;                 /* verhindert baseline-Shift */
  transition: transform 0.2s ease;
}

.mk-newsletter-icons img:hover { transform: scale(1.06); }

/* --- The Events Calendar (TEC) – robuste Regeln ------------------------- */
/* In TEC rutschen Titel & Icons wegen eigener Grids/Typo.
   Wir erzwingen eine konsistente, rechte Ausrichtung, speziell in der Monatsansicht. */

.tribe-events .mk-newsletter-row,
.tribe-events .mk-newsletter-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.tribe-events .mk-newsletter-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;     /* Titel + Icons rechts in TEC */
  gap: 8px !important;
}

.tribe-events .mk-newsletter-icons {
  justify-content: flex-end !important; /* Icons rechts in TEC */
  gap: 14px !important;
}

/* Historische Verschiebungen neutralisieren */
.tribe-events .mk-newsletter-icons img {
  transform: none !important;
  margin: 0 !important;
}

/* --- Monatsansicht (harte Spezifizität) --------------------------------- */
.tribe-events-view--month .mk-newsletter-row,
.tribe-events-view--month .mk-newsletter-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.tribe-events-view--month .mk-newsletter-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; /* Titel + Icons rechts */
  gap: 8px !important;
}

.tribe-events-view--month .mk-newsletter-title {
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  font-size: clamp(1.125rem, 1.6vw, 1.4rem) !important;
  text-align: right !important;
}

.tribe-events-view--month .mk-newsletter-icons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.tribe-events-view--month .mk-newsletter-icons img {
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  transform: none !important;
  margin: 0 !important;
}

/* --- Buttons / Links (falls vorhanden) ---------------------------------- */
.mk-newsletter-header .button,
.mk-newsletter-row .button,
.mk-newsletter-left .button {
  white-space: nowrap;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .mk-newsletter-header,
  .mk-newsletter-row,
  .tribe-events .mk-newsletter-header,
  .tribe-events .mk-newsletter-row,
  .tribe-events-view--month .mk-newsletter-header,
  .tribe-events-view--month .mk-newsletter-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .mk-newsletter-right,
  .tribe-events .mk-newsletter-right,
  .tribe-events-view--month .mk-newsletter-right {
    align-items: center !important;     /* mobil mittig */
    gap: 10px !important;
  }

  .mk-newsletter-title,
  .tribe-events .mk-newsletter-title,
  .tribe-events-view--month .mk-newsletter-title {
    text-align: center !important;      /* mobil zentriert */
  }

  .mk-newsletter-icons,
  .tribe-events .mk-newsletter-icons,
  .tribe-events-view--month .mk-newsletter-icons {
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap;
  }

  .mk-newsletter-icons img,
  .tribe-events .mk-newsletter-icons img,
  .tribe-events-view--month .mk-newsletter-icons img {
    width: 48px !important;
    height: 48px !important;
  }
}

/* === Hard-Fix: Startseite & TEC-Monatsansicht rechtsbündig (Desktop) === */
@media (min-width: 769px) {

  /* Falls ein Eltern-Container zentriert: neutralisieren */
  .home .mk-newsletter-section,
  .tribe-events-view--month .mk-newsletter-section {
    text-align: initial !important;
  }

  /* Rechte Spalte konsequent rechtsbündig */
  .home .mk-newsletter-right,
  .tribe-events-view--month .mk-newsletter-right {
    align-items: flex-end !important;
  }

  /* Titel rechts */
  .home .mk-newsletter-title,
  .tribe-events-view--month .mk-newsletter-title {
    text-align: right !important;
  }

  /* Icons rechts ausrichten */
  .home .mk-newsletter-icons,
  .tribe-events-view--month .mk-newsletter-icons {
    justify-content: flex-end !important;
  }

  /* Sicherheitsnetz gegen evtl. globale Bild-/Inline-Regeln */
  .home .mk-newsletter-icons img,
  .tribe-events-view--month .mk-newsletter-icons img {
    display: block !important;
    margin: 0 !important;
    transform: none !important;
  }
}