/* =========================================================
   Media Center — single article (front/retal-news.php).
   Matches the live site's single-post template (retal.com.sa,
   Elementor template 22216): a grey hero with the date and
   title beside the featured image, the body under a thin rule,
   "Share this post", then the "More about Retal" news carousel
   (the home page's News Slider, styled in style.css).
   Inner page: body.inner-page (top padding for the header).
   ========================================================= */
.article .container { max-width: 1140px; margin: 0 auto; padding: 0; }

/* 1. Hero — #F8F8F8, 80px / 50px, two columns centred vertically */
.article-hero { background: #f8f8f8; padding: 80px 0 50px; }
.article-hero__inner { display: flex; align-items: center; }
.article-hero__text { flex: 0 0 50%; max-width: 50%; padding-inline-end: 50px; }
.article-hero__image { flex: 0 0 50%; max-width: 50%; margin: 0; text-align: end; }
.article-hero__image img { display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; }

.article__date { font-family: 'Marcellus', serif; font-size: 17px; font-weight: 400; line-height: 1.5; color: #85553a; margin: 0 0 20px; }
.article__title { font-family: 'Lucky Beauty new', 'Marcellus', serif; font-size: 30px; line-height: 45px; font-weight: 600; color: #2c2c2c; margin: -10px 0 50px; }
.rtl .article__date { font-family: '29LTAzer-Light', sans-serif; }
.rtl .article__title { font-family: '29LTZaridDisplayVF', sans-serif; font-weight: 700; }

/* 2. Body — 50px below the hero, a 1px rule, 50px above the text */
.article-content { margin-top: 50px; overflow: hidden; }
.article-content__inner { border-top: 1px solid rgba(0, 0, 0, 0.25); padding: 50px 0 0; }
.article__body { font-family: 'Marcellus', serif; font-size: 17px; font-weight: 400; line-height: 25px; color: #2c2c2c; }
.rtl .article__body { font-family: '29LTAzer-Light', sans-serif; }
.article__body p { margin: 0 0 0.9em; }
.article__body a { color: #85553a; }
.article__body img { max-width: 100%; height: auto; }
.article__body h2, .article__body h3 { font-family: 'Lucky Beauty new', 'Marcellus', serif; color: #2c2c2c; margin: 30px 0 12px; }
.rtl .article__body h2, .rtl .article__body h3 { font-family: '29LTZaridDisplayVF', sans-serif; }
.article__body blockquote { border-inline-start: 3px solid #85553a; margin: 20px 0; padding: 4px 20px; color: #7a7a7a; }
.article__body ul, .article__body ol { padding-inline-start: 1.4em; margin: 0 0 0.9em; }

/* Share this post — a short rule + label, then round #2C2C2C buttons */
.article-share { margin-top: 20px; }
.article-share__label { display: flex; align-items: center; gap: 5px; margin: 0 0 10px; font-family: 'Lucky Beauty new', 'Marcellus', serif; font-size: 15px; color: #000; }
.rtl .article-share__label { font-family: '29LTZaridDisplayVF', sans-serif; }
.article-share__list { display: flex; flex-wrap: wrap; gap: 12px 23px; list-style: none; margin: 0; padding: 0; }
.article-share__btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #2c2c2c; color: #fff; font-size: 13px; text-decoration: none; transition: background-color 0.3s; }
.article-share__btn:hover, .article-share__btn:focus-visible { background: #85553a; color: #fff; }

/* 3. More about Retal — the News Slider, 100px below the body */
.article-more { margin-top: 100px; }

@media (max-width: 1200px) {
  .article-hero { padding: 0 20px 50px; }
  .article-hero__text { padding-top: 50px; }
  .article-hero__image { padding-top: 60px; }
  .article__date, .article__body, .article-share__label { font-size: 13px; }
  .article-content { padding: 0 20px; }
}
@media (max-width: 767px) {
  .article-hero { padding: 20px 20px 50px; }
  .article-hero__inner { flex-direction: column; align-items: stretch; }
  .article-hero__text, .article-hero__image { flex-basis: auto; max-width: 100%; padding-inline-end: 0; }
  .article-hero__text { padding-top: 50px; }
  .article-hero__image { padding: 0; }
  .article__title { font-size: 25px; line-height: 32px; }
  .article-more { margin-top: 50px; }
}