/* =========================================================
   edu-hero-key.css  (shared for both templates)
   Targets: single-training-course + single-graduate_education
   ========================================================= */

/* Scope + CSS variables */
body.single-training-course,
body.single-graduate_education,
body.single-executive_education,
body.single-executive_education{
  --content-max: var(--container-max, 1345px);
  --brand-blue: var(--primary-color, #17488a);
  --ink-900: #0F1114;
  --ink-600: #5B6780;
  --ink-500: #475569;
  --bg-card: #fff;
  --bg-soft: #f6f8fd;
  --shadow-lg: 0 20px 40px rgba(0,0,0,.10);
  --shadow-md: 0 8px 25px rgba(0,0,0,.15);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);

  /* Key bar separators */
  --key-gap: 24px;
  --key-divider-width: 2px;
  --key-divider-height: 100%;
  --key-divider-color: #d8dee9;

  /* Default badge sizing (desktop) */
  --badge-w: 128px;
  --badge-min-h: 56px;
  --badge-pad: 10px;
}

/* ================= HERO ================= */
body.single-training-course .hero-section,
body.single-graduate_education .hero-section,
body.single-executive_education .hero-section{
  position: relative;
  isolation: isolate;
  min-height: 470px;
  background: linear-gradient(135deg, var(--brand-blue), color-mix(in srgb, var(--brand-blue), #000 8%));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px calc((100vw - var(--content-max)) / 2);
  gap: 40px;
}

body.single-training-course .hero-left,
body.single-graduate_education .hero-left,
body.single-executive_education .hero-left{
  max-width: 50%;
  z-index: 2;
  color: #fff;
  text-align: left;
}
body.single-training-course .hero-left h2,
body.single-graduate_education .hero-left h2,
body.single-executive_education .hero-left h2{
  font-size: clamp(18px, 2.2vw, 28px);
  margin-bottom: 15px;
  color: #fff;
}
body.single-training-course .hero-left h1,
body.single-graduate_education .hero-left h1,
body.single-executive_education .hero-left h1{
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}
body.single-training-course .hero-left p,
body.single-graduate_education .hero-left p,
body.single-executive_education .hero-left p{
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 30px;
  color: #f1f5f9;
}

/* Hero circle (shared) */
body.single-training-course .hero-circle,
body.single-graduate_education .hero-circle,
body.single-executive_education .hero-circle{
  position: absolute;
  right: -200px;
  top: -150px;
  width: 900px;
  height: 900px;
  background: #13203e;
  border-radius: 50%;
  z-index: 1;
  overflow: hidden;
}

/* Education image — fill the circle */
body.single-graduate_education .hero-circle.hero-circle--with-img .hero-circle-img,
body.single-executive_education .hero-circle.hero-circle--with-img .hero-circle-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Info card */
body.single-training-course .info-box,
body.single-graduate_education .info-box,
body.single-executive_education .info-box{
  position: relative;
  z-index: 3;
  background: var(--bg-card);
  padding: 25px;
  border-radius: 10px;
  width: 500px;
  min-height: 220px;
  box-shadow: var(--shadow-md);
}
body.single-training-course .info-box h3,
body.single-graduate_education .info-box h3,
body.single-executive_education .info-box h3{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111;
}
body.single-training-course .info-box p,
body.single-graduate_education .info-box p,
body.single-executive_education .info-box p{
  font-size: 15px;
  margin-bottom: 20px;
  color: var(--ink-500);
}

/* Buttons inside info-box even without class */
body.single-graduate_education .info-box > button,
body.single-executive_education .info-box > button{
  display: block; width: 100%;
  padding: 12px; margin-top: 10px; border-radius: 8px;
  font-weight: 700; text-align: center; font-size: 15px;
  background: var(--brand-blue); color: #fff; border: none; cursor: pointer;
}
body.single-graduate_education .info-box > a[href],
body.single-executive_education .info-box > a[href]{
  display: block; width: 100%;
  padding: 10px 12px; margin-top: 10px; border-radius: 8px;
  font-weight: 700; text-align: center; font-size: 15px; text-decoration: none;
  border: 2px solid var(--brand-blue); color: var(--brand-blue); background: #fff;
}
body.single-graduate_education .info-box > a[href]:hover,
body.single-executive_education .info-box > a[href]:hover{ filter: brightness(.96); }

/* ================= KEY INFO (legacy) ================= */
body.single-training-course .key-info-section,
body.single-graduate_education .key-info-section,
body.single-executive_education .key-info-section{
  max-width: var(--content-max);
  margin: -40px auto 32px;
  padding: 0 10px;
  position: relative;
  z-index: 5;
}
body.single-training-course .key-info-box,
body.single-graduate_education .key-info-box,
body.single-executive_education .key-info-box{
  background: #fff;
  border-radius: 15px;
  padding: 32px 24px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--key-gap);
  position: relative;
  isolation: isolate;
  background-origin: content-box;

  /* 4 vertical separators computed */
  --col:   calc((100% - (4 * var(--key-gap))) / 5);
  --step:  calc(var(--col) + var(--key-gap));
  --start: calc(var(--col) + (var(--key-gap) / 2));
  --ypos:  calc((100% - var(--key-divider-height)) / 2);

  background-image:
    linear-gradient(to bottom, var(--key-divider-color), var(--key-divider-color)),
    linear-gradient(to bottom, var(--key-divider-color), var(--key-divider-color)),
    linear-gradient(to bottom, var(--key-divider-color), var(--key-divider-color)),
    linear-gradient(to bottom, var(--key-divider-color), var(--key-divider-color));
  background-repeat: no-repeat;
  background-size:
    var(--key-divider-width) var(--key-divider-height),
    var(--key-divider-width) var(--key-divider-height),
    var(--key-divider-width) var(--key-divider-height),
    var(--key-divider-width) var(--key-divider-height);
  background-position:
    calc(var(--start) + (0 * var(--step))) var(--ypos),
    calc(var(--start) + (1 * var(--step))) var(--ypos),
    calc(var(--start) + (2 * var(--step))) var(--ypos),
    calc(var(--start) + (3 * var(--step))) var(--ypos);
}
body.single-training-course .info-item,
body.single-graduate_education .info-item,
body.single-executive_education .info-item{
  text-align: left; position: relative; padding-inline: 12px;
}
body.single-training-course .info-label,
body.single-graduate_education .info-label,
body.single-executive_education .info-label{
  font-size: 20px; font-weight: 600; color: var(--ink-900); line-height: 1.2; margin: 0 0 4px;
}
body.single-training-course .info-value,
body.single-graduate_education .info-value,
body.single-executive_education .info-value{
  font-size: 14px; font-weight: 400; color: var(--ink-600); line-height: 1.55; margin: 0;
}
body.single-training-course .voir-plus-toggle,
body.single-graduate_education .voir-plus-toggle,
body.single-executive_education .voir-plus-toggle{
  display: none;
}

/* ================= PROGRAM TABS ================= */
body.single-training-course .program-tabs,
body.single-graduate_education .program-tabs,
body.single-executive_education .program-tabs{
  max-width: var(--content-max);
  width: min(var(--content-max), 100%);
  margin: 10px auto 0;
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
}
body.single-training-course .program-tabs .tabs-list,
body.single-graduate_education .program-tabs .tabs-list,
body.single-executive_education .program-tabs .tabs-list{
  display: flex; gap: 32px; list-style: none; padding-left: 0; margin-left: 0;
}
body.single-training-course .program-tabs .tab-item,
body.single-graduate_education .program-tabs .tab-item,
body.single-executive_education .program-tabs .tab-item{
  padding: 14px 0; font-weight: 600; font-size: 16px; color:#666; border-bottom: 3px solid transparent; white-space: nowrap;
}
body.single-training-course .program-tabs .tab-item.active,
body.single-graduate_education .program-tabs .tab-item.active,
body.single-executive_education .program-tabs .tab-item.active{
  color:#111; border-bottom-color: var(--brand-blue);
}
body.single-training-course .program-tabs .tab-item a,
body.single-graduate_education .program-tabs .tab-item a,
body.single-executive_education .program-tabs .tab-item a{
  text-decoration: none; color: inherit; display: inline-block;
}

/* ================= MAIN LAYOUT ================= */
body.single-training-course .program-sections,
body.single-graduate_education .program-sections,
body.single-executive_education .program-sections{
  max-width: var(--content-max);
  width: min(var(--content-max), 100%);
  margin: 30px auto 60px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
}
body.single-training-course .content-article .richtext p,
body.single-graduate_education .content-article .richtext p,
body.single-executive_education .content-article .richtext p{
  margin-bottom: 16px;
}

/* ================= METHODS ================= */
body.single-training-course .methods-section,
body.single-graduate_education .methods-section,
body.single-executive_education .methods-section{ margin-top: 28px; }
body.single-training-course .methods-section .section-title,
body.single-graduate_education .methods-section .section-title,
body.single-executive_education .methods-section .section-title{
  font-size: 24px; font-weight: 800; color:#111; margin-bottom: 14px;
}
body.single-training-course .methods-grid,
body.single-graduate_education .methods-grid,
body.single-executive_education .methods-grid{
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 12px;
}
body.single-training-course .method-item,
body.single-graduate_education .method-item,
body.single-executive_education .method-item{ display: flex; gap: 10px; align-items: flex-start; }
body.single-training-course .method-icon,
body.single-graduate_education .method-icon,
body.single-executive_education .method-icon{ width: 22px; height: 22px; flex: 0 0 22px; margin-top: 3px; }
body.single-training-course .method-text,
body.single-graduate_education .method-text,
body.single-executive_education .method-text{ font-size: 15px; line-height: 1.6; color: var(--ink-600); }

/* ================== RESPONSIVE ================== */
@media (max-width: 900px){
  body.single-training-course .program-sections,
  body.single-graduate_education .program-sections,
  body.single-executive_education .program-sections{
    grid-template-columns: 1fr; gap: 20px;
  }
}
@media (max-width: 768px){
  /* Hero */
  body.single-training-course .hero-section,
  body.single-graduate_education .hero-section,
  body.single-executive_education .hero-section{
    min-height: auto; padding: 16px; gap: 14px;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
  }
  body.single-training-course .hero-left,
  body.single-graduate_education .hero-left,
  body.single-executive_education .hero-left{ max-width: 100%; }

  /* Hide circle on mobile */
  body.single-training-course .hero-circle,
  body.single-graduate_education .hero-circle,
  body.single-executive_education .hero-circle{ display: none; }

  body.single-training-course .info-box,
  body.single-graduate_education .info-box,
  body.single-executive_education .info-box{
    width: 100%; max-width: 100%; min-height: auto; padding: 16px; box-shadow: var(--shadow-sm);
  }

  /* Key section */
  body.single-training-course .key-info-section,
  body.single-graduate_education .key-info-section,
  body.single-executive_education .key-info-section{
    margin: 16px 0 12px; padding: 0 16px;
  }
  body.single-training-course .key-info-box,
  body.single-graduate_education .key-info-box,
  body.single-executive_education .key-info-box{
    display: block; padding: 0; box-shadow: none; border-radius: 0; background: none; background-image: none;
  }
  body.single-training-course .key-info-box .info-item,
  body.single-graduate_education .key-info-box .info-item,
  body.single-executive_education .key-info-box .info-item{
    display: none; padding: 14px 12px; border-bottom: 1px solid #e5e7eb;
  }
  body.single-training-course .key-info-box .info-item:nth-child(-n+2),
  body.single-graduate_education .key-info-box .info-item:nth-child(-n+2),
  body.single-executive_education .key-info-box .info-item:nth-child(-n+2){ display: block; }
  body.single-training-course .key-info-box.expanded .info-item,
  body.single-graduate_education .key-info-box.expanded .info-item,
  body.single-executive_education .key-info-box.expanded .info-item{ display: block; }
  body.single-training-course .voir-plus-toggle,
  body.single-graduate_education .voir-plus-toggle,
  body.single-executive_education .voir-plus-toggle{
    display: block; width: 100%; margin-top: 10px; padding: 12px 14px;
    border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font-weight: 600;
  }

  /* Tabs */
  body.single-training-course .program-tabs,
  body.single-graduate_education .program-tabs,
  body.single-executive_education .program-tabs{ margin: 8px 0 0; padding: 0 16px; overflow-x: auto; }
  body.single-training-course .program-tabs .tabs-list,
  body.single-graduate_education .program-tabs .tabs-list,
  body.single-executive_education .program-tabs .tabs-list{ gap: 16px; }
}

/* ================= HERO (education only: image fills circle) ================ */
body.single-graduate_education .hero-circle.hero-circle--with-img,
body.single-executive_education .hero-circle.hero-circle--with-img{
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 40px rgba(0,0,0,.12);
}
body.single-graduate_education .hero-circle.hero-circle--with-img .hero-circle-img,
body.single-executive_education .hero-circle.hero-circle--with-img .hero-circle-img{
  width:100%; height:100%;
  max-width:none; max-height:none;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
/* Correct stacking over white plate */
body.single-graduate_education .hero-left,
body.single-executive_education .hero-left{ z-index:2; }
body.single-graduate_education .info-box,
body.single-executive_education .info-box{ z-index:3; }

/* Mobile: hide circle in education */
@media (max-width: 768px){
  body.single-graduate_education .hero-circle,
  body.single-executive_education .hero-circle{ display:none; }
}

/* ================= HERO — BADGES (Unified & Conflict-Proof) ================ */
/* Container: supports .badges and .bades inside hero-left only */
body.single-training-course .hero-section .hero-left :is(.badges, .bades),
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades),
body.single-executive_education .hero-section .hero-left :is(.badges, .bades){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:12px;
  list-style:none;
  padding:0;
  position:relative;
  z-index:2;
}

/* Item: .badge wrapper */
body.single-training-course .hero-section .hero-left :is(.badges, .bades) > .badge,
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades) > .badge,
body.single-executive_education .hero-section .hero-left :is(.badges, .bades) > .badge{
  box-sizing:border-box;
  width:var(--badge-w);
  min-height:var(--badge-min-h);
  padding:var(--badge-pad);
  background:#fff;
  border:1px solid #e6eaf2;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  line-height:0;
}

