@extends('layouts.main.main')

@section('title')
{{ $title }}
@endsection

@section('content')
@include('layouts.admin.title',['title'=>$title])
<!--Main Content Start-->
<div class="main-content innerpagebg wf100 p-2 default-bg">
    
    <style>
    /* Heading layout: keep title and download action aligned and wrapping nicely */
    .player-bio h4 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      word-break: break-word;
    }

    /* Download button styling */
    .player-bio h4 a.download-btn {
      margin: 0; /* replace inline margins */
      font-size: 16px; /* consistent size across breakpoints */
      padding: 0.4rem 0.75rem;
      background: #007bff; /* falls back to Bootstrap primary */
      color: #fff !important;
      border-radius: 6px;
      text-decoration: none !important;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform .15s ease, box-shadow .15s ease;
      white-space: nowrap;
    }
    .player-bio h4 a.download-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0,0,0,.12);
    }
    .player-bio h4 a.download-btn i { font-size: .95em; }

    /* Improve text readability and make embedded media responsive */
    .player-bio .txt { line-height: 1.7; }
    .player-bio .txt p { text-align: justify; hyphens: auto; }
    .player-bio .txt img {
      max-width: 100% !important;
      width: 100% !important;   /* override fixed inline widths */
      height: auto !important;
      display: block;
    }
    .player-bio .txt iframe,
    .player-bio .txt video { max-width: 100% !important; width: 100% !important; height: auto; }
    .player-bio .txt table { width: 100%; max-width: 100%; display: block; overflow-x: auto; }

    /* Small screens: stack the button below the title and clear floats from legacy content */
    @media (max-width: 576px) {
      .player-bio h4 { flex-direction: column; align-items: flex-start; }
      .player-bio h4 a.download-btn { width: 100%; justify-content: center; font-size: 16px; }
      .player-bio h4 .float-right { float: none !important; margin: 0 !important; }
      .player-bio .txt img { margin: 10px 0 !important; float: none !important; }
    }
  </style>
  
  <!--News Large Page Start-->
  <!--Start-->
  <div class="news-details p-0">
    <div class="container">
      <div class="row">
              <!--Player Biography Start-->
                <div class="player-bio">
                  <h4>ABOUT   {{ $title }}  <a href="{{ $rnr->pdf }}" class="float-right" style="margin-right: 20px; font-size: 18px;" target="_blank"><u>Download PDF</u> <i class="fas fa-download "></i></a></h4>
                  <div class="txt">
                   <p>
                   {!! $rnr->description !!}

                   </p>
                  </div>
                </div>
                <!--Player Biography End-->
        </div>
    </div>
  </div>
  <!--End-->
</div>
<!--Main Content End-->
@endsection