/* =========================================================
   Ganete Al-Mamlkka v6.8.0 — Article/Page visual correction
   - Full, uncropped featured image in hero
   - High contrast hero text/breadcrumbs
   - Correct full-size inline SEO images without grey letterbox
   Unique filename intentionally defeats stale CSS caches.
   ========================================================= */

/* Hero readability */
.hero-article{
  background:linear-gradient(135deg,#0b3545 0%,#0b4a3f 58%,#0a3c35 100%)!important;
  padding:50px 0 48px!important;
}
.hero-article .hero-article-inner{
  grid-template-columns:minmax(0,1fr) 420px!important;
  gap:52px!important;
  align-items:center!important;
}
.hero-article .hero-article-text{min-width:0}
.hero-article .hero-article-text h1{
  color:#fff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.13);
  line-height:1.38!important;
}
.hero-article .hero-article-excerpt{
  color:#eaf7f0!important;
  opacity:1!important;
  font-size:17px!important;
  font-weight:500!important;
  line-height:2!important;
  max-width:760px!important;
}
.hero-article .hero-article-meta,
.hero-article .hero-article-meta span,
.hero-article .hero-article-meta a{
  color:#dcefe5!important;
}
.hero-article .breadcrumbs,
.hero-article .breadcrumbs-list,
.hero-article .breadcrumbs-list li,
.hero-article .breadcrumbs-list li a{
  color:#e4f2eb!important;
  opacity:1!important;
}
.hero-article .breadcrumbs-list li:last-child{
  color:#c5ddd1!important;
}
.hero-article .breadcrumbs-list li:not(:last-child)::after{
  color:#bcd9ca!important;
  opacity:.85!important;
}

/* Featured image: show the supplied artwork as-is, never crop it. */
.hero-article .hero-article-image{
  width:100%!important;
  min-height:360px!important;
  display:grid!important;
  place-items:center!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.075)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.18)!important;
}
.hero-article .hero-article-image img,
.hero-article .hero-article-image img[width],
.hero-article .hero-article-image img[style]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:390px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:16px!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Article typography: stronger readability on long-form SEO pages. */
.article-content>.container{
  max-width:1000px!important;
}
.article-content p{
  color:#344d43!important;
  font-size:16px!important;
  line-height:2.08!important;
}
.article-content li{
  color:#344d43!important;
  font-size:16px!important;
}
.article-content h2{
  color:#153f31!important;
  line-height:1.55!important;
}
.article-content h3{
  color:#1c4d3b!important;
  line-height:1.6!important;
}

/* Images injected by Janna neighborhood-content batches. */
.article-content figure.janna-seo-image{
  display:block!important;
  width:min(100%,720px)!important;
  max-width:720px!important;
  height:auto!important;
  margin:34px auto 42px!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:center!important;
}
.article-content figure.janna-seo-image img,
.article-content figure.janna-seo-image img[width],
.article-content figure.janna-seo-image img[style]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border-radius:18px!important;
  box-shadow:0 16px 38px rgba(19,65,48,.12)!important;
}

/* Gutenberg/classic images also get sane responsive sizing without fixed 200px height. */
.article-content .wp-block-image,
.article-content figure.wp-caption{
  max-width:760px!important;
  margin:32px auto 40px!important;
  background:transparent!important;
}
.article-content .wp-block-image img,
.article-content figure.wp-caption img{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  background:transparent!important;
}

@media (max-width:900px){
  .hero-article{padding:34px 0 42px!important}
  .hero-article .hero-article-inner{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .hero-article .hero-article-image{
    width:min(100%,620px)!important;
    min-height:0!important;
    margin:0 auto!important;
  }
  .hero-article .hero-article-image img{
    max-height:none!important;
  }
  .article-content figure.janna-seo-image{
    width:min(100%,680px)!important;
    margin:28px auto 36px!important;
  }
}

@media (max-width:560px){
  .hero-article .hero-article-excerpt{
    font-size:15px!important;
    line-height:1.9!important;
  }
  .hero-article .hero-article-image{
    padding:8px!important;
    border-radius:18px!important;
  }
  .hero-article .hero-article-image img{
    border-radius:12px!important;
  }
  .article-content p,
  .article-content li{
    font-size:15.5px!important;
  }
  .article-content figure.janna-seo-image{
    width:100%!important;
    margin:24px auto 32px!important;
  }
  .article-content figure.janna-seo-image img{
    border-radius:14px!important;
  }
}

/* v6.9.0 — hero text contrast hard override */
.hero-article .hero-article-excerpt,
.hero-article .hero-article-excerpt *,
.hero-article .hero-article-text > p,
.hero-article .hero-article-text > p *{
  color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 1px 2px rgba(0,0,0,.12)!important;
}