/* V142 — Academy: recompose the 6 class cards into the same accordion-panel
   language as the Services "ARCHITECTURE × EDUCATION × TECHNOLOGY" block
   (dir-panels in positioning.css/.js): one panel expanded full-bleed with
   image + title + description + link, the rest collapsed to narrow strips
   with a vertical title — and it already auto-rotates / responds to
   hover, because it reuses the same .is-active class academy-interactive.js
   already toggles on these same cards.
   Desktop only (min-width:901px) — mobile keeps the original card-grid
   layout untouched, since a flex accordion doesn't work on a narrow screen.
   Loaded last; !important is used throughout specifically to supersede the
   several older .academy-v12-card rule blocks already in index.html,
   without editing or removing any of them. No HTML or JS changes needed —
   the content (image, title, description, the quality.js-injected
   "ASK ABOUT THIS CLASS →" link) is exactly what was already there. */
@media(min-width:901px){
  #academy .academy-v12-grid{
    display:flex!important;flex-wrap:nowrap!important;gap:8px!important;
    height:clamp(540px,58vh,650px)!important;align-items:stretch!important;
    grid-template-columns:none!important;
  }
  #academy .academy-v12-card{
    flex:1 1 0!important;min-width:0!important;height:auto!important;max-height:none!important;
    position:relative!important;overflow:hidden!important;
    background:linear-gradient(180deg,#141414,#0a0a0a)!important;
    border:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;
    transition:flex-grow .7s cubic-bezier(.2,.7,.2,1),border-color .4s!important;
  }
  #academy .academy-v12-card.is-active{
    flex-grow:4.4!important;border-color:var(--red2,#c42b35)!important;
    box-shadow:0 24px 50px rgba(0,0,0,.3)!important;transform:none!important;
  }
  #academy .academy-v12-card>img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    aspect-ratio:auto!important;object-fit:cover!important;
    opacity:.3!important;filter:grayscale(.65)!important;
    transition:opacity .5s ease,filter .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)!important;
  }
  #academy .academy-v12-card.is-active>img{opacity:1!important;filter:none!important;transform:scale(1.045)!important}
  #academy .academy-v12-card>div{
    position:absolute!important;inset:0!important;z-index:2!important;height:auto!important;min-height:0!important;
    padding:20px 18px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
    background:linear-gradient(180deg,transparent 35%,rgba(5,5,5,.9) 100%)!important;
  }
  #academy .academy-v12-card>div h3{
    margin:0 0 8px!important;color:#fff!important;font-size:12px!important;letter-spacing:.14em!important;
    white-space:nowrap!important;writing-mode:vertical-rl!important;transform:rotate(180deg)!important;
    align-self:flex-start!important;transition:opacity .3s,font-size .3s!important;
  }
  #academy .academy-v12-card.is-active>div h3{
    writing-mode:horizontal-tb!important;transform:none!important;white-space:normal!important;
    font-size:clamp(18px,1.9vw,27px)!important;letter-spacing:-.015em!important;align-self:stretch!important;
  }
  #academy .academy-v12-card>div p{
    opacity:0!important;max-height:0!important;margin:0!important;overflow:hidden!important;
    color:#c9c9c9!important;font-size:13px!important;line-height:1.5!important;
    transition:opacity .3s,max-height .3s!important;
  }
  #academy .academy-v12-card.is-active>div p{opacity:1!important;max-height:60px!important;margin-bottom:12px!important}
  #academy .academy-v12-card>div .class-link{
    opacity:0!important;max-height:0!important;pointer-events:none!important;
    transition:opacity .3s .1s,max-height .3s!important;
  }
  #academy .academy-v12-card.is-active>div .class-link{
    opacity:1!important;max-height:30px!important;pointer-events:auto!important;
  }
  #academy .academy-v12-card:not(.is-active):hover{border-color:rgba(255,255,255,.4)!important}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){
  #academy .academy-v12-card,#academy .academy-v12-card>img,#academy .academy-v12-card>div h3{transition:none!important}
}