/* =========================
   ASSC Sector Detail
   Cleaned + optimized
   Unified styles for sector detail and sector items
========================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Alexandria:wght@400;500;600;700;800;900&family=Montserrat:wght@600;800;900&display=swap');

/* =========================
   Variables
========================= */
:root{
  --bg:#f7f9fc;
  --bg-soft:#ffffff;
  --surface:rgba(255,255,255,.88);
  --surface-strong:#ffffff;

  --primary:#08151e;
  --secondary:#0c1c29;
  --accent:#ae8768;
  --accent-soft:rgba(174,135,104,.15);

  --text:#08151e;
  --text-inverse:#ffffff;
  --muted:#5f6f85;
  --text-soft:#31425a;

  --line:rgba(8,21,30,.10);
  --line-strong:rgba(174,135,104,.20);

  --shadow-xs:0 8px 18px rgba(8,21,30,.04);
  --shadow-sm:0 12px 30px rgba(8,21,30,.06);
  --shadow-md:0 24px 60px rgba(8,21,30,.08);
  --shadow-lg:0 30px 80px rgba(174,135,104,.10);
  --shadow-accent:0 18px 40px rgba(174,135,104,.16);
  --shadow-button:0 14px 32px rgba(8,21,30,.10);

  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;

  --font-ar:"Cairo", sans-serif;
  --font-en:"Alexandria", sans-serif;
  --font-display:"Alexandria", sans-serif;

  --transition:all .30s ease;
  --transition-slow:all .45s ease;
}

/* =========================
   Reset / Base
========================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

.assc-sector-detail-page{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(174,135,104,.08), transparent 24%),
    radial-gradient(circle at 90% 15%, rgba(8,21,30,.07), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 55%, #ffffff 100%);
  overflow:hidden;
}

.assc-sector-detail-page img{
  display:block;
  max-width:100%;
}

.assc-sector-detail-page a{
  color:inherit;
  text-decoration:none;
}

.assc-sector-detail-page :focus{
  outline:none;
}

.assc-sector-detail-page :focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:14px;
}

.assc-sector-detail-page .container{
  width:min(1240px, calc(100% - 48px));
  margin-inline:auto;
}

@media (max-width:768px){
  .assc-sector-detail-page .container{
    width:min(1240px, calc(100% - 24px));
  }
}

@media (prefers-reduced-motion: reduce){
  .assc-sector-detail-page *,
  .assc-sector-detail-page *::before,
  .assc-sector-detail-page *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* =========================
   Hero
========================= */
.assc-sector-detail-hero{
  position:relative;
  overflow:hidden;
  padding:140px 0 44px;
  isolation:isolate;
}

.assc-sector-detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(8,21,30,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,21,30,.03) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.45;
  mask-image:radial-gradient(circle at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at center, #000 30%, transparent 80%);
}

.assc-sector-detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(174,135,104,.10), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(8,21,30,.08), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(174,135,104,.06), transparent 32%);
}

.assc-sector-detail-hero-content{
  position:relative;
  z-index:2;
  max-width:760px;
  margin-inline:auto;
  text-align:center;
  animation:asscFadeUp .9s ease both;
}

.assc-sector-detail-hero .kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  color:var(--accent);
  font-family:var(--font-display);
  font-size:.88rem;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
}

.assc-sector-detail-hero .kicker::before,
.assc-sector-detail-hero .kicker::after{
  content:"";
  width:28px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}

.assc-sector-detail-hero-title{
  margin:0;
  font-family:var(--font-ar);
  font-size:clamp(2.4rem, 5vw, 4rem);
  line-height:1.08;
  font-weight:900;
  color:var(--primary);
  letter-spacing:-.5px;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

.assc-sector-detail-hero-desc{
  margin:16px auto 0;
  max-width:60ch;
  color:var(--muted);
  font-size:1.05rem;
  line-height:2;
}

.assc-sector-detail-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:22px 0 18px;
}

.assc-sector-detail-hero-badges .trust-pill{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  color:var(--primary);
  font-weight:700;
  line-height:1.4;
  box-shadow:0 8px 20px rgba(8,21,30,.04);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:var(--transition);
}

.assc-sector-detail-hero-badges .trust-pill::before{
  content:"";
  position:absolute;
  inset:-1px auto -1px -40%;
  width:36%;
  transform:skewX(-24deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  opacity:0;
  transition:var(--transition-slow);
}

.assc-sector-detail-hero-badges .trust-pill:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
  background:#fff;
}

.assc-sector-detail-hero-badges .trust-pill:hover::before{
  left:112%;
  opacity:1;
}

.assc-sector-detail-hero-badges .trust-pill i{
  color:var(--accent);
  flex:0 0 auto;
}

