/* ============================================
   15. ASPIRATION SINGLE PAGES
   ============================================ */
.sao-aspiration-layout{
  display:grid;
  gap:var(--sa-space-7);
  padding-top:var(--sa-space-7);
  padding-bottom:var(--sa-space-8);
}
.sao-aspiration-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);
  gap:var(--sa-space-6);
  align-items:start;
}
.sao-aspiration-story-panel{
  min-height:100%;
  background:
    radial-gradient(circle at 12% 14%,rgba(143,224,61,.16),transparent 20rem),
    linear-gradient(180deg,rgba(19,25,52,.98),rgba(10,30,92,.72));
}
.sao-aspiration-story-panel h2{margin-bottom:var(--sa-space-4)}
.sao-aspiration-story-panel > p:last-of-type,
.sao-aspiration-story-panel p{max-width:76ch;line-height:var(--sa-lh-relaxed);color:#d7def6}
.sao-aspiration-side-stack{display:grid;gap:var(--sa-space-5)}
.sao-aspiration-side-panel{display:grid;gap:var(--sa-space-4)}
.sao-aspiration-side-panel .sao-card{max-width:100%}

.sao-aspiration-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sa-space-4)}
.sao-aspiration-badges span,
.sao-aspiration-badges a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:var(--sa-radius-pill);
  background:rgba(143,224,61,.10);
  border:1px solid rgba(143,224,61,.24);
  color:var(--sa-plumbob);
  font-size:var(--sa-text-xs);
  font-weight:900;
}
.sao-aspiration-section{display:grid;gap:var(--sa-space-5)}
.sao-aspiration-game-list{display:grid;gap:var(--sa-space-6)}
.sao-aspiration-game-card{
  overflow:hidden;
  border-radius:var(--sa-radius-2xl);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(19,25,52,.98),rgba(8,16,42,.98));
  box-shadow:var(--sa-shadow-lg);
}
.sao-aspiration-game-header{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:var(--sa-space-5);
  align-items:center;
  padding:clamp(20px,3vw,34px);
  background:
    radial-gradient(circle at 10% 16%,rgba(143,224,61,.18),transparent 18rem),
    linear-gradient(90deg,rgba(10,30,92,.90),rgba(5,11,46,.48));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sao-aspiration-game-icon{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:var(--sa-radius-xl);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(143,224,61,.20);
  box-shadow:0 16px 32px rgba(0,0,0,.22);
}
.sao-aspiration-game-icon img,
.sao-aspiration-game-icon .sao-placeholder{width:100%;height:100%;object-fit:contain;padding:15px}
.sao-aspiration-game-header h3{
  margin:0;
  font-size:clamp(1.7rem,3vw,3rem);
  line-height:1;
  letter-spacing:-.04em;
}
.sao-aspiration-game-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sa-space-4);
  padding:clamp(20px,3vw,34px);
}
.sao-aspiration-copy-block{
  padding:var(--sa-space-5);
  border-radius:var(--sa-radius-xl);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
}
.sao-aspiration-copy-block h4{
  margin:0 0 var(--sa-space-3);
  color:var(--sa-plumbob);
  font-size:var(--sa-text-sm);
  text-transform:uppercase;
  letter-spacing:var(--sa-tracking-eyebrow);
}
.sao-aspiration-copy-block p{margin:0;color:#c8d0ef;line-height:var(--sa-lh-relaxed)}
.sao-aspiration-copy-block .sao-card{max-width:360px}
.sao-aspiration-check-list,
.sao-aspiration-milestone ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sao-aspiration-check-list li,
.sao-aspiration-milestone li{
  position:relative;
  padding-left:22px;
  color:#dbe3ff;
  line-height:1.45;
}
.sao-aspiration-check-list li::before,
.sao-aspiration-milestone li::before{
  content:"";
  position:absolute;
  left:0;top:.58em;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--sa-plumbob);
  box-shadow:0 0 10px rgba(143,224,61,.45);
}
.sao-aspiration-milestones{
  display:grid;
  gap:0;
  padding:0 clamp(20px,3vw,34px) clamp(24px,3vw,34px);
}
.sao-aspiration-milestone{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:var(--sa-space-4);
  position:relative;
  padding:var(--sa-space-5) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.sao-aspiration-milestone::before{
  content:"";
  position:absolute;
  left:40px;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,rgba(143,224,61,.0),rgba(143,224,61,.36),rgba(143,224,61,.0));
}
.sao-aspiration-milestone-number{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:58px;height:58px;
  border-radius:50%;
  background:var(--sa-plumbob);
  color:var(--sa-text-on-green);
  font-family:var(--sa-font-mono);
  font-weight:900;
  box-shadow:var(--sa-glow-plumbob);
}
.sao-aspiration-milestone h4{margin:0 0 var(--sa-space-3);font-size:var(--sa-text-xl)}
.sao-aspiration-character-shelf{margin-top:0}

