/*
 * Mobile-first: Inhalt, Autor-Titel, Karte, Social-Icons, in dieser
 * Quellcode-Reihenfolge gestapelt. Ab 900px wird auf ein 2-Spalten-Layout
 * umgeschaltet (Inhalt | Karte-Spalte); die Social-Icons liegen als letztes
 * Kind IN der Karten-Spalte und werden ab 900px an deren unterer rechter
 * Ecke verankert (position: absolute). Die Galerie liegt ausserhalb dieser
 * Reihe und laeuft immer ueber die volle Breite.
 */
.praxis-renderer-profile {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    color: #123c68;
}

/*
 * !important noetig: das Theme definiert fuer "a" offenbar eine eigene
 * (helle/weisse) Standardfarbe, die erst bei :hover auf eine sichtbare Farbe
 * wechselt - dadurch war z. B. die Telefonnummer normalerweise unsichtbar
 * und nur beim Hovern lesbar. Hier fest auf die Marken-Navy verankert,
 * unabhaengig vom Hover-Status.
 */
.praxis-renderer-profile a,
.praxis-renderer-profile a:visited,
.praxis-renderer-profile a:hover,
.praxis-renderer-profile a:focus {
    color: #123c68 !important;
    text-decoration: underline;
}

.praxis-renderer-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.praxis-renderer-content {
    position: relative;
    display: flex;
    flex-direction: column;
}

/*
 * Alle Praxis-Bloecke liegen im DOM, aber nur ".is-active" ist sichtbar und
 * bestimmt die Hoehe (position: relative). Die anderen liegen absolut
 * uebereinander (opacity 0) - beim Umschalten der Klasse blenden beide
 * gleichzeitig per CSS-Transition gegeneinander (Crossfade), ohne JS-Timing.
 */
