.goecc-carousel{
width: 100%;
}
.goecc-carousel__track{
--goecc-gap: 28px;
--goecc-accent: #45ff00;
--goecc-title: #4b2cff;
display: flex;
gap: var(--goecc-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 6px;
padding: 6px;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.goecc-carousel__track::-webkit-scrollbar{ display:none; }
.goecc-card{
position: relative;
flex: 0 0 calc((100% - (var(--goecc-gap) * 3)) / 4);
min-width: 220px;
height: 440px;
border-radius: 14px;
overflow: hidden;
background: #eee;
box-shadow: 0 8px 26px rgba(0,0,0,0.12);
text-decoration: none;
color: inherit;
scroll-snap-align: start;
}
.goecc-card::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:4px;
background: var(--goecc-accent);
z-index: 2;
}
.goecc-card__media{
position:absolute;
inset:0;
z-index:0;
}
.goecc-card__media img{
width:100% !important;
height:100% !important;
object-fit: cover !important;
object-position: center !important;
display:block;
transform: scale(1.01);
transition: filter 180ms ease, transform 180ms ease;
}
.goecc-card__bg{
position:absolute;
inset:0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.01);
transition: filter 180ms ease, transform 180ms ease;
}
.goecc-card__bg{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
display:block;
transform: scale(1.01);
transition: filter 180ms ease, transform 180ms ease;
}
.goecc-card__fade{
position:absolute;
left:0; right:0; bottom:0;
height: 34%;
z-index:1;
background: linear-gradient(to top, rgba(245,245,245,0.92) 0%, rgba(245,245,245,0.72) 55%, rgba(245,245,245,0) 100%);
backdrop-filter: blur(10px);
transition: background 180ms ease;
}
.goecc-card__content{
position:absolute;
left:18px; right:18px; bottom:18px;
z-index:3;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.goecc-card__date{
font-weight: 700;
font-size: 16px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #111;
margin-bottom: 6px;
}
.goecc-card__title{
font-weight: 900;
font-size: 28px;
line-height: 1.05;
color: var(--goecc-title);
margin-bottom: 10px;
}
.goecc-card:hover .goecc-card__media img,
.goecc-card:focus 
.goecc-card__bg{
filter: grayscale(1) brightness(0.85) contrast(1.05);
transform: scale(1.02);
}
.goecc-card:hover .goecc-card__fade,
.goecc-card:focus-visible .goecc-card__fade{
background: linear-gradient(to top, rgba(230,230,230,0.94) 0%, rgba(230,230,230,0.78) 55%, rgba(230,230,230,0) 100%);
}
.goecc-carousel__pagination{
display:flex;
justify-content:center;
gap: 14px;
padding: 14px 0 0;
}
.goecc-dot{
width: 10px;
height: 10px;
border-radius: 999px;
border:0;
background: rgba(0,0,0,0.18);
padding:0;
cursor:pointer;
}
.goecc-dot--active{
background: rgba(0,0,0,0.45);
}
@media (max-width: 1100px){
.goecc-card{ flex-basis: calc((100% - (var(--goecc-gap) * 2)) / 3); }
}
@media (max-width: 820px){
.goecc-card{ flex-basis: calc((100% - (var(--goecc-gap) * 1)) / 2); height: 420px; }
.goecc-card__title{ font-size: 30px; }
}
@media (max-width: 520px){
.goecc-card{ flex-basis: 86%; height: 420px; }
}
.goecc-card__bg{
position:absolute;
inset:0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.01);
transition: filter 180ms ease, transform 180ms ease;
} .goecc-card__desc{
opacity: 0;
max-height: 0;
overflow: hidden;
margin-top: 8px;
font-size: 16px;
line-height: 1.35;
color:#111;
max-width: 92%;
transition: opacity 160ms ease, max-height 160ms ease;
}
.goecc-card:hover .goecc-card__desc,
.goecc-card:focus-visible .goecc-card__desc{
opacity: 1 !important;
max-height: 220px !important;
} .goecc-card:focus .goecc-card__bg,
.goecc-card:active .goecc-card__bg,
.goecc-card:focus .goecc-card__media img,
.goecc-card:active .goecc-card__media img{
filter: none !important;
transform: scale(1.01) !important;
}
.goecc-card:focus .goecc-card__fade,
.goecc-card:active .goecc-card__fade{
background: linear-gradient(to top, rgba(245,245,245,0.92) 0%, rgba(245,245,245,0.72) 55%, rgba(245,245,245,0) 100%) !important;
}
.goecc-card:focus .goecc-card__desc,
.goecc-card:active .goecc-card__desc{
opacity: 0 !important;
max-height: 0 !important;
}
.goecc-card:focus{ outline: none; } .goecc-carousel .goecc-card{
position: relative;
}
.goecc-carousel .goecc-card::after{
content:"";
position:absolute;
inset:0;
background: rgba(200,200,200,0.0);
z-index: 2; pointer-events:none;
transition: background 180ms ease;
}
.goecc-carousel .goecc-card:hover::after,
.goecc-carousel .goecc-card:focus-visible::after{
background: rgba(200,200,200,0.35);
}
.goecc-carousel .goecc-card__content{
z-index: 3;
}
.goecc-carousel .goecc-card__desc{
opacity: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
transition: opacity 180ms ease, max-height 180ms ease;
}
.goecc-carousel .goecc-card:hover .goecc-card__desc,
.goecc-carousel .goecc-card:focus-visible .goecc-card__desc{
opacity: 1 !important;
max-height: 240px !important;
} .goecc-carousel .goecc-card:hover .goecc-card__fade,
.goecc-carousel .goecc-card:focus-visible .goecc-card__fade{
background: linear-gradient(to top, rgba(230,230,230,0.94) 0%, rgba(230,230,230,0.78) 55%, rgba(230,230,230,0) 100%) !important;
}