/* ============================================================================
   Badge tooltip sistem — Sprint UX Dead Clicks (Marina spec Jun 28 2026)
   ----------------------------------------------------------------------------
   PROST STABILAN PRISTUP:
   - Default: tooltip poravnat sa LEVIM rubom badge-a
   - Ako badge u desnoj polovini ekrana → tooltip poravnat sa DESNIM rubom badge-a
   - Max-width: min(320px, calc(100vw - 32px)) — uvek ostaje u ekranu
   - JS samo postavlja .tooltip-align-right kada je badge u desnoj polovini

   Stabilnost > "savršeno centriranje".

   Selektori: .badge, .meta-badge, .pinterest-tag, .facility-item
   Plus: .hero-opis-toggle desktop hide
   ============================================================================ */

/* Badge sa tooltip-om — relative pozicioniranje (neophodno za absolute tooltip). */
.badge[data-tooltip]:not([data-tooltip=""]),
.meta-badge[data-tooltip]:not([data-tooltip=""]),
.pinterest-tag[data-tooltip]:not([data-tooltip=""]),
.facility-item[data-tooltip]:not([data-tooltip=""]) {
    position: relative;
}

/* Tooltip balon — ::after pseudo-element.
   DEFAULT: poravnat sa LEVIM rubom badge-a, ide ka desnoj strani.
   Max-width sa viewport fallback — uvek u okviru ekrana. */
.badge[data-tooltip]:not([data-tooltip=""])::after,
.meta-badge[data-tooltip]:not([data-tooltip=""])::after,
.pinterest-tag[data-tooltip]:not([data-tooltip=""])::after,
.facility-item[data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    transform: none;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    color: #f9fafb;
    white-space: normal;
    background: #111827;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 9999;
}

/* Strelica iznad tooltip-a — poravnata sa levim rubom badge-a (16px offset). */
.badge[data-tooltip]:not([data-tooltip=""])::before,
.meta-badge[data-tooltip]:not([data-tooltip=""])::before,
.pinterest-tag[data-tooltip]:not([data-tooltip=""])::before,
.facility-item[data-tooltip]:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    left: 16px;
    right: auto;
    transform: none;
    border: 8px solid transparent;
    border-bottom-color: #111827;
    border-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 9999;
}

/* Triger — desktop hover / keyboard focus / JS-toggled .tooltip-open */
.badge[data-tooltip]:not([data-tooltip=""]):hover::after,
.badge[data-tooltip]:not([data-tooltip=""]):focus::after,
.badge[data-tooltip]:not([data-tooltip=""]):focus-visible::after,
.badge[data-tooltip]:not([data-tooltip=""]).tooltip-open::after,
.meta-badge[data-tooltip]:not([data-tooltip=""]):hover::after,
.meta-badge[data-tooltip]:not([data-tooltip=""]):focus::after,
.meta-badge[data-tooltip]:not([data-tooltip=""]):focus-visible::after,
.meta-badge[data-tooltip]:not([data-tooltip=""]).tooltip-open::after,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]):hover::after,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]):focus::after,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]):focus-visible::after,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]).tooltip-open::after,
.facility-item[data-tooltip]:not([data-tooltip=""]):hover::after,
.facility-item[data-tooltip]:not([data-tooltip=""]):focus::after,
.facility-item[data-tooltip]:not([data-tooltip=""]):focus-visible::after,
.facility-item[data-tooltip]:not([data-tooltip=""]).tooltip-open::after,
.badge[data-tooltip]:not([data-tooltip=""]):hover::before,
.badge[data-tooltip]:not([data-tooltip=""]):focus::before,
.badge[data-tooltip]:not([data-tooltip=""]):focus-visible::before,
.badge[data-tooltip]:not([data-tooltip=""]).tooltip-open::before,
.meta-badge[data-tooltip]:not([data-tooltip=""]):hover::before,
.meta-badge[data-tooltip]:not([data-tooltip=""]):focus::before,
.meta-badge[data-tooltip]:not([data-tooltip=""]):focus-visible::before,
.meta-badge[data-tooltip]:not([data-tooltip=""]).tooltip-open::before,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]):hover::before,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]):focus::before,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]):focus-visible::before,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]).tooltip-open::before,
.facility-item[data-tooltip]:not([data-tooltip=""]):hover::before,
.facility-item[data-tooltip]:not([data-tooltip=""]):focus::before,
.facility-item[data-tooltip]:not([data-tooltip=""]):focus-visible::before,
.facility-item[data-tooltip]:not([data-tooltip=""]).tooltip-open::before {
    opacity: 1;
    visibility: visible;
}

/* Fokus outline za keyboard navigaciju (a11y) */
.badge[data-tooltip]:not([data-tooltip=""]):focus-visible,
.meta-badge[data-tooltip]:not([data-tooltip=""]):focus-visible,
.pinterest-tag[data-tooltip]:not([data-tooltip=""]):focus-visible,
.facility-item[data-tooltip]:not([data-tooltip=""]):focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 999px;
}

/* === Badge u DESNOJ polovini ekrana → tooltip poravnat sa DESNIM rubom === */
.tooltip-align-right[data-tooltip]::after {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}
.tooltip-align-right[data-tooltip]::before {
    left: auto !important;
    right: 16px !important;
    transform: none !important;
}

/* Mobile — tooltip uvek poravnat sa levim rubom badge-a, max-width = viewport */
@media (max-width: 600px) {
    .badge[data-tooltip]:not([data-tooltip=""])::after,
    .meta-badge[data-tooltip]:not([data-tooltip=""])::after,
    .pinterest-tag[data-tooltip]:not([data-tooltip=""])::after,
    .facility-item[data-tooltip]:not([data-tooltip=""])::after {
        max-width: calc(100vw - 32px);
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* ============================================================================
   "Prikaži više" toggle — DESKTOP-ONLY hide (Marina spec Jun 28 2026)
   ============================================================================ */
@media (min-width: 769px) {
    .hero-content p.hero-opis {
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }
    .hero-opis-toggle {
        display: none !important;
    }
}