.site-button {
    display: block;
    margin: 0 !important;
    padding: 0.8rem;
    font-weight: 700;
    border-radius: 0.5rem;
}

/*===========================================
******** S L I D E R  S E C T I O N *********
=============================================*/

/* Section wrapper */
#slider-section { 
  overflow: hidden;
  padding: 0 !important;
}

/* Relative container so arrows/progress/overlay can absolutely position */
#slider-section .slider-wrapper { 
  position: relative; 
  width: 100%; 
}

#slider-section .slider-viewport {
  display: flex;
  gap: 0;
  will-change: transform;
  transition: transform 500ms;   /* JS may override */
  width: auto;                   /* sum of children */
  transform: translate3d(0,0,0);
}

/* One slide = one viewport width (direct child is <article class="slide">) */
#slider-section .slider-viewport > .slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;            /* overlay positioning */
  box-sizing: border-box;
  aspect-ratio: 1920 / 560;      /* desktop hero height */
}

/* Anchor fills the slide�s box */
#slider-section .slide-link {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 1100px) {
  #slider-section .slider-viewport > .slide { 
    aspect-ratio: 1920 / 760;
  }
}
/* Small screens use a taller ratio */
@media (max-width: 768px) {
  #slider-section .slider-viewport > .slide { 
    aspect-ratio: 800 / 1200;
  }
}

/* Images fill the frame */
#slider-section .slide-link picture,
#slider-section .slide-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
  margin: 0; 
  border: 0; 
  box-sizing: border-box;
}

/* Progress bar (JS-controlled width) */
#slider-section .slider-bar {
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0;
  height: 4px; 
  background: #e5e5e5; 
  z-index: 3;
}
#slider-section .progress-timer {
  height: 100%;
  width: 0%;
  background: var(--tln-red, #c62828);  /* visible even if var missing */
}

/* Arrows */
#slider-section .slider-previous,
#slider-section .slider-next {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  border: 0; 
  background: none; 
  color: var(--tln-white, #fff);
  font-size: 4rem; 
  padding: 1rem; 
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0px 3px 5px black); 
  z-index: 4; /* above overlay */
}
#slider-section .slider-previous { left: 0 }
#slider-section .slider-next     { right: 0 }
#slider-section .slider-previous:focus-visible,
#slider-section .slider-next:focus-visible { 
  outline: 2px solid #fff; 
  outline-offset: 2px; 
}

/* ======================================================
   Content overlay (for "slide--banner" with text fields)
   ------------------------------------------------------
   Desktop (>=1100px): left panel ~50% width, full height
   Mobile/Tablet: compact pill at bottom-left
   ====================================================== */

/* Base overlay styles shared across breakpoints */
#slider-section .slide-overlay {
  position: absolute;
  pointer-events: auto;        /* allows button/links inside overlay */
  color: #fff;
  z-index: 2;                  /* above image, below arrows */
}

/* Typography + spacing tokens */
#slider-section .slide-tag {
    display: block;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 1rem;
}
#slider-section .slide-title {
  color: var(--tln-light-grey);
  font-weight: 800;
  font-size: 4vw;
  line-height: 1;
  margin: 0 !important;
  padding-right: .5rem;
  padding-bottom: .5rem;
  text-transform: capitalize;
}
#slider-section .slide-desc {
  font-size: clamp(.95rem, 1.4vw, 1.125rem);
  line-height: 1.4;
  opacity: .95;
}
#slider-section .slide-logo {
    width: 50vw;
    max-width: 250px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* CTA button (�View more�) */
#slider-section .slide-cta {
  display: block;
  background: #ac0052;
  border: 2px solid #ac0052;
  color: #ffffff;
  text-decoration: none;
  width: fit-content;
}
#slider-section .slide-cta:hover {
  background: transparent;
}

/* Readability on busy art */
#slider-section .slide-title,
#slider-section .slide-desc {
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Clamp long text to keep overlays tidy */
#slider-section .slide-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* 2 lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#slider-section .slide-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* 3 lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* DESKTOP � cover ~50% of the LEFT side, full height */
@media (min-width: 768px) {
  #slider-section .slide-overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 50vw;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(90deg, rgba(5, 15, 23, 1), rgba(5, 15, 23, .80), rgba(5, 15, 23, .55), rgba(5, 15, 23, 0.01));
  }
}

/* MOBILE & TABLET � float as a small pill near bottom-left */
@media (max-width: 767.99px) {
  #slider-section .slide-link picture,
  #slider-section .slide-link img {
    object-position: center;
  }
  #slider-section .slide-overlay {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4rem 2rem;
    display: grid;
    gap: 1rem;

    background: linear-gradient(
      0deg,
      rgba(5, 15, 23, 1),
      rgba(5, 15, 23, .80),
      rgba(5, 15, 23, .55),
      rgba(5, 15, 23, 0.01)
    );
  }
  #slider-section .slide-logo {
      width: 25vw;
  }
  #slider-section .slide-tag {
    font-size: 3vw;
  }
  /* Tighten typography on small screens */
  #slider-section .slide-title {
    font-weight: 800;
    font-size: 6vw;
    line-height: 1.15;
  }
  #slider-section .slide-desc {
    font-size: clamp(.85rem, 3.8vw, .95rem);
    line-height: 1.3;
  }
  #slider-section .slide-cta {
    font-size: 3vw;
    padding: .5rem 2rem;
  }

  /* Optional: hide desc on very small phones to avoid obstruction */
  @media (max-width: 400px) {
    #slider-section .slide-desc { display: none; }
  }
}

@media (max-width: 580px) {
  #slider-section .slide-overlay {
    padding: 4rem 2rem ;
  }
  #slider-section .slide-tag {
      font-size: 4vw;
  }
  #slider-section .slide-title {
    font-size: 8vw;
  }
  #slider-section .slide-cta {
    font-size: 4vw;
  }

}

/* Accessibility & motion preferences */
@media (prefers-reduced-motion: reduce) {
  #slider-section .slide-cta { transition: none !important; }
}