/* Master e Professioni — mobile CORSI / dossier redesign (v0.9.1-rc5).
 * Kept apart from general mobile presentation. Never affects desktop or
 * the HOME / CHI SIAMO routes.
 */

/* Quieter, tighter course cards. Retain the approved beveled title plate. */
html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"] .mep-m-course-card {
  margin-bottom:19px;
  transform-origin:center 24%;
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-offer-meta {
  min-height:22px;
  gap:5px;
  padding:0 5px;
  font-size:9px;
  letter-spacing:.08px;
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-offer-meta strong {color:#d9a54e}
html[data-vmag-mode="mobile"] .mep-m-course-card h2 {
  width:78%;
  min-height:0;
  margin:0;
  padding:5px 10px 5px;
  background:linear-gradient(101deg,#e9af41 0%,#efbd53 67%,#d99d3b 100%);
  color:#14242b;
  font:900 clamp(16.5px,4.35vw,18.5px)/1.09 "Trebuchet MS",Arial,sans-serif;
  letter-spacing:.22px;
  text-transform:none;
  clip-path:polygon(0 0,91% 0,100% 100%,0 100%);
  overflow-wrap:break-word;
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-offer-body {padding:11px 12px 12px}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-offer-body>p {
  margin:0 0 10px;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-enrol {
  column-gap:9px;
  row-gap:1px;
  margin-top:5px;
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-enrol::before {
  width:29px;
  height:29px;
  font-size:17px;
  border-color:rgba(216,162,62,.58);
  color:#ecc064;
  box-shadow:inset 0 0 9px rgba(214,156,42,.11);
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-enrol span {
  font-size:9px;
  line-height:1.05;
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-enrol strong {font-size:12px;line-height:1.15}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-enrol small {font-size:10.5px;line-height:1.25}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-course-foot {
  margin-top:11px;
  padding-top:9px;
  gap:8px;
  font-size:10px;
}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-card-action {font-size:10px;color:#edbe63;white-space:nowrap}
html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-course-price {color:#e2b25e}

/* Compact Chat Docenti has become a global mobile component; see vmag-mobile-refinements.css. */

/* Dossier: same warm brass/dark ink hierarchy with more comfortable text rhythm. */
html[data-vmag-mode="mobile"] .mep-m-course-dialog .mep-m-course-shell {
  box-sizing:border-box;
  width:100%;
  max-width:650px;
  margin:0 auto;
  padding:18px clamp(16px,5vw,25px) 42px;
  border-top-color:rgba(226,174,82,.65);
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog .mep-m-course-code {
  margin:0 0 9px;
  padding:7px 12px;
  font-size:10px;
  color:#edc477;
  background:rgba(16,43,50,.98);
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog .mep-m-course-title {
  margin:0 0 10px!important;
  padding:12px 14px;
  background:linear-gradient(102deg,#edb44a,#f0c66d 75%,#d99835);
  color:#13242a!important;
  font-size:clamp(25px,7.4vw,36px)!important;
  line-height:1.08!important;
  clip-path:polygon(0 0,94% 0,100% 100%,0 100%);
  overflow-wrap:break-word;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog .mep-m-close-red {
  margin:9px 0 17px auto;
  color:#f1e9e3;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog .mep-m-course-lead {
  font-size:16px;
  line-height:1.6;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog .mep-m-course-area {
  margin-bottom:18px;
  font-size:10.5px;
  letter-spacing:1.4px;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog .mep-m-dossier-section h3 {
  background:#203943;
  color:#f0d5a3;
}

/* First arrival when CORSI is selected from HOME / CHI SIAMO. */
html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"].is-course-entering {animation:none}
html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"].is-course-entering .mep-m-course-card {
  animation:mepCourseListReturn 740ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--mep-course-index,0) * 40ms);
}

/* Exit: all cards lose volume, contract a little and disappear through alpha. */
html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"] .mep-m-course-card {
  transition:
    opacity 400ms cubic-bezier(.45,0,.75,1),
    transform 500ms cubic-bezier(.32,0,.65,1),
    filter 460ms ease;
}
html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"].is-course-leaving .mep-m-course-card {
  opacity:0;
  transform:translate3d(0,-8px,0) scale(.955);
  filter:blur(2px) brightness(.78);
  pointer-events:none;
  transition-delay:calc(var(--mep-course-index,0) * 9ms);
}
html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"].is-course-behind .mep-m-course-card {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none;
}

/* Arrival: the entire dossier and its content build at two distinct rhythms. */
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open]::backdrop {
  animation:mepCourseBackdropIn 450ms ease-out both;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-shell {
  animation:mepCourseDossierArrive 900ms cubic-bezier(.16,1,.3,1) both;
  transform-origin:50% 26%;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-shell > * {
  animation:mepCourseDossierLine 730ms cubic-bezier(.19,1,.32,1) both;
  animation-delay:250ms;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-code {animation-delay:160ms}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-title {animation-delay:265ms}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-close-red {animation-delay:360ms}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-lead {animation-delay:435ms}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-area {animation-delay:520ms}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-actions {animation-delay:575ms}
html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-dossier-section {animation-delay:650ms}

@keyframes mepCourseBackdropIn {
  from{opacity:0}to{opacity:1}
}
@keyframes mepCourseDossierArrive {
  from{opacity:0;transform:translate3d(0,18px,0) scale(.983);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mepCourseDossierLine {
  from{opacity:0;transform:translate3d(0,12px,0);filter:blur(2px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* Fast exit, before handing focus and scroll position back to the list. */
html[data-vmag-mode="mobile"] .mep-m-course-dialog.is-course-closing .mep-m-course-shell {
  animation:mepCourseDossierOut 190ms cubic-bezier(.4,0,1,1) both;
}
html[data-vmag-mode="mobile"] .mep-m-course-dialog.is-course-closing .mep-m-course-shell > * {
  animation-play-state:paused;
}
@keyframes mepCourseDossierOut {
  from{opacity:1;transform:none;filter:blur(0)}
  to{opacity:0;transform:translate3d(0,-10px,0) scale(.98);filter:blur(2px)}
}

/* Return: the cards unfold slowly, in a short relaxed cascade. */
html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"].is-course-returning .mep-m-course-card {
  animation:mepCourseListReturn 760ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--mep-course-index,0) * 44ms);
}
@keyframes mepCourseListReturn {
  from{opacity:0;transform:translate3d(0,15px,0) scale(.969);filter:blur(2.2px) brightness(.8)}
  to{opacity:1;transform:none;filter:blur(0) brightness(1)}
}

@media(max-width:350px){
  html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-offer-meta {font-size:8.2px;gap:3px}
  html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-offer-meta span:last-child {display:none}
  html[data-vmag-mode="mobile"] .mep-m-course-card h2 {font-size:15.5px}
  html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-course-foot {gap:5px;font-size:9px}
  html[data-vmag-mode="mobile"] .mep-m-course-card .mep-m-card-action {font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"] .mep-m-course-card,
  html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"].is-course-returning .mep-m-course-card,
  html[data-vmag-mode="mobile"] .mep-m-view[data-mobile-view="courses"].is-course-entering .mep-m-course-card,
  html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-shell,
  html[data-vmag-mode="mobile"] .mep-m-course-dialog[open] .mep-m-course-shell > *,
  html[data-vmag-mode="mobile"] .mep-m-course-dialog[open]::backdrop {
    animation:none!important;
    transition:none!important;
  }
}