/* ============================================================
   موسوعة الخيل — لوحة الفسيفساء (Bento Grid)
   بلاطات محتوى متنوّعة الأحجام بطابع عصري دافئ
   ============================================================ */

:root {
  --b-bg: #e9e3d7;
  --b-tile: #fbf8f1;
  --b-dark: #281e15;
  --b-dark-2: #34271a;
  --b-gold: #b07d3c;
  --b-gold-deep: #8a5f28;
  --b-cream: #f4ecdc;
  --b-ink: #2a2018;
  --b-ink-soft: #6a5a49;
  --b-ink-mute: #93826e;
  --b-line: #ddd3c2;

  --b-font: "Tajawal", system-ui, sans-serif;
  --b-serif: "Amiri", serif;
  --b-radius: 22px;
  --b-maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.bento-body {
  margin: 0;
  font-family: var(--b-font);
  color: var(--b-ink);
  background: var(--b-bg);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(176, 125, 60, .12), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(40, 30, 21, .10), transparent 42%);
  background-attachment: fixed;
}
.bento-body a { color: inherit; text-decoration: none; }

/* ===================== Header ===================== */
.b-header {
  max-width: var(--b-maxw);
  margin: 0 auto;
  padding: 30px 22px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.b-logo { display: flex; align-items: center; gap: 10px; }
.b-logo-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--b-gold), var(--b-dark));
  color: #fbf8f1;
  border-radius: 13px;
}
.b-logo-text { font-size: 22px; font-weight: 900; color: var(--b-dark); }
.b-header-tag {
  margin: 0;
  margin-inline-start: auto;
  color: var(--b-ink-soft);
  font-size: 14px;
  font-weight: 500;
}

/* ===================== Grid ===================== */
.b-grid {
  max-width: var(--b-maxw);
  margin: 0 auto;
  padding: 10px 22px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 16px;
}

.b-tile {
  background: var(--b-tile);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius);
  padding: 22px 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px -12px rgba(40, 30, 21, .3);
  opacity: 0;
  transform: translateY(14px) scale(.99);
  animation: b-in .55s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--d, 1) * 55ms);
}
@keyframes b-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .b-tile { opacity: 1; transform: none; animation: none; }
}
.b-tile h2, .b-tile h3 { font-family: var(--b-serif); margin: 0; }

