@php
    /** @var \V2\Modules\Conexoes\UnidadeRegional\Models\UnidadeRegional $unidade */
    /** @var \Illuminate\Support\Collection $noticias */
    $pageTitle = $unidade->name . ' — Regionais SUCESU — ' . config('app.name');
    $metaDescription = strip_tags($unidade->metadata['resumo'] ?? 'Regional SUCESU');
    $galleryHasItems = $unidade->media->count() > 0;
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => $pageTitle,
    'pageDescription'       => str_limit($metaDescription, 160),
    'coverImage'            => null,
    'gtag'                  => ['page_context' => 'unidade-regional'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'Organization',
            'name' => $unidade->name,
            'description' => $metaDescription,
            'url' => request()->url()
        ]
    ],
    'fullWidthMain' => true,
    'showHeader' => false,
    'showMainHeader' => false,
    'showMainFooter' => false,
    'showFooter' => false,
    'showAccessibilityBar' => false,
    'showMainLeftArea' => false,
    'showMainRightArea' => false,
])

@section('main-section-area')
    {{-- Hero / Breadcrumb --}}
    @php
        $logoUrl = $unidade->logo ? v2_storage_url($unidade->logo) : null;
        $heroStyle = $coverBgPath
            ? 'background-image: ' . v2_bg_image_css($coverBgPath, $coverBgVariants) . ';'
            : 'background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));';
    @endphp
    <div class="breadcrumb-wrapper bg-cover" style="{{ $heroStyle }} min-height: 200px;">
        <div class="container">
            <div class="page-heading">
                <ul class="breadcrumb-items">
                    <li><a href="{{ url('/') }}">Home</a></li>
                    <li><i class="bi bi-chevron-right mx-2"></i></li>
                    <li><a href="{{ route('v2.unidade-regional.portal.index') }}">Regionais</a></li>
                    <li><i class="bi bi-chevron-right mx-2"></i></li>
                    <li>{{ $unidade->name }}</li>
                </ul>
                <div class="d-flex align-items-center gap-4 flex-wrap">
                    @if($logoUrl)
                        <img alt="{{ $unidade->name }}" src="{{ $logoUrl }}"
                             loading="eager"
                             style="max-height:80px;width:auto;object-fit:contain;"
                             class="rounded bg-white border p-2 shadow-sm">
                    @endif
                    <div>
                        <h1 class="fw-bold mb-1">{{ $unidade->name }}</h1>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="badge fs-6 px-3 py-2 d-inline-flex align-items-center gap-1" style="background: var(--tenant-primary);">
                                <i class="bi bi-award-fill" aria-hidden="true" style="font-size:1.1rem;"></i>
                                @if($unidade->acronym) {{ $unidade->acronym }} @else Regional SUCESU @endif
                            </span>
                            @if($unidade->city && $unidade->state)
                                <span class="badge bg-light text-dark fs-6 px-3 py-2">
                                    <i class="bi bi-geo me-1"></i> {{ $unidade->city }}, {{ $unidade->state }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Conteúdo --}}
    <section class="team-section section-padding section-bg">
        <div class="container">
            {{-- Resumo --}}
            @if(!empty($unidade->metadata['resumo']))
                <div class="mb-4">
                    <p class="lead text-muted">{{ $unidade->metadata['resumo'] }}</p>
                </div>
            @endif

            {{-- Descrição + Informações (lateral) --}}
            <div class="row g-5 mb-5">
                @if(!empty($htmlContent))
                    <div class="col-lg-8">
                        <h2 class="h4 fw-bold mb-3"><i class="bi bi-info-circle me-2 text-primary" aria-hidden="true"></i> Sobre a Regional</h2>
                        <div class="content-rich-viewer" style="line-height: 1.8;">
                            {!! $htmlContent !!}
                        </div>
                    </div>
                    <div class="col-lg-4">
                        @include('v2-unidaderegional::portal.partials.informacoes')
                    </div>
                @else
                    <div class="col-lg-8 mx-auto">
                        @include('v2-unidaderegional::portal.partials.informacoes')
                    </div>
                @endif
            </div>

            {{-- Galeria com modal (largura total) --}}
            @if($galleryHasItems)
                <div class="mb-5">
                    <h2 class="h4 fw-bold mb-3"><i class="bi bi-images me-2 text-primary" aria-hidden="true"></i> Galeria</h2>
                    <div class="row g-3">
                        @foreach($unidade->media as $i => $item)
                            @php
                                $imgPath = $item->galleryMedia ? $item->galleryMedia->file_path : $item->image;
                                $imgVariants = $item->galleryMedia && !empty($item->galleryMedia->variants) ? json_decode($item->galleryMedia->variants, true) : [];
                            @endphp
                            <div class="col-md-4 col-6">
                                <a href="#" data-bs-toggle="modal" data-bs-target="#galleryModal"
                                   data-index="{{ $i }}"
                                   class="d-block rounded overflow-hidden gallery-thumb">
                                     @include('v2-service-media::components.picture', [
                                         'originalPath' => $imgPath,
                                         'variants' => is_array($imgVariants) ? $imgVariants : [],
                                         'alt' => 'Galeria ' . $unidade->name,
                                         'class' => 'img-fluid',
                                         'style' => 'width:100%;height:180px;object-fit:cover;',
                                         'lazy' => true,
                                     ])
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Associados (grid amigável, acima das notícias) --}}
            <div class="mb-5">
                <div class="d-flex align-items-center gap-2 mb-4">
                    <h2 class="h4 fw-bold mb-0"><i class="bi bi-buildings me-2 text-primary" aria-hidden="true"></i> Associados</h2>
                    @if(isset($associados) && $associados->count() > 0)
                        <span class="badge bg-primary rounded-pill" id="ur-associados-count">{{ $associados->count() }}</span>
                    @endif
                </div>

                @if(isset($associados) && $associados->count() > 0)
                    {{-- Campo de pesquisa (estética da página /associados) — filtro via regex no front-end --}}
                    <div class="row justify-content-center mb-4">
                        <div class="col-md-8 col-lg-6">
                            <form role="search" onsubmit="return false;" aria-label="Pesquisar associados">
                                <div class="search-form-group">
                                    <label for="ur-associados-search" class="visually-hidden">Pesquisar associado</label>
                                    <input type="text"
                                           name="search"
                                           id="ur-associados-search"
                                           class="search-form-input"
                                           placeholder="Buscar associado por nome..."
                                           aria-label="Pesquisar associado por nome"
                                           autocomplete="off">
                                    <button type="button" class="search-form-btn" aria-label="Buscar">
                                        <i class="bi bi-search me-1" aria-hidden="true"></i> Buscar
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Grid renderizado no front-end a partir do payload JSON (imagens sob demanda) --}}
                    <div id="ur-associados-grid" class="row g-3 g-lg-4 unidade-regional-associados-grid"></div>
                    <script type="application/json" id="ur-associados-data">{!! $associadosJson !!}</script>

                    @if($associados->count() > 20)
                        <div class="text-center mt-4">
                            <button type="button" id="ur-associados-load-more"
                                    class="btn btn-outline-primary rounded-pill px-4 js-associados-more">
                                Ver mais <i class="bi bi-chevron-down ms-1" aria-hidden="true"></i>
                            </button>
                        </div>
                    @endif
                @else
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center text-muted py-4">
                            <i class="bi bi-building display-6 mb-2 d-block" aria-hidden="true"></i>
                            <p class="mb-0">Nenhum associado vinculado a esta regional.</p>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Notícias + Informações (lateral) --}}
            @if($noticias->count() > 0)
                @php
                    $monthsPt = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'];
                    $featured = $noticias->first();
                @endphp
                <div class="unidade-regional-news">
                    <div class="d-flex align-items-center gap-2 mb-4">
                        <h2 class="h4 fw-bold mb-0"><i class="bi bi-newspaper me-2 text-primary" aria-hidden="true"></i> Notícias da Regional</h2>
                    </div>

                    {{-- Destaque: a notícia mais recente --}}
                    <article class="card border-0 shadow-sm overflow-hidden mb-4 unidade-regional-news-featured">
                        <div class="row g-0 align-items-stretch">
                            <div class="col-lg-6">
                                <a href="{{ $featured->getPublicUrl() }}" class="d-block h-100" tabindex="-1" aria-hidden="true">
                                    @if($featured->cover_image_id && $featured->coverImage)
                                        @include('v2-service-media::components.picture', [
                                            'originalPath' => $featured->coverImage->file_path,
                                            'variants'     => $featured->getCoverImageVariants(),
                                            'alt'          => $featured->getCoverImageAlt() ?: $featured->title,
                                            'class'        => 'w-100 h-100',
                                            'style'        => 'object-fit:cover;min-height:260px;',
                                            'lazy'         => true,
                                        ])
                                    @else
                                        <img src="{{ asset('assets/sucesu/img/news-default.jpg') }}"
                                             alt="{{ $featured->title }}"
                                             class="w-100 h-100" style="object-fit:cover;min-height:260px;"
                                             loading="lazy" decoding="async">
                                    @endif
                                </a>
                            </div>
                            <div class="col-lg-6 d-flex">
                                <div class="card-body p-4 p-lg-5 d-flex flex-column">
                                    <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
                                        @if($featured->is_super_highlighted)
                                            <span class="badge bg-danger"><i class="bi bi-lightning-fill me-1" aria-hidden="true"></i>Super-destaque</span>
                                        @elseif($featured->is_highlighted)
                                            <span class="badge bg-warning text-dark"><i class="bi bi-star-fill me-1" aria-hidden="true"></i>Destaque</span>
                                        @endif
                                        @if($featured->published_at)
                                            <time class="text-muted small" datetime="{{ $featured->published_at->format('Y-m-d') }}">
                                                {{ $featured->published_at->format('d/m/Y') }}
                                            </time>
                                        @endif
                                    </div>
                                    <h3 class="fw-bold mb-2">
                                        <a href="{{ $featured->getPublicUrl() }}" class="text-decoration-none">{{ $featured->title }}</a>
                                    </h3>
                                    @if($featured->subtitle)
                                        <p class="text-muted flex-grow-1">{{ str_limit($featured->subtitle, 200) }}</p>
                                    @endif
                                    <div class="mt-2">
                                        <a href="{{ $featured->getPublicUrl() }}" class="btn btn-primary">
                                            Ler mais <i class="bi bi-arrow-right ms-1" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>

                    {{-- Demais notícias em grid — mesma estética da homepage --}}
                    @if($noticias->count() > 1)
                        <div class="row g-4">
                            @foreach($noticias->slice(1) as $noticia)
                                @php
                                    $date = $noticia->published_at;
                                    $day = $date ? $date->format('d') : '';
                                    $mon = $date ? $monthsPt[$date->format('n') - 1] : '';
                                @endphp
                                <div class="col-xl-4 col-lg-6 col-md-6">
                                    <div class="news-card-items mt-0 h-100">
                                        <div class="news-thumb">
                                            @if($noticia->cover_image_id && $noticia->coverImage)
                                                @include('v2-service-media::components.picture', [
                                                    'originalPath' => $noticia->coverImage->file_path,
                                                    'variants'     => $noticia->getCoverImageVariants(),
                                                    'alt'          => $noticia->getCoverImageAlt(),
                                                    'class'        => 'img-fluid',
                                                    'lazy'         => true,
                                                ])
                                            @else
                                                <img src="{{ asset('assets/sucesu/img/news-default.jpg') }}" alt="{{ $noticia->title }}"
                                                     class="img-fluid" loading="lazy" decoding="async">
                                            @endif
                                            @if($day && $mon)
                                                <h4 class="number">{{ $day }}<span>{{ $mon }}</span></h4>
                                            @endif
                                        </div>
                                        <div class="news-content">
                                            <h3><a href="{{ $noticia->getPublicUrl() }}">{{ $noticia->title }}</a></h3>
                                            <p>{{ str_limit(strip_tags($noticia->summary ?? $noticia->subtitle ?? ''), 150) }}</p>
                                            <a href="{{ $noticia->getPublicUrl() }}" class="link-btn">
                                                Leia Mais <i class="bi bi-arrow-right" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <div class="mt-4 text-center">
                        <a href="{{ route('v2.noticias.portal.index', ['regional' => $unidade->slug]) }}"
                           class="btn btn-outline-primary rounded-pill px-4">
                            Ver as notícias da regional <i class="bi bi-arrow-right ms-1" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            @else
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center text-muted py-4">
                        <i class="bi bi-newspaper display-6 mb-2 d-block" aria-hidden="true"></i>
                        <p class="mb-0">Nenhuma notícia publicada para esta regional ainda.</p>
                    </div>
                </div>
            @endif
    </section>

    {{-- Scripts: render incremental + busca por regex + paginação "Ver mais" (100% front-end) --}}
    @if(isset($associados) && $associados->count() > 0)
        @push('scripts')
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var dataEl = document.getElementById('ur-associados-data');
            var grid = document.getElementById('ur-associados-grid');
            if (!dataEl || !grid) return;

            var DATA = [];
            try {
                DATA = JSON.parse(dataEl.textContent || dataEl.innerHTML || '[]');
            } catch (e) {
                DATA = [];
            }

            var searchInput = document.getElementById('ur-associados-search');
            var loadMoreBtn = document.querySelector('.js-associados-more');
            var countBadge = document.getElementById('ur-associados-count');

            var PAGE = 20;
            var visible = PAGE;
            var filtered = DATA;

            function esc(value) {
                return String(value === null || value === undefined ? '' : value)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
            }

            function cardHtml(item) {
                var name = esc(item.name);
                var logo = item.logo
                    ? '<img src="' + esc(item.logo) + '" alt="' + name + '" width="96" height="96" loading="lazy" decoding="async">'
                    : '<i class="bi bi-building" aria-hidden="true"></i>';

                return '<div class="col-6 col-md-4 col-lg-3 col-xl-2 d-flex unidade-regional-associado-item">' +
                    '<div class="unidade-regional-associado-card d-flex flex-column align-items-center text-center h-100 w-100"' +
                    ' data-id="' + esc(item.id) + '"' +
                    ' data-bs-toggle="modal"' +
                    ' data-bs-target="#associadoRegionalModal"' +
                    ' role="button" tabindex="0"' +
                    ' aria-label="Ver detalhes de ' + name + '">' +
                    '<span class="unidade-regional-associado-logo">' + logo + '</span>' +
                    '<span class="unidade-regional-associado-name">' + name + '</span>' +
                    '<span class="unidade-regional-associado-link">' +
                    '<i class="bi bi-arrow-right-circle me-1" aria-hidden="true"></i>Ver detalhes' +
                    '</span>' +
                    '</div></div>';
            }

            function render() {
                var slice = filtered.slice(0, visible);
                var html = '';
                for (var i = 0; i < slice.length; i++) {
                    html += cardHtml(slice[i]);
                }
                grid.innerHTML = html;

                if (countBadge) {
                    countBadge.textContent = String(filtered.length);
                }

                if (loadMoreBtn) {
                    if (filtered.length > visible) {
                        loadMoreBtn.classList.remove('d-none');
                    } else {
                        loadMoreBtn.classList.add('d-none');
                    }
                }
            }

            function applySearch() {
                var term = searchInput ? (searchInput.value || '').trim() : '';
                if (term === '') {
                    filtered = DATA;
                } else {
                    var rx;
                    try {
                        rx = new RegExp(term, 'i');
                    } catch (e) {
                        rx = new RegExp(term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
                    }
                    filtered = DATA.filter(function(item) {
                        return rx.test(item.search || '');
                    });
                }
                visible = PAGE;
                render();
            }

            if (searchInput) {
                searchInput.addEventListener('input', applySearch);
                var formBtn = searchInput.parentNode.querySelector('.search-form-btn');
                if (formBtn) {
                    formBtn.addEventListener('click', applySearch);
                }
            }

            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function() {
                    visible += PAGE;
                    render();
                });
            }

            render();
        });
        </script>
        @endpush
    @endif

    {{-- Modal de detalhes do associado --}}
    @if(isset($associados) && $associados->count() > 0)
        <div class="modal fade" id="associadoRegionalModal" tabindex="-1" role="dialog" aria-modal="true"
             aria-labelledby="associadoRegionalModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content border-0 shadow">
                    <div class="modal-header border-0 pb-0">
                        <span id="associadoRegionalModalLabel" class="visually-hidden">Detalhes do associado</span>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body pt-0" id="associadoRegionalModalBody">
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @push('scripts')
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var modalEl = document.getElementById('associadoRegionalModal');
            var modalBody = document.getElementById('associadoRegionalModalBody');
            if (!modalEl || !modalBody) return;

            var detalheUrlBase = '{{ route("v2.associados.portal.detalhe", ["id" => "__ID__"]) }}';

            modalEl.addEventListener('show.bs.modal', function(event) {
                var trigger = event.relatedTarget;
                if (!trigger) return;
                var id = trigger.getAttribute('data-id');
                if (!id) return;
                var url = detalheUrlBase.replace('__ID__', id);

                modalBody.innerHTML =
                    '<div class="text-center py-4">' +
                    '<div class="spinner-border text-primary" role="status">' +
                    '<span class="visually-hidden">Carregando...</span>' +
                    '</div></div>';

                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onload = function() {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        modalBody.innerHTML = xhr.responseText;
                        var firstFocusable = modalBody.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])');
                        if (firstFocusable) {
                            setTimeout(function() { firstFocusable.focus(); }, 200);
                        }
                    } else {
                        modalBody.innerHTML =
                            '<div class="text-center py-4 text-danger">' +
                            '<i class="bi bi-exclamation-triangle display-4 d-block mb-3"></i>' +
                            '<p>Erro ao carregar detalhes do associado.</p></div>';
                    }
                };
                xhr.onerror = function() {
                    modalBody.innerHTML =
                        '<div class="text-center py-4 text-danger">' +
                        '<i class="bi bi-exclamation-triangle display-4 d-block mb-3"></i>' +
                        '<p>Erro ao carregar detalhes do associado.</p></div>';
                };
                xhr.send();
            });

            var cards = document.querySelectorAll('.unidade-regional-associado-card[role="button"]');
            for (var i = 0; i < cards.length; i++) {
                cards[i].addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        this.click();
                    }
                });
            }
        });
        </script>
        @endpush
    @endif

    {{-- Gallery Modal --}}
    @if($galleryHasItems)
        @php
            $galleryItems = [];
            foreach ($unidade->media as $item) {
                $galleryItems[] = $item->galleryMedia
                    ? v2_storage_url($item->galleryMedia->file_path)
                    : v2_storage_url($item->image);
            }
        @endphp
        <div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content bg-dark border-0 rounded-0">
                    <div class="modal-header border-0 position-absolute top-0 end-0 z-3">
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body text-center p-0 position-relative">
                        <button type="button" class="btn btn-dark position-absolute start-0 top-50 translate-middle-y z-2 ms-2 gallery-prev" style="opacity:0.7;" aria-label="Imagem anterior">
                            <i class="bi bi-chevron-left fs-3"></i>
                        </button>
                        <button type="button" class="btn btn-dark position-absolute end-0 top-50 translate-middle-y z-2 me-2 gallery-next" style="opacity:0.7;" aria-label="Próxima imagem">
                            <i class="bi bi-chevron-right fs-3"></i>
                        </button>
                        <img src="{{ $galleryItems[0] }}" alt="Galeria" class="img-fluid w-100 gallery-modal-img" style="max-height:90vh;object-fit:contain;" loading="lazy" decoding="async">
                    </div>
                </div>
            </div>
        </div>

        @push('scripts')
        <script>
        (function() {
            var items = {!! json_encode($galleryItems) !!};
            var current = 0;
            var img = document.querySelector('.gallery-modal-img');
            var prev = document.querySelector('.gallery-prev');
            var next = document.querySelector('.gallery-next');
            if (!img) return;
            document.querySelectorAll('.gallery-thumb').forEach(function(el) {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    current = parseInt(this.getAttribute('data-index'));
                    img.src = items[current];
                });
            });
            function show(idx) { current = (idx + items.length) % items.length; img.src = items[current]; }
            if (prev) prev.addEventListener('click', function() { show(current - 1); });
            if (next) next.addEventListener('click', function() { show(current + 1); });
            document.addEventListener('keydown', function(e) {
                if (!document.getElementById('galleryModal').classList.contains('show')) return;
                if (e.key === 'ArrowLeft') show(current - 1);
                if (e.key === 'ArrowRight') show(current + 1);
            });
        })();
        </script>
        @endpush
    @endif
