/* Arabic story pages, using the theme's primary blues and gold accent. */
.flavor-stories { background:#f8fafc; color:#0f172a; }
.flavor-stories [hidden] { display:none !important; }
.story-container { width:min(100% - 2rem, 1200px); margin-inline:auto; }
.story-hero { background:linear-gradient(135deg,#072a4a,#0b406d 65%,#064c83); color:#fff; padding:3.5rem 0; position:relative; overflow:hidden; }
.story-hero::after { content:""; width:23rem; height:23rem; border:1px solid #ffffff14; border-radius:50%; position:absolute; left:-7rem; top:-10rem; pointer-events:none; }
.story-hero .story-container { position:relative; z-index:1; }
.story-hero-kicker { color:#fcd34d; display:flex; align-items:center; gap:.6rem; font-size:.9rem; font-weight:700; margin:0 0 1rem; }
.story-hero h1 { font-size:clamp(1.9rem,4vw,3rem); line-height:1.45; font-weight:800; margin:0 0 1rem; max-width:960px; }
.story-hero-description { color:#dbeafe; max-width:700px; font-size:1.05rem; line-height:1.9; margin:0; }
.story-hero-count { display:inline-block; margin-top:1.25rem; padding:.35rem 1rem; background:#ffffff14; border:1px solid #ffffff24; border-radius:2rem; }
.story-hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.story-button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.8rem 1.25rem; min-height:44px; border-radius:.75rem; background:#015a9f; color:white; border:1px solid transparent; font-weight:700; text-decoration:none; cursor:pointer; transition:background-color .2s; }
.story-button:hover { background:#064c83; }
.story-button-accent { background:#fbbf24; color:#072a4a; }
.story-button-accent:hover { background:#f59e0b; }
.story-button-outline { border-color:#ffffff50; background:transparent; color:#fff; }
.story-button-outline:hover { background:#ffffff14; }
.story-archive-content { padding-block:2rem 3rem; }
.story-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem; background:#fff; padding:1.5rem; border:1px solid #e2e8f0; border-radius:1rem; margin-bottom:2rem; }
.story-filters > div { flex:1 1 200px; min-width:0; }
.story-filters .story-search-field { flex-grow:2; }
.story-filters label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.5rem; }
.story-filters input,.story-filters select { width:100%; background:#f8fafc; border:1px solid #cbd5e1; border-radius:.65rem; padding:.8rem; min-height:44px; }
.story-filter-reset { display:flex; min-height:44px; align-items:center; color:#015a9f; }
.story-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.story-card { border:1px solid #e2e8f0; border-radius:1.1rem; overflow:hidden; background:#fff; display:flex; flex-direction:column; min-width:0; box-shadow:0 4px 16px #0f172a03; transition:box-shadow .2s; }
.story-card:hover { box-shadow:0 10px 25px #0f172a12; }
.story-card-top { background:linear-gradient(135deg,#e0effe,#f0f7ff); display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid #e0effe; }
.story-card-number { font-size:1.8rem; font-weight:800; color:#015a9f; font-variant-numeric:tabular-nums; }
.story-card-icon { display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:1rem; background:#fff; color:#015a9f; font-size:1.25rem; }
.story-card-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.story-eyebrow { font-size:.78rem; color:#64748b; line-height:1.7; margin:0 0 .5rem; }
.story-card h2,.story-card h3 { font-size:1.2rem; font-weight:800; line-height:1.7; margin:0 0 .75rem; }
.story-card h2 a:hover,.story-card h3 a:hover { color:#015a9f; }
.story-card-excerpt { font-size:.9rem; line-height:1.9; color:#64748b; margin:0 0 1rem; }
.story-card-meta { display:flex; flex-wrap:wrap; gap:1rem; color:#64748b; font-size:.8rem; margin-top:auto; margin-bottom:1rem; }
.story-card-meta i { color:#015a9f; }
.story-card-link { border-top:1px solid #e2e8f0; padding-top:1rem; display:flex; align-items:center; justify-content:space-between; color:#015a9f; font-size:.9rem; font-weight:700; }
.story-home-heading { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem; margin-bottom:2rem; }
.story-home-description { margin-top:.6rem; color:#64748b; font-size:.95rem; line-height:1.8; }
.story-home-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.story-home-all { display:inline-flex; align-items:center; gap:.6rem; min-height:44px; font-weight:700; color:#015a9f; font-size:.9rem; }
.flavor-stories-home .flavor-carousel-control { width:44px; height:44px; }
.flavor-stories-home .story-card-body { padding:1.25rem; }
.flavor-stories-home .story-card-excerpt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.flavor-stories-home .story-home-all:hover { text-decoration:underline; text-underline-offset:4px; }
.story-pagination { margin-top:2rem; text-align:center; }
.story-pagination .nav-links { display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; }
.story-pagination .page-numbers { display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; background:#fff; padding:.5rem .9rem; border:1px solid #e2e8f0; border-radius:.6rem; }
.story-pagination .current { background:#015a9f; color:#fff; border-color:#015a9f; }
.story-empty { text-align:center; border:1px dashed #cbd5e1; border-radius:1rem; padding:3rem 1rem; }
.story-empty > i { font-size:2.5rem; color:#94a3b8; margin-bottom:1rem; }
.story-empty h2 { font-size:1.25rem; font-weight:700; margin-bottom:.5rem; }
.story-empty p { color:#64748b; margin-bottom:1rem; }
.story-breadcrumbs { display:flex; gap:.75rem; flex-wrap:wrap; padding-block:1rem; font-size:.85rem; color:#64748b; }
.story-breadcrumbs a { color:#015a9f; }
.story-breadcrumbs [aria-current] { overflow-wrap:anywhere; }
.story-hero-single { padding-block:2.5rem; }
.story-page-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.5rem; padding-block:2rem 3rem; align-items:start; }
.story-main-column { min-width:0; display:grid; gap:1.5rem; }
.story-panel { background:#fff; border:1px solid #e2e8f0; border-radius:1rem; padding:1.5rem; min-width:0; }
.story-panel > h2 { font-size:1.1rem; font-weight:800; margin-bottom:1rem; }
.story-section-heading { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-bottom:1.25rem; }
.story-section-heading h2 { font-weight:800; font-size:1.2rem; margin:0; }
.story-section-heading p { font-size:.8rem; color:#64748b; margin:.3rem 0 0; }
.story-heading-icon { width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:.85rem; background:#f0f7ff; color:#015a9f; flex-shrink:0; }
.story-audio-panel audio { display:block; width:100%; max-width:100%; margin-block:.5rem 1rem; }
.story-audio-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.story-audio-tools > label { font-size:.8rem; color:#64748b; }
.story-audio-tools select { border:1px solid #cbd5e1; border-radius:.6rem; padding:.6rem .4rem; min-height:44px; direction:ltr; background:#fff; }
.story-small-button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:#f8fafc; border:1px solid #cbd5e1; border-radius:.6rem; padding:.5rem .65rem; min-height:44px; min-width:44px; color:#334155; cursor:pointer; font-size:.85rem; }
.story-small-button:hover { border-color:#015a9f; color:#015a9f; }
.story-small-button:disabled { opacity:.4; cursor:default; }
.story-resume { color:#015a9f; background:#f0f7ff; }
.story-audio-error { color:#b91c1c; margin-top:1rem; font-size:.9rem; }
.story-audio-error a { text-decoration:underline; }
.story-font-controls { display:flex; gap:.4rem; margin-inline-start:auto; direction:ltr; }
.story-reading-content { font-size:var(--story-reading-size,1.125rem); line-height:2.05; overflow-wrap:anywhere; color:#334155; }
.story-reading-content p { margin:0 0 1.25em; }
.story-reading-content h2,.story-reading-content h3,.story-reading-content h4 { color:#0f172a; font-weight:800; line-height:1.6; margin:1.75em 0 .65em; scroll-margin-top:7rem; }
.story-reading-content h2 { font-size:1.35em; }
.story-reading-content h3 { font-size:1.18em; }
.story-reading-content a { color:#015a9f; text-decoration:underline; }
.story-reading-content ul,.story-reading-content ol { padding-inline-start:1.5em; margin-bottom:1.25em; }
.story-reading-content ul { list-style:disc; }
.story-reading-content ol { list-style:decimal; }
.story-reading-content blockquote { border-inline-start:3px solid #fbbf24; background:#fffbeb; border-radius:.5rem; padding:1em; margin:1.5em 0; }
.story-reading-content img { max-width:100%; height:auto; border-radius:.75rem; }
.story-reading-toc { padding:1rem; margin-bottom:1.5rem; border-radius:.75rem; background:#f0f7ff; border:1px solid #e0effe; }
.story-reading-toc h3 { font-weight:700; margin-bottom:.5rem; }
.story-reading-toc ul { display:grid; gap:.4rem; }
.story-reading-toc a { color:#015a9f; font-size:.9rem; text-decoration:underline; text-underline-offset:3px; }
.story-lesson-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.story-lesson-navigation a { background:#fff; padding:1.25rem; border:1px solid #e2e8f0; border-radius:1rem; display:grid; gap:.6rem; }
.story-lesson-navigation a:hover { border-color:#7cc8fb; }
.story-lesson-navigation span { color:#015a9f; font-size:.85rem; }
.story-lesson-navigation strong { font-weight:700; font-size:.95rem; line-height:1.7; }
.story-series-list { display:grid; gap:.35rem; margin:0; padding:0; list-style:none; max-height:65vh; overflow-y:auto; overscroll-behavior:contain; }
.story-series-list a { display:flex; gap:.65rem; align-items:flex-start; font-size:.88rem; line-height:1.75; padding:.75rem .5rem; border-radius:.65rem; }
.story-series-list a:hover { background:#f8fafc; }
.story-series-list a[aria-current] { background:#f0f7ff; color:#015a9f; font-weight:700; }
.story-series-number { color:#64748b; font-variant-numeric:tabular-nums; min-width:1.5rem; }
.story-source { display:grid; gap:.5rem; margin-top:1rem; padding:1rem; color:#64748b; font-size:.85rem; line-height:1.7; }
.story-source a { color:#015a9f; }
#story-listen,#story-read { scroll-margin-top:7rem; }
@media(min-width:1024px) { .story-sidebar { position:sticky; top:6.5rem; } }
@media(max-width:1023px) { .story-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .story-page-layout { grid-template-columns:1fr; } }
@media(max-width:639px) {
    .story-hero { padding-block:2rem; }
    .story-card-grid { grid-template-columns:1fr; gap:1rem; }
    .story-filters,.story-panel { padding:1.1rem; }
    .story-filters > div { flex-basis:100%; }
    .story-lesson-navigation { grid-template-columns:1fr; }
    .story-reading-content { font-size:var(--story-reading-size,1.0625rem); }
    .story-hero-actions .story-button { flex:1; }
    .story-section-heading { gap:.6rem; }
}
@media(prefers-reduced-motion:reduce) { .flavor-stories * { scroll-behavior:auto !important; transition:none !important; } }