/* Hohyte Kundenstimmen — Avada-Testimonial-Nachbildung für Post Cards.
   Wird global enqueued; wirkt nur auf Karten, die eine .hohyte-bubble enthalten
   (per :has erkannt). Greift in das Avada-Post-Card-Layout ein (Grid) und
   überschreibt Avada-Defaults mit !important, wo nötig.

   Stil angleichen an das Original-Testimonial-Element auf hohyte.de:
   - Sprechblase + Nase RAHMENLOS (nur #f5f5f5-Farbblock, border-width 0).
   - Typografie: 18px / line-height 30px / letter-spacing 2px, italic.
   - Name + Firma gleiche Größe, Name bold, Firma normal, inline „Name, Firma".
   - 145px eckiger Avatar; Platzhalter rund (Avada-„doe"-Default, 0.75×).

   Erwartete Element-Klassen in der Post Card (Avada Builder):
     .hohyte-bubble  — Text-Element mit dem Zitat (Stimmen-Text)
     .hohyte-avatar  — Image-Element (Featured Image)
     .hohyte-name    — Text-Element mit dem Anzeige-Namen (Custom Field)
     .hohyte-sub     — Text-Element mit der Unterzeile (Custom Field)

   Layout (4 Spalten, 2 Zeilen):
     Zeile 1: Sprechblase vollbreit (Spalten 1–4)
     Zeile 2: [Avatar 145px] [Name] [Firma] [leer]   ← Name + Firma inline */

/* Karte zum Grid machen. overflow:visible hebt Avadas --awb-overflow:hidden
   auf, sonst würde die Nase an der Column-Grenze abgeschnitten. */
.fusion-carousel-item-wrapper:has(.hohyte-bubble) {
    display: grid !important;
    grid-template-columns: 145px auto auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0;
    /* row-gap ≈ Original-Abstand Sprechblase→Autor (~0.5em + 21px) und groß
       genug (>= Nasenhöhe 11px), damit die Nase IM Spalt auf dem Karten-
       Hintergrund liegt, nicht auf dem Avatar-Foto. */
    row-gap: 30px;
    padding: 0 !important;
    overflow: visible !important;
    --awb-overflow: visible !important;
}

/* Swiper-Slide-Hülle schneidet per Avada-Default (overflow:hidden) ab. */
.swiper-slide:has(.hohyte-bubble) {
    overflow: visible !important;
}

/* --- Sprechblase (rahmenlos, wie Original) -------------------------------- */
/* z-index:2 hebt die Sprechblase (inkl. Nase) ÜBER Avadas .fusion-image-wrapper
   (z-index:1), die sonst wegen späterer DOM-Reihenfolge das Bild vor die Nase
   legt. */
.hohyte-bubble {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    background: #f5f5f5 !important;
    border: none !important;          /* Original: border-width 0 */
    border-radius: 0 !important;
    padding: 1.25em 1.5em !important; /* Original: --awb-box-padding Default */
    color: #747474 !important;
    font-style: italic !important;
    font-size: 18px !important;       /* Original: awb-testimonial-text Default */
    line-height: 30px !important;     /* Original: awb-testimonial-text Default */
    letter-spacing: 2px !important;   /* Original: awb-testimonial-text Default */
    text-align: left !important;
    overflow: visible !important;
    box-shadow: none !important;
    z-index: 2;
}
.hohyte-bubble p {
    margin: 0 !important;
}
.hohyte-bubble p + p {
    margin-top: 0.6em !important;
}

/* Nase: einfarbiges #f5f5f5-Dreieck nach unten, links über dem 145-px-Avatar
   (Position = avatar × 0.75 = 108.75px, wie Original awb-triangle). Ohne
   Rahmen (Original border-width 0 → Füllung überdeckt Rahmen komplett).
   Liegt durch den row-gap (30px) auf dem Karten-Hintergrund.
   z-index:3 stellt die Nase über den Sprechblasen-Hintergrund. */
.hohyte-bubble::after {
    content: "";
    position: absolute;
    left: 108px;
    bottom: -11px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 11px 11px 0;        /* ~.625em bei 18px = 11.25px */
    border-top-color: #f5f5f5;
    margin-left: -11px;
    z-index: 3;
}

/* --- Avatar: eckig, eigenes Seitenverhältnis (nicht 1:1, nicht rund) ------- */
.hohyte-avatar {
    grid-column: 1;
    grid-row: 2;
    --awb-aspect-ratio: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
}
/* Avada gibt der Bild-Hülle z-index:1 + position:relative. Da der Avatar-Grid-
   Item selbst keinen Stacking-Context erzeugt, würde diese z-index:1 auf
   Sprechblasen-Ebene mit der Bubble (z-index:2) konkurrieren — wir nehmen sie
   der Hülle weg, damit die Sprechblase+Nase sicher darüber liegen. */
