/**
 * صفحة قائمة عدد يوم التأسيس – تعمل على الكمبيوتر والجوال وجميع المتصفحات
 * تخطيط بسيط: لا يعتمد على Grid/Flex المعقد، مع تحسين للمتصفحات الحديثة
 */
.fi-page {
  min-height: 60vh;
  padding: 24px 0 48px;
}

.fi-header {
  text-align: center;
  margin-bottom: 28px;
  padding: 0 16px;
}

.fi-header h1 {
  font-size: 1.75rem;
  margin: 0 0 8px;
  color: #231f20;
}

.fi-header p {
  font-size: 1rem;
  color: #3d3634;
  margin: 0;
}

.fi-list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fi-item {
  display: block;
  margin: 0 0 12px;
  padding: 0;
}

.fi-item a {
  display: block;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(107, 78, 69, 0.2);
  border-radius: 10px;
  text-decoration: none;
  color: #231f20;
  -webkit-tap-highlight-color: rgba(107, 78, 69, 0.15);
  transition: background 0.2s, border-color 0.2s;
}

.fi-item a:hover,
.fi-item a:focus {
  background: #F8F4EF;
  border-color: #6B4E45;
  outline: none;
}

.fi-item-title {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.fi-item-author {
  display: block;
  font-size: 0.9rem;
  color: #6B4E45;
}

/* شريط علوي بألوان يوم التأسيس */
.fi-bar {
  display: block;
  height: 6px;
  margin: 0 0 24px;
  border-radius: 3px;
  background: linear-gradient(90deg, #6B4E45, #BA7747, #C99B2E);
}

/* عمودين على الشاشات الواسعة */
@media (min-width: 600px) {
  .fi-list {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
  .fi-item {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

@media (min-width: 900px) {
  .fi-list {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
  .fi-header h1 {
    font-size: 2rem;
  }
}

/* الوضع الداكن */
[data-theme="dark"] .fi-header h1 { color: #F4EADA; }
[data-theme="dark"] .fi-header p { color: #DEC9B2; }
[data-theme="dark"] .fi-item a {
  background: #2a2320;
  border-color: rgba(186, 119, 71, 0.4);
  color: #F4EADA;
}
[data-theme="dark"] .fi-item a:hover,
[data-theme="dark"] .fi-item a:focus {
  background: #352b26;
  border-color: #BA7747;
}
[data-theme="dark"] .fi-item-author { color: #DEC9B2; }