/* Tile tones */
.b-tone-dark { background: linear-gradient(150deg, var(--b-dark-2), var(--b-dark)); border-color: var(--b-dark); color: #f4ecdc; }
.b-tone-gold { background: linear-gradient(150deg, var(--b-gold), var(--b-gold-deep)); border-color: var(--b-gold-deep); color: #fff8ea; }

/* Chips */
.b-chip {
  display: inline-block;
  align-self: flex-start;
  background: var(--b-gold);
  color: #fff8ea;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.b-chip-ghost { background: rgba(176,125,60,.16); color: var(--b-gold-deep); }
.b-tone-dark .b-chip-ghost { background: rgba(255,248,234,.16); color: #f4ecdc; }

.b-link { font-weight: 700; color: var(--b-gold-deep); font-size: 14px; margin-top: auto; }
.b-link:hover { color: var(--b-dark); }

/* ---- Featured ---- */
.b-featured {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  flex-direction: row;
  align-items: stretch;
  background: var(--b-dark);
  border-color: var(--b-dark);
  color: #f4ecdc;
}
.b-featured-art { width: 45%; min-width: 130px; position: relative; }
.b-featured-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-featured-body { flex: 1; padding: 26px 26px; display: flex; flex-direction: column; }
.b-featured h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0 0 8px; color: #fff8ea; }
.b-featured p { margin: 0 0 14px; color: rgba(244,236,220,.8); font-size: 15px; }
.b-featured .b-link { color: var(--b-gold); }
.b-featured .b-link:hover { color: #fff8ea; }

/* ---- Stat ---- */
.b-stat { justify-content: center; align-items: flex-start; }
.b-stat strong { font-family: var(--b-serif); font-size: 56px; font-weight: 700; line-height: 1; }
.b-stat span { font-size: 14px; opacity: .9; margin-top: 6px; }

/* ---- Quote (tall) ---- */
.b-quote { grid-row: span 2; justify-content: center; background: var(--b-cream); }
.b-quote-mark { font-family: var(--b-serif); font-size: 70px; line-height: .6; color: var(--b-gold); height: 30px; }
.b-quote p { font-family: var(--b-serif); font-size: 23px; line-height: 1.75; margin: 10px 0 12px; color: var(--b-dark); }
.b-quote cite { font-style: normal; font-size: 13.5px; color: var(--b-ink-mute); font-weight: 600; }

/* ---- Fact ---- */
.b-fact { grid-column: span 2; justify-content: center; }
.b-fact p { margin: 0; font-size: 17px; line-height: 1.8; color: var(--b-ink); }
.b-fact b { color: var(--b-gold-deep); }

/* ---- Colors ---- */
.b-colors { grid-column: span 2; }
.b-colors h3 { font-size: 20px; margin-bottom: 14px; }
.b-swatches {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap;
}
.b-swatches li {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--b-ink-soft);
  flex: 1; min-width: 56px;
}
.b-sw {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.1);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.18);
}
.b-sw-pied { background: linear-gradient(135deg, #1c1712 0 50%, #e9e3d7 50% 100%); }

/* ---- Figure ---- */
.b-figure { flex-direction: row; align-items: center; gap: 14px; }
.b-figure-mono {
  font-family: var(--b-serif);
  font-size: 54px; font-weight: 700;
  width: 76px; height: 76px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--b-gold), var(--b-gold-deep));
  color: #fff8ea;
}
.b-figure-info h3 { font-size: 20px; color: #fff8ea; margin-top: 2px; }

/* ---- Timeline ---- */
.b-timeline { grid-column: span 2; }
.b-timeline h3 { font-size: 20px; margin-bottom: 14px; }
.b-tl {
  list-style: none; padding: 0; margin: 0;
  display: flex; justify-content: space-between; position: relative;
}
.b-tl::before {
  content: ""; position: absolute; top: 6px; inset-inline: 6px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--b-gold) 0 6px, transparent 6px 11px);
}
.b-tl li {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  position: relative; flex: 1; text-align: center;
}
.b-tl-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--b-gold); border: 2px solid var(--b-tile);
  box-shadow: 0 0 0 2px var(--b-gold); margin-bottom: 8px;
}
.b-tl b { font-size: 14px; color: var(--b-dark); }
.b-tl small { font-size: 11px; color: var(--b-ink-mute); }

/* ---- Breeds ---- */
.b-breeds h3 { font-size: 19px; margin-bottom: 10px; }
.b-list { list-style: none; padding: 0; margin: 0; }
.b-list li { border-bottom: 1px solid var(--b-line); }
.b-list li:last-child { border-bottom: none; }
.b-list a { display: block; padding: 7px 0; font-weight: 600; font-size: 15px; color: var(--b-ink); transition: color .15s ease, padding .15s ease; }
.b-list a:hover { color: var(--b-gold-deep); padding-inline-start: 6px; }

/* ---- Map ---- */
.b-map { grid-column: span 2; }
.b-map h3 { font-size: 20px; color: #fff8ea; margin-bottom: 10px; }
.b-map-area { position: relative; flex: 1; min-height: 90px; }
.b-pin {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #f4ecdc;
  white-space: nowrap;
  transform: translate(50%, -50%);
}
.b-pin i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--b-gold);
  box-shadow: 0 0 0 4px rgba(176,125,60,.28);
  animation: b-pulse 2.4s ease-in-out infinite;
}
@keyframes b-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(176,125,60,.3); } 50% { box-shadow: 0 0 0 7px rgba(176,125,60,.12); } }

