/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
  --background-offset: 0;
}

html, body {
  box-sizing: border-box;
}

body {
  background-color: #2746F8;
  background-image: linear-gradient(180deg, #00174D 0%, #0E1E42 25%, #2746F8 75%);
  background-size: 100% 1000%;
  background-repeat: no-repeat;
  background-position: 50% var(--background-offset);
  background-attachment: fixed;
}

main {
	background-image: url(https://res.cloudinary.com/dtsniniud/images/v1755867398/acs-voices-of-cancer-research-wordpress/noise/noise.svg?_i=AA);
    background-position: center;
    background-repeat: repeat;
    background-size: 100%;
}

/* Slider */
/* Slider container */
.slider {
  position: relative;
  width: 100%;
}

/* Stories container - holds all story slides */
.slider__stories {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  /* transition: transform 0.3s ease-in-out; */
}

/* Individual story blocks */
.slider__story {
  flex: 0 0 80%;
  width: 100%;
  max-width: 975px;
  position: relative;
  border: 2px solid transparent;
  transition: border-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.slider__story:not(.active):after {
  content: '';
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  backdrop-filter: blur(5px);
}

.slider__story:hover {
  border-color: var(--c-skyblue);
}

.slider__story .story__container {
  transition: grid-template-columns 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.slider__story:hover .story__container {
  background-color: transparent
}

.slider__story:hover .story__container {
  grid-template-columns: 40% 60%;
  background: none;
}

.slider__story .story__read-more p {
  transition: transform 0.5s ease-in-out;
}

.slider__story:hover .story__read-more p{
  transform: translateX(0);
}

/* .slider__story .story__container * {
  transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out !important;
} */
/* .slider__story:hover .story__container * {
  color: var(--c-skyblue);
  border-color: var(--c-skyblue);
} */

.slider__story + .slider__story {
  margin-left: 75px;
}

/* Navigation container */
.slider__navigation {
  position: relative;
}

/* Navigation items */
.navigation__item {
  position: relative;
  cursor: pointer;
  color: var(--c-skyblue);
}

.navigation__item:before {
  content: '';
  position: absolute;
  bottom: calc(100% + 35px);
  width: 0;
  height: 20px;
  background-color: var(--c-papaya);
  border-radius: 9999px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.navigation__item.active {
  color: white;
}

/* Active story indicator */
.navigation__item.active::before {
  width: 50px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .slider__navigation {
    margin-top: 1rem;
  }
  
  .navigation__item {
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    font-size: 0.9rem;
  }
}