.praxis-renderer-block {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.praxis-renderer-block.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.praxis-renderer-title {
    margin-top: 0;
    margin-bottom: 16px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
}

/* Luftlinien-Entfernung zum Besucher (nur mit dessen Standort-Erlaubnis,
   siehe frontend.js updateDistances()) - gleicher Pillen-Look wie die
   Distanz-Anzeige in der Arzt-/Apotheken-Suche. Das PHP-Template rendert
   dieses Element IMMER mit dem "hidden"-Attribut, JS entfernt es erst, wenn
   eine echte Entfernung bekannt ist - "display: inline-block" ohne die
   [hidden]-Ausnahme gewinnt aber per Spezifitaet gegen die Browser-Standard-
   regel "[hidden] { display:none; }" und zeigte dadurch IMMER ein leeres
   blaues Pillen-Badge ohne Text an (sah wie ein blosser Strich aus),
   voellig unabhaengig davon, ob der Besucher seinen Standort erlaubt hat. */
.praxis-renderer-distance:not([hidden]) {
    display: inline-block;
    margin-left: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    color: #fff;
    background: #123c68;
    border-radius: 999px;
    padding: 4px 16px;
    vertical-align: middle;
}

.praxis-renderer-address,
.praxis-renderer-hours,
.praxis-renderer-contact,
.praxis-renderer-description {
    margin-bottom: 12px;
    line-height: 1.5;
}

.praxis-renderer-description p {
    margin: 4px 0 0;
}

/* Wochentag-/Zeiten-Tabelle unter "Öffnungszeiten:" - zwei Spalten, ohne
   Trennlinien (nur per Grid ausgerichtet), alle Zeiten in der 2. Spalte. */
.praxis-renderer-hours-table {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 2px;
    margin-top: 2px;
}

.praxis-renderer-hours-day {
    font-weight: 600;
}

.praxis-renderer-columns {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.praxis-renderer-columns > div {
    flex: 1 1 220px;
    padding-right: 24px;
}

/* Trennlinie links neben "Barrierefreier Zugang" (zweite Spalte) */
.praxis-renderer-columns > div:not(:first-child) {
    border-left: 1px solid #d0d5dd;
    padding-left: 24px;
}

.praxis-renderer-services div,
.praxis-renderer-accessibility div {
    margin: 4px 0;
}

/* Autor-Titel oberhalb der Karte */
.praxis-renderer-author {
    text-align: right;
}

.praxis-renderer-author-name {
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.praxis-renderer-author-subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7d92ab;
}

.praxis-renderer-map-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

/*
 * Social-Icons: liegen im DOM als letztes Kind IN der Karten-Spalte (nicht
 * mehr als eigene Flex-Spalte daneben), damit sie sich per position:absolute
 * exakt an einer Ecke der Karte verankern lassen (s.u., ab 900px - unten
 * rechts bei der Deutschlandkarte, oben rechts bei der DACH-Karte, siehe
 * ".is-dach-map"). Mobil/Tablet bleiben sie normal im Fluss, linksbuendig
 * unter der Karte.
 */
.praxis-renderer-social-column {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-start;
}

.praxis-renderer-social-icon img {
    display: block;
    width: 32px;
    height: 32px;
}

.praxis-renderer-social-icon.is-hidden {
    display: none;
}

/*
 * Galerie-Zeile: liegt ausserhalb von .praxis-renderer-row, daher immer
 * ueber die volle Breite des Elements - unabhaengig vom Inhalt/Karte/Social-
 * Spalten-Layout. Pro Praxis ein Block, nur der aktive ist sichtbar
 * (synchron mit dem Info-Block/Pin, siehe frontend.js).
 */
.praxis-renderer-gallery-row {
    width: 100%;
}

.praxis-renderer-gallery-block {
    display: none;
    width: 100%;
}

.praxis-renderer-gallery-block.is-active {
    display: block;
}

/*
 * Galerie-Grid je Breakpoint: Mobil hochkant (< 480px) als horizontaler
 * Slider (Scroll-Snap, kein Grid - immer nur "unter 5" Bilder gleichzeitig
 * sichtbar), ab 480px feste Spaltenzahl per Grid: 2 (Mobil quer), 3 (Tablet
 * hochkant), 4 (Tablet), 5 (Desktop). Ein Bild nimmt IMMER 1/n der Breite
 * ein, auch wenn weniger als n Bilder vorhanden sind (Grid-Spalten sind
 * fix, nicht content-abhaengig).
 */
.praxis-renderer-gallery {
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.praxis-renderer-gallery-image {
    display: block;
    flex: 0 0 82%;
    scroll-snap-align: start;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

/* Mobil quer: 2 Spalten */
@media (min-width: 480px) {
    .praxis-renderer-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    .praxis-renderer-gallery-image {
        flex: unset;
    }
}

/* Tablet hochkant: 3 Spalten */
@media (min-width: 768px) {
    .praxis-renderer-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet quer: 4 Spalten */
@media (min-width: 992px) {
    .praxis-renderer-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop: 5 Spalten */
@media (min-width: 1200px) {
    .praxis-renderer-gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Karte */
.praxis-renderer-map {
    position: relative;
}

/*
 * Kein max-width/margin:auto mehr: die Kartengrafik soll bis zum Rand ihres
 * Containers (".praxis-renderer-map") reichen. Sonst waere sie schmaler als
 * ihr Container und die absolut positionierten Social-Icons (verankert an
 * ".praxis-renderer-map", s.u.) wuerden im leeren Rand daneben statt auf der
 * Kartengrafik selbst landen.
 */
.praxis-renderer-map-inner {
    position: relative;
}

.praxis-renderer-map-image {
    width: 100%;
    display: block;
}

.praxis-renderer-pin {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    /* untere Spitze des Pins zeigt exakt auf die berechnete Position */
    transform: translate(-50%, -100%);
    opacity: var(--praxis-inactive-pin-opacity, 0.5);
    transition: opacity 0.2s ease;
}

.praxis-renderer-pin.is-active {
    opacity: 1;
}

.praxis-renderer-pin-image {
    display: block;
    width: 30px;
    height: auto;
    /*
     * Anders als in der Arzt-Suche (dunkler Kartenhintergrund, siehe dort
     * den weissen Halo um ".va-arzt-suche-pin") liegt diese Karte auf
     * hellem/weissem Untergrund - ein weisser Rand wuerde dort verschwinden.
     * Stattdessen ein Rand im Markenblau (#123c68, wie ueberall sonst),
     * damit der Pin unabhaengig von der Original-Grafikfarbe klar erkennbar
     * bleibt.
     */
    border: 1px solid #123c68;
    border-radius: 4px;
}

/* Bei ueberlappenden Pins (<30px Abstand, per JS ermittelt) bleibt nur der
   erste Pin sichtbar, die anderen sind ueber dessen Tooltip-Liste erreichbar. */
.praxis-renderer-pin.is-cluster-hidden {
    display: none;
}

/*
 * "Sie sind hier"-Pin (siehe frontend.js initUserLocation()): eigene Klasse
 * statt ".praxis-renderer-pin", damit Clustering/Klick-Handler ihn nicht
 * anfassen. Reines CSS-Dreieck+Kreis (kein Bild noetig) in Signalrot, damit
 * er sich klar vom (i. d. R. markenblauen) Praxis-Pin-Symbol abhebt. Liegt
 * per DOM-Reihenfolge (siehe JS) IMMER unter den echten Praxis-Pins.
 */
.praxis-renderer-user-pin {
    position: absolute;
    display: inline-block;
    transform: translate(-50%, -100%);
    cursor: default;
}

/*
 * Nutzt dieselbe hochgeladene Pin-Grafik wie die Praxis-Pins (--praxis-
 * user-pin-mask, per JS aus der ".praxis-renderer-pin-image"-URL gesetzt),
 * nur rot statt in der Originalfarbe - per CSS-Maske (wie beim Kartenbild
 * in der Arzt-Suche), damit die Farbe unabhaengig von der Originalgrafik
 * exakt getroffen wird und deren Form/Ausrichtung (i. d. R. bereits ein
 * aufrechter Tropfen) unveraendert bleibt - daher hier bewusst KEINE eigene
 * Rotation/Form. Ohne Pin-Grafik (kein --praxis-user-pin-mask gesetzt)
 * faellt mask-image auf "none" zurueck - dann bleibt ein einfacher roter
 * Kreis als Fallback.
 */
.praxis-renderer-user-pin-marker {
    display: block;
    width: 30px;
    height: 38px;
    background-color: #e11d2e;
    border-radius: 50%;
    -webkit-mask-image: var(--praxis-user-pin-mask);
    mask-image: var(--praxis-user-pin-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.praxis-renderer-user-pin:hover .praxis-renderer-pin-tooltip {
    opacity: 1;
    visibility: visible;
}

.praxis-renderer-pin-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 10;
}

.praxis-renderer-pin-tooltip.has-list {
    white-space: normal;
    text-align: left;
    padding: 4px;
    pointer-events: auto;
}

.praxis-renderer-pin-tooltip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 160px;
}

.praxis-renderer-pin-tooltip-list li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.praxis-renderer-pin-tooltip-list button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    padding: 6px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.praxis-renderer-pin-tooltip-list button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* "+N weitere" - reiner Hinweis, kein anklickbarer Eintrag */
.praxis-renderer-pin-tooltip-more {
    padding: 6px 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.praxis-renderer-pin-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

.praxis-renderer-pin:hover .praxis-renderer-pin-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 900px) {
    .praxis-renderer-row {
        flex-direction: row;
        align-items: flex-start;
    }

    .praxis-renderer-content {
        flex: 1 1 50%;
    }

    .praxis-renderer-map-column {
        flex: 1 1 40%;
    }

    /*
     * Ab hier an einer Ecke der Karten-Spalte verankert (nicht mehr eigene
     * Flex-Spalte): unten rechts bei der Deutschlandkarte. Bei der DACH-
     * Karte (".is-dach-map", siehe Regel darunter) stattdessen oben rechts -
     * die DACH-Karte ist anders proportioniert, unten rechts wuerde dort
     * mit anderen Elementen kollidieren.
     */
    .praxis-renderer-social-column {
        position: absolute;
        right: 20px;
        bottom: 20px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        z-index: 5;
    }

    .praxis-renderer-map-column.is-dach-map .praxis-renderer-social-column {
        top: 20px;
        bottom: auto;
    }
}