/* =========================================================================
   تصميم موحّد لكل الأجهزة — نفس شكل الجوال بالضبط على كل الشاشات
   -------------------------------------------------------------------------
   الفكرة: الموقع كله عمود واحد بعرض الجوال. على الموبايلات (صغيرة أو كبيرة)
   يملأ الشاشة، وعلى التابلت والكمبيوتر يبقى نفس العمود بالنص — نفس الترتيب،
   نفس الخطوط، نفس القائمة، بدون أي تغيير بالتخطيط بين جهاز وجهاز.
   ========================================================================= */

:root{
  --col: 600px;                              /* عرض العمود الموحّد */
  --gutter: 18px;                            /* الهامش الجانبي — ثابت لكل الأجهزة */
  --frame: calc(var(--col) + 2 * var(--gutter));
  --header-h: 60px;
}
/* الجوالات الصغيرة جدًا (SE / 320px) نفس الشكل، بس هامش أصغر شوية حتى ما يضيق النص */
@media (max-width:370px){ :root{ --gutter:14px; } }

/* ---------- أساسيات ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
img{ height:auto; }
.wrap{
  max-width:var(--frame) !important;
  padding-left:max(var(--gutter), env(safe-area-inset-left)) !important;
  padding-right:max(var(--gutter), env(safe-area-inset-right)) !important;
}
.grain{ display:none; }
.dark-band-hero-bg, .quote-hero-bg, .feed-cover img, .mz-featured-media img{ color:transparent; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (hover:none){
  .feed-item:hover .feed-cover img{ transform:none; }
  .feed-item:hover .feed-title{ color:var(--title-color); }
}

/* =========================================================================
   الهيدر — زر القائمة (☰) بكل الأجهزة
   ========================================================================= */
nav{ height:var(--header-h) !important; gap:12px; }
.logo{ font-size:19px; flex:none; }
.nav-actions{ gap:4px !important; }
.nav-actions .cta-btn{ display:none !important; }
.icon-btn{ width:44px; height:44px; justify-content:center; }
.burger{ display:inline-flex !important; align-items:center; justify-content:center; width:44px; height:44px; margin-inline-start:-8px; }

.nav-links{
  display:flex !important; flex-direction:column; gap:0 !important;
  position:absolute; top:calc(100% + 1px); right:0; left:0; margin:0 auto;
  max-width:var(--frame); white-space:normal;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:0 var(--gutter); z-index:50;
  max-height:0; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:max-height .38s cubic-bezier(.22,.9,.24,1), opacity .28s ease, transform .32s ease, visibility 0s linear .38s, padding .38s ease;
  box-shadow:0 18px 40px rgba(28,23,18,.1);
}
.nav-links.mobile-open{
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain;
  opacity:1; visibility:visible; transform:translateY(0);
  padding:6px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  transition:max-height .42s cubic-bezier(.22,.9,.24,1), opacity .32s ease .05s, transform .38s ease, padding .42s ease;
}
.nav-links li{ border-bottom:1px solid var(--line); }
.nav-links li:last-child{ border-bottom:none; }
.nav-links a{ display:flex !important; align-items:center; min-height:52px; padding:0 !important; font-size:16px !important; }
.nav-links a::after{ display:none !important; }
.nav-links a.active{ color:var(--accent) !important; font-weight:700; }
.mobile-cta{ display:block !important; padding-top:14px; }
.nav-links .mobile-cta .cta-btn{ display:inline-flex; min-height:44px; align-items:center; padding:0 22px; font-size:14px !important; color:var(--paper) !important; }

/* =========================================================================
   رؤوس الأقسام
   ========================================================================= */
.section{ padding:36px 0 !important; }
.section-head{ margin-bottom:22px; }
.section-title{ font-size:22px; flex-wrap:wrap; row-gap:4px; line-height:1.3; }
.section-title small{ font-size:13px; }
.section-intro{ font-size:15px; line-height:1.85; }

/* =========================================================================
   نرد الاقتباسات
   ========================================================================= */
.dice-mini{ padding:14px 0 16px; }
.dice-mini-area{ gap:14px; justify-content:flex-start; max-width:var(--frame); }
.dice-quote{ font-size:15px; flex:1; min-height:1.5em; }

/* =========================================================================
   الكاروسيل — نفس نسبة الجوال، وبالشاشات الكبيرة بنفس عرض العمود
   ========================================================================= */
