/* =========================================================
   HIC PROFILE HERO — HOMEPAGE VISUAL SYSTEM SAFE PATCH
   Scope: profile pages only (EN + AR). No homepage edits.
   Purpose: use the same atmospheric logic of the homepage hero:
   full image-led cinematic frame, integrated header, controlled green/charcoal overlays,
   reduced top void, and preserved profile content/typography.
   ========================================================= */

body.profile-en,
body.profile-ar{
  background:#0b1411;
}

/* Header: same visual behavior as homepage, but scoped to profile pages */
body.profile-en .nav,
body.profile-ar .nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:90;
  min-height:82px;
  height:82px;
  padding:0 clamp(28px,6vw,96px);
  background:linear-gradient(180deg,rgba(0,83,64,.74),rgba(0,83,64,.08));
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  backdrop-filter:blur(6px);
}

body.profile-en .brand-logo,
body.profile-ar .brand-logo{
  width:auto;
  max-height:54px;
  object-fit:contain;
}

body.profile-en .nav-links,
body.profile-ar .nav-links{
  gap:clamp(18px,2vw,28px);
}

body.profile-en .nav-links a,
body.profile-en .nav-actions a,
body.profile-en .lang,
body.profile-ar .nav-links a,
body.profile-ar .nav-actions a,
body.profile-ar .lang{
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
  color:#e7f1ec;
  opacity:.86;
}

body.profile-ar .nav-links a,
body.profile-ar .nav-actions a,
body.profile-ar .lang{
  letter-spacing:.02em;
  font-weight:500;
}

/* Hero: image-led, homepage-like full cinematic frame */
body.profile-en .hero,
body.profile-ar .hero{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:hidden;
  padding:clamp(140px,15vh,168px) clamp(28px,6vw,96px) clamp(74px,8vh,98px);
  margin-top:0!important;
  background-color:#0b1411;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* Keep each profile page's existing background image, only change treatment */
body.profile-en .hero::before,
body.profile-ar .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:inherit;
  background-size:cover;
  background-position:center center;
  transform:scale(1.015);
  filter:saturate(.82) contrast(1.08) brightness(.72);
}

/* Same homepage logic: green/charcoal side depth + bottom anchoring */
body.profile-en .hero::after,
body.profile-ar .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.09), transparent 22%),
    linear-gradient(90deg,rgba(0,83,64,.84) 0%,rgba(11,20,17,.64) 42%,rgba(0,0,0,.22) 100%),
    linear-gradient(0deg,rgba(11,20,17,.98) 0%,rgba(11,20,17,.20) 40%,rgba(0,83,64,.24) 100%);
}

/* soft charcoal veil for profile mood only */
body.profile-en .hero .hero-inner::before,
body.profile-ar .hero .hero-inner::before{
  content:"";
  position:absolute;
  inset:-28px -42px -34px;
  z-index:-1;
  background:linear-gradient(90deg,rgba(4,10,9,.30),rgba(4,10,9,.06));
  border-radius:28px;
  pointer-events:none;
}

body.profile-en .hero-inner,
body.profile-ar .hero-inner{
  position:relative;
  z-index:1;
  max-width:min(940px,100%);
  padding:0;
  margin:0;
}

body.profile-ar .hero-inner{
  margin-inline-start:auto;
  text-align:right;
}

/* Profile logo inside hero was creating the upper void; nav already carries identity */
body.profile-en .hero-logo,
body.profile-ar .hero-logo{
  display:none!important;
}

body.profile-en .hero .kicker,
body.profile-ar .hero .kicker{
  margin:0 0 clamp(18px,2.2vw,26px);
  color:#72d7bb;
  opacity:.76;
  font-size:12px;
  line-height:1.3;
}

body.profile-en .hero h1,
body.profile-ar .hero h1{
  max-width:820px;
  margin:0 0 clamp(22px,2.5vw,30px);
  text-shadow:0 20px 46px rgba(0,0,0,.36);
}

body.profile-en .hero .lead,
body.profile-ar .hero .lead{
  max-width:720px;
  margin:0;
  color:#dbe9e3;
  opacity:.9;
}

body.profile-en .hero-tags,
body.profile-ar .hero-tags{
  margin-top:clamp(28px,3vw,38px);
}

body.profile-en .hero-tags span,
body.profile-ar .hero-tags span{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(4px);
}

@media (max-width:1050px){
  body.profile-en .nav,
  body.profile-ar .nav{
    min-height:74px;
    height:74px;
    padding-inline:24px;
  }
  body.profile-en .hero,
  body.profile-ar .hero{
    min-height:92svh;
    padding:124px 24px 66px;
    background-position:center center;
  }
  body.profile-en .hero-inner,
  body.profile-ar .hero-inner{
    max-width:760px;
  }
}

@media (max-width:560px){
  body.profile-en .nav,
  body.profile-ar .nav{
    min-height:68px;
    height:68px;
  }
  body.profile-en .brand-logo,
  body.profile-ar .brand-logo{
    max-height:46px;
  }
  body.profile-en .hero,
  body.profile-ar .hero{
    min-height:88svh;
    padding:112px 22px 58px;
  }
  body.profile-en .hero .kicker,
  body.profile-ar .hero .kicker{
    font-size:11px;
  }
  body.profile-en .hero .hero-inner::before,
  body.profile-ar .hero .hero-inner::before{
    inset:-18px -18px -24px;
    border-radius:20px;
  }
}