/* ---------------- home hero slider ----------------
   Mirrors the xpro-hero-slider on mtc.edu.pg: 640px tall (560 on phones),
   a 105deg #2A0845 -> #141B3D veil over the photograph, gold eyebrow and
   accents, seven-second autoplay. */

.mtc-hero{
  position:relative;
  height:640px;
  overflow:hidden;
  background:var(--mtc-plum-deep);
  isolation:isolate;
}
.mtc-hero-track{position:absolute;inset:0}

.mtc-hero-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .7s ease;
}
.mtc-hero-slide.is-active{opacity:1;visibility:visible}

.mtc-hero-bg{
  position:absolute;inset:0;
  background-image:var(--mtc-hero-img);
  background-size:cover;background-position:center;
  /* A slow drift keeps a still photograph from reading as a dead panel. */
  transform:scale(1.06);
  transition:transform 8s linear;
}
.mtc-hero-slide.is-active .mtc-hero-bg{transform:scale(1)}

.mtc-hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(105deg,#2A0845 0%,#141B3D 100%);
}

/* Flyer slides. Two of the five pictures are printed flyers carrying their own
   headings, so filling the panel with them crops the artwork and stacks two
   sets of words on top of each other. Show the whole flyer on the right at a
   size that leaves the left clear, and darken only the left for the caption. */
.mtc-hero-slide--fit .mtc-hero-bg{
  background-size:contain;
  background-position:right center;
  background-repeat:no-repeat;
  transform:none;
}
.mtc-hero-slide--fit .mtc-hero-veil{
  opacity:1;
  background:linear-gradient(90deg,#2A0845 0%,rgba(42,8,69,.92) 34%,rgba(32,14,60,.5) 58%,rgba(20,27,61,.1) 76%,rgba(20,27,61,0) 100%);
}
/* The flyer sits behind a plum panel rather than bare white. */
.mtc-hero-slide--fit{background:linear-gradient(105deg,#2A0845 0%,#141B3D 100%)}
.mtc-hero-slide--fit .mtc-hero-inner{max-width:min(var(--mtc-maxw),100%)}
.mtc-hero-slide--fit .mtc-hero-title,
.mtc-hero-slide--fit .mtc-hero-text,
.mtc-hero-slide--fit .mtc-hero-actions{max-width:34ch}

.mtc-hero-inner{position:relative;z-index:2;width:100%;color:#fff}

.mtc-hero-eyebrow{
  margin:0 0 14px;
  color:#F5B821;
  font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.mtc-hero-title{
  margin:0 0 18px;
  color:#fff;
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.1;font-weight:700;
  text-wrap:balance;
  max-width:18ch;
}
.mtc-hero-gold{color:#F5B821}
.mtc-hero-text{
  margin:0 0 26px;
  max-width:58ch;
  color:rgba(255,255,255,.86);
  font-size:17px;line-height:1.65;
}
.mtc-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}

.mtc-hero-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:999px;
  background:#F5B821;color:#2A0845;
  font-weight:700;font-size:15px;text-decoration:none;
  border:2px solid #F5B821;
  transition:background .15s,color .15s,transform .15s;
}
.mtc-hero-btn:hover,.mtc-hero-btn:focus-visible{background:#ffc93c;border-color:#ffc93c;transform:translateY(-1px)}
.mtc-hero-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.mtc-hero-btn--ghost:hover,.mtc-hero-btn--ghost:focus-visible{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* arrows */
.mtc-hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.mtc-hero-nav:hover,.mtc-hero-nav:focus-visible{background:rgba(255,255,255,.3);border-color:#fff}
.mtc-hero-prev{left:22px}
.mtc-hero-next{right:22px}

/* dots */
.mtc-hero-dots{
  position:absolute;left:0;right:0;bottom:24px;z-index:3;
  display:flex;justify-content:center;gap:9px;
}
.mtc-hero-dot{
  width:10px;height:10px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.4);cursor:pointer;
  transition:background .15s,width .15s;
}
.mtc-hero-dot.is-on{background:#F5B821;width:26px;border-radius:999px}

.mtc-hero-nav:focus-visible,.mtc-hero-dot:focus-visible{outline:2px solid #F5B821;outline-offset:3px}

@media (max-width:900px){
  .mtc-hero{height:560px}
  .mtc-hero-prev{left:10px}
  .mtc-hero-next{right:10px}
  .mtc-hero-title{max-width:100%}
  /* No room beside the caption on a phone, so the flyer sits behind it,
     low and dimmed, rather than alongside. */
  .mtc-hero-slide--fit .mtc-hero-bg{
    background-size:contain;
    background-position:center bottom 8%;
  }
  .mtc-hero-slide--fit .mtc-hero-veil{
    background:linear-gradient(180deg,#2A0845 0%,rgba(42,8,69,.92) 46%,rgba(20,27,61,.6) 100%);
  }
  .mtc-hero-slide--fit .mtc-hero-title,
  .mtc-hero-slide--fit .mtc-hero-text,
  .mtc-hero-slide--fit .mtc-hero-actions{max-width:100%}
}
@media (max-width:600px){
  /* A phone panel is taller than it is wide, so a 16:9 picture is cropped
     from the sides here. Any slide carrying a portrait cut shows it instead. */
  .mtc-hero-bg{background-image:var(--mtc-hero-img-portrait,var(--mtc-hero-img))}
  /* The flyer slides earn nothing at this width: the artwork's own small print
     is unreadable at phone size and the buttons land across its wordmark. Drop
     the picture and let the caption run on the plum gradient alone. */
  .mtc-hero-slide--fit .mtc-hero-bg{background-image:none}
  .mtc-hero-nav{width:38px;height:38px}
  .mtc-hero-text{font-size:16px}
  .mtc-hero-actions .mtc-hero-btn{flex:1 1 auto}
}

/* Someone who has asked for less motion gets the first slide, still. */
@media (prefers-reduced-motion:reduce){
  .mtc-hero-slide{transition:none}
  .mtc-hero-bg{transition:none;transform:none}
}