@layer components {

/* ============== HERO IMAGE (desktop first) ============== */

.article-hero-image .mod-custom,
.slideshow,
.article__image--fulltext,
.alpha_nova-404-error__image > * {
  width: 100%;
  max-width: var(--max-width);
  height: var(--hero-height-large);         
  background-size: cover;
  background-position: center center;
  margin: 0 auto;
  display: block;
}

@media (max-width: 900px) {         
  .article-hero-image .mod-custom,
  .slideshow,
  .article__image--fulltext,
  .alpha_nova-404-error__image > * {
    height: var(--hero-height-small);
  }
}
@media (max-width: 768px) {          
  .article-hero-image .mod-custom,
  .slideshow,
  .article__image--fulltext,
  .alpha_nova-404-error__image > * {
    height: var(--hero-height-mob);
  }
}

@media (min-width: 1200px) {          
  .hero-slide { max-height: 480px; }
}


/* ======================= SLIDER ======================= */

.hero-container {
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-width);
  position: relative;
  overflow: hidden;
}

.hero-slides {
  display: flex;
  height: 100%;
}

.hero-slide {
  min-width: 100%;
  height: var(--slider-height-large);        
  position: relative;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* content container (positioned overlay) */
.hero-slide__container {
  width: 100%;
  display: block;
  padding-left: 3em;                        
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-slide__content {
  background-color: var(--white);
  opacity: .9;
  width: 45%;                                
  max-height: 95%;
  padding: 2em;                              
  box-shadow: var(--box-shadow);
}

.hero-slide__content h2 {
  margin: 0;
  line-height: 1.5;                          
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;                    
  -webkit-box-orient: vertical;
  font-weight: var(--font-weight-semibold);
  color: var(--dark-color);
}

.hero-slide__content h2 > a {
  font-size: 1.4rem;                         
  line-height: 1.5;
  color: var(--dark-color);
}

.hero-slide__content h2 > a:hover {
  color: var(--secondary-color-light);
}

.hero-slide__content p {
  margin: 1em 0;
  font-size: 1rem;                           
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;                    
  -webkit-box-orient: vertical;
}

.hero-slide__content a:hover {
  color: var(--dark-color);                  
}

/* CTA link button */
.hero-slide__content .hero-slide__link,
.hero-slide__content .hero-slide__link:visited {
  font-size: 0.8rem;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 10em;
  padding: 0.25em 1em;
  margin: 1em 0;
}
.hero-slide__content .hero-slide__link:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white);
}

/* controls */
.hero-slide__controls {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-next-btn,
.hero-prev-btn {
  position: absolute;
  cursor: pointer;
  color: var(--dark-grey);
  background: transparent;
  border: none;
  font-size: 2.5rem;                         
  padding: 0 1rem;                           
  opacity: .5;
}
.hero-prev-btn {
  bottom: 50%;
  left: 0;
  transform: translateY(50%);
  z-index: 2;
}
.hero-next-btn {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.hero-next-btn:hover,
.hero-prev-btn:hover { opacity: .8; }


/* =================== RESPONSIVE DOWN =================== */

/* from desktop → tablet */
@media (max-width: 900px) {          
  .hero-slide { height: var(--slider-height-small); }
  .hero-slide__container { padding-left: 2.7em; }
  .hero-slide__content { width: 60%; padding: 1.5em; }
  .hero-slide__content h2,
  .hero-slide__content h2 a { font-size: 1.3rem; line-height: 1.3; }
  .hero-next-btn, .hero-prev-btn { font-size: 2.2rem; padding: 0 1rem; }
}

/* tablet → mobile */
@media (max-width: 768px) {           
  .hero-slide { height: var(--slider-height-mob); }
  .hero-slide__container { padding-left: 1.8em; }
  .hero-slide__content { width: 70%; padding: 1em; }
  .hero-slide__content h2 { -webkit-line-clamp: 3; line-height: 1.3; }
  .hero-slide__content h2 > a { font-size: 1.2rem; line-height: 1.3; }
  .hero-slide__content p { font-size: .9rem; line-height: 1.3; -webkit-line-clamp: 3; }
  .hero-next-btn, .hero-prev-btn { font-size: 1.8rem; padding: 0 .5rem; }
}

/* very small screens */
@media (max-width: 550px) {         
  .hero-slide__content p { -webkit-line-clamp: 4; }
}

}