.mz-featured{ width:100% !important; max-width:var(--frame); margin:0 auto !important; }
.mz-featured-slide{ aspect-ratio:5/4 !important; max-height:none !important; direction:rtl; text-align:right; }
.mz-featured-content{ padding:18px var(--gutter) 34px !important; }
.mz-featured-content h2{ font-size:19px !important; }
.mz-featured-content .excerpt{ font-size:14px !important; }
.mz-featured-arrow{ width:34px !important; height:34px !important; }
.mz-featured-arrow-prev{ right:12px !important; }
.mz-featured-arrow-next{ left:12px !important; }
@media (hover:none){ .mz-featured-arrow{ display:none !important; } } /* باللمس السحب أسهل */

/* =========================================================================
   قائمة المقالات — عمود واحد دائمًا
   ========================================================================= */
.feed-list{ display:flex !important; flex-direction:column; }
.feed-item{ padding:22px 0 !important; border-bottom:1px solid var(--line) !important; }
.feed-item:first-child{ padding-top:0 !important; }
.feed-item:last-child{ border-bottom:none !important; }
.feed-cover{
  aspect-ratio:16/9 !important; width:auto !important; border-radius:0;
  margin:0 calc(-1 * var(--gutter)) 14px !important;   /* الصورة من حافة لحافة */
}
.feed-eyebrow{ font-size:12.5px; margin-bottom:6px; }
.feed-title{ font-size:18px !important; line-height:1.5; margin-bottom:6px; }
.feed-excerpt{
  font-size:15px !important; line-height:1.85; margin-bottom:12px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
}
.feed-avatar{ width:28px !important; height:28px !important; }
.feed-author-name{ font-size:14px !important; }

/* =========================================================================
   صفحة المقالة
   ========================================================================= */
.article-hero{ padding:24px 0 20px; }
.article-crumb{ font-size:13px; margin-bottom:14px; line-height:1.7; }
.article-cat{ font-size:13px; font-weight:600; margin-bottom:10px; }
.article-title, .article-hero .article-title{ font-size:26px !important; line-height:1.4; font-weight:700; max-width:none; }
.article-meta{ margin-top:14px; font-size:14px; align-items:center; gap:8px 16px; }

.article-cover{ max-width:none !important; margin:0 calc(-1 * var(--gutter)) !important; }
.article-cover img{ border-radius:0 !important; aspect-ratio:16/9; }

