/* ============================================================
   S-Class v2.48.2 — Public E-Portfolio full-width responsive Cover
   + stronger outer shell so the portfolio canvas stands out
   ============================================================ */

/* Let the portfolio own the viewport width. Older legacy CSS capped ep-root at 1120px. */
html,body{width:100%!important;min-height:100%!important}
body{
  margin:0!important;
  background:color-mix(in srgb,var(--ep-primary,#4f72ea) 8%,#d4e2ec)!important;
}
.ep-root{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 0 40px!important;
  --ep-shell-bg:color-mix(in srgb,var(--ep-primary) 7%,#d7e5ee);
  --ep-canvas-bg:#f8fbfd;
  background:
    radial-gradient(circle at 5% 4%,color-mix(in srgb,var(--ep-primary) 10%,transparent),transparent 22%),
    radial-gradient(circle at 95% 8%,color-mix(in srgb,var(--ep-secondary) 9%,transparent),transparent 22%),
    linear-gradient(90deg,var(--ep-shell-bg) 0 10%,color-mix(in srgb,var(--ep-shell-bg) 55%,#eef5f9) 10% 16%,var(--ep-canvas-bg) 16% 84%,color-mix(in srgb,var(--ep-shell-bg) 55%,#eef5f9) 84% 90%,var(--ep-shell-bg) 90% 100%)!important;
}

/* Full-width cover: edge-to-edge under navigation, responsive height. */
.ep-hero-section{
  width:100%!important;
  max-width:none!important;
  margin:0 auto 36px!important;
  padding:0!important;
}
.ep-hero-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.ep-cover{
  width:100%!important;
  height:clamp(220px,22.5vw,420px)!important;
  border-radius:0 0 34px 34px!important;
  border:0!important;
  border-bottom:3px solid rgba(255,255,255,.96)!important;
  background:color-mix(in srgb,var(--ep-primary) 10%,#dcecf8)!important;
  box-shadow:0 10px 0 color-mix(in srgb,var(--ep-primary) 5%,#cbdbe7),0 24px 46px rgba(30,67,107,.14)!important;
  overflow:hidden!important;
}
.ep-cover-image{
  position:absolute!important;
  inset:0!important;
  display:none;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.ep-cover-overlay{
  background:linear-gradient(180deg,rgba(11,27,47,.04) 0%,rgba(15,35,58,.14) 58%,rgba(15,35,58,.30) 100%)!important;
}
.ep-cover-pattern{opacity:.20!important}

/* Profile card remains centered and floats over the full-width cover. */
.ep-hero-main{
  width:min(1180px,calc(100% - 36px))!important;
  max-width:1180px!important;
  margin:-78px auto 0!important;
  padding:22px 26px!important;
  grid-template-columns:150px minmax(0,1fr)!important;
  gap:22px!important;
  border:3px solid rgba(255,255,255,.98)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 8px 0 color-mix(in srgb,var(--ep-primary) 4%,#d9e3ed),0 24px 44px rgba(25,59,95,.15)!important;
  backdrop-filter:blur(14px)!important;
}

/* Main portfolio content = bright canvas/cards on a clearly different outer shell. */
.ep-section{
  width:min(1180px,calc(100% - 36px))!important;
  max-width:1180px!important;
  margin:0 auto 30px!important;
  position:relative!important;
}
.ep-section:not(.ep-section-alt)>.ep-card,
.ep-about-layout>.ep-card,
.ep-rank-big-card,
.ep-future-section,
.ep-pride-card,
.ep-timeline-card{
  box-shadow:0 7px 0 rgba(197,210,223,.72),0 18px 30px rgba(34,56,86,.06)!important;
}
.ep-section-alt{
  background:rgba(255,255,255,.66)!important;
  border:2px solid rgba(255,255,255,.90)!important;
  box-shadow:0 7px 0 rgba(197,210,223,.58)!important;
}
.ep-footer>div{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(10px)!important;
}

/* Dark mode uses a darker shell and keeps the center readable. */
.ep-root.mode-dark{
  --ep-shell-bg:#07101d!important;
  --ep-canvas-bg:#101827!important;
  background:
    radial-gradient(circle at 5% 4%,color-mix(in srgb,var(--ep-primary) 16%,transparent),transparent 24%),
    linear-gradient(90deg,#07101d 0 12%,#0d1623 12% 17%,#101827 17% 83%,#0d1623 83% 88%,#07101d 88% 100%)!important;
}
.ep-root.mode-dark .ep-hero-main{background:rgba(15,23,42,.96)!important;border-color:#263348!important}

@media(max-width:920px){
  .ep-root{
    background:linear-gradient(180deg,color-mix(in srgb,var(--ep-primary) 5%,#e2edf4),var(--ep-theme-bg,#eef6fb))!important;
  }
  .ep-cover{height:clamp(210px,32vw,300px)!important;border-radius:0 0 28px 28px!important}
  .ep-hero-main{width:calc(100% - 24px)!important;margin:-62px auto 0!important}
  .ep-section{width:calc(100% - 24px)!important}
}
@media(max-width:680px){
  .ep-cover{height:220px!important;border-radius:0 0 24px 24px!important}
  .ep-hero-main{
    width:calc(100% - 16px)!important;
    margin:-46px auto 0!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    padding:14px!important;
    gap:12px!important;
    border-radius:21px!important;
  }
  .ep-section{width:calc(100% - 16px)!important}
}