{{-- Header demo-photography-3 — Usa componentes compartidos (side header) --}}
<div class="sticky-wrapper sticky-wrapper-transparent sticky-wrapper-effect-1 sticky-wrapper-border-bottom d-none d-lg-block d-xl-none" data-plugin-sticky data-plugin-options="{'minWidth': 0, 'stickyStartEffectAt': 100, 'padding': {'top': 0}}">
    <div class="sticky-body">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-9">
                    <div class="py-4">
                    </div>
                </div>
                <div class="col-3 text-end">
                    <button class="hamburguer-btn hamburguer-btn-light hamburguer-btn-sticky-dark" data-set-active="false">
                        <span class="hamburguer">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<header id="header" class="side-header d-flex">
    <div class="header-body">
        <div class="header-container container d-flex h-100">
            <div class="header-column flex-row flex-lg-column justify-content-center h-100">
                <div class="header-row flex-row justify-content-start justify-content-lg-center py-lg-5">
                    <div class="header-logo">
                        <a href="{{ front_homepage_url() }}">
                            <img alt="{{ config('site.assets.main_logo_alt') }}" width="200" src="{{ site_asset_url('main_logo') }}">
                        </a>
                    </div>
                </div>
                <div class="header-row header-row-side-header flex-row h-100 overflow-hidden pb-lg-5">
                    <div class="header-nav header-nav-links header-nav-links-side-header header-nav-links-vertical header-nav-links-vertical-slide align-self-center">
                        <div class="header-nav-main header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-4 header-nav-main-sub-effect-1">
                            <nav class="collapse">
                                <ul class="nav nav-pills" id="mainNav">
                                    <x-header-nav :dropdowns="true" />
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="header-row justify-content-end pb-lg-3">
                    <x-social-icons theme="dark" size="md" classes="header-social-icons d-none d-sm-block" />
                    <p class="d-none d-lg-block text-1 pt-3">{{ config('site.name') }} &copy; {{ date('Y') }}. {{ __('All rights reserved') }}</p>
                    <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</header>