@extends('home.layouts.app')

<!--inner blog page-->

@push('style')
<link rel="canonical" href="https://exprenza.com/countries/{{ $blog->slug }}" />

<style>
  .read-more-btn {
    background-color: #f3f3f3;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .read-more-btn::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #f76b1c, #784684);
    transition: all 0.3s ease;
  }

  .read-more-btn:hover::before {
    background: linear-gradient(90deg, #784684, #f76b1c);
  }

  .read-more-btn:hover {
    background-color: #e1e1e1;
    color: #000;
  }

  .page-banner {
    background: url("{{ homeTheme() }}/image/abt-banner.jpg") no-repeat center center;
    background-size: cover;
    height: 390px;
    /* Enough height for both title + breadcrumbs */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    text-align: center;
    padding-top: 100px;
    /* ensures space below navbar */
  }

  .page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(10, 15, 25, 0.7);
    /* overlay */
    z-index: 0;
  }

  .banner-content {
    position: relative;
    z-index: 1;
  }

  .banner-title,.head {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .breadcrumb {
    font-size: 14px;
  }

  .breadcrumb a {
    color: #ddd;
    text-decoration: none;
    margin: 0 3px;
  }

  .breadcrumb span {
    color: #e74c3c;
  }

  .card {
    border-radius: 8px;
    background: #fff;
    width: 60% !important;
    padding-top: 20px !important;
  }

  .btnen {
    background: linear-gradient(#c889ff, #ae56fc) !important;
  }

  .blog-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 80px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .blog-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
  }

  .blog-card:hover {
    transform: translateY(-5px);
  }

  .blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .card-content {
    padding: 20px;
  }

  .card-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
  }

  .meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }

  .card-content p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
  }
  .blog-content p {
  line-height: 1.8; /* or any value you prefer */
  font-size:14px;
  margin-bottom: 1em; /* for spacing between paragraphs */
}
</style>


@endpush

@section('content')
<!-- Banner -->

<section class="page-banner">
  <div class="banner-content">
    <h1 class="banner-title">{{ $blog->title }}</h1>
    <nav class="breadcrumb">
      <a href="{{route('home.index')}}">Home</a> /
      <span>{{ $blog->title }}</span>
    </nav>
  </div>
</section>

<section class="blog-detail-section py-5">
  <div class="container">
    <div class="blog-detail-wrapper">
      <!-- Blog Title -->
      

      <!-- Thumbnail Image -->
      @if($blog->image)
        <div class="blog-thumbnail mb-4">
          <img src="{{ asset('storage/country/' . $blog->image) }}" alt="{{ $blog->title }}" class="img-fluid w-100 rounded" style="height: 600px;">
        </div>
      @endif
<h1 class="mb-3 head">{{ $blog->title }}</h1>
<br>
      <!-- Meta Info -->
      <div class="blog-meta mb-4 text-muted">
        <span>📅 {{ \Carbon\Carbon::parse($blog->published_date)->format('F j, Y') }}</span>
</div>
     

      <!-- Full Content -->
      <div class="blog-content">
        {!! $blog->content !!}
      </div>
    </div>
  </div>
</section>
  


                        @endsection