/* ============================================================
   FOUADDEV BLOG V5.11 — MOBILE-FIRST REFACTOR
   Fixes: project strips, theme overlay, giant hero, generic media,
   Arabic readability, sticky ads and tap geometry.
   ============================================================ */
.semantic-media-card{
  display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;height:100%;min-height:100%;
  padding:12px;border-radius:inherit;
  color:var(--ink);text-decoration:none;overflow:hidden;
  background:
    radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 32%),
    linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 8%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
}
.semantic-media-card small{font:700 .56rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.semantic-media-card b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:7px 0 9px;font-size:.78rem;line-height:1.22}
.semantic-media-card i{display:flex;gap:4px;flex-wrap:wrap;font-style:normal}
.semantic-media-card i span{padding:3px 5px;border:1px solid var(--line);border-radius:999px;font:600 .47rem/1 var(--mono);color:var(--muted)}

.mobile-ad-dismiss{display:none}

/* Mobile */
@media (max-width:780px){
  :root{
    --shell:calc(100% - 24px)!important;
    --header:64px!important;
  }
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:16px}
  body.has-mobile-sticky-ad{padding-bottom:96px}
  .site-header{
    top:8px!important;
    width:calc(100vw - 16px)!important;
    min-height:64px!important;height:64px!important;
    padding:0 10px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    border-radius:18px!important;
  }
  .site-header .brand{min-width:0}
  .site-header .brand strong{font-size:.88rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .site-header .brand small{display:none!important}
  .site-header nav{display:none!important}
  .nav-toggle{display:inline-flex!important;min-height:42px;align-items:center}
  .header-actions{gap:6px!important}
  .header-actions .nav-member-link,.header-actions .command-button,.header-actions .cta-small{display:none!important}
  .icon-button{min-width:44px!important;width:44px!important;height:44px!important}

  /* Theme selector = true bottom sheet, not a giant floating panel. */
  body.theme-menu-open::after{
    content:"";position:fixed;inset:0;z-index:108;
    background:rgba(6,10,14,.44);backdrop-filter:blur(3px);
  }
  .theme-switcher{position:static!important}
  .theme-menu{
    position:fixed!important;
    z-index:130!important;
    left:8px!important;right:8px!important;
    top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-height:min(72vh,620px)!important;
    overflow:auto!important;
    padding:10px!important;
    border-radius:22px!important;
    box-shadow:0 24px 70px rgba(0,0,0,.30)!important;
  }
  .theme-menu-head{position:sticky;top:-10px;z-index:2;padding:13px 10px 12px!important;background:var(--surface-strong);border-bottom:1px solid var(--line)}
  .theme-menu-head span{font-size:.68rem!important}
  .theme-menu-head small{font-size:.63rem!important}
  .theme-mode-switch{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:8px 0!important}
  .theme-mode-switch button{min-height:46px!important}

  /* Hero: compact, readable, no billboard-sized words. */
  .hero{
    min-height:0!important;
    padding-top:104px!important;padding-bottom:34px!important;
    display:block!important;
  }
  .hero-copy h1{
    font-size:clamp(2.75rem,13vw,4.25rem)!important;
    line-height:.94!important;
    margin:18px 0 20px!important;
    letter-spacing:-.055em!important;
  }
  .hero-lead{
    font-size:1rem!important;line-height:1.65!important;max-width:100%!important;
  }
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:22px 0!important}
  .hero-actions .cta{width:100%!important;min-height:52px!important}
  .tech-ribbon{gap:5px!important}
  .tech-ribbon span{font-size:.59rem!important;padding:6px 8px!important}
  .hero-system{display:none!important}
  .intent-deck{padding:20px!important;border-radius:20px!important;gap:18px!important}
  .intent-deck h2{font-size:1.55rem!important}
  .intent-buttons button{min-height:54px}

  .section{padding:42px 0!important}
  .section-head{gap:12px!important;margin-bottom:22px!important}
  .section-head h2{font-size:clamp(2rem,10vw,3rem)!important;line-height:1.02!important}
  .section-head p{font-size:.96rem!important;line-height:1.6!important}
  .section-head .text-link{min-height:44px;display:flex;align-items:center}

  /* Projects: real cards, never vertical empty strips. */
  .project-bento{
    display:grid!important;grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .project-tile,.project-tile[data-size="xl"],.project-tile[data-size="wide"]{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    min-height:0!important;height:auto!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .project-visual{
    width:112px!important;height:100%!important;min-height:154px!important;
    aspect-ratio:auto!important;border-bottom:0!important;border-right:1px solid var(--line)!important;
  }
  .project-visual picture,.project-visual img{width:100%!important;height:100%!important;object-fit:cover!important}
  .project-visual .semantic-media-card{border:0;border-radius:0!important;padding:9px!important}
  .project-visual .semantic-media-card b{font-size:.68rem!important}
  .project-number{top:8px!important;right:8px!important}
  .project-content{padding:14px!important;gap:8px!important;min-width:0}
  .project-content h3{font-size:1.08rem!important;line-height:1.2!important;margin:0!important}
  .project-content p{font-size:.78rem!important;line-height:1.48!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .project-content .tech-list{gap:4px!important}
  .project-content .tech-list span{font-size:.51rem!important;padding:4px 6px!important}
  .project-action{min-height:40px!important;margin-top:3px!important;padding:9px 10px!important;font-size:.72rem!important}

  /* Article streams. */
  .article-streams{grid-template-columns:1fr!important;gap:12px!important}
  .article-stream{border-radius:19px!important}
  .article-stream>header{padding:18px!important}
  .article-stream-item{
    grid-template-columns:24px 72px minmax(0,1fr)!important;
    gap:9px!important;min-height:105px!important;padding:10px 12px!important;
  }
  .stream-thumb{width:72px!important;height:72px!important;border-radius:13px!important}
  .stream-thumb .semantic-media-card{padding:7px!important}
  .stream-thumb .semantic-media-card small{font-size:.43rem!important}
  .stream-thumb .semantic-media-card b{font-size:.58rem!important;margin:4px 0!important;-webkit-line-clamp:3}
  .stream-thumb .semantic-media-card i{display:none}
  .stream-copy{gap:3px!important;min-width:0}
  .stream-copy small,.stream-copy em{font-size:.57rem!important;line-height:1.4}
  .stream-copy b{font-size:.94rem!important;line-height:1.28!important;-webkit-line-clamp:3!important}
  .stream-copy[dir="rtl"]{
    text-align:right;font-family:var(--font-ar)!important;
    font-size:var(--arabic-body-size);
  }
  .stream-copy[dir="rtl"] b{font-family:var(--font-ar)!important;line-height:1.55!important;font-size:1rem!important}
  .stream-arrow{display:none!important}

  /* Catalogue cards. */
  .article-list-card{
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:11px!important;padding:10px!important;
    border-radius:17px!important;
  }
  .article-list-media{width:92px!important;height:112px!important;aspect-ratio:auto!important}
  .article-list-media .semantic-media-card{padding:8px!important}
  .article-list-card h2{font-size:1.05rem!important;line-height:1.25!important;margin:6px 0!important}
  .article-list-card p{display:none!important}
  .article-list-card .project-action{display:none!important}

  /* Visual gallery becomes safe aspect cards. */
  .visual-mosaic{grid-template-columns:1fr 1fr!important;grid-auto-rows:auto!important;gap:8px!important}
  .visual-mosaic figure,.visual-mosaic figure:nth-child(1),.visual-mosaic figure:nth-child(3),.visual-mosaic figure:nth-child(6){
    grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3!important;
  }

  /* Mobile ad: smaller, closable, safe-area aware, never giant. */
  .ad-slot[data-ad-zone="mobile_sticky"]:has(.ad-creative){
    display:block!important;position:fixed!important;z-index:90!important;
    left:8px!important;right:8px!important;width:auto!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    margin:0!important;padding:5px!important;
    min-height:0!important;max-height:84px!important;
    border-radius:17px!important;
    background:color-mix(in srgb,var(--surface-strong) 94%,transparent)!important;
    backdrop-filter:blur(16px)!important;
  }
  .ad-slot[data-ad-zone="mobile_sticky"] .ad-creative{max-height:72px!important;overflow:hidden!important;border-radius:12px!important}
  .ad-slot[data-ad-zone="mobile_sticky"] .ad-creative img{
    width:100%!important;height:68px!important;max-height:68px!important;object-fit:cover!important;border-radius:12px!important;
  }
  .mobile-ad-dismiss{
    display:grid!important;place-items:center;
    position:absolute;right:4px;top:4px;z-index:10;
    width:27px;height:27px;border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(0,0,0,.70);color:#fff;
    font-size:18px;line-height:1;cursor:pointer;
  }
  .ad-slot[hidden]{display:none!important}

  /* Footer and readable spacing above fixed ad. */
  .site-footer{grid-template-columns:1fr!important;gap:22px!important;padding-bottom:110px!important}

  /* Project/legal mobile readability. */
  .case-hero{padding-top:104px!important;gap:18px!important}
  .case-hero h1{font-size:clamp(2.5rem,11vw,4rem)!important;line-height:1!important}
  .project-trust-grid,.play-readiness-grid{grid-template-columns:1fr!important}
}

/* Small phones */
@media (max-width:420px){
  :root{--shell:calc(100% - 18px)!important}
  .site-header{width:calc(100vw - 10px)!important;top:5px!important}
  .brand-mark{width:36px!important;height:36px!important}
  .hero-copy h1{font-size:2.72rem!important}
  .project-tile,.project-tile[data-size="xl"],.project-tile[data-size="wide"]{grid-template-columns:96px minmax(0,1fr)!important}
  .project-visual{width:96px!important;min-height:148px!important}
  .article-stream-item{grid-template-columns:20px 64px minmax(0,1fr)!important;padding:9px!important}
  .stream-thumb{width:64px!important;height:68px!important}
}

/* Contextual hero fallback: if an imported article still references a known generic visual,
   display useful title/category context instead of another abstract placeholder. */
.article-hero-media>.semantic-media-card{min-height:clamp(280px,48vw,620px);padding:clamp(24px,5vw,60px);justify-content:center;align-items:flex-start}
.article-hero-media>.semantic-media-card small{font-size:.72rem}
.article-hero-media>.semantic-media-card b{max-width:900px;font-size:clamp(2rem,5vw,4.8rem);line-height:1.02;-webkit-line-clamp:4}
.article-hero-media>.semantic-media-card i span{font-size:.62rem;padding:6px 9px}
@media(max-width:780px){.article-hero-media>.semantic-media-card{min-height:290px;padding:22px}.article-hero-media>.semantic-media-card b{font-size:clamp(2rem,10vw,3.2rem)}}