/*
 * استديو أوكتاف – قالب المدونة 7.1.0
 * طبقة نهائية: عرض الموقع كامل + CTA ديناميكي ثلاثي الأزرار.
 */

:root{
  --uebt-v71-site-max:1680px;
  --uebt-v71-gutter:48px;
  --uebt-v71-gold:#f5c800;
  --uebt-v71-gold-deep:#cda600;
  --uebt-v71-ink:#0c0c0d;
  --uebt-v71-muted:#59616d;
}

html body.uebt-archive-active,
html body.uebt-single-active{
  overflow-x:hidden!important;
}

/* =========================================================
   1) صفحة المقالات: بعرض الموقع الحقيقي
========================================================= */
html body.uebt-archive-active main.uebt-archive-page,
html body.uebt-archive-active .uebt-archive-content{
  width:100%!important;
  max-width:none!important;
}

html body.uebt-archive-active .uebt-archive-content > .uebt-shell{
  width:min(calc(100% - var(--uebt-v71-gutter)),var(--uebt-v71-site-max))!important;
  max-width:var(--uebt-v71-site-max)!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

html body.uebt-archive-active .uebt-archive-content .uebt-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

html body.uebt-archive-active .uebt-archive-content article.uebt-card{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
}

html body.uebt-archive-active .uebt-card-image{
  position:relative!important;
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  background:#ededed!important;
}

html body.uebt-archive-active .uebt-card-image picture{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
}

html body.uebt-archive-active .uebt-card-image img,
html body.uebt-archive-active .uebt-card-image picture img,
html body.uebt-archive-active .uebt-card-image .wp-post-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  visibility:visible!important;
}

/* =========================================================
   2) المقال المفرد: الصورة والنص والـCTA بعرض الموقع
========================================================= */
html body.uebt-single-active main.uebt-single-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:24px 0 74px!important;
}

html body.uebt-single-active .uebt-single-shell{
  width:min(calc(100% - var(--uebt-v71-gutter)),var(--uebt-v71-site-max))!important;
  max-width:var(--uebt-v71-site-max)!important;
  margin-inline:auto!important;
  padding:0!important;
}

html body.uebt-single-active .uebt-single-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

html body.uebt-single-active .uebt-single-featured{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:16/9!important;
  margin:0!important;
  overflow:hidden!important;
}

html body.uebt-single-active .uebt-single-featured picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

html body.uebt-single-active .uebt-single-featured img,
html body.uebt-single-active .uebt-single-featured picture img,
html body.uebt-single-active .uebt-single-featured .wp-post-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  visibility:visible!important;
}

