@extends('layouts.plantilla')
@section('content')
@section('novedades','active')

<style type="text/css">
    .card-title{
        font-family: 'Rubik', sans-serif;
        font-weight: 500;
        font-size: 22px;
        line-height: 26px;
        text-align: left;
        letter-spacing: 2%;
        color: #333;
    }

    .card-text, .card-body p, p{
        font-family: 'Rubik', sans-serif;
        font-weight: 400;
        font-size: 17px;
        color: #333;
        line-height: 150%;
    }

    .header{
        background-color: #F5F5F5;
    }
    .titulo{
        font-family: 'Rubik', sans-serif;
        font-weight: 500;
        font-size: 30px;
        line-height: 126.19%;
        letter-spacing: 0.02em;
        color: #333;
    }
    
    .header .titulo{
        text-transform: uppercase;
    }

    .breadcrumb li a{
        font-family: 'Rubik', sans-serif;
        font-weight: 300;
        font-size: 13px;
        color: #000;
        line-height: 15.41px;
        text-decoration: none !important;
    }

    .breadcrumb li.active a{
        font-weight: 400 !important;
    }

    .card{
        border: none !important;
    }
    .foto{
        background-size: cover;
        background-repeat: no-repeat;
        height: 25vh;
        background-position: center;
    }
    
    .novedad__categoria{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        text-transform: uppercase;
        color: #F38130;
    }
    .novedad__titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 30px;
        line-height: 140%;
        color: #333333;
    }
    .novedad p{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 18px;
        line-height: 19px;
        color: #333333;
    }
    @media screen and (max-width: 768px){

    }
    @media screen and (min-width: 992px){
        .card{
            height: 100%;
        }
    }
</style>

<div class="header">
    <div class="container" class="mb-5">
        <nav class="breadcrumb-menu pb-3" style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb" style="color: #2B2E39;">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="<?= route('home') ?>">Inicio</a></li>
                <li class="breadcrumb-item"><a href="<?= route('novedades') ?>">Novedades</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="<?= route('showNovedad', ['id' => $novedad->id]) ?>"><?= $novedad->titulo ?></a></li>
            </ol>
        </nav>
        <!--<h1 class="titulo pb-4"><?= $novedad->titulo ?></h1>-->
    </div>
</div>

<div class="container px-3 py-5">
    <div class="row">
        <div class="col-md-8 col-sm-12 offset-md-2 novedad">
            <figure class="figure mb-0 w-100">
                <img src="{{asset(Storage::url($novedad->foto))}}" class="figure-img img-fluid w-100" alt="...">
            </figure>
            <!-- <div class="img-fluid foto" style="background-image: url('{{asset(Storage::url($novedad->foto))}}')"></div> -->
            <!-- <img src="{{asset(Storage::url($novedad->foto))}}" class="" alt="...">-->
        </div>
        <div class="col-md-8 col-sm-12 offset-md-2 novedad">
            <h5 class="novedad__categoria mb-3 mt-2"><?= $novedad->Categoria->nombre ?></h5>
            <h1 class="novedad__titulo mb-3"><?= $novedad->titulo ?></h1>
            <p class="novedad__descripcion"><?= $novedad->descripcion_larga ?></p>
        </div>
    </div>
    <!-- <div class="row">

    </div> -->
</div>

@endsection
