بطاقة القصة التحريرية الصحفية Editorial Story

<!-- Qahera UI Kit - Editorial Story Pattern (Native HTML) -->
<section class="qhr-editorial-story" 
         style="padding: 80px 0; background-color: #0F0B09; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06);">
  <div style="max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center;">
    <div>
      <span class="qhr-badge qhr-badge--outline qhr-badge--sm" style="border-color: rgba(212, 175, 55, 0.3); color: #D4AF37; margin-bottom: 16px;">
        فلسفة الصنعة
      </span>

      <h2 style="font-family: var(--qhr-font-family-display, serif); font-size: 36px; font-weight: 700; color: #F7F3ED; line-height: 1.3; margin: 0 0 12px 0;">
        حكاية مسبوكة بالذهب والأصالة المصرية
      </h2>

      <p style="font-size: 18px; color: #D4AF37; margin-bottom: 24px;">
        حيث تلتقي صلابة الفولاذ الملكي مع رقة الحلية المعاصرة
      </p>

      <p style="font-size: 15px; line-height: 1.8; color: #B9A896; margin-bottom: 16px;">
        في قلب القاهرة، تصاغ المقتنيات ليس كمجرد زينة، بل كوثيقة جمالية تعبر عن شخصية مقتنيها وثباته في وجه تقلبات الزمن.
      </p>

      <blockquote style="margin: 28px 0; padding-inline-start: 20px; border-inline-start: 2px solid #D4AF37; font-style: italic; color: #F7F3ED; font-size: 16px;">
        "الجمال الحقيقي هو ما يدوم معك دون أن يفقده الزمن بريقه."
        <footer style="font-size: 13px; color: #8C7E70; margin-top: 6px; font-style: normal;">
          — حرفيو القاهرة
        </footer>
      </blockquote>

      <button type="button" class="qhr-btn qhr-btn--outline qhr-btn--md" style="border-color: rgba(212, 175, 55, 0.4); color: #D4AF37; margin-top: 12px;">
        <span>اكتشف الحكاية كاملة</span>
        <svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14m-7 7l7-7-7-7" />
        </svg>
      </button>
    </div>

    <div style="position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); height: 440px; background-color: #17120F; display: flex; align-items: center; justify-content: center;">
      <div style="text-align: center; color: rgba(212, 175, 55, 0.3);">
        <svg class="qhr-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
          <line x1="7" y1="7" x2="7.01" y2="7" />
        </svg>
      </div>
    </div>
  </div>
</section>