<!-- فونت وزیر -->
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />

<h1 style="text-align:center; font-family:Vazir, Tahoma; color:#333;font-weight:600;">کتابخانه</h1>

<!-- نوار جستجو -->
<div style="display:flex; justify-content:center; margin:30px 0;">
  <input type="text" placeholder="جستجوی عنوان" 
    style="width:60%; max-width:600px; padding:12px 16px; border:none; background:#f3fش3f3; border-radius:30px; font-size:16px; outline:none; text-align:right; font-family:Vazir, Tahoma;">
</div>

<!-- گرید کارت‌ها -->
<div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; padding:0 40px 60px; direction:rtl;">

  <!-- کارت ۱ -->
  <div class="card">
    <div class="card-content">
      <h3>استاندارد برنامه‌ریزی و طراحی بیمارستان ایمن</h3>
      <ul>
        <li>بخش بستری داخلی / جراحی عمومی</li>
        <li>معاونت توسعه مدیریت و منابع</li>
        <li>دفتر مدیریت منابع فیزیکی و مجری طرح‌های عمرانی</li>
        <li>خرداد ۸۹</li>
      </ul>
      <a href="مسیر_فایل_کتاب1.pdf" download class="download-btn">دانلود</a>
    </div>
    <div class="card-icon">
      <img src="https://kb.h-soft.ir/download/thumbnails/79076840/12%20-%20Copy.png?api=v2&nonce=1759707384267" alt="کتاب">
      
    </div>
  </div>

  <!-- کارت ۲ -->
  <div class="card">
    <div class="card-content">
      <h3>استاندارد طراحی بخش اورژانس بیمارستان</h3>
      <ul>
        <li>دفتر توسعه فنی و عمرانی</li>
        <li>معاونت طرح و برنامه</li>
        <li>واحد فنی و ایمنی</li>
        <li>خرداد ۹۰</li>
      </ul>
      <a href="مسیر_فایل_کتاب2.pdf" download class="download-btn">دانلود</a>
    </div>
    <div class="card-icon">
      <img src="https://kb.h-soft.ir/download/thumbnails/79076840/12%20-%20Copy.png?api=v2&nonce=1759707384267" alt="کتاب">
     
    </div>
  </div>

  <!-- کارت ۳ -->
  <div class="card">
    <div class="card-content">
      <h3>استاندارد طراحی بخش مراقبت‌های ویژه (ICU)</h3>
      <ul>
        <li>اداره کل امور مهندسی</li>
        <li>مرکز توسعه فضاهای درمانی</li>
        <li>کارگروه طراحی درمانی</li>
        <li>تیر ۹۱</li>
      </ul>
      <a href="مسیر_فایل_کتاب3.pdf" download class="download-btn">دانلود</a>
    </div>
    <div class="card-icon">
      <img src="https://kb.h-soft.ir/download/thumbnails/79076840/13.png?api=v2&nonce=1759707333295" alt="کتاب">
     
    </div>
  </div>

  <!-- کارت ۴ -->
  <div class="card">
    <div class="card-content">
      <h3>راهنمای طراحی کلینیک‌های تخصصی</h3>
      <ul>
        <li>اداره کل منابع فیزیکی</li>
        <li>دفتر طرح‌های ملی</li>
        <li>معاونت عمرانی</li>
        <li>شهریور ۹۲</li>
      </ul>
      <a href="مسیر_فایل_کتاب4.pdf" download class="download-btn">دانلود</a>
    </div>
    <div class="card-icon">
      <img src="https://kb.h-soft.ir/download/thumbnails/79076840/12%20-%20Copy.png?api=v2&nonce=1759707384267" alt="کتاب">
     
    </div>
  </div>

</div>

<style>
  .card {
    background:#fff;
    border-radius:18px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition: all 0.3s ease;
    flex-direction: row-reverse; /* عکس سمت راست متن */
    font-family: Vazir, Tahoma;
  }

  .card-content {
    flex:1;
    text-align:right;
    padding-right:15px;
  }

  .card-content h3 {
    margin:0 0 8px;
    font-weight:600; /* کمی بولد */
    font-family:Vazir, Tahoma;
    font-size:13px;
    color:#555;
  }

  .card-content ul {
    margin:0;
    padding-right:15px;
    list-style-type:disc;
    color:#555;
    font-size:13px;
    font-family:Vazir, Tahoma;
  }

  .download-btn {
    display:inline-block;
    background-color:; /* رنگ زمینه دکمه */
    color:white; /* متن سفید */
    border:none;
    border-radius:25px;
    padding:3px 20px; /* عرض کمتر و جمع و جور */
    font-size:13px;
    text-decoration:none;
    margin-top:12px;
    cursor:pointer;
    text-align:center;
    font-family:Vazir, Tahoma;
  }

  .download-btn:hover {
    background-color:#d50088;
  }

  .card-icon {
    background:#f7f7f7;
    border-radius:16px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px; /* فاصله بین دو تصویر */
  }

  .card-icon img {
    width: 2cm;
    height: 2cm;
  }

  .card.large {
    transform: scale(1.05);
    background:#fafafa;
  }

  .card:hover {
    transform: scale(1.03);
    background:#fdfdfd;
  }

  @media (max-width:900px) {
    div[style*="grid-template-columns"] {
      grid-template-columns:1fr;
    }
  }
</style>

<script>
  document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('click', () => {
      card.classList.toggle('large');
    });
  });
</script>