@media (max-width:1100px){
  .sao-aspiration-intro-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .sao-aspiration-game-body{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sao-aspiration-layout{padding-top:var(--sa-space-5);gap:var(--sa-space-6)}
  .sao-aspiration-game-header{grid-template-columns:78px minmax(0,1fr);gap:var(--sa-space-3)}
  .sao-aspiration-milestone{grid-template-columns:56px minmax(0,1fr)}
  .sao-aspiration-milestone::before{left:28px}
  .sao-aspiration-milestone-number{width:46px;height:46px}
}

/* Fallback styling for Sims Archives Core routed aspiration pages.
   If the plugin renders /aspirations/{slug}/ before the theme template, these
   rules still prevent the page from looking like unstyled shortcode output. */
.sa-attribute-page{
  width:min(var(--sa-shell-wide),calc(100% - 32px));
  margin:0 auto;
  padding:var(--sa-space-7) 0 var(--sa-space-8);
}
.sa-attribute-page .sa-attribute.is-aspiration{
  display:grid;
  gap:var(--sa-space-7);
}
.sa-attribute-page .sa-attribute-hero{
  display:grid;
  grid-template-columns:clamp(88px,12vw,160px) minmax(0,1fr);
  gap:var(--sa-space-6);
  align-items:center;
  padding:clamp(28px,5vw,72px);
  border-radius:var(--sa-radius-2xl);
  border:1px solid rgba(143,224,61,.22);
  background:
    radial-gradient(circle at 14% 18%,rgba(143,224,61,.20),transparent 24rem),
    linear-gradient(135deg,rgba(10,30,92,.95),rgba(5,11,46,.92));
  box-shadow:var(--sa-shadow-lg);
}
.sa-attribute-page .sa-attribute-hero-icon{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  padding:clamp(10px,2vw,22px);
  border-radius:var(--sa-radius-xl);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
.sa-attribute-page .sa-character-eyebrow{
  color:var(--sa-plumbob);
  font-size:var(--sa-text-xs);
  font-weight:950;
  letter-spacing:var(--sa-tracking-eyebrow);
  text-transform:uppercase;
  margin:0 0 var(--sa-space-3);
}
.sa-attribute-page .sa-attribute-hero h1{
  margin:0 0 var(--sa-space-4);
  font-size:clamp(3rem,8vw,7rem);
  line-height:.9;
  letter-spacing:-.06em;
}
.sa-attribute-page .sa-attribute-hero p{max-width:62ch;color:#d7def6;line-height:var(--sa-lh-relaxed)}
.sa-attribute-page .sa-trait-presence span,
.sa-attribute-page .sa-attribute-flags span,
.sa-attribute-page .sa-flag{
  display:inline-flex;
  min-height:32px;
  align-items:center;
  padding:7px 11px;
  border-radius:var(--sa-radius-pill);
  background:rgba(143,224,61,.10);
  border:1px solid rgba(143,224,61,.24);
  color:var(--sa-plumbob);
  font-size:var(--sa-text-xs);
  font-weight:900;
}
.sa-attribute-page .sa-attribute-description,
.sa-attribute-page .sa-attribute-appearance{
  padding:clamp(24px,3vw,40px);
  border-radius:var(--sa-radius-2xl);
  background:linear-gradient(180deg,rgba(19,25,52,.98),rgba(10,30,92,.64));
  border:var(--sa-border);
  box-shadow:var(--sa-shadow-md);
}
.sa-attribute-page .sa-attribute-mechanics h2,
.sa-attribute-page .sa-attribute-characters h2{
  font-size:clamp(2rem,4vw,3.8rem);
  line-height:.95;
  letter-spacing:-.05em;
  margin:0 0 var(--sa-space-5);
}
.sa-attribute-page .sa-attribute-mechanics{
  display:grid;
  gap:var(--sa-space-5);
}
.sa-attribute-page .sa-attribute-appearance h3{
  font-size:clamp(1.8rem,3vw,3.2rem);
  margin:0 0 var(--sa-space-4);
}
.sa-attribute-page .sa-attribute-game-description,
.sa-attribute-page .sa-aspiration-progression{
  margin-top:var(--sa-space-4);
}
.sa-attribute-page .sa-aspiration-reward a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--sa-plumbob);
  font-weight:900;
}
.sa-attribute-page .sa-attr-icon{width:28px;height:28px;object-fit:contain}
.sa-attribute-page .sa-aspiration-progression{
  display:grid;
  gap:var(--sa-space-4);
}
.sa-attribute-page .sa-aspiration-milestone{
  padding:var(--sa-space-5);
  border-radius:var(--sa-radius-xl);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.sa-attribute-page .sa-aspiration-milestone h5{
  margin:0 0 var(--sa-space-3);
  font-size:var(--sa-text-lg);
}
.sa-attribute-page .sa-aspiration-milestone ul{margin:0;padding-left:1.2rem;color:#dbe3ff}
@media (max-width:640px){
  .sa-attribute-page .sa-attribute-hero{grid-template-columns:1fr;padding:var(--sa-space-5)}
  .sa-attribute-page .sa-attribute-hero-icon{max-width:130px}
}