@endsection

@push('styles')
<style>
    /* Campo de pesquisa — mesma estética da página /associados */
    .search-form-group {
        display: flex;
        border: 2px solid var(--tenant-primary);
        border-radius: 50rem;
        overflow: hidden;
        background: #fff;
    }
    .search-form-input,
    input.search-form-input {
        flex: 1;
        border: none;
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        outline: none;
        background: transparent;
        color: var(--tenant-primary, #1075ad);
        caret-color: var(--tenant-primary, #1075ad);
        -webkit-text-fill-color: var(--tenant-primary, #1075ad);
    }
    .search-form-input::placeholder,
    input.search-form-input::placeholder {
        color: #adb5bd;
        -webkit-text-fill-color: #adb5bd;
    }
    .search-form-btn {
        border: none;
        background: var(--tenant-primary);
        color: #fff;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .search-form-btn:hover {
        background: var(--tenant-primary);
        filter: brightness(90%);
    }

    /* Associados — grid amigável com cores do tenant */
    .unidade-regional-associados-grid .unidade-regional-associado-card {
        border: 1px solid var(--color-bg-canvas, #e9ecef);
        border-radius: 0.75rem;
        background: var(--color-bg-main, #fff);
        padding: 1.25rem 1rem 1rem;
        text-decoration: none;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    .unidade-regional-associados-grid .unidade-regional-associado-card:hover,
    .unidade-regional-associados-grid .unidade-regional-associado-card:focus-visible {
        border-color: var(--tenant-primary);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    .unidade-regional-associado-logo {
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-bg-canvas, #f8f9fa);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        font-size: 2.5rem;
        color: var(--tenant-primary);
        overflow: hidden;
        flex-shrink: 0;
    }
    .unidade-regional-associado-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.5rem;
    }
    .unidade-regional-associado-name {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text-main, #212529);
        line-height: 1.25;
    }
    .unidade-regional-associado-card:hover .unidade-regional-associado-name,
    .unidade-regional-associado-card:focus-visible .unidade-regional-associado-name {
        color: var(--tenant-primary);
    }
    .unidade-regional-associado-link {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--tenant-primary);
    }

    /* Notícias — estética da homepage ajustada às cores do tenant */
    .unidade-regional-news .news-thumb .number {
        color: var(--tenant-primary);
        background-color: var(--color-bg-main, #fff);
    }
    .unidade-regional-news .news-content h3 a:hover {
        color: var(--tenant-primary);
    }
    .unidade-regional-news .link-btn {
        color: var(--tenant-primary);
    }
    .unidade-regional-news .link-btn:hover {
        color: var(--tenant-primary);
        filter: brightness(90%);
    }

    /* Botões Bootstrap seguem a cor primária do tenant */
    .btn-primary {
        --bs-btn-bg: var(--tenant-primary);
        --bs-btn-border-color: var(--tenant-primary);
        --bs-btn-hover-bg: var(--tenant-primary);
        --bs-btn-hover-border-color: var(--tenant-primary);
        --bs-btn-active-bg: var(--tenant-primary);
        --bs-btn-active-border-color: var(--tenant-primary);
        --bs-btn-disabled-bg: var(--tenant-primary);
        --bs-btn-disabled-border-color: var(--tenant-primary);
    }

    .btn-outline-primary {
        --bs-btn-color: var(--tenant-primary);
        --bs-btn-border-color: var(--tenant-primary);
        --bs-btn-hover-bg: var(--tenant-primary);
        --bs-btn-hover-border-color: var(--tenant-primary);
        --bs-btn-active-bg: var(--tenant-primary);
        --bs-btn-active-border-color: var(--tenant-primary);
        --bs-btn-disabled-color: var(--tenant-primary);
        --bs-btn-disabled-border-color: var(--tenant-primary);
    }
</style>
@endpush