.assc-sector-detail-hero-img{
  position:relative;
  margin:20px auto 18px;
  max-width:min(360px, 100%);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--shadow-md);
  transition:var(--transition-slow);
  animation:asscFloat 6s ease-in-out infinite;
}

.assc-sector-detail-hero-img:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow-lg);
}

/* =========================
   Back Button
========================= */
.assc-sector-detail-back-btn-wrap{
  display:flex;
  justify-content:center;
  margin-top:32px;
}

.assc-sector-detail-back-btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  min-width:200px;
  padding:12px 24px;
  border-radius:999px;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--primary);
  background:rgba(255,255,255,.82);
  border:2px solid var(--accent);
  box-shadow:0 8px 24px rgba(174,135,104,.10);
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .18s ease;
  white-space:nowrap;
  cursor:pointer;
}

.assc-sector-detail-back-btn i{
  color:var(--accent);
  transition:color .22s ease, transform .22s ease;
  flex:0 0 auto;
}

.assc-sector-detail-back-btn:hover,
.assc-sector-detail-back-btn:focus-visible{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 12px 32px rgba(174,135,104,.18);
  transform:translateY(-2px);
}

.assc-sector-detail-back-btn:hover i,
.assc-sector-detail-back-btn:focus-visible i{
  color:#fff;
}

.assc-sector-detail-back-btn:hover i{
  transform:translateX(-4px) scale(1.04);
}

[dir="ltr"] .assc-sector-detail-back-btn:hover i{
  transform:translateX(4px) scale(1.04);
}

.assc-sector-detail-back-btn:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:0 6px 18px rgba(174,135,104,.13);
}

/* =========================
   Content Layout
========================= */
.assc-sector-detail-content-section{
  position:relative;
  padding:0 0 88px;
  margin-top:-18px;
}

.assc-sector-detail-cards-list{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  justify-content:center;
  align-items:stretch;
  margin:0 auto;
  max-width:1100px;
}

.assc-sector-detail-cards-single{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin:0 auto;
  max-width:860px;
}

.assc-sector-detail-cards-single .assc-sector-detail-card{
  width:100%;
  max-width:720px;
}

/* =========================
   Card
========================= */
.assc-sector-detail-card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:260px;
  max-width:340px;
  min-height:unset;
  padding:0;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,252,.94));
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  animation:asscFadeUp .9s ease both;
}

.assc-sector-detail-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top right, rgba(174,135,104,.08), transparent 26%),
    radial-gradient(circle at bottom left, rgba(8,21,30,.06), transparent 28%);
}

.assc-sector-detail-card::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -120%;
  width:44%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform:skewX(-18deg);
  transition:var(--transition-slow);
  pointer-events:none;
}

.assc-sector-detail-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:var(--shadow-lg);
}

.assc-sector-detail-card:hover::after{
  left:140%;
}

/* =========================
   Card Image
========================= */
.assc-sector-detail-card-img-wrap{
  position:relative;
  z-index:1;
  width:100%;
  height:220px;
  overflow:hidden;
  background:#f7f9fc;
  border-bottom:1px solid var(--line);
}

.assc-sector-detail-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .45s ease;
}

.assc-sector-detail-card:hover .assc-sector-detail-card-img{
  transform:scale(1.04);
}

/* =========================
   Card Body
========================= */
.assc-sector-detail-card-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:22px 20px 24px;
}

.assc-sector-detail-card-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow:0 14px 28px rgba(174,135,104,.18);
  margin-bottom:4px;
  font-size:1.6rem;
  transition:var(--transition);
}

.assc-sector-detail-card:hover .assc-sector-detail-card-icon{
  transform:translateY(-2px) scale(1.03) rotate(-2deg);
}

.assc-sector-detail-card-title{
  position:relative;
  z-index:2;
  width:100%;
  margin:0;
  font-family:var(--font-ar);
  font-size:1.25rem;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.3px;
  color:var(--primary);
  word-break:break-word;
  text-align:right;
}

.assc-sector-detail-card-desc{
  position:relative;
  z-index:2;
  width:100%;
  margin:0;
  color:var(--text-soft);
  font-size:1rem;
  line-height:1.85;
  text-align:right;
}

.assc-sector-detail-card.is-highlighted{
  border-color:var(--accent);
  box-shadow:var(--shadow-accent);
}

/* =========================
   Responsive
========================= */
@media (max-width:1180px){
  .assc-sector-detail-cards-list{
    gap:20px;
    max-width:980px;
  }
}

@media (max-width:992px){
  .assc-sector-detail-hero{
    padding:120px 0 34px;
  }

  .assc-sector-detail-hero-desc{
    margin-inline:auto;
  }

  .assc-sector-detail-cards-single{
    max-width:98vw;
  }

  .assc-sector-detail-cards-single .assc-sector-detail-card{
    max-width:98vw;
  }
}