.hohyte-avatar .fusion-image-wrapper {
    z-index: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.hohyte-avatar a {
    border-radius: 0 !important;
    overflow: visible !important;
}
.hohyte-avatar img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    display: block;
}

/* --- Platzhalter, wenn kein Avatar-Bild vorhanden ist ----------------------
   Exakt wie das Avada-Original (testimonial-thumbnail.doe): ein Font-Glyph
   aus der Avada-Webfont „awb-icons" (kein Bild, kein Kreis, kein grauer
   Hintergrund). Breite/Höhe = avatar × 0.75, Font-Größe entsprechend, Farbe
   = Autor-Textfarbe. Greift per :not(:has(img)), wenn das Image-Element ohne
   <img> gerendert wird (Stimme ohne Featured Image).
   Die @font-face für awb-icons wird site-weit über fusion-dynamic-css
   geladen (Avada), steht also auf der Post-Cards-Seite zur Verfügung. */
.hohyte-avatar:not(:has(img)) {
    width: 108.75px;                  /* 145 × 0.75 (Original: doe) */
    height: 108.75px !important;      /* explizit quadratisch → behebt vertikale Verzerrung */
    border-radius: 0 !important;      /* Original: nicht rund */
    background: transparent !important; /* Original: keine graue Hinterlegung */
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #747474 !important;        /* Original: --awb-name-company-text-color */
    font-family: awb-icons !important;
    font-size: 80px !important;       /* etwas kleiner als Original (×0.75) → mehr Luft zur Sprechblase; Container bleibt 108.75px, damit die Nase (left:108px) wie beim Foto-Fall aufs Icon zeigt */
    line-height: 1 !important;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.hohyte-avatar:not(:has(img))::before {
    content: "\e61b";                  /* Avada-„doe"-Glyph (.awb-icon-user2 / .female) */
    font-family: awb-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
/* Männlich/weiblich wie das Avada-Original (.male/.female .doe):
   \e61a = männlich, \e61b = weiblich. Die Klasse „male"/„female" wird ans
   Image-Element durchgereicht (Custom Field hohyte_gender in der Post Card,
   siehe AVADA-POSTCARDS-ANLEITUNG.md). Höhere Spezifität überschreibt den
   Default (\e61b) oben; ohne Klasse bleibt es beim weiblichen Glyph. */
.hohyte-avatar.male:not(:has(img))::before {
    content: "\e61a";                  /* Avada: .male .doe:before */
}
.hohyte-avatar.female:not(:has(img))::before {
    content: "\e61b";                  /* Avada: .female .doe:before */
}

/* --- Name + Firma rechts vom Avatar (inline, gleiche Größe, wie Original) -- */
.hohyte-name {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 0 1em !important;     /* Original: --awb-avatar-gap 1em */
    padding: 0 !important;
    color: #747474 !important;        /* Original: --awb-name-company-text-color */
    font-weight: 700 !important;      /* Original: <strong> = bold */
    font-size: 1rem !important;       /* Original: inherit → gleiche Größe wie Firma */
    line-height: 1.3 !important;
}
.hohyte-name p {
    margin: 0 !important;
    display: inline !important;
}
.hohyte-sub {
    grid-column: 3;
    grid-row: 2;
    margin: 0 !important;
    padding: 0 !important;
    color: #747474 !important;
    font-weight: 400 !important;      /* Firma normal */
    font-size: 1rem !important;       /* gleiche Größe wie Name (Original: inherit) */
    line-height: 1.3 !important;
}
/* Komma zwischen Name und Firma (Avada-Original: awb-testimonial-sep „, "). Als
   ::before auf der Firma-Spalte, damit das Leerzeichen nach dem Komma nicht als
   trailing whitespace der Name-Spalte weg-kollabiert. */
.hohyte-sub::before {
    content: ", ";
}
/* Kein Komma bei anonymen Stimmen ohne Unterzeile: Avada rendert bei leerem
   Custom Field entweder einen leeren <p></p> oder gar kein Kind. In beiden
   Fällen entfällt das Komma, damit im Slider nicht „Anonym," allein steht.
   (Höhere Spezifität überschreibt die ::before-Basisregel oben.) */
.hohyte-sub:empty::before,
.hohyte-sub:has(p:empty):not(:has(p:not(:empty)))::before {
    content: "";
}
.hohyte-sub p {
    margin: 0 !important;
    display: inline !important;
}

/* --- Mobil: Avatar kleiner, Nase + Platzhalter nachführen ------------------ */
@media (max-width: 480px) {
    .fusion-carousel-item-wrapper:has(.hohyte-bubble) {
        grid-template-columns: 90px auto auto 1fr;
    }
    .hohyte-bubble::after {
        left: 68px;                   /* 90 × 0.75 = 67.5px */
    }
    .hohyte-avatar:not(:has(img)) {
        width: 67.5px;                /* 90 × 0.75 */
        height: 67.5px !important;
        font-size: 50px !important;    /* proportional reduziert, Container bleibt */
    }
}