/*
 * Manjaro Slider — frontend styles
 * Fully scoped under .msr-slider: no global selectors, no theme conflicts.
 *
 * Layout: full-width, two columns of 50% each — left column is a 16:9
 * image, right column holds heading, text and a link button.
 * Navigation arrows (under the button), autoplay handled in JS.
 */

.msr-slider{
  /* tweak defaults here, or override per instance via shortcode
     attributes / Breakdance element controls */
  --msr-accent:#e8850c;
  --msr-heading-color:#2e1a0f;
  --msr-text-color:#5c3a21;
  --msr-bg:#fdf6ea;
  --msr-btn-text:#ffffff;
  --msr-heading-font:Georgia,'Times New Roman',serif;
  --msr-heading-size:clamp(1.9rem,3.2vw,2.8rem);
  --msr-heading-weight:700;
  --msr-body-font:inherit;
  --msr-body-size:1.05rem;
  --msr-radius:0px;
  --msr-min-height:340px;

  position:relative;
  width:100%;
  font-family:var(--msr-body-font) !important;
  color:var(--msr-text-color) !important;
  line-height:1.6;
  background:var(--msr-bg) !important;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.msr-slider *,.msr-slider *::before,.msr-slider *::after{box-sizing:border-box}
.msr-slider svg{display:block}

/* stacked slides — every slide stretches to the row height (tallest
   slide) so no slide ever leaves a gap at the bottom */
.msr-track{display:grid;width:100%;align-items:stretch}
.msr-slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;transform:translateX(36px);
  transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s;
  pointer-events:none;
}
.msr-slide.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .6s ease,transform .6s ease,visibility 0s;
}

/* two columns, 50% each — height:100% fills the stretched slide */
.msr-cols{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;width:100%;height:100%}

/* LEFT: image — fills the slider height, overflow hidden */
.msr-media{
  position:relative;width:100%;height:100%;min-height:var(--msr-min-height,340px);overflow:hidden;background:#2e1a0f;
}
.msr-media img,.msr-media svg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.msr-slide.is-active .msr-media img{animation:msr-kenburns 7s ease-out forwards}
@keyframes msr-kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}

/* RIGHT: heading, text, button */
.msr-content{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:18px;padding:20px clamp(28px,4.5vw,72px);min-width:0;
}
/* Force over theme/builder styles: doubled class specificity + !important
   on the properties websites most commonly override (fonts + link/button
   colors). */
.msr-slider .msr-heading{
  font-family:var(--msr-heading-font) !important;
  font-size:var(--msr-heading-size) !important;
  font-weight:var(--msr-heading-weight) !important;
  line-height:1.15 !important;
  color:var(--msr-heading-color) !important;
  margin:0 !important;
  text-transform:none !important;
}
.msr-slider .msr-text{font-size:var(--msr-body-size) !important;color:var(--msr-text-color) !important;max-width:56ch}
.msr-slider .msr-text p{margin:0 0 .8em !important}
.msr-slider .msr-text p:last-child{margin-bottom:0 !important}

.msr-btn{
  display:inline-flex !important;align-items:center;gap:10px;
  margin-top:6px !important;padding:15px 30px !important;border-radius:99px !important;
  background:linear-gradient(135deg,var(--msr-accent),color-mix(in srgb,var(--msr-accent) 78%,#000 22%)) !important;
  color:var(--msr-btn-text) !important;
  font-family:var(--msr-body-font) !important;
  font-weight:700 !important;font-size:1rem !important;letter-spacing:.3px !important;
  text-decoration:none !important;text-transform:none !important;
  border:0 !important;line-height:1.2 !important;
  box-shadow:0 14px 30px -10px rgba(46,26,15,.55) !important;
  transition:transform .28s ease,box-shadow .28s ease;
}
.msr-btn svg{width:18px;height:18px;transition:transform .28s ease}
.msr-btn:hover,.msr-btn:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -12px rgba(46,26,15,.65) !important;
  color:var(--msr-btn-text) !important;
  text-decoration:none !important;
}
.msr-btn:hover svg{transform:translateX(4px)}
.msr-btn:focus-visible{outline:3px solid var(--msr-accent);outline-offset:2px}

/* arrow pair — under the button, at the junction of the two columns
   (the content column starts exactly at the 50% divider) */
.msr-arrows{display:flex;gap:12px;margin-top:8px}
.msr-nav{
  width:48px;height:48px;border-radius:50% !important;
  border:2px solid var(--msr-accent) !important;
  background:transparent !important;color:var(--msr-accent) !important;
  display:grid;place-items:center;cursor:pointer;padding:0 !important;
  transition:background .25s,color .25s,transform .25s;
}
.msr-nav svg{width:22px;height:22px}
.msr-nav:hover,.msr-nav:focus-visible{
  background:var(--msr-accent) !important;color:var(--msr-btn-text) !important;transform:translateY(-2px);
}
.msr-nav:focus-visible{outline:3px solid var(--msr-accent);outline-offset:2px}

/* responsive: stack the two columns */
@media (max-width:880px){
  .msr-cols{grid-template-columns:1fr}
  .msr-media{aspect-ratio:16/9;height:auto;min-height:0}
  .msr-content{align-items:center;text-align:center;padding:20px clamp(20px,6vw,40px)}
  .msr-text{max-width:60ch}
  .msr-arrows{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .msr-slide{transition:none;transform:none}
  .msr-slide.is-active .msr-media img{animation:none}
  .msr-btn,.msr-btn svg,.msr-nav{transition:none}
}