/* ==========================================================================
   AE Creative — Service section
   The repeating "one service in detail" block used on the service hub
   pages (media-production.html, digital-marketing.html): title + short
   description + CTA on one side, a .service-card holding the bullet
   list on the other, plus a reserved (currently empty) media slot
   below. Built entirely from existing tokens/components — .service-card
   itself is cards.css's existing class; this file only adds the layout
   grid, the bullet-list styling (new — no such list existed before),
   and the empty media placeholder. No new colors.
   ========================================================================== */

.service-section{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
}
.service-section__content{display:flex;flex-direction:column;align-items:start;gap:18px}
.service-section__desc{font-size:15px;line-height:1.8;color:var(--text-2);margin:0;max-width:52ch}

.service-section__list{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.service-section__list li{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;line-height:1.5;color:var(--text-2);
}
.service-section__list li::before{
  content:"";width:6px;height:6px;border-radius:99px;background:var(--brand);flex:none;
}

/* Reserved for a future image/video — intentionally empty. */
.service-section__media{
  margin-top:32px;min-height:220px;
  border-radius:var(--r-xl);border:1px dashed var(--line-2);
  background:var(--bg-1);
}

/* ---- Full-width cinematic image, below both columns ----
   Sits outside .service-section as its own sibling in the DOM — never
   inside the "ماذا يشمل؟" card, never beside the text. A real <img>
   (object-fit:cover handles the crop), not a CSS background-image.
   Height is driven directly by the clamp() below rather than a literal
   16:9 aspect-ratio box, because at this container's max-width (1200px)
   a true 16:9 crop would be ~675px tall — well past the requested
   420–520px desktop range — so the explicit height is what actually
   produces the requested range; object-fit:cover still gives the image
   itself a wide, cinematic crop. Glow uses the same rgba equivalents of
   --brand-blue/--brand-violet already used elsewhere — no new colors.
   Fade-in reuses the site's existing .rv scroll-reveal system (added
   as a class in the HTML) rather than a new animation. */
.service-section__image{
  margin-top:32px;
  position:relative;
  height:clamp(420px,32vw,520px);
  border-radius:22px;
  overflow:hidden;
  background:var(--bg-1);
  border:1px solid var(--line-2);
  transition:border-color .6s var(--ease);
}
.service-section__image:hover{border-color:var(--brand-line)}

.service-section__image::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 25% 15%, rgba(59,107,255,.28), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(155,84,255,.24), transparent 55%);
  opacity:.7;
  mix-blend-mode:screen;
  transition:opacity .6s var(--ease);
}
.service-section__image:hover::after{opacity:1}

.service-section__image img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1);
  transition:transform .6s var(--ease), opacity .3s var(--ease);
}
.service-section__image:hover img{transform:scale(1.02)}

/* Fallback for a missing file: an inline onerror="this.classList.add(
   'is-broken')" on the <img> itself (no JS file needed) adds this
   class, fading the image out instead of showing a broken-image icon
   — the glow/border/background stay visible on their own. */
.service-section__image img.is-broken{opacity:0}