/* ================================================================
   Must See Places Slider — slider.css
   Font: Helvetica | Palette: warm orange / amber / deep dark
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
.msp-section {
    --msp-accent:   #F97316;
    --msp-amber:    #FBBF24;
    --msp-dark:     #111110;
    --msp-surface:  #1C1B18;
    --msp-text:     #F5F0E8;
    --msp-muted:    #A09880;
    --msp-radius:   18px;
    --msp-gap:      24px;
    --msp-card-w:   320px;
    --msp-card-h:   480px;
    --msp-ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper ────────────────────────────────────────────────── */
.msp-section {
    display:          flex;
    align-items:      center;
    gap:              56px;
    background:       var(--msp-dark);
    padding:          48px 56px;
    font-family:      Helvetica Neue, Helvetica, Arial, sans-serif;
    overflow:         hidden;
    box-sizing:       border-box;
    width:            100%;
    height:           80vh;
}

/* ── Left panel ─────────────────────────────────────────────── */
.msp-left {
    flex:       0 0 240px;
    min-width:  0;
}

.msp-heading {
    font-size:      3rem;
    font-weight:    800;
    line-height:    1.05;
    color:          var(--msp-text);
    margin:         0 0 16px;
    letter-spacing: -0.03em;
}

.msp-subtext {
    font-size:   0.95rem;
    color:       var(--msp-muted);
    line-height: 1.6;
    margin:      0 0 36px;
}

/* ── Nav buttons ─────────────────────────────────────────────── */
.msp-nav {
    display:    flex;
    gap:        10px;
}

.msp-btn-nav {
    width:            42px;
    height:           42px;
    border-radius:    50%;
    border:           2px solid rgba(249,115,22,.35);
    background:       transparent;
    color:            var(--msp-accent);
    font-size:        1.1rem;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background 0.2s var(--msp-ease),
                      border-color 0.2s var(--msp-ease),
                      color 0.2s var(--msp-ease);
}

.msp-btn-nav:hover,
.msp-btn-nav:focus-visible {
    background:   var(--msp-accent);
    border-color: var(--msp-accent);
    color:        #fff;
    outline:      none;
}

/* ── Track wrapper ───────────────────────────────────────────── */
.msp-track-wrap {
    flex:     1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

/* fade edges */
.msp-track-wrap::after {
    content:    '';
    position:   absolute;
    inset:      0;
    right:      0;
    background: linear-gradient(to right, transparent 88%, var(--msp-dark));
    pointer-events: none;
    z-index:    2;
}

/* ── Track ───────────────────────────────────────────────────── */
.msp-track {
    display:    flex;
    gap:        var(--msp-gap);
    transition: transform 0.55s var(--msp-ease);
    will-change: transform;
}

/* ── Card ────────────────────────────────────────────────────── */
.msp-card {
    flex:           0 0 var(--msp-card-w);
    height:         var(--msp-card-h);
    border-radius:  var(--msp-radius);
    overflow:       hidden;
    position:       relative;
    cursor:         pointer;
    transition:     transform 0.35s var(--msp-ease);
}

.msp-card:hover {
    transform: translateY(-6px) scale(1.02);
}

/* image */
.msp-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.55s var(--msp-ease);
}

.msp-card:hover img {
    transform: scale(1.07);
}

/* overlay */
.msp-card::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(17,17,16,.92) 0%,
        rgba(17,17,16,.3)  50%,
        transparent        100%
    );
    z-index:    1;
}

/* card body */
.msp-card-body {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    28px 24px;
    z-index:    2;
}

.msp-card-sub {
    display:        block;
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--msp-amber);
    margin-bottom:  4px;
}

.msp-card-title {
    font-size:      1.5rem;
    font-weight:    800;
    color:          var(--msp-text);
    margin:         0 0 8px;
    letter-spacing: -0.02em;
    line-height:    1.1;
}

.msp-card-desc {
    font-size:   0.88rem;
    color:       rgba(245,240,232,.65);
    margin:      0 0 18px;
    line-height: 1.5;
}

/* ── CTA button ──────────────────────────────────────────────── */
.msp-cta {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          8px 18px;
    border-radius:    40px;
    background:       linear-gradient(135deg, var(--msp-accent), var(--msp-amber));
    color:            #fff;
    font-size:        0.78rem;
    font-weight:      700;
    font-family:      inherit;
    letter-spacing:   0.04em;
    text-decoration:  none;
    transition:       opacity 0.2s var(--msp-ease),
                      transform 0.2s var(--msp-ease);
}

.msp-cta:hover,
.msp-cta:focus-visible {
    opacity:  0.88;
    transform: translateX(2px);
    outline:   none;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .msp-section {
        flex-direction: column;
        align-items:    flex-start;
        padding:        48px 28px;
        gap:            32px;
    }
    .msp-left { flex: none; width: 100%; }
    .msp-heading { font-size: 2.2rem; }
    .msp-track-wrap::after { display: none; }
}

@media (max-width: 520px) {
    .msp-section {
        --msp-card-w: 240px;
        --msp-card-h: 360px;
        padding: 36px 16px;
    }
}