/* Support direct children without .badge (img/a/li…) */
body.single-training-course .hero-section .hero-left :is(.badges, .bades) > :not(.badge),
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades) > :not(.badge),
body.single-executive_education .hero-section .hero-left :is(.badges, .bades) > :not(.badge){
  box-sizing:border-box;
  width:var(--badge-w);
  min-height:var(--badge-min-h);
  padding:var(--badge-pad);
  background:#fff;
  border:1px solid #e6eaf2;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  line-height:0;
}

/* Images inside badges (PNG/SVG/JPG/picture) */
body.single-training-course .hero-section .hero-left :is(.badges, .bades) img,
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades) img,
body.single-executive_education .hero-section .hero-left :is(.badges, .bades) img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Mobile tuning via variables only */
@media (max-width: 768px){
  body.single-training-course,
  body.single-graduate_education,
  body.single-executive_education,
  body.single-executive_education{
    --badge-w: 110px;
    --badge-min-h: 56px;
    --badge-pad: 8px;
  }
}

/* Ensure correct stacking above hero circle */
body.single-training-course .hero-left,
body.single-graduate_education .hero-left,
body.single-executive_education .hero-left{ position:relative; z-index:2; }
body.single-training-course .hero-circle,
body.single-graduate_education .hero-circle,
body.single-executive_education .hero-circle{ z-index:1; }

