/* =====================================================================
   PAEDZ V2 0.16.0 — News sub-section tiles and the شروحات archive (Modules D + E)
   ===================================================================== */

/* ---------- tiles (news landing): image chosen in WordPress, neutral fallback ---------- */
.ed-tiles-nav { margin: 18px 0 6px; }
.ed-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ed-tile { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--fr-line, #1f2325); border-radius: 4px; background: #0d1011; color: #fff; text-decoration: none; isolation: isolate; }
.ed-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.92); }
.ed-tile.has-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.08) 100%); }
.ed-tile-ph { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #15191b 0%, #0b0d0e 70%); }
.ed-tile-ph::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-ramp); opacity: .7; }
.ed-tile-name { position: absolute; inset: auto 0 0; padding: 12px 14px; font-family: var(--f-head); font-weight: 900; font-size: clamp(1rem, .9rem + .45vw, 1.3rem); line-height: 1.3; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ed-tile:hover { border-color: var(--line-2); }
.ed-tile:hover .ed-tile-img { filter: saturate(1.05) brightness(1.08); }
.ed-tile:focus-visible { outline: 2px solid var(--focus, #ff5b4d); outline-offset: 2px; }
.ed-tile.is-on { border-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.ed-tiles-all { display: inline-flex; align-items: center; min-height: 36px; margin-top: 12px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); font-family: var(--f-head); font-weight: 800; font-size: var(--t-14); text-decoration: none; }
.ed-tiles-all:hover, .ed-tiles-all.is-on { color: var(--fg); border-color: var(--fg-3); }
@media (max-width: 759px) {
  .ed-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ed-tile { aspect-ratio: 16 / 10; }
  .ed-tile-name { padding: 9px 10px; }
}
@media (prefers-reduced-motion: no-preference) { .ed-tile-img { transition: filter .2s ease; } }

/* ---------- شروحات archive ---------- */
.tut-head { border-top: 3px solid var(--tut, #3fb6a8); padding-top: 22px; }
.tut-up { display: inline-block; margin-bottom: 6px; color: var(--tut, #3fb6a8); font-family: var(--f-head); font-weight: 800; font-size: var(--t-14); text-decoration: none; }
.tut-up::before { content: "‹ "; }
html[dir="rtl"] .tut-up::before { content: "› "; }
.tut-intro { color: var(--fg-2); max-width: 62ch; }
.tut-tools { display: grid; gap: 14px; margin-top: 16px; }
.ed-tiles--tutorials { margin: 0; }
.ed-tiles--tutorials .ed-tile { aspect-ratio: auto; min-height: 64px; }
.ed-tiles--tutorials .ed-tile.has-img { min-height: 96px; }
.ed-tiles--tutorials .ed-tile-name { position: relative; display: block; padding: 20px 14px; font-size: var(--t-16); }
.ed-tiles--tutorials .ed-tile.has-img .ed-tile-name { position: absolute; padding: 10px 12px; }
.ed-tiles--tutorials .ed-tile-ph::before { background: var(--tut, #3fb6a8); opacity: .8; }
.ed-tiles--tutorials .ed-tile.is-on { border-color: var(--tut, #3fb6a8); box-shadow: inset 0 -3px 0 var(--tut, #3fb6a8); }
.tut-search { display: flex; gap: 8px; max-width: 560px; }
.tut-search input[type="search"] { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 4px; background: #0d1011; color: var(--fg); font: inherit; }
.tut-grid .cat { color: var(--tut, #3fb6a8); }
@media (max-width: 759px) { .tut-search { max-width: none; } }
.ed-admin-hint { margin: 10px 0 0; padding: 8px 12px; border: 1px dashed var(--amber); border-radius: 4px; color: var(--fg-2); font-size: var(--t-14); }
.ed-admin-hint a { color: var(--amber); text-decoration: underline; }