html body.uebt-single-active .uebt-single-header,
html body.uebt-single-active .uebt-content,
html body.uebt-single-active .uebt-single-footer{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

html body.uebt-single-active .uebt-single-header{
  padding-left:clamp(22px,3.2vw,54px)!important;
  padding-right:clamp(22px,3.2vw,54px)!important;
}

html body.uebt-single-active .uebt-single-header h1{
  width:100%!important;
  max-width:1400px!important;
}

html body.uebt-single-active .uebt-content{
  max-width:none!important;
  padding:48px clamp(24px,3.2vw,54px) 44px!important;
}

html body.uebt-single-active .uebt-single-footer{
  max-width:none!important;
  padding-left:clamp(24px,3.2vw,54px)!important;
  padding-right:clamp(24px,3.2vw,54px)!important;
}

html body.uebt-single-active .uebt-post-nav,
html body.uebt-single-active .uebt-related{
  width:100%!important;
  max-width:none!important;
}

/* =========================================================
   3) OCTAVE CTA — تصميم Full Width بهوية أوكتاف
========================================================= */
html body.uebt-single-active .uebt-content .uebt-inline-cta--octave{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:none!important;
  margin:42px 0!important;
  padding:clamp(28px,3vw,48px)!important;
  overflow:hidden!important;
  border:1px solid rgba(18,25,32,.11)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(245,200,0,.12),transparent 31%),
    radial-gradient(circle at 100% 100%,rgba(16,16,16,.055),transparent 30%),
    linear-gradient(112deg,#fff 0%,#fffdf4 46%,#fafafa 100%)!important;
  box-shadow:0 18px 52px rgba(10,12,16,.085)!important;
  color:var(--uebt-v71-ink)!important;
  box-sizing:border-box!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave::before{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  top:0!important;
  right:22px!important;
  left:22px!important;
  height:3px!important;
  border-radius:0 0 99px 99px!important;
  background:linear-gradient(90deg,transparent 0%,var(--uebt-v71-gold) 18%,#151515 50%,var(--uebt-v71-gold) 82%,transparent 100%)!important;
  opacity:.95!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  width:270px!important;
  height:270px!important;
  left:-120px!important;
  bottom:-145px!important;
  border-radius:50%!important;
  background:rgba(245,200,0,.07)!important;
  filter:blur(1px)!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__copy{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  max-width:1280px!important;
  margin:0 0 25px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0 0 10px!important;
  padding:0!important;
  color:#8b7200!important;
  background:transparent!important;
  border:0!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.3!important;
  letter-spacing:.08em!important;
  text-decoration:none!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__eyebrow::before{
  content:""!important;
  width:9px!important;
  height:9px!important;
  border-radius:50%!important;
  background:var(--uebt-v71-gold)!important;
  box-shadow:0 0 0 5px rgba(245,200,0,.13)!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__title{
  width:100%!important;
  max-width:1250px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:var(--uebt-v71-ink)!important;
  font-size:clamp(27px,3vw,45px)!important;
  font-weight:900!important;
  line-height:1.45!important;
  text-align:right!important;
  box-shadow:none!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__description{
  width:100%!important;
  max-width:1180px!important;
  margin:10px 0 0!important;
  padding:0!important;
  color:var(--uebt-v71-muted)!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:1.95!important;
  text-align:right!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__actions{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave a.uebt-inline-cta__button{
  display:inline-flex!important;
  flex:0 1 auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-width:190px!important;
  min-height:58px!important;
  margin:0!important;
  padding:13px 21px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.3!important;
  text-align:center!important;
  text-decoration:none!important;
  text-underline-offset:0!important;
  box-shadow:none!important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave a.uebt-inline-cta__button:hover,
html body.uebt-single-active .uebt-content .uebt-inline-cta--octave a.uebt-inline-cta__button:focus-visible{
  transform:translateY(-2px)!important;
  text-decoration:none!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__button--whatsapp{
  background:linear-gradient(135deg,#16b85b,#23d56b)!important;
  border-color:#10a94e!important;
  color:#fff!important;
  box-shadow:0 11px 25px rgba(20,181,88,.22)!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__button--services{
  background:var(--uebt-v71-ink)!important;
  border-color:var(--uebt-v71-ink)!important;
  color:#fff!important;
  box-shadow:0 11px 25px rgba(0,0,0,.16)!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__button--portfolio{
  background:#fff!important;
  border-color:rgba(12,12,13,.18)!important;
  color:var(--uebt-v71-ink)!important;
  box-shadow:0 10px 24px rgba(10,12,16,.07)!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__button-label{
  color:inherit!important;
  white-space:normal!important;
  text-decoration:none!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__icon{
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  max-width:22px!important;
  max-height:22px!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__button--whatsapp .uebt-inline-cta__icon{
  fill:currentColor!important;
  stroke:none!important;
}

/* اختلاف خفيف للـaccent حسب موضوع المقال، مع بقاء هوية أوكتاف ثابتة. */
html body.uebt-single-active .uebt-inline-cta--octave[data-uebt-cta-topic="national-day"]{
  background:
    radial-gradient(circle at 0% 0%,rgba(0,109,69,.10),transparent 31%),
    radial-gradient(circle at 100% 100%,rgba(245,200,0,.10),transparent 30%),
    linear-gradient(112deg,#fff 0%,#fffdf4 52%,#f8fbf9 100%)!important;
}

html body.uebt-single-active .uebt-inline-cta--octave[data-uebt-cta-topic="voice-over"],
html body.uebt-single-active .uebt-inline-cta--octave[data-uebt-cta-topic="podcast"]{
  background:
    radial-gradient(circle at 0% 0%,rgba(245,200,0,.13),transparent 31%),
    radial-gradient(circle at 100% 100%,rgba(0,0,0,.05),transparent 30%),
    linear-gradient(112deg,#fff 0%,#fffdf4 50%,#fafafa 100%)!important;
}

/* =========================================================
   4) Responsive
========================================================= */
@media screen and (min-width:641px) and (max-width:1050px){
  :root{--uebt-v71-gutter:32px}

  html body.uebt-archive-active .uebt-archive-content .uebt-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }
}

@media screen and (max-width:640px){
  :root{--uebt-v71-gutter:16px}

  html body.uebt-archive-active .uebt-archive-content > .uebt-shell,
  html body.uebt-single-active .uebt-single-shell{
    width:calc(100% - 16px)!important;
    max-width:none!important;
  }

  html body.uebt-archive-active .uebt-archive-content .uebt-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  html body.uebt-single-active main.uebt-single-page{
    padding-top:10px!important;
    padding-bottom:48px!important;
  }

  html body.uebt-single-active .uebt-content{
    max-width:none!important;
    padding:30px 12px 28px!important;
  }

  html body.uebt-single-active .uebt-single-header{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  html body.uebt-single-active .uebt-single-footer{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave{
    width:100%!important;
    max-width:none!important;
    margin:30px 0!important;
    padding:22px 16px!important;
    border-radius:20px!important;
  }

  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave::before{
    right:14px!important;
    left:14px!important;
  }

  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__copy{
    margin-bottom:19px!important;
  }

  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__title{
    font-size:23px!important;
    line-height:1.55!important;
  }

  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__description{
    margin-top:8px!important;
    font-size:13px!important;
    line-height:1.9!important;
  }

  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave .uebt-inline-cta__actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave a.uebt-inline-cta__button{
    width:100%!important;
    min-width:0!important;
    min-height:55px!important;
    padding:12px 13px!important;
    font-size:13.5px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body.uebt-single-active .uebt-content .uebt-inline-cta--octave a.uebt-inline-cta__button{
    transition:none!important;
    animation:none!important;
    transform:none!important;
  }
}