.article-body{ max-width:none !important; padding:26px 0 24px !important; }
.article-body p{ font-size:17.5px !important; line-height:2; margin-bottom:1.1em; color:#231e18; overflow-wrap:break-word; }
.article-body p.lede{ font-size:18.5px !important; font-weight:500; line-height:1.95; padding:0; }
.article-body p a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.article-subheading{ font-size:20px !important; margin:1.5em 0 .5em !important; line-height:1.45; }
.article-pullquote{ margin:28px 0 !important; }
.article-pullquote p{ font-size:19px !important; line-height:1.75 !important; }
.article-inline-image{ margin:28px calc(-1 * var(--gutter)) !important; }
.article-inline-image img{ border-radius:0 !important; aspect-ratio:16/9; object-fit:cover; }
.article-inline-image figcaption{ font-size:13.5px; text-align:center; padding:0 var(--gutter); }

.article-pager{ display:grid !important; grid-template-columns:1fr !important; gap:10px; max-width:none; }
.pager-link{ min-height:64px; }
.mz-grid{ grid-template-columns:1fr !important; gap:22px !important; }
.mz-card h4{ font-size:17px; line-height:1.5; }
.mz-card .cover{ aspect-ratio:16/9 !important; }

/* =========================================================================
   الكتّاب
   ========================================================================= */
.authors-row{ display:grid !important; grid-template-columns:1fr !important; gap:14px; }
.author-card{ min-width:0 !important; padding:18px; }
.author-card h4{ font-size:17px; }
.author-card p{ font-size:14.5px; line-height:1.8; }
.page-crumb{ padding-top:18px; font-size:13px; }
.author-hero .wrap{ grid-template-columns:1fr !important; text-align:center; justify-items:center; gap:16px !important; }
#authorInitials{ width:104px !important; height:104px !important; }
.author-hero h1{ font-size:24px !important; }
.author-hero .bio{ font-size:15.5px; line-height:1.9; margin-inline:auto; }
.author-stats{ justify-content:center; }
.btn-copy-profile{ margin-left:auto; margin-right:auto; }

/* =========================================================================
   حوارات
   ========================================================================= */
.interview-grid{ display:grid !important; grid-template-columns:1fr !important; gap:14px; }
.interview-card{ grid-template-columns:72px 1fr !important; padding:16px !important; gap:14px !important; align-items:center; }
.interview-card .avatar{ width:100%; aspect-ratio:1; height:auto; }
.interview-card h4{ font-size:16.5px; line-height:1.5; }
.portrait-hero{ padding:32px 0 !important; }
.portrait-hero .wrap{ grid-template-columns:1fr !important; text-align:center; justify-items:center; gap:18px !important; }
.portrait-hero .p-avatar{ width:120px !important; height:120px !important; margin:0 auto; }
.portrait-hero h1{ font-size:21px !important; }
.portrait-hero p{ font-size:15px !important; }

/* =========================================================================
   تجريب
   ========================================================================= */
.exp-list{ display:grid; grid-template-columns:1fr; gap:24px; }
.exp-piece{ margin-top:0; }
.exp-stage{ padding:18px; }
.exp-stage[data-template="stack"] .exp-line{ font-size:1.25rem; max-width:85%; }
.exp-stage[data-template="stack"] .exp-line:nth-child(2){ font-size:1.55rem; }
.exp-stage[data-template="motion"] .exp-line{ font-size:1.25rem; }

/* =========================================================================
   فسيفساء فوتوغراف — نفس شكل الجوال: الأولى بعرض كامل والباقي عمودين
   ========================================================================= */
.mosaic-hero{
  max-width:var(--frame); margin:0 auto !important; overflow:hidden;
  grid-template-columns:repeat(2, 1fr) !important; grid-template-rows:none !important;
  grid-auto-rows:150px; gap:6px;
}
.mosaic-hero a{ min-width:0; grid-row:span 1 !important; grid-column:span 1 !important; }
.mosaic-hero a:first-child{ grid-column:1 / -1 !important; }
.mosaic-hero a:nth-child(2n):last-child{ grid-column:1 / -1 !important; }
.mosaic-hero img{ width:100%; height:100%; }
@media (max-width:420px){ .mosaic-hero{ grid-auto-rows:clamp(100px, 32vw, 150px); } }

/* =========================================================================
   البانرات
   ========================================================================= */
.quote-hero{ padding:36px 0 !important; }
.quote-hero q{ font-size:21px !important; }
.dark-band-hero{ padding:32px 0; }

/* =========================================================================
   الفوتر
   ========================================================================= */
footer{ padding-bottom:env(safe-area-inset-bottom); }
.footer-grid{ grid-template-columns:1fr 1fr !important; gap:26px !important; }
.footer-brand{ grid-column:1 / -1; }
.footer-col a{ display:inline-block; padding:5px 0; font-size:15px; }
.footer-bottom{ flex-direction:column; align-items:flex-start; }

/* =========================================================================
   البحث + زر الرجوع للأعلى
   ========================================================================= */
.search-panel{ max-width:var(--frame) !important; }
.search-input{ font-size:16px !important; } /* أقل من ١٦ = آيفون يسوي زوم تلقائي */
@media (max-width:640px){
  .search-modal{ padding:0 !important; align-items:stretch; }
  .search-panel{ max-height:none !important; height:100dvh; border-radius:0 !important; width:100%; padding-top:env(safe-area-inset-top); }
}
.back-to-top{ bottom:calc(20px + env(safe-area-inset-bottom)) !important; }

/* =========================================================================
   الطباعة
   ========================================================================= */
@media print{
  header.main, footer, .article-pager, .related-section, .back-to-top, .reading-progress,
  .article-share-btn, .dice-mini, .mz-featured, .search-modal{ display:none !important; }
  .article-body p{ font-size:12pt !important; line-height:1.8; color:#000; }
  .reveal-el{ opacity:1 !important; transform:none !important; }
}

/* أسهم الكاروسيل بالزاوية العليا حتى ما تغطي العنوان بالشاشات الصغيرة */
.mz-featured-arrow{ top:14px !important; transform:none !important; }
.mz-featured-arrow:hover{ transform:scale(1.08) !important; }
.mz-featured-arrow:active{ transform:scale(.94) !important; }

/* =========================================================================
   صور المقالات: مسافة جانبية بدل ما تلزك بحافة الشاشة + زوايا ناعمة
   ========================================================================= */
.feed-cover{ margin:0 0 14px !important; border-radius:8px !important; overflow:hidden; }
.article-cover{ margin:0 !important; }
.article-cover img{ border-radius:8px !important; }
.article-inline-image{ margin:28px 0 !important; }
.article-inline-image img{ border-radius:8px !important; }
.article-inline-image figcaption{ padding:0; }
.mz-card .cover{ border-radius:8px; overflow:hidden; }

/* =========================================================================
   الكمبيوتر واللابتوب: نفس الشكل بالضبط، بس العمود أعرض والخطوط أكبر
   حتى يملأ الشاشة الكبيرة بشكل مريح بدل ما يبين صغير بالنص
   ========================================================================= */
@media (min-width:1024px){
  :root{ --col:780px; --gutter:28px; --header-h:70px; }
  .logo{ font-size:22px; }

  .section{ padding:52px 0 !important; }
  .section-title{ font-size:28px; }
  .section-title small{ font-size:15px; }
  .section-intro{ font-size:16.5px; }

  .dice-quote{ font-size:16.5px; }

  /* الكاروسيل: نسبة عريضة حتى ما ياخذ الشاشة كلها طولًا */
  .mz-featured-slide{ aspect-ratio:16/9 !important; border-radius:10px; }
  .mz-featured-viewport{ border-radius:10px; }
  .mz-featured{ margin-top:22px !important; }
  .mz-featured-content{ padding:26px 32px 40px !important; }
  .mz-featured-content h2{ font-size:26px !important; }
  .mz-featured-content .excerpt{ font-size:16px !important; }

  .feed-item{ padding:30px 0 !important; }
  .feed-cover{ margin-bottom:18px !important; border-radius:10px !important; }
  .feed-eyebrow{ font-size:13.5px; }
  .feed-title{ font-size:23px !important; margin-bottom:8px; }
  .feed-excerpt{ font-size:16.5px !important; }
  .feed-avatar{ width:32px !important; height:32px !important; }
  .feed-author-name{ font-size:15px !important; }

  .article-hero{ padding:40px 0 28px; }
  .article-crumb{ font-size:14px; }
  .article-title, .article-hero .article-title{ font-size:36px !important; }
  .article-meta{ font-size:15px; }
  .article-cover img, .article-inline-image img{ border-radius:10px !important; }
  .article-body{ padding:36px 0 32px !important; }
  .article-body p{ font-size:19px !important; }
  .article-body p.lede{ font-size:20.5px !important; }
  .article-subheading{ font-size:23px !important; }
  .article-pullquote p{ font-size:22px !important; }

  .mz-card h4{ font-size:19px; }
  .interview-card{ grid-template-columns:88px 1fr !important; padding:20px !important; }
  .interview-card h4{ font-size:18px; }
  .portrait-hero .p-avatar{ width:140px !important; height:140px !important; }
  .portrait-hero h1{ font-size:26px !important; }
  .portrait-hero p{ font-size:16.5px !important; }
  .quote-hero q{ font-size:26px !important; }
  .author-hero h1{ font-size:30px !important; }
  .author-hero .bio{ font-size:17px; }
  #authorInitials{ width:120px !important; height:120px !important; }
  .mosaic-hero{ grid-auto-rows:220px; }
  .exp-stage[data-template="stack"] .exp-line{ font-size:1.5rem; }
  .exp-stage[data-template="stack"] .exp-line:nth-child(2){ font-size:1.9rem; }

  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr !important; }
  .footer-brand{ grid-column:auto; }
  .footer-bottom{ flex-direction:row; align-items:center; }

  /* تفاعل الماوس: ميلان خفيف للبطاقة بدل الجمود */
  .feed-item{ transition:opacity .2s ease; }
  .feed-cover img{ transition:transform .6s ease !important; }
  .feed-item:hover .feed-cover img{ transform:scale(1.03) !important; }
}
/* الشاشات الكبيرة جدًا (٢٧ إنش وأكبر) */
@media (min-width:1600px){
  :root{ --col:840px; }
  .article-body p{ font-size:20px !important; }
}

/* زوايا مربعة (حادة) لكل الصور والكاروسيل — بدون أي تدوير */
.feed-cover, .article-cover img, .article-inline-image img, .mz-card .cover,
.mz-featured-slide, .mz-featured-viewport{ border-radius:0 !important; }