@media (max-width:900px){
  .assc-sector-detail-cards-list{
    gap:16px;
    max-width:98vw;
  }

  .assc-sector-detail-card{
    max-width:calc(50% - 8px);
  }
}

@media (max-width:768px){
  .assc-sector-detail-page .container{
    width:min(1240px, calc(100% - 24px));
  }

  .assc-sector-detail-content-section{
    padding:0 0 72px;
    margin-top:-8px;
  }

 /* =========================
   ASSC Back Button (Refined)
   مطابق للهوية + خط Cairo + تحسين بصري
========================= */

.assc-sector-detail-back-btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:48px;
  min-width:210px;
  padding:12px 26px;

  border-radius:999px;

  /* الخط */
  font-family:var(--font-ar);
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-0.2px;
  line-height:1;

  color:var(--primary);

  background:rgba(255,255,255,.85);
  border:2px solid var(--accent);

  box-shadow:0 10px 26px rgba(174,135,104,.10);

  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease;

  white-space:nowrap;
  cursor:pointer;
}

/* أيقونة */
.assc-sector-detail-back-btn i{
  font-size:.95rem;
  color:var(--accent);
  transition:transform .22s ease, color .22s ease;
}

/* Hover */
.assc-sector-detail-back-btn:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 14px 34px rgba(174,135,104,.18);
  transform:translateY(-2px);
}

.assc-sector-detail-back-btn:hover i{
  color:#fff;
}

/* حركة اتجاه السهم */
.assc-sector-detail-back-btn:hover i{
  transform:translateX(-4px);
}

[dir="ltr"] .assc-sector-detail-back-btn:hover i{
  transform:translateX(4px);
}

/* Active */
.assc-sector-detail-back-btn:active{
  transform:translateY(-1px) scale(.98);
  box-shadow:0 6px 18px rgba(174,135,104,.14);
}

/* نسخة إنجليزية */
[dir="ltr"] .assc-sector-detail-back-btn{
  font-family:var(--font-en);
  font-size:1rem;
  letter-spacing:.2px;
}

[dir="ltr"] .assc-sector-detail-back-btn{
  font-family:var(--font-en);
  font-weight:800;
  letter-spacing:.2px;
}

  .assc-sector-detail-card{
    max-width:100%;
    border-radius:22px;
  }

  .assc-sector-detail-card-img-wrap{
    height:180px;
  }

  .assc-sector-detail-card-body{
    padding:18px 16px 20px;
  }

  .assc-sector-detail-card-title,
  .assc-sector-detail-card-desc{
    text-align:center;
  }

  .assc-sector-detail-card-icon{
    margin-inline:auto;
  }
}

@media (max-width:640px){
  .assc-sector-detail-hero{
    padding:104px 0 26px;
  }

  .assc-sector-detail-hero .kicker{
    justify-content:center;
    font-size:.8rem;
    letter-spacing:3px;
  }

  .assc-sector-detail-hero-title,
  .assc-sector-detail-hero-desc{
    text-align:center;
  }

  .assc-sector-detail-hero-desc{
    font-size:.98rem;
    line-height:1.9;
  }

  .assc-sector-detail-hero-badges{
    gap:8px;
  }

  .assc-sector-detail-hero-badges .trust-pill{
    width:100%;
  }

  .assc-sector-detail-cards-list{
    flex-direction:column;
    gap:12px;
  }

  .assc-sector-detail-card{
    min-width:unset;
    max-width:100%;
    border-radius:16px;
  }

  .assc-sector-detail-card-img-wrap{
    height:160px;
  }

  .assc-sector-detail-card-body{
    padding:14px 12px 16px;
  }

  .assc-sector-detail-card-title{
    font-size:1.08rem;
  }

  .assc-sector-detail-card-desc{
    font-size:.97rem;
  }
}

@media (max-width:420px){
  .assc-sector-detail-hero-badges .trust-pill{
    white-space:normal;
  }

  .assc-sector-detail-card-icon{
    width:46px;
    height:46px;
    border-radius:14px;
  }
}

@media (hover:none){
  .assc-sector-detail-back-btn:hover{
    transform:none;
    box-shadow:var(--shadow-button);
  }

  .assc-sector-detail-back-btn:hover i{
    transform:none;
  }
}

/* =========================
   LTR
========================= */
[dir="ltr"] .assc-sector-detail-hero-title,
[dir="ltr"] .assc-sector-detail-card-title{
  font-family:var(--font-en);
}

[dir="ltr"] .assc-sector-detail-card-title,
[dir="ltr"] .assc-sector-detail-card-desc{
  text-align:left;
}

/* =========================
   Animations
========================= */
@keyframes asscFadeUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes asscFloat{
  0%, 100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-6px);
  }
}