/* ---- Search ---- */
.b-search { grid-column: span 2; justify-content: center; }
.b-search h3 { font-size: 20px; color: #fff8ea; margin-bottom: 12px; }
.b-search-form { display: flex; gap: 8px; background: #fff8ea; border-radius: 999px; padding: 5px 6px 5px 16px; }
.b-search-form input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; color: var(--b-ink); }
.b-search-form button {
  border: none; cursor: pointer; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%; background: var(--b-dark); color: #fff8ea;
  display: grid; place-items: center;
}
.b-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.b-tags a { font-size: 12.5px; font-weight: 600; background: rgba(255,248,234,.2); color: #fff8ea; padding: 4px 12px; border-radius: 999px; }
.b-tags a:hover { background: rgba(255,248,234,.35); }

/* ===================== Footer ===================== */
.b-footer {
  max-width: var(--b-maxw);
  margin: 0 auto;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--b-ink-mute);
  font-size: 13px;
}

/* ===================== Theme chooser (shared) ===================== */
.theme-chooser { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 999; font-family: var(--b-font); }
.chooser-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--b-dark); color: #fff8ea;
  padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(40,30,21,.4);
  font-size: 14px; font-weight: 700; border: 1px solid #160f08;
  cursor: pointer; font-family: inherit;
  transition: background .18s ease, transform .18s ease;
}
.chooser-toggle:hover { background: var(--b-gold-deep); transform: translateY(-2px); }
.chooser-icon { font-size: 16px; line-height: 1; color: var(--b-gold); }
.chooser-label { line-height: 1; }
.chooser-menu {
  list-style: none; padding: 8px; margin: 0;
  position: absolute; bottom: calc(100% + 10px); inset-inline-start: 0;
  min-width: 210px; background: var(--b-tile);
  border: 1px solid var(--b-line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(40,30,21,.25);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.theme-chooser.is-open .chooser-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.chooser-menu li { margin: 0; }
.chooser-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; color: var(--b-ink);
  font-size: 14px; transition: background .14s ease;
}
.chooser-menu a:hover { background: var(--b-cream); }
.chooser-menu a.is-active { background: var(--b-dark); color: #fff8ea; font-weight: 700; pointer-events: none; }
.chooser-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex-shrink: 0; }
.chooser-dot[data-tone="modern"]   { background: linear-gradient(135deg, #c9a961, #6b3410); }
.chooser-dot[data-tone="wiki"]     { background: linear-gradient(135deg, #cedff2, #0645ad); }
.chooser-dot[data-tone="heritage"] { background: linear-gradient(135deg, #b8864a, #6e1e1e); }
.chooser-dot[data-tone="gallery"]  { background: linear-gradient(135deg, #e6c878, #15100a); }
.chooser-dot[data-tone="portal"]   { background: linear-gradient(135deg, #11a195, #095a54); }
.chooser-dot[data-tone="magazine"] { background: linear-gradient(135deg, #8b1e1e, #1a1a18); }
.chooser-dot[data-tone="guide"]    { background: linear-gradient(135deg, #6e69e0, #3a35a3); }
.chooser-dot[data-tone="bento"]    { background: linear-gradient(135deg, #c89048, #2b2118); }
.chooser-dot[data-tone="platform"] { background: linear-gradient(135deg, #c2a04a, #16243a); }
.chooser-dot[data-tone="digest"]   { background: linear-gradient(135deg, #ac7a36, #34271a); }

/* الشعار الرسمي */
.b-logo-mark { width: 52px; height: 52px; background: url("images/logo.png") center/contain no-repeat; border-radius: 0; }
.b-logo-mark svg { display: none; }
.b-logo-text { display: none; }

/* ====== صور حقيقية للخيل العربي ====== */
.b-featured-art svg { display: none; }
.b-featured-art { background: url("images/arabian-grey-run.jpg") center/cover; }
.b-figure-mono { background: url("images/arabian-chestnut.jpg") center/cover; color: transparent; }
.b-map {
  background-image: linear-gradient(150deg, rgba(40,30,21,.78), rgba(22,15,8,.9)), url("images/arabian-dapple.jpg");
  background-size: cover;
  background-position: center;
}
.chooser-menu a.is-active .chooser-dot { border-color: #fff8ea; }

/* ===================== Responsive ===================== */
@media (max-width: 860px) {
  .b-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .b-featured { grid-column: span 2; grid-row: span 2; }
  .b-fact, .b-colors, .b-timeline, .b-map, .b-search { grid-column: span 2; }
  .b-quote { grid-row: span 2; }
}

@media (max-width: 540px) {
  .b-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .b-tile { grid-column: auto !important; grid-row: auto !important; min-height: 120px; }
  .b-featured { flex-direction: column; }
  .b-featured-art { width: 100%; height: 150px; }
  .b-quote { min-height: 180px; }

  .theme-chooser { bottom: 14px; inset-inline-start: 14px; }
  .chooser-label { display: none; }
  .chooser-toggle { padding: 10px 12px; }
}