/* ──────────────────────────────────────────────────────────
   FictionX – Renewed Renaissance section (`#files.fx-renaissance`)
   Horizontal slider with modern destination cards
   (Press, Heritage, Tourism, Figures, …).
   No shadows on buttons per template UI rule.
   ────────────────────────────────────────────────────────── */

/* ===== Section wrapper ===== */
.fx-renaissance{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:60px 0 70px;
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(165,19,19,.05), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(15,23,42,.04), transparent 60%),
        #f4f5f7;
}
.fx-renaissance > .container{position:relative;z-index:1;}

.fx-renaissance .heading.main-heading{margin-bottom:30px;}
.fx-renaissance .heading.main-heading h4.sub-title{
    font-size:32px;font-weight:700;letter-spacing:.3px;margin:0;
}

/* ===== Slider container (slick) ===== */
.fx-renaissance .horizontal-slider{position:relative;}

/* Before slick initializes, the raw <div> children are the slides */
.fx-renaissance .horizontal-slider:not(.slick-slider) > div{
    padding:0 12px;
    box-sizing:border-box;
}

/* After slick initializes, each slide becomes .slick-slide.
   Gutters are created with slide padding + a negative list margin. */
.fx-renaissance .slick-list{margin:0 -12px;}
.fx-renaissance .slick-slide{
    height:auto;
    padding:0 12px;
    box-sizing:border-box;
}
/* equal-height cards across the row */
.fx-renaissance .slick-track{display:flex;}
.fx-renaissance .slick-slide{display:flex;}
.fx-renaissance .slick-slide > div{display:flex;width:100%;}
.fx-renaissance .slick-slide .fx-renaissance-card{width:100%;}

/* ===== Card ===== */
.fx-renaissance-card{
    position:relative;
    display:flex;flex-direction:column;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:4px;
    overflow:hidden;
    text-decoration:none !important;
    color:inherit !important;
    isolation:isolate;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),
               border-color .35s ease;
}
.fx-renaissance-card:hover{
    transform:translateY(-6px);
    border-color:rgba(165,19,19,.35);
}

/* Top accent strip (animated in on hover) */
.fx-renaissance-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg, transparent, #a51313 30%, #a51313 70%, transparent);
    opacity:0;
    transition:opacity .35s ease;
    z-index:3;
}
.fx-renaissance-card:hover::before{opacity:1;}

/* Media area */
.fx-renaissance-card__media{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    /* Stylish fallback pattern shows when image fails to load */
    background:
        radial-gradient(circle at 30% 30%, rgba(165,19,19,.10), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(165,19,19,.06), transparent 50%),
        repeating-linear-gradient(45deg,
            rgba(165,19,19,.04) 0 10px,
            transparent 10px 20px),
        linear-gradient(135deg, #efeff2 0%, #e6e7eb 100%);
}
@supports not (aspect-ratio:1){
    .fx-renaissance-card__media{height:200px;}
}
.fx-renaissance-card__img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center top;
    transform-origin:center top;
    display:block;
    transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .4s ease;
}
.fx-renaissance-card:hover .fx-renaissance-card__img{
    transform:scale(1.06);
    filter:saturate(1.1);
}
/* Soft bottom gradient for icon legibility */
.fx-renaissance-card__media::after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;height:55%;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,.40));
    pointer-events:none;
    z-index:1;
}

/* Floating icon (replaces the legacy red "+" badge) */
.fx-renaissance-card__icon{
    position:absolute;
    bottom:12px;inset-inline-start:12px;
    z-index:2;
    width:42px;height:42px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(165,19,19,.92);
    color:#fff;
    border:2px solid rgba(255,255,255,.85);
    border-radius:50%;
    font-size:15px;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),background .25s ease;
}
.fx-renaissance-card:hover .fx-renaissance-card__icon{
    transform:scale(1.1) rotate(-6deg);
    background:#a51313;
}

/* Footer */
.fx-renaissance-card__footer{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:14px 18px;
    border-top:1px solid rgba(15,23,42,.06);
}
.fx-renaissance-card__title{
    margin:0;
    font-size:14.5px;font-weight:700;
    color:#15202b;
    letter-spacing:.2px;
    line-height:1.4;
    transition:color .25s ease;
    /* Single-line clamp keeps the grid tidy */
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.fx-renaissance-card:hover .fx-renaissance-card__title{color:#a51313;}

.fx-renaissance-card__arrow{
    flex-shrink:0;
    width:8px;height:8px;
    border-top:2px solid #b0b8c2;
    border-inline-end:2px solid #b0b8c2;
    transform:rotate(-135deg);
    transition:transform .3s ease,border-color .3s ease,margin .3s ease;
}
[dir="ltr"] .fx-renaissance-card__arrow{transform:rotate(45deg);}
.fx-renaissance-card:hover .fx-renaissance-card__arrow{
    border-color:#a51313;
    margin-inline-end:-4px;
}

/* ===== Slider plugin polish (arrows / dots) =====
   The plugin renders default arrows/dots; force a clean look. */
.fx-renaissance .slick-arrow,
.fx-renaissance .horizontal-slider .slick-arrow{
    width:38px;height:38px;
    border-radius:50%;
    background:#fff !important;
    border:1px solid rgba(15,23,42,.10);
    color:#a51313 !important;
    box-shadow:none !important;
    z-index:4;
    transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.fx-renaissance .slick-arrow:hover{
    background:#a51313 !important;
    border-color:#a51313;
    color:#fff !important;
    transform:scale(1.06);
}
.fx-renaissance .slick-dots{
    margin-top:18px;text-align:center;
    display:flex;justify-content:center;gap:6px;
    list-style:none;padding:0;
}
.fx-renaissance .slick-dots li{margin:0;}
.fx-renaissance .slick-dots li button{
    width:22px;height:4px;border-radius:4px;border:0;
    background:rgba(15,23,42,.18);
    text-indent:-9999px;overflow:hidden;cursor:pointer;
    padding:0;
    transition:background .25s ease,width .25s ease;
}
.fx-renaissance .slick-dots li.slick-active button,
.fx-renaissance .slick-dots li button:hover{
    background:#a51313;
    width:30px;
}

/* ===== Responsive ===== */
@media (max-width:991px){
    .fx-renaissance{padding:50px 0 60px;}
    .fx-renaissance .heading.main-heading h4.sub-title{font-size:26px;}
}
@media (max-width:520px){
    .fx-renaissance-card__footer{padding:12px 14px;}
    .fx-renaissance-card__title{font-size:13.5px;}
    .fx-renaissance-card__icon{width:36px;height:36px;font-size:13px;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-renaissance-card,
    .fx-renaissance-card__img,
    .fx-renaissance-card__icon,
    .fx-renaissance-card__title,
    .fx-renaissance-card__arrow{
        transition:none !important;
    }
    .fx-renaissance-card:hover{transform:none !important;}
    .fx-renaissance-card:hover .fx-renaissance-card__img{transform:none !important;}
}