/* Safety fallback: show only first slide before JS init */
.crc-carousel-wrapper.crc-mode-fade .crc-slide-item { display: none; }
.crc-carousel-wrapper.crc-mode-fade .crc-slide-item:first-child,
.crc-carousel-wrapper.crc-mode-fade .crc-slide-item.crc-active { display: block; }

/* v2.1.0 frontend styles
   - Supports two modes: fade (layered hero) and slide (horizontal)
   - No pagination bullets at all
   - Overlay sits on bottom of each image block
   - Fade mode fix: crc-active becomes position:relative so wrapper has height
*/

.crc-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    border-radius: 1rem;
    overflow: hidden;
    color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    /* default vars */
    --crc-headline-color:#fff;
    --crc-desc-color:rgba(255,255,255,0.9);
    --crc-btn-bg:#fff;
    --crc-btn-color:#111;

    --crc-headline-size:auto;
    --crc-desc-size:auto;
    --crc-btn-size:auto;

    --crc-headline-font:inherit;
    --crc-desc-font:inherit;
    --crc-btn-font:inherit;

    --crc-overlay-opacity:0.55;
    --crc-img-brightness:60%;
}

/* common slide structure */
.crc-inner {
    position: relative;
    width: 100%;
    height: auto;
}

/* Fade mode layout:
   All slides default absolute (so they stack),
   but the active one switches to position:relative
   so it defines height of the wrapper for layout.
*/
.crc-mode-fade .crc-inner {
    position: relative;
}
.crc-mode-fade .crc-slide-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.crc-mode-fade .crc-slide-item.crc-active {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* Slide mode layout: flex row track that moves via translateX */
.crc-mode-slide {
    overflow: hidden;
}
.crc-mode-slide .crc-inner {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transition: transform .6s ease;
}
.crc-mode-slide .crc-slide-item {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
}

/* Inside each slide */
.crc-slide-body {
    position: relative;
    width: 100%;
    line-height: 0;
    background:#000;
}
.crc-img-wrap {
    position: relative;
    width: 100%;
    line-length: 0;
    line-height: 0;
}
.crc-slide-img-el {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: brightness(var(--crc-img-brightness,60%));
}

/* overlay box sits bottom over image content */
.crc-slide-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    padding: 1rem 1rem 1.25rem;
    background: linear-gradient(
        to top,
        rgba(0,0,0,var(--crc-overlay-opacity,0.55)) 0%,
        rgba(0,0,0,calc(var(--crc-overlay-opacity,0.55) * 0.4)) 40%,
        rgba(0,0,0,0) 100%
    );
    color: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* headline text */
.crc-headline {
    font-size: clamp(1.1rem, 1vw + 1rem, 2rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--crc-headline-color,#fff);
    margin: 0 0 .5rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,.6);

    font-size: var(--crc-headline-size, clamp(1.1rem, 1vw + 1rem, 2rem));
    font-family: var(--crc-headline-font, inherit);
}

/* description text */
.crc-desc {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--crc-desc-color,rgba(255,255,255,0.9));
    margin: 0 0 .75rem 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);

    font-size: var(--crc-desc-size, .9rem);
    font-family: var(--crc-desc-font, inherit);
    max-width: 480px;
}

/* button */
.crc-btn {
    background: var(--crc-btn-bg,#fff);
    color: var(--crc-btn-color,#111);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .6rem 1rem;
    border-radius: .75rem;
    box-shadow: 0 10px 20px rgba(0,0,0,.25);
    text-decoration: none;
    transition: all .18s ease;

    font-size: var(--crc-btn-size, .85rem);
    font-family: var(--crc-btn-font, inherit);
}
.crc-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 30px rgba(0,0,0,.35);
}

/* nav arrows */
.crc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background: rgba(0,0,0,0.4);
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 10px 20px rgba(0,0,0,.4);
    transition: background .15s ease;
    z-index: 10;
}
.crc-nav:hover {
    background: rgba(0,0,0,0.6);
}
.crc-prev { left: 10px; }
.crc-next { right: 10px; }

/* responsive visibility toggles */
@media (max-width: 767px){
    .crc-hide-mobile { display:none !important; }
}
@media (min-width: 768px){
    .crc-hide-desktop { display:none !important; }
}


/* --- Slide mode specific fixes --- */
.crc-carousel-wrapper.crc-mode-slide .crc-inner{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    will-change: transform;
}
.crc-carousel-wrapper.crc-mode-slide .crc-slide-item{
    display: block !important; /* override default hiding */
}