/* Role-specific experiences for Ayham Academy.
   One identity, four deliberately different working environments. */
:root {
  --experience-blue:#1F5FA8;
  --experience-blue-deep:#174879;
  --experience-gold:#F5B11E;
  --experience-ink:#1E293B;
  --experience-muted:#64748B;
  --experience-line:#DCE5EF;
  --experience-paper:#FFFFFF;
  --experience-canvas:#F5F8FC;
}

/* Public front door: editorial navigation and a clear first decision. */
.academy-home .site-header {
  background:rgba(255,255,255,.94);
  border-bottom-color:rgba(31,95,168,.13);
}
.academy-home .tab-navigation {
  background:#FFFFFF;
  border-top:1px solid #F0F3F7;
}
.academy-home .nav-tab {
  position:relative;
  min-height:46px;
  color:#536477;
  transition:color .18s ease,background .18s ease;
}
.academy-home .nav-tab::after {
  position:absolute;
  content:"";
  inset-inline:12px;
  bottom:0;
  height:2px;
  background:var(--experience-gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.academy-home .nav-tab:hover,
.academy-home .nav-tab.is-active {
  color:var(--experience-blue-deep);
  background:#F8FAFD;
}
.academy-home .nav-tab.is-active::after { transform:scaleX(1); }
.academy-home .hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(54px,7vw,88px) 42px;
}
.academy-home .hero::before {
  position:absolute;
  z-index:-1;
  inset:0;
  content:"";
  background:
    radial-gradient(circle at 13% 18%,rgba(31,95,168,.075),transparent 25%),
    radial-gradient(circle at 86% 70%,rgba(245,177,30,.09),transparent 22%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FAFD 100%);
}
.academy-home .hero-grid { align-items:stretch; }
.academy-home .hero-grid > div:first-child {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-block:12px;
}
.academy-home .hero h1 {
  max-width:760px;
  text-wrap:balance;
}
.academy-home .hero-copy { max-width:610px; }
.academy-home .hero-panel {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
  border-color:#D9E4F0;
  box-shadow:0 24px 65px rgba(23,72,121,.09);
  transition:transform .22s ease,box-shadow .22s ease;
}
.academy-home .hero-panel:hover {
  transform:translateY(-3px);
  box-shadow:0 30px 72px rgba(23,72,121,.13);
}
.academy-home .partner-band {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.academy-home .home-pillars {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}
.academy-home .home-pillar {
  min-height:100px;
  padding:16px 18px;
  border:1px solid #E0E8F1;
  border-radius:5px 17px 5px 17px;
  background:#FFFFFF;
  box-shadow:0 8px 24px rgba(30,41,59,.025);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.academy-home .home-pillar:hover {
  transform:translateY(-3px);
  border-color:#B8CDE3;
  box-shadow:0 15px 30px rgba(31,95,168,.07);
}
.academy-home .home-pillar .pillar-index { color:var(--experience-blue); }
.academy-home .home-pillar:nth-child(2) .pillar-index { color:#A77708; }
.academy-home .home-pillar .pillar-arrow { color:var(--experience-gold); }
.academy-home .home-bottom-line {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-block:14px 0;
  color:#728196;
  font-size:10px;
}
.academy-home .course-card {
  border-radius:5px 17px 5px 17px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.academy-home .course-card:hover {
  transform:translateY(-3px);
  border-color:#B8CDE3;
  box-shadow:0 16px 34px rgba(31,95,168,.07);
}
.academy-home .feature {
  transition:transform .18s ease,box-shadow .18s ease;
}
.academy-home .feature:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(30,41,59,.055);
}

/* Authenticated workspaces: the role changes the visual grammar, not the permissions. */
.academy-app #app[data-academy-role="student"] { --role-accent:#1F5FA8; }
.academy-app #app[data-academy-role="instructor"] { --role-accent:#1F5FA8; }
.academy-app #app[data-academy-role="owner"] { --role-accent:#174879; }
.academy-app #app[data-academy-role="admin"] { --role-accent:#936A0D; }

.academy-app #app[data-academy-role="student"] .workspace-welcome {
  background:
    radial-gradient(circle at 10% 15%,rgba(245,177,30,.12),transparent 27%),
    linear-gradient(115deg,#FFFFFF 0%,#F5F9FE 100%);
  border-inline-start-color:#F5B11E;
  box-shadow:0 18px 50px rgba(31,95,168,.07);
}
.academy-app #app[data-academy-role="student"] .workspace-welcome h2 { max-width:570px; }
.academy-app #app[data-academy-role="student"] .workspace-stat-card {
  border-top-width:2px;
  border-radius:5px 17px 5px 17px;
}
.academy-app #app[data-academy-role="student"] .workspace-main-grid { gap:14px; }
.academy-app #app[data-academy-role="student"] .workspace-course-card {
  position:relative;
  overflow:hidden;
}
.academy-app #app[data-academy-role="student"] .workspace-course-card::after {
  position:absolute;
  content:"";
  inset-inline-start:0;
  top:0;
  width:3px;
  height:100%;
  background:linear-gradient(180deg,#F5B11E,#1F5FA8);
  opacity:.7;
}

/* Shared role introduction. Each role gets its own working metaphor. */
.academy-app .role-experience {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);
  align-items:stretch;
  gap:18px;
  overflow:hidden;
  min-height:246px;
  padding:clamp(20px,3vw,34px);
  margin:0 0 22px;
  border:1px solid #DCE5EF;
  border-radius:5px 26px 5px 26px;
  background:linear-gradient(125deg,#FFFFFF 0%,#F5F8FC 100%);
  box-shadow:0 16px 44px rgba(30,41,59,.045);
}
.academy-app .role-experience::before {
  position:absolute;
  content:"";
  width:310px;
  height:310px;
  inset-inline-start:-180px;
  bottom:-235px;
  border:1px solid rgba(31,95,168,.12);
  border-radius:50%;
  box-shadow:0 0 0 26px rgba(31,95,168,.025),0 0 0 54px rgba(245,177,30,.035);
  pointer-events:none;
}
.academy-app .role-experience__main {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
}
.academy-app .role-experience__eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  color:#1F5FA8;
  font-size:9px;
  font-weight:950;
  letter-spacing:.15em;
}
.academy-app .role-experience__eyebrow::before {
  content:"";
  width:25px;
  height:3px;
  background:#F5B11E;
}
.academy-app .role-experience__main h2 {
  max-width:690px;
  margin:0 0 10px;
  color:#1E293B;
  font-size:clamp(23px,3vw,36px);
  line-height:1.38;
  font-weight:950;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.academy-app .role-experience__main p {
  max-width:650px;
  margin:0;
  color:#64748B;
  font-size:12px;
  line-height:1.95;
}
.academy-app .role-experience__actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:19px;
}
.academy-app .role-experience__action {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:39px;
  padding:8px 13px;
  color:#FFFFFF;
  background:#1F5FA8;
  border:1px solid #1F5FA8;
  border-radius:4px 13px 4px 13px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease;
}
.academy-app .role-experience__action:hover {
  transform:translateY(-2px);
  background:#174879;
}
.academy-app .role-experience__action--quiet {
  color:#1F5FA8;
  background:#FFFFFF;
  border-color:#D4E0EC;
}
.academy-app .role-experience__action--quiet:hover {
  color:#174879;
  background:#F7FAFD;
}
.academy-app .role-experience__action span {
  color:#F5B11E;
  font-size:15px;
  line-height:1;
}
.academy-app .role-experience__map {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:184px;
  padding:18px;
  overflow:hidden;
  color:#FFFFFF;
  background:#173653;
  border:1px solid #254B70;
  border-radius:4px 19px 4px 19px;
}
.academy-app .role-experience__map::before {
  position:absolute;
  content:"";
  inset:-50% -15% auto auto;
  width:220px;
  height:220px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  box-shadow:0 0 0 25px rgba(255,255,255,.025),0 0 0 52px rgba(245,177,30,.045);
}
.academy-app .role-experience__map-top,
.academy-app .role-experience__map-foot {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.academy-app .role-experience__map-top {
  color:#B9C9D8;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}
.academy-app .role-experience__map-top b { color:#F5B11E; }
.academy-app .role-experience__map-title {
  position:relative;
  z-index:1;
  margin:16px 0 12px;
  color:#FFFFFF;
  font-size:17px;
  line-height:1.5;
  font-weight:900;
}
.academy-app .role-experience__map-items {
  position:relative;
  z-index:1;
  display:grid;
  gap:7px;
}
.academy-app .role-experience__map-item {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:29px;
  padding:6px 9px;
  color:#EAF1F7;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  border-radius:3px 9px 3px 9px;
  font-size:9px;
  font-weight:750;
}
.academy-app .role-experience__map-item i {
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  flex:0 0 17px;
  color:#173653;
  background:#F5B11E;
  border-radius:50%;
  font-size:8px;
  font-style:normal;
  font-weight:950;
}
.academy-app .role-experience__map-foot {
  margin-top:15px;
  padding-top:11px;
  color:#C2D0DD;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:8px;
}
.academy-app .role-experience__map-foot strong { color:#F5B11E; }


.academy-app .role-experience--student {
  border-inline-start:4px solid #F5B11E;
  background:
    radial-gradient(circle at 92% 4%,rgba(31,95,168,.06),transparent 28%),
    linear-gradient(120deg,#FFFFFF 0%,#F4F8FD 100%);
}
.academy-app .role-experience--student .role-experience__map {
  background:linear-gradient(145deg,#173653 0%,#1F5FA8 100%);
}
.academy-app .role-experience--student .role-experience__map-item {
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.15);
}
.academy-app .role-experience--student .role-experience__map-item i {
  background:#F5B11E;
}

.academy-app .role-experience--instructor {
  border-inline-start:4px solid #1F5FA8;
  background:linear-gradient(120deg,#FFFFFF 0%,#F2F7FC 100%);
}
.academy-app .role-experience--instructor .role-experience__map {
  background:linear-gradient(145deg,#173653,#1F5FA8);
}
.academy-app .role-experience--owner {
  border-inline-start:4px solid #F5B11E;
  background:linear-gradient(120deg,#FFFFFF 0%,#F9F7F0 100%);
}
.academy-app .role-experience--owner .role-experience__map {
  background:linear-gradient(145deg,#152F49,#1A3B5D);
}
.academy-app .role-experience--admin {
  border-inline-start:4px solid #936A0D;
  background:linear-gradient(120deg,#FFFFFF 0%,#FBF9F2 100%);
}
.academy-app .role-experience--admin .role-experience__map {
  background:linear-gradient(145deg,#26384A,#3B4C5E);
}
.academy-app #app[data-academy-role="instructor"] .workspace-sidebar {
  background:linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 42%);
}
.academy-app #app[data-academy-role="instructor"] .workspace-nav-link.is-active {
  background:#EAF2FB;
  border-inline-start-color:#1F5FA8;
}
.academy-app #app[data-academy-role="owner"] .workspace-sidebar {
  background:linear-gradient(180deg,#FFFCF3 0%,#FFFFFF 42%);
}
.academy-app #app[data-academy-role="owner"] .workspace-nav-link.is-active {
  background:#FFF7E5;
  border-inline-start-color:#F5B11E;
}
.academy-app #app[data-academy-role="admin"] .workspace-sidebar {
  background:linear-gradient(180deg,#FBF9F2 0%,#FFFFFF 42%);
}
.academy-app #app[data-academy-role="admin"] .workspace-nav-link.is-active {
  background:#F8F3E5;
  border-inline-start-color:#936A0D;
}
.academy-app #app[data-academy-role="instructor"] .workspace-stat-card {
  border-top-color:#1F5FA8;
  border-radius:4px 16px 4px 16px;
}
.academy-app #app[data-academy-role="owner"] .workspace-stat-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.academy-app #app[data-academy-role="owner"] .workspace-stat-card {
  border-top-color:#F5B11E;
  background:linear-gradient(180deg,#FFFEFA 0%,#FFFFFF 100%);
}
.academy-app #app[data-academy-role="admin"] .workspace-stat-card {
  border-top-color:#936A0D;
}
.academy-app #app[data-academy-role="owner"] .workspace-shortcut-grid button {
  min-height:96px;
  background:linear-gradient(145deg,#FFFFFF,#FFFCF3);
}
.academy-app #app[data-academy-role="owner"] .workspace-shortcut-grid b { color:#805C0C; }
.academy-app #app[data-academy-role="instructor"] .workspace-shortcut-grid button {
  min-height:96px;
  background:linear-gradient(145deg,#FFFFFF,#F6FAFE);
}
.academy-app #app[data-academy-role="instructor"] .workspace-shortcut-grid b { color:#1F5FA8; }

@media (max-width:1100px) {
  .academy-app .role-experience { grid-template-columns:minmax(0,1fr) minmax(220px,.72fr); }
  .academy-app #app[data-academy-role="owner"] .workspace-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .academy-home .hero { padding-block:44px 30px; }
  .academy-home .home-pillars { grid-template-columns:minmax(0,1fr); gap:8px; }
  .academy-home .home-pillar { min-height:76px; }
  .academy-home .partner-band { grid-template-columns:minmax(0,1fr); gap:14px; }
  .academy-home .home-bottom-line { flex-direction:column; gap:5px; }
  .academy-app .role-experience {
    grid-template-columns:minmax(0,1fr);
    gap:15px;
    min-height:0;
    padding:20px 17px;
    border-radius:5px 20px 5px 20px;
  }
  .academy-app .role-experience__main h2 { font-size:25px; }
  .academy-app .role-experience__map { min-height:170px; }
  .academy-app #app[data-academy-role="owner"] .workspace-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:430px) {
  .academy-app .role-experience__main h2 { font-size:22px; }
  .academy-app .role-experience__actions { width:100%; }
  .academy-app .role-experience__action { flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .academy-home .nav-tab,
  .academy-home .hero-panel,
  .academy-home .home-pillar,
  .academy-home .course-card,
  .academy-home .feature,
  .academy-app .role-experience__action { transition:none!important; }
  .academy-home .hero-panel:hover,
  .academy-home .home-pillar:hover,
  .academy-home .course-card:hover,
  .academy-home .feature:hover,
  .academy-app .role-experience__action:hover { transform:none!important; }
}