/* === Patch: normalized badge dimensions across both templates === */

/* 1) Variables for locked height or aspect-ratio */
body.single-training-course,
body.single-graduate_education,
body.single-executive_education,
body.single-executive_education{
  --badge-w: 128px;
  --badge-h: 102px;
  --badge-ar: 5 / 4;
}

/* 2) Lock badge box height (or use aspect-ratio) */
body.single-training-course .hero-section .hero-left :is(.badges, .bades) > .badge,
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades) > .badge,
body.single-executive_education .hero-section .hero-left :is(.badges, .bades) > .badge{
  width: var(--badge-w);
  height: var(--badge-h);
  aspect-ratio: var(--badge-ar);
  padding: var(--badge-pad);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 3) Force image to contain inside the frame */
body.single-training-course .hero-section .hero-left :is(.badges, .bades) img.badge-img,
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades) img.badge-img,
body.single-executive_education .hero-section .hero-left :is(.badges, .bades) img.badge-img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* 4) Direct children without .badge wrapper */
body.single-training-course .hero-section .hero-left :is(.badges, .bades) > :not(.badge),
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades) > :not(.badge),
body.single-executive_education .hero-section .hero-left :is(.badges, .bades) > :not(.badge){
  width: var(--badge-w);
  height: var(--badge-h);
  aspect-ratio: var(--badge-ar);
  padding: var(--badge-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ==================== Breadcrumb (Hero) ==================== */
.imd-bc{
  position: absolute;
  left: max(var(--pad-x,16px), calc((100vw - var(--content-max))/2 + var(--pad-x,16px)));
  top: 0;
  transform: translateY(-70%);
  z-index: 100;
  --bc-link: #17488A;
  --bc-sep: #111827;
}
.imd-bc-list{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0; padding:0;
  font-size:14px; line-height:1;
}
.imd-bc-home svg{ width:20px; height:20px; color:var(--bc-link); }
.imd-bc-sep svg{ width:20px; height:20px; color:var(--bc-sep); }
.imd-bc-item a{
  color: var(--bc-link);
  font-weight:600;
  text-decoration:none;
}
.imd-bc-item a:hover{ text-decoration:underline; }
.imd-bc-current > span{ color:#0f172a; font-weight:700; }

@media(max-width:980px){
  .imd-bc{ left:var(--pad-x,16px); transform:translateY(-60%); }
}

/* Anchor context */
.hero-section{ position:relative; }

/* Badges — compact override */
body.single-training-course,
body.single-graduate_education,
body.single-executive_education{
  --badge-w: 110px;   /* عرض أصغر (كان 128px) */
  --badge-h: 88px;    /* ارتفاع أصغر (كان 102px) */
  --badge-pad: 6px;   /* تقليل الحشوة الداخلية (كان 10px) */
}

/* تقليل المسافة بين البادجات */
body.single-training-course .hero-section .hero-left :is(.badges, .bades),
body.single-graduate_education .hero-section .hero-left :is(.badges, .bades),
body.single-executive_education .hero-section .hero-left :is(.badges, .bades){
  gap: 8px;   /* كان 12px */
}

/* Mobile adjustments */
@media (max-width: 768px){
  body.single-training-course,
  body.single-graduate_education,
  body.single-executive_education{
    --badge-w: 90px;   /* عرض أصغر على الموبايل */
    --badge-h: 72px;   /* ارتفاع أصغر على الموبايل */
    --badge-pad: 5px;  /* حشوة أقل */
  }
}