@extends('layouts.escola.default')

@section('content')
    <div class="courses-page">
        <div class="container">
            <!-- Seção de Cursos Disponíveis -->
            @if (count($palestras) > 0)
                <div class="section-header">
                    <h2 class="section-title text-center">
                        Inscreva-se nos cursos e palestras promovidos pela Escola do Legislativo
                    </h2>
                </div>

                <div class="row courses-grid">
                    @foreach ($palestras as $palestra)
                        @if ($palestra->id != 91)
                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="course-card {{ in_array($palestra->id, $cursosSemVagas) ? 'no-vacancy' : '' }}">
                                    <!-- Imagem do Curso -->
                                    <div class="course-image">
                                        <div class="course-type-badge">
                                            {{ Config::get('constants.tipos_palestras')->get($palestra->tipo) }}
                                        </div>

                                        <!-- Overlay para cursos sem vagas -->
                                        @if (in_array($palestra->id, $cursosSemVagas))
                                            <div class="no-vacancy-overlay">
                                                <span class="no-vacancy-badge">Sem Vagas</span>
                                            </div>
                                        @endif

                                        <a href="{{ route('escola.palestra', ['slug' => $palestra->slug]) }}">
                                            <img src="{{ route('escola.imagens.exibir_palestra', ['tamanho' => 'medium', 'nome' => $palestra->imagem]) }}"
                                                alt="{{ $palestra->titulo }}" class="img-fluid">
                                        </a>
                                    </div>

                                    <!-- Conteúdo do Card -->
                                    <div class="course-content">
                                        <h3 class="course-title">
                                            <a href="{{ route('escola.palestra', ['slug' => $palestra->slug]) }}">
                                                {{ $palestra->titulo }}
                                            </a>
                                        </h3>

                                        <div class="course-info">
                                            <div class="info-item">
                                                <i class="fas fa-user-tie"></i>
                                                <span><strong>Palestrante(s):</strong> {{ $palestra->palestrante }}</span>
                                            </div>

                                            <div class="info-item">
                                                <i class="fas fa-clock"></i>
                                                <span><strong>Carga Horária:</strong> {{ $palestra->carga_horaria }}</span>
                                            </div>

                                            @if (isset($palestra->data_palestra_fim) &&
                                                    $palestra->data_palestra->format('d/m/Y') != $palestra->data_palestra_fim->format('d/m/Y'))
                                                <div class="info-item">
                                                    <i class="far fa-calendar-alt"></i>
                                                    <span><strong>Período:</strong>
                                                        {{ $palestra->data_palestra->format('d/m/Y') }} a
                                                        {{ $palestra->data_palestra_fim->format('d/m/Y') }}</span>
                                                </div>
                                                <div class="info-item">
                                                    <i class="far fa-clock"></i>
                                                    <span><strong>Dia 1
                                                            ({{ $palestra->data_palestra->format('d/m') }})
                                                            :</strong>
                                                        {{ $palestra->data_palestra->format('H:i') }}</span>
                                                </div>
                                                <div class="info-item">
                                                    <i class="far fa-clock"></i>
                                                    <span><strong>Dia 2
                                                            ({{ $palestra->data_palestra_fim->format('d/m') }}):</strong>
                                                        {{ $palestra->data_palestra_fim->format('H:i') }}</span>
                                                </div>
                                            @else
                                                <div class="info-item">
                                                    <i class="far fa-calendar-alt"></i>
                                                    <span><strong>Data:</strong>
                                                        {{ $palestra->data_palestra->format('d/m/Y') }}</span>
                                                </div>

                                                @if (isset($palestra->data_palestra_fim))
                                                    <div class="info-item">
                                                        <i class="far fa-clock"></i>
                                                        <span><strong>Horário:</strong>
                                                            {{ $palestra->data_palestra->format('H:i') }} às
                                                            {{ $palestra->data_palestra_fim->format('H:i') }}</span>
                                                    </div>
                                                @else
                                                    <div class="info-item">
                                                        <i class="far fa-clock"></i>
                                                        <span><strong>Horário:</strong>
                                                            {{ $palestra->data_palestra->format('H:i') }}</span>
                                                    </div>
                                                @endif
                                            @endif

                                            @if ($palestra->formato != null)
                                                <div class="info-item">
                                                    <i class="fas fa-video"></i>
                                                    <span><strong>Formato:</strong>
                                                        @if ($palestra->formato == 1)
                                                            <span class="format-badge presencial">Presencial</span>
                                                        @elseif($palestra->formato == 2)
                                                            <span class="format-badge online">Online</span>
                                                        @elseif($palestra->formato == 3)
                                                            <span class="format-badge hibrido">Híbrido</span>
                                                        @endif
                                                    </span>
                                                </div>
                                            @endif

                                            <!-- Mostrar informações de vagas para cursos com limite -->
                                            @if (in_array($palestra->id, [194, 195, 197, 198, 204]))
                                                @php
                                                    $totalInscritos = $palestra->participantes->count();
                                                    $vagasRestantes = 25 - $totalInscritos;
                                                @endphp
                                                <div class="info-item">
                                                    <i class="fas fa-users"></i>
                                                    <span><strong>Vagas:</strong>
                                                        @if ($vagasRestantes > 0)
                                                            <span class="vagas-disponiveis">{{ $vagasRestantes }}
                                                                disponíveis</span>
                                                        @else
                                                            <span class="vagas-esgotadas">Esgotadas</span>
                                                        @endif
                                                    </span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Botão de Inscrição -->
                                    <div class="course-action">
                                        @if (in_array($palestra->id, $cursosSemVagas))
                                            <a href="#" class="btn-no-vacancy">
                                                <span>Sem Vagas</span>
                                                <i class="fas fa-ban"></i>
                                            </a>
                                        @elseif($palestra->id == 166)
                                            <a href="#" class="btn-no-vacancy">
                                                <span>Evento Cancelado</span>
                                                <i class="fas fa-ban"></i>
                                            </a>
                                        @else
                                            <a href="{{ route('escola.palestra', ['slug' => $palestra->slug]) }}"
                                                class="btn-enrollment">
                                                <span>Inscreva-se</span>
                                                <i class="fas fa-arrow-right"></i>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            @endif

            <!-- Banner (Oculto) -->
            <div class="banner-row" style="display: none">
                <a href="https://sites.google.com/assembleia.pr.leg.br/cursos/in%C3%ADcio" target="_blank">
                    <img src="{{ asset('images/escola/banner-educacao-continuada.png') }}" class="img-fluid">
                </a>
            </div>

            <!-- Seção de Cursos Já Realizados -->
            <div class="section-header past-courses-header">
                <h2 class="section-title text-center">Cursos e palestras já realizados</h2>
            </div>

            <div class="row courses-grid past-courses-grid">
                @foreach ($lista as $palestra)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="course-card past-course">
                            <!-- Imagem do Curso -->
                            <div class="course-image">
                                <div class="course-type-badge past">
                                    {{ Config::get('constants.tipos_palestras')->get($palestra->tipo) }}
                                </div>
                                <div class="past-course-overlay">
                                    <span class="past-badge">Realizado</span>
                                </div>
                                <img src="{{ route('escola.imagens.exibir_palestra', ['tamanho' => 'medium', 'nome' => $palestra->imagem]) }}"
                                    alt="{{ $palestra->titulo }}" class="img-fluid">
                            </div>

                            <!-- Conteúdo do Card -->
                            <div class="course-content">
                                <h3 class="course-title">
                                    <a href="{{ route('escola.palestra', ['slug' => $palestra->slug]) }}">
                                        {{ $palestra->titulo }}
                                    </a>
                                </h3>

                                <div class="course-info">
                                    <div class="info-item">
                                        <i class="fas fa-user-tie"></i>
                                        <span><strong>Palestrante(s):</strong> {{ $palestra->palestrante }}</span>
                                    </div>

                                    <div class="info-item">
                                        <i class="fas fa-clock"></i>
                                        <span><strong>Carga Horária:</strong> {{ $palestra->carga_horaria }}</span>
                                    </div>

                                    <div class="info-item">
                                        <i class="far fa-calendar-alt"></i>
                                        <span><strong>Data:</strong> {{ $palestra->data_palestra->format('d/m/Y') }}</span>
                                    </div>

                                    @if (isset($palestra->data_palestra_fim))
                                        <div class="info-item">
                                            <i class="far fa-clock"></i>
                                            <span><strong>Horário:</strong> {{ $palestra->data_palestra->format('H:i') }}
                                                às
                                                {{ $palestra->data_palestra_fim->format('H:i') }}
                                                @if ($palestra->data_palestra->format('d/m/Y') != $palestra->data_palestra_fim->format('d/m/Y'))
                                                    ({{ $palestra->data_palestra_fim->format('d/m/Y') }})
                                                @endif
                                            </span>
                                        </div>
                                    @else
                                        <div class="info-item">
                                            <i class="far fa-clock"></i>
                                            <span><strong>Hora:</strong>
                                                {{ $palestra->data_palestra->format('H:i') }}</span>
                                        </div>
                                    @endif

                                    @if ($palestra->formato != null)
                                        <div class="info-item">
                                            <i class="fas fa-video"></i>
                                            <span><strong>Formato:</strong>
                                                @if ($palestra->formato == 1)
                                                    <span class="format-badge presencial">Presencial</span>
                                                @elseif($palestra->formato == 2)
                                                    <span class="format-badge online">Online</span>
                                                @elseif($palestra->formato == 3)
                                                    <span class="format-badge hibrido">Híbrido</span>
                                                @endif
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Botão de Detalhes -->
                            <div class="course-action">
                                <a href="{{ route('escola.palestra', ['slug' => $palestra->slug]) }}" class="btn-details">
                                    <span>Ver detalhes</span>
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Paginação -->
            <div class="custom-pagination-container">
                @include('layouts.publicador.paginacao')
            </div>
        </div>
    </div>

    <style>
        /* Variáveis de cores */
        :root {
            --primary-color: #d4dfed;
            --primary-dark: #b3c2d9;
            --primary-light: #e9f0f9;
            --accent-color: #004080;
            --accent-light: #0066cc;
            --accent-ultra-light: #e5eef9;
            --text-color: #333;
            --text-secondary: #666;
            --background: #fff;
            --light-gray: #f8f9fa;
            --border-radius: 8px;
            --card-border: #eaeaea;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            --hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        /* Reset e estilos base (mobile-first) */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-color);
            background-color: var(--light-gray);
            line-height: 1.6;
            font-size: 16px;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        a {
            text-decoration: none;
            color: var(--accent-color);
            transition: var(--transition);
        }

        a:hover {
            color: var(--accent-light);
        }

        /* Container principal */
        .courses-page {
            padding: 15px 0 30px;
        }

        .container {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        /* Cabeçalho de seção */
        .section-header {
            margin-bottom: 20px;
            text-align: center;
        }

        .section-title {
            color: var(--accent-color);
            font-size: 1.3rem;
            font-weight: 700;
            position: relative;
            margin: 0 0 15px;
            padding-bottom: 10px;
            text-align: center;
        }

        .section-title:after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 60%;
            height: 3px;
            background-color: var(--accent-color);
            transform: translateX(-50%);
            border-radius: 3px;
        }

        .past-courses-header {
            margin-top: 30px;
        }

        /* Grid de cursos */
        .courses-grid {
            margin-bottom: 20px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .col-md-6,
        .col-lg-4 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-bottom: 20px;
        }

        /* Cards de cursos */
        .course-card {
            background-color: white;
            border-radius: var(--border-radius);
            border: 1px solid var(--card-border);
            overflow: hidden;
            height: 100%;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: var(--shadow);
        }

        .course-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--hover-shadow);
            border-color: var(--primary-color);
        }

        /* Imagem do curso */
        .course-image {
            position: relative;
            overflow: hidden;
        }

        .course-image img {
            width: 100%;
            height: auto;
            object-fit: fill;
            transition: transform 0.5s ease;
        }

        .course-card:hover .course-image img {
            transform: scale(1.05);
        }

        /* Badge de tipo de curso */
        .course-type-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--accent-color);
            color: white;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 20px;
            z-index: 2;
        }

        .course-type-badge.past {
            background-color: var(--text-secondary);
        }

        /* Cursos passados - overlay */
        .past-course-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .past-badge {
            background-color: rgba(255, 255, 255, 0.9);
            color: var(--text-secondary);
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        /* Conteúdo do curso */
        .course-content {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .course-title {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 15px;
            min-height: auto;
        }

        .course-title a {
            color: var(--accent-color);
            text-decoration: none;
            transition: var(--transition);
            display: block;
        }

        .course-title a:hover {
            color: var(--accent-light);
        }

        /* Informações do curso */
        .course-info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .info-item i {
            width: 16px;
            margin-right: 6px;
            margin-left: 0;
            color: var(--accent-color);
            font-size: 0.9rem;
            min-width: 16px;
            margin-top: 3px;
        }

        .info-item span {
            flex: 1;
            margin: 0;
        }

        .info-item strong {
            color: var(--text-color);
            margin-right: 4px;
            font-weight: 600;
        }

        /* Badges de formato */
        .format-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 2px;
        }

        .format-badge.presencial {
            background-color: #e1f5fe;
            color: #0288d1;
        }

        .format-badge.online {
            background-color: #e8f5e9;
            color: #388e3c;
        }

        .format-badge.hibrido {
            background-color: #fff8e1;
            color: #ffa000;
        }

        /* Estilos para vagas */
        .vagas-disponiveis {
            color: #28a745;
            font-weight: 600;
        }

        .vagas-esgotadas {
            color: #dc3545;
            font-weight: 600;
        }

        /* Botão de ação */
        .course-action {
            padding: 0 15px 15px;
        }

        .btn-enrollment,
        .btn-details {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--accent-color);
            color: white;
            padding: 8px 16px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .btn-enrollment i,
        .btn-details i {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }

        .btn-enrollment:hover,
        .btn-details:hover {
            background-color: var(--accent-light);
            color: white;
            text-decoration: none;
        }

        .btn-enrollment:hover i,
        .btn-details:hover i {
            transform: translateX(5px);
        }

        .btn-details {
            background-color: var(--text-secondary);
        }

        .btn-details:hover {
            background-color: #555;
        }

        /* Cursos passados */
        .past-course {
            opacity: 0.9;
        }

        /* Paginação */
        .custom-pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .pagination {
            display: flex;
            padding-left: 0;
            list-style: none;
            border-radius: 0.25rem;
        }

        .page-item {
            margin: 0 2px;
        }

        .page-item:first-child .page-link {
            margin-left: 0;
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }

        .page-item:last-child .page-link {
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }

        .page-item.active .page-link {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }

        .page-item.disabled .page-link {
            color: #6c757d;
            pointer-events: none;
            cursor: auto;
            background-color: #fff;
            border-color: #dee2e6;
        }

        .page-link {
            position: relative;
            display: block;
            padding: 0.5rem 0.75rem;
            margin-left: -1px;
            line-height: 1.25;
            color: var(--accent-color);
            background-color: #fff;
            border: 1px solid #dee2e6;
            text-decoration: none;
        }

        .page-link:hover {
            z-index: 2;
            color: var(--accent-light);
            text-decoration: none;
            background-color: #e9ecef;
            border-color: #dee2e6;
        }

        .page-link:focus {
            z-index: 3;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 128, 0.25);
        }

        /* Para garantir que a compatibilidade com o Bootstrap seja mantida */
        .mb-4 {
            margin-bottom: 1.5rem !important;
        }

        .text-center {
            text-align: center !important;
        }

        .img-fluid {
            max-width: 100%;
            height: auto;
        }

        /* Banner */
        .banner-row {
            margin-bottom: 30px;
            margin-top: 30px;
        }

        /* Fix para conteúdo muito longo em cartões */
        .course-title a {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Compatibilidade com classes existentes */
        .azul-padrao {
            color: var(--accent-color);
        }

        .inscricao {
            display: inline-block;
            background-color: var(--accent-color);
            color: white !important;
            padding: 8px 16px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            text-align: center;
            transition: var(--transition);
            margin-top: 10px;
        }

        .inscricao:hover {
            background-color: var(--accent-light);
            color: white !important;
        }

        /* Ajustes adicionais para o modelo antigo comentado no código */
        .rounded.bg-white.p-2 {
            border-radius: var(--border-radius);
            background-color: white;
            padding: 0.5rem !important;
            height: 100%;
        }

        article p.titulo.text-center.p-1 {
            min-height: auto;
            padding: 0.25rem !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 10px;
        }

        /* Classes de espaçamento do Bootstrap */
        .p-1 {
            padding: 0.25rem !important;
        }

        .p-2 {
            padding: 0.5rem !important;
        }

        .my-4 {
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }

        .mb-4 {
            margin-bottom: 1.5rem !important;
        }

        .w-100 {
            width: 100% !important;
        }

        /* Classes de exibição do Bootstrap */
        .d-block {
            display: block !important;
        }

        .d-none {
            display: none !important;
        }

        .overflow-hidden {
            overflow: hidden !important;
        }

        /* Ajustes para garantir que a animação funcione em dispositivos móveis */
        @media (hover: none) {
            .course-card:hover {
                transform: none;
            }

            .course-card:active {
                transform: translateY(-3px);
            }

            .btn-enrollment:active i,
            .btn-details:active i {
                transform: translateX(5px);
            }
        }

        /* MEDIA QUERIES - RESPONSIVIDADE */

        /* Telas pequenas - Smartphones */
        @media (min-width: 576px) {
            .container {
                max-width: 540px;
            }

            .section-title {
                font-size: 1.5rem;
            }

            .course-title {
                font-size: 1.05rem;
            }

            .info-item {
                font-size: 0.9rem;
            }

            .btn-enrollment,
            .btn-details {
                padding: 10px 18px;
            }
        }

        /* Tablets */
        @media (min-width: 768px) {
            .container {
                max-width: 720px;
            }

            .section-title {
                font-size: 1.6rem;
            }

            .col-md-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }

            .course-title {
                min-height: 60px;
            }

            .course-content {
                padding: 18px;
            }

            .course-action {
                padding: 0 18px 18px;
            }

            .course-type-badge {
                font-size: 0.8rem;
                padding: 5px 10px;
            }

            .d-md-block {
                display: block !important;
            }

            .d-md-none {
                display: none !important;
            }
        }

        /* Desktops pequenos e laptops */
        @media (min-width: 992px) and (max-width: 1399px) {
            .container {
                max-width: 960px;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .section-title:after {
                width: 50%;
            }

            .col-lg-4 {
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
            }

            .course-title {
                font-size: 1.1rem;
                min-height: 50px;
            }

            .info-item {
                margin-bottom: 10px;
            }

            .info-item i {
                margin-right: 8px;
                font-size: 0.95rem;
            }

            /* Ajustes específicos para laptops menores */
            .course-card {
                height: auto;
            }

            .course-title {
                min-height: 40px;
                font-size: 1rem;
            }

            .course-content {
                padding: 15px;
            }

            .course-action {
                padding: 0 15px 15px;
            }

            .info-item {
                font-size: 0.8rem;
                margin-bottom: 6px;
            }

            .info-item i {
                font-size: 0.85rem;
                width: 14px;
                min-width: 14px;
            }

            .btn-enrollment,
            .btn-details {
                padding: 8px 14px;
                font-size: 0.85rem;
            }

            /* Layout otimizado para resolução específica */
            .courses-page {
                padding: 10px 0 20px;
            }

            .section-header {
                margin-bottom: 15px;
            }

            .past-courses-header {
                margin-top: 20px;
            }

            .courses-grid {
                margin-bottom: 15px;
            }

            .mb-4 {
                margin-bottom: 1rem !important;
            }

            .section-title {
                font-size: 1.5rem;
                margin: 0 0 10px;
                padding-bottom: 8px;
            }
        }

        /* Laptops menores */
        @media (min-width: 992px) and (max-width: 1199px) {
            .col-lg-4 {
                flex: 0 0 50%;
                max-width: 50%;
            }

        }

        /* Laptops de 1200px a 1399px */
        @media (min-width: 1200px) and (max-width: 1399px) {
            .container {
                max-width: 1140px;
            }

            .course-content {
                padding: 20px;
            }

            .course-action {
                padding: 0 20px 20px;
            }

        }

        /* Laptops grandes e monitores menores (1400px - 1800px) - 2 CARDS POR LINHA */
        @media (min-width: 1400px) and (max-width: 1800px) {
            .container {
                max-width: 1320px;
            }

            /* IMPORTANTE: Atribuir 2 cards por linha nessa resolução */
            .col-lg-4 {
                flex: 0 0 50%;
                max-width: 50%;
            }

            .courses-grid .col-lg-4 {
                padding-right: 20px;
                padding-left: 20px;
                margin-bottom: 30px;
            }

            /* Ajustes específicos para cards de 1440px */
            .course-card {
                min-height: 540px;
            }

            .course-title {
                font-size: 1.25rem;
                line-height: 1.4;
                min-height: 60px;
                margin-bottom: 20px;
            }

            .course-content {
                padding: 25px;
            }

            .info-item {
                margin-bottom: 14px;
                font-size: 1rem;
            }

            .info-item i {
                font-size: 1.1rem;
                width: 20px;
                min-width: 20px;
                margin-right: 10px;
            }

            .format-badge {
                padding: 4px 10px;
                font-size: 0.85rem;
            }

            .course-action {
                padding: 0 25px 25px;
                margin-top: 15px;
            }

            .btn-enrollment,
            .btn-details {
                padding: 12px 25px;
                font-size: 1rem;
            }

            .section-header {
                margin-bottom: 35px;
            }

            .section-title {
                font-size: 2rem;
                margin-bottom: 18px;
                padding-bottom: 18px;
            }

            .past-courses-header {
                margin-top: 45px;
                margin-bottom: 35px;
            }

            .past-badge {
                font-size: 0.9rem;
                padding: 6px 18px;
            }

            .no-vacancy-badge {
                padding: 6px 18px;
                font-size: 0.9rem;
            }

            .btn-no-vacancy {
                padding: 12px 25px;
                font-size: 1rem;
            }
        }

        /* Telas grandes de desktop (acima de 1800px) - 3 CARDS POR LINHA */
        @media (min-width: 1801px) {
            .container {
                max-width: 1680px;
            }

            /* Voltar para 3 cards por linha em telas grandes */
            .col-lg-4 {
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
            }

            .courses-grid .col-lg-4 {
                padding-right: 20px;
                padding-left: 20px;
                margin-bottom: 35px;
            }

            .course-card {
                min-height: 560px;
            }

            .course-title {
                font-size: 1.3rem;
                line-height: 1.4;
                min-height: 65px;
                margin-bottom: 25px;
            }

            .course-content {
                padding: 30px;
            }

            .info-item {
                margin-bottom: 15px;
                font-size: 1.05rem;
            }

            .info-item i {
                font-size: 1.15rem;
                width: 22px;
                min-width: 22px;
                margin-right: 12px;
            }

            .format-badge {
                padding: 5px 12px;
                font-size: 0.9rem;
            }

            .course-action {
                padding: 0 30px 30px;
                margin-top: 15px;
            }

            .btn-enrollment,
            .btn-details {
                padding: 15px 30px;
                font-size: 1.05rem;
            }

            .section-header {
                margin-bottom: 40px;
            }

            .section-title {
                font-size: 2.2rem;
                margin-bottom: 20px;
                padding-bottom: 20px;
            }

            .past-courses-header {
                margin-top: 50px;
                margin-bottom: 40px;
            }

            .btn-no-vacancy {
                padding: 15px 30px;
                font-size: 1.05rem;
            }

            .no-vacancy-badge {
                padding: 5px 12px;
                font-size: 0.9rem;
            }
        }

        /* Ajustes específicos para telas muito pequenas */
        @media (max-width: 375px) {
            .section-title {
                font-size: 1.2rem;
            }

            .info-item {
                font-size: 0.8rem;
            }

            .info-item i {
                width: 14px;
                margin-right: 4px;
            }

            .btn-enrollment,
            .btn-details {
                padding: 6px 14px;
                font-size: 0.85rem;
            }
        }


        .courses-grid {
            margin-left: -15px;
            margin-right: -15px;
        }

        /* Estilos para cursos sem vagas */
        .no-vacancy-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(220, 53, 69, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .no-vacancy-badge {
            background-color: rgba(255, 255, 255, 0.9);
            color: #dc3545;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        .btn-no-vacancy {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #dc3545;
            color: white;
            padding: 8px 16px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .btn-no-vacancy i {
            margin-left: 8px;
        }

        .btn-no-vacancy:hover {
            background-color: #c82333;
            color: white;
            text-decoration: none;
        }

        .no-vacancy {
            opacity: 0.9;
            border-color: rgba(220, 53, 69, 0.3);
        }

        /* Estilos responsivos para cursos sem vagas */
        @media (min-width: 1400px) {
            .no-vacancy-badge {
                padding: 6px 18px;
                font-size: 0.9rem;
            }

            .btn-no-vacancy {
                padding: 12px 25px;
                font-size: 1rem;
            }
        }

        @media (min-width: 1801px) {
            .btn-no-vacancy {
                padding: 15px 30px;
                font-size: 1.05rem;
            }

            .no-vacancy-badge {
                padding: 5px 12px;
                font-size: 0.9rem;
            }
        }
    </style>
@endsection