/* services.css — Services showcase: featured + grouped bento cards (Phase 18) */
/* =========================================================
   PHASE 18 — SERVICES: FEATURED + GROUPED SHOWCASE (v2)
   Design notes:
   - One flagship "featured" service (full-width banner) sets the hierarchy,
     followed by clearly labeled groups so the section never reads as a
     random pile of cards or leaves dead space on one side.
   - The ambient glow + light-sheen hover effects are scoped to `.svc-media`
     (the image layer) instead of the outer `.svc-card`. That is the fix for
     the corner-icon clipping bug: the outer card is `overflow:visible`, so
     `.svc-icon-badge` — which intentionally straddles the card's top edge —
     is never cut off, even mid hover-animation (scale + rotate).
   - `.svc-media[data-admin-image]` is the single swappable slot: point it at
     a real photo (Umrah, airport, travel, passport…) from the admin panel
     later without touching the surrounding markup or CSS.
   ========================================================= */
.svc-groups{ display:flex; flex-direction:column; gap:58px; margin-top:8px; position:relative; }
.svc-group-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.svc-group-head h3{ font-size:18.5px; display:flex; align-items:center; gap:10px; }
.svc-group-head h3 .icon{ width:18px; height:18px; color:var(--primary); flex-shrink:0; }
html.dark .svc-group-head h3 .icon{ color:#8FB4FF; }
.svc-group-count{ font-size:12px; color:var(--muted); background:var(--surface-2); padding:5px 12px; border-radius:999px; white-space:nowrap; }
.svc-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); grid-auto-flow:dense; gap:22px; }

/* ---------- shared card shell ---------- */
.svc-card, .svc-featured{
  position:relative; cursor:pointer; display:flex;
  border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.svc-card{ flex-direction:column; }
.svc-card:hover, .svc-card:focus-visible, .svc-featured:hover, .svc-featured:focus-visible{
  transform:translateY(-6px); box-shadow:var(--shadow-lg), 0 0 42px -16px rgba(18,95,221,.5); outline:none;
}
html.dark .svc-card, html.dark .svc-featured{ border-color:rgba(255,255,255,.08); }
html.dark .svc-card:hover, html.dark .svc-featured:hover{ border-color:rgba(143,180,255,.3); box-shadow:var(--shadow-lg), 0 0 48px -16px rgba(18,95,221,.55); }

/* ---------- media (image layer — the ONLY element that clips) ---------- */
.svc-media{
  position:relative; overflow:hidden; background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; height:212px; flex:0 0 auto;
}
html.dark .svc-media{ background:linear-gradient(150deg,#16233B,#101B2E); }
.svc-illus{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; filter:saturate(1.08) contrast(1.04); transition:transform .7s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-illus, .svc-featured:hover .svc-illus{ transform:scale(1.07); }
.svc-media::before{ /* ambient glow */
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(70% 70% at 50% 15%, rgba(18,95,221,.28), transparent 70%);
  transition:opacity .4s ease;
}
.svc-card:hover .svc-media::before, .svc-featured:hover .svc-media::before{ opacity:1; }
.svc-media::after{ /* moving sheen */
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.24) 45%, transparent 60%);
  background-size:220% 220%; background-position:120% -20%; transition:opacity .3s ease;
}
.svc-card:hover .svc-media::after, .svc-featured:hover .svc-media::after{ opacity:1; animation:svcSheen 1.1s ease forwards; }
@keyframes svcSheen{ from{background-position:120% -20%;} to{background-position:-20% 120%;} }

/* ---------- body ---------- */
.svc-body{
  position:relative; padding:16px 20px 18px; display:flex; flex-direction:column; gap:7px; flex:1 1 auto;
  border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--surface);
}
html.dark .svc-body{ background:color-mix(in srgb, var(--surface) 66%, transparent); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); }
.svc-card h4{ font-size:16px; line-height:1.32; }
.svc-card p{ font-size:13px; color:var(--muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- icon badge — straddles the card/media seam, never clipped ---------- */
.svc-icon-badge{
  position:absolute; top:-16px; inset-inline-end:18px; width:42px; height:42px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); z-index:5;
  display:flex; align-items:center; justify-content:center; color:var(--primary);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.svc-icon-badge .icon{ width:20px; height:20px; }
.svc-card:hover .svc-icon-badge, .svc-featured:hover .svc-icon-badge{ transform:translateY(-3px) rotate(-8deg) scale(1.08); background:var(--primary); color:#fff; }
html.dark .svc-icon-badge{ background:#101B2E; border-color:rgba(255,255,255,.1); }

/* ---------- gold "featured" tag ---------- */
.svc-tag{
  display:inline-flex; align-items:center; gap:6px; background:rgba(250,205,4,.16); color:#B8860B;
  border:1px solid rgba(250,205,4,.45); font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:999px;
  width:fit-content; margin-bottom:2px;
}
html.dark .svc-tag{ color:var(--accent); }

/* ---------- CTA ---------- */
.svc-cta{
  margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  color:#fff; background:linear-gradient(150deg, var(--primary), var(--primary-grad)); border:1px solid transparent;
  width:fit-content; padding:10px 18px; border-radius:999px; box-shadow:0 8px 18px -8px rgba(13,69,161,.5);
  transition:gap .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .25s ease;
}
.svc-cta .icon{ width:13px; height:13px; transition:transform .3s ease; }
.svc-card:hover .svc-cta, .svc-featured:hover .svc-cta{ gap:10px; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(13,69,161,.6); filter:brightness(1.08); }
.svc-card:hover .svc-cta .icon, .svc-featured:hover .svc-cta .icon{ transform:translateX(-3px); }
[dir="rtl"] .svc-card:hover .svc-cta .icon, [dir="rtl"] .svc-featured:hover .svc-cta .icon{ transform:translateX(3px); }
html.dark .svc-cta{ color:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); }
html.dark .svc-card:hover .svc-cta, html.dark .svc-featured:hover .svc-cta{ box-shadow:0 16px 32px -10px rgba(0,0,0,.7); }


/* ---------- flagship featured banner ---------- */
.svc-featured{ margin-bottom:4px; }
.svc-featured .svc-media{ flex:0 0 46%; min-height:320px; height:auto; border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
[dir="rtl"] .svc-featured .svc-media{ border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
.svc-featured .svc-body{ flex:1 1 auto; justify-content:center; padding:38px 44px; gap:14px; border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
[dir="rtl"] .svc-featured .svc-body{ border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.svc-featured h4{ font-size:clamp(22px,2.6vw,30px); line-height:1.22; }
.svc-featured p{ font-size:15.5px; max-width:520px; -webkit-line-clamp:3; }
.svc-featured .svc-icon-badge{ inset-inline-end:auto; inset-inline-start:calc(46% - 21px); }
[dir="rtl"] .svc-featured .svc-icon-badge{ inset-inline-start:auto; inset-inline-end:calc(46% - 21px); }
@media (max-width:760px){
  .svc-featured, .svc-featured[dir]{ flex-direction:column; }
  .svc-featured .svc-media{ flex:0 0 auto; width:100%; min-height:200px; border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important; }
  .svc-featured .svc-body{ border-radius:0 0 var(--radius-lg) var(--radius-lg) !important; padding:26px; }
  .svc-featured .svc-icon-badge{ inset-inline-start:auto !important; inset-inline-end:18px !important; }
}

/* ---------- secondary large bento card — premium hierarchy within a group ---------- */
.svc-card-lg{ grid-column:span 2; flex-direction:row; }
.svc-card-lg .svc-media{ flex:0 0 44%; height:auto; min-height:268px; border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
[dir="rtl"] .svc-card-lg .svc-media{ border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
.svc-card-lg .svc-body{ flex:1 1 auto; justify-content:center; padding:30px 36px; gap:11px; border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
[dir="rtl"] .svc-card-lg .svc-body{ border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.svc-card-lg h4{ font-size:clamp(19px,2vw,24px); line-height:1.28; }
.svc-card-lg p{ font-size:14.5px; max-width:480px; -webkit-line-clamp:3; }
.svc-card-lg .svc-icon-badge{ inset-inline-end:auto; inset-inline-start:calc(44% - 21px); }
[dir="rtl"] .svc-card-lg .svc-icon-badge{ inset-inline-start:auto; inset-inline-end:calc(44% - 21px); }
@media (max-width:760px){
  .svc-card-lg{ grid-column:1 / -1; flex-direction:column; }
  .svc-card-lg .svc-media{ flex:0 0 auto; width:100%; min-height:200px; border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important; }
  .svc-card-lg .svc-body{ border-radius:0 0 var(--radius-lg) var(--radius-lg) !important; padding:24px; }
  .svc-card-lg .svc-icon-badge{ inset-inline-start:auto !important; inset-inline-end:18px !important; }
}