@extends('layouts._site.main')
@section('title', 'Ecofemenino - Divulgue')
@section('content')

    {{-- Section ocupa toda a largura --}}
    <section class="divulgue-section py-5">

        {{-- Cabeçalho da página --}}
        <div class="text-center mb-5">
            <div class="heading-content banner-menu">
                <h2 class="text-uppercase fw-bold" style="color: var(--primary-color);">
                    Divulgue o seu Projeto
                </h2>
                <p class="mt-3" style="color: #555;">
                    Tem um projeto que promove a sustentabilidade, igualdade ou empoderamento feminino?
                    Envie-o para nós! Queremos ajudar a dar-lhe visibilidade.
                </p>
            </div>
        </div>

        {{-- Formulário centralizado, mas a section ocupa toda a tela --}}
        <div class="d-flex justify-content-center">
            <div class="divulgue-card shadow-sm border-0 rounded-4 p-4 p-md-5">

                @if (session('success'))
                    <div class="alert alert-success text-center fw-semibold mb-4">
                        {{ session('success') }}
                    </div>
                @endif

                @include('forms._site._formPublicize.index')

            </div>
        </div>
    </section>

    {{-- Estilos do layout principal --}}
    <style>
        .banner-menu {
            margin-top: -3rem;
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
            width: 100vw;
            background-image: url("assets/user/images/banner10.png");
            background-size: cover;
            background-position: center;
            border-top: 1px solid #e9ecef;
            /* Altura do banner */
            height: 10rem !important;
        }

        .banner-menu h2 {
            margin-top: 2rem;
        }

        .divulgue-section {
            background-color: #e9ecef;
            width: 100%;
        }

        .divulgue-card {
            border: 1px solid #ff1856;
            background-color: white;
            max-width: 950px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .divulgue-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
        }
    </style>

@endsection