/* Additions approved on 2 Nov 2026 (items 11–16). Loaded after styles.css. */

/* Item 11: the dark areas in Mustasharak navy, clearly blue rather than near-black. */
.hero {
  background:
    radial-gradient(circle at 13% 8%, rgba(78, 182, 87, .2), transparent 30%),
    radial-gradient(circle at 82% 15%, rgba(78, 182, 87, .08), transparent 25%),
    linear-gradient(145deg, #05233f 0%, #0a3d68 55%, #062c50 100%);
}
.site-header { background: rgba(5, 35, 63, .92); }
.explorer-shell {
  background:
    radial-gradient(circle at 88% 0%, rgba(78, 182, 87, .14), transparent 27%),
    linear-gradient(145deg, #062a4b, #0a3a63);
}
.site-footer { background: #05233f; }

/* Item 15: before a path is chosen, step 1 spans the full width (no empty columns). */
.explorer-section:not(.has-group) .explorer-grid { grid-template-columns: 1fr; }
.explorer-section:not(.has-group) .explorer-step { min-height: 0; }
.explorer-section:not(.has-group) .explorer-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1040px) {
  .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .case-grid { grid-template-columns: 1fr; }
  .explorer-section:not(.has-group) .explorer-groups { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .explorer-section:not(.has-group) .explorer-groups > button { width: 100%; min-width: 0; }
}

/* Item 16: small pictures are no longer stretched to fill the frame; they grow to at most
   1.6 times their own size (--max-w / --max-h are set per picture in app.js) and sit in the middle. */
.case-card__media img,
.case-hero__media img,
.image-dialog__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: var(--max-w, 100%);
  max-height: var(--max-h, 100%);
}

/* Item 12: booking button, always visible. */
.book-float {
  position: fixed;
  z-index: 40;
  inset-inline-end: max(18px, env(safe-area-inset-left));
  inset-block-end: max(18px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  border-radius: 999px;
  padding: 10px 18px 10px 16px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(4, 26, 44, .28);
  transition: transform .18s var(--ease), box-shadow .18s ease, background .18s ease;
}

.book-float svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.book-float:hover { background: #43a54c; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(4, 26, 44, .32); }
.book-float:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }

@media (max-width: 760px) {
  .book-float { min-height: 46px; padding: 8px 14px 8px 12px; font-size: .84rem; }
  .site-footer { padding-block-end: 70px; }
}

/* Item 12: «احجز استشارة» at the end of every topic. */
.book-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-block: 8px 34px;
  border: 1px solid #cfe6d2;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  background: var(--teal-pale);
}

.book-cta strong { display: block; color: var(--teal-dark); font-size: 1.05rem; }
.book-cta p { margin: 4px 0 0; color: var(--ink-soft); font-size: .88rem; }

.book-cta__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 999px;
  padding: 8px 20px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}

.book-cta__button:hover { background: #43a54c; transform: translateY(-1px); }

@media (max-width: 760px) {
  .book-cta { flex-direction: column; align-items: stretch; text-align: start; padding: 18px; }
  .book-cta__button { justify-content: center; }
}

/* Item 13: clinic links in the footer. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  font-size: .86rem;
  text-decoration: none;
  opacity: .88;
  direction: ltr;
}

.footer-links a span { color: var(--teal-bright); }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-links__book { direction: rtl !important; }
.footer-topics { display: block; margin-block-start: 6px; color: inherit; font-size: .84rem; opacity: .8; }

/* Item 9: author line in «عن الكتاب». */
.book-author { margin: 2px 0 10px; font-weight: 600; color: var(--ink); }
.book-author a { color: var(--teal-dark); text-decoration: none; border-bottom: 1px solid currentColor; }
.book-author a:hover { color: var(--teal); }

/* 3 Nov 2026: the topic window opens straight on the topic (no section tabs, source badge,
   search excerpt or counts box), so the title takes the full width. */
.case-detail__header { grid-template-columns: minmax(0, 1fr); }
.case-detail h2 { margin-block-start: 0; }

/* 3 Nov 2026: section headings by kind, headings only: medical errors red, complications and correct treatment blue. */
.case-section--error summary { color: #c62828; }
.case-section--complication summary,
.case-section--treatment summary { color: #00548c; }