/* DS Urban Nest – Steps Widget (dsun-steps) v1.1.0 */

/* ── SECTION WRAP ─────────────────────────────────────────────────── */
.dss-wrap {
    padding: 100px 0;
    background: #f5f5f5;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* FIX: prevents horizontal scroll on mobile */
}

/* auto-container fix — Palace theme sometimes lacks mobile padding */
.dss-wrap .auto-container {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.dss-rule {
    display: block;
    width: 44px;
    height: 3px;
    background: var(--main-color);
    margin: 14px auto 52px;
}

/* ── GRID ─────────────────────────────────────────────────────────── */
/*
 * FIX: The "columns" Elementor control now sets --dss-cols on the
 * widget wrapper (not directly on .dss-grid), so no inline style
 * ever fights our media queries. The grid reads --dss-cols with a
 * fallback of 3. On tablet/mobile the media queries override via
 * !important as normal — no inline specificity conflict.
 */
.dss-grid {
    display: grid;
    grid-template-columns: repeat(var(--dss-cols, 3), 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ── CARD ─────────────────────────────────────────────────────────── */
.dss-card {
    position: relative;
    padding: 30px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow 400ms ease, transform 400ms ease;
    min-width: 0;
    word-break: break-word;
    box-sizing: border-box;
}
.dss-card:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.10);
    transform: translateY(-5px);
}

/* ── HOVER BG ────────────────────────────────────────────────────── */
.dss-card-bg {
    position: absolute;
    inset: 0;
    background: var(--color-two, #17171a);
    transform: scale(0, 1);
    transform-origin: right center;
    transition: transform 400ms ease;
    z-index: 0;
    border-radius: 12px;
}
.dss-card:hover .dss-card-bg {
    transform: scale(1, 1);
    transform-origin: left center;
}

.dss-badge, .dss-icon, .dss-title, .dss-divider, .dss-desc {
    position: relative;
    z-index: 1;
}

/* ── BADGE ───────────────────────────────────────────────────────── */
.dss-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.dss-badge-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--main-color);
    flex-shrink: 0;
}

/* ── ICON ────────────────────────────────────────────────────────── */
.dss-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(170,170,170,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: background 400ms ease, box-shadow 400ms ease;
}
.dss-card:hover .dss-icon {
    background: var(--main-color);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.dss-icon-inner { display: flex; align-items: center; justify-content: center; }
.dss-icon-inner i {
    font-size: 26px;
    color: var(--main-color);
    font-family: 'Font Awesome 5 Free','Font Awesome 6 Free',FontAwesome,sans-serif;
    font-weight: 900;
    line-height: 1;
    transition: color 400ms ease;
}
.dss-icon-inner svg {
    width: 26px; height: 26px;
    color: var(--main-color);
    fill: currentColor;
    transition: color 400ms ease;
}
.dss-card:hover .dss-icon-inner i,
.dss-card:hover .dss-icon-inner svg { color: #fff; }

/* ── TITLE ───────────────────────────────────────────────────────── */
.dss-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-two);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin: 0 0 14px;
    transition: color 400ms ease;
}
.dss-card:hover .dss-title { color: #fff; }

/* ── DIVIDER ─────────────────────────────────────────────────────── */
.dss-divider {
    display: block;
    width: 32px;
    height: 2px;
    background: rgba(0,0,0,0.10);
    margin-bottom: 14px;
    transition: width 400ms ease, background 400ms ease;
}
.dss-card:hover .dss-divider { width: 48px; background: var(--main-color); }

/* ── DESC ────────────────────────────────────────────────────────── */
.dss-desc {
    font-size: 14px;
    color: var(--color-two);
    opacity: 0.60;
    line-height: 1.80;
    margin: 0;
    transition: color 400ms ease, opacity 400ms ease;
}
.dss-card:hover .dss-desc { color: rgba(255,255,255,0.65); opacity: 1; }


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   
   Old bug: "columns" control used selectors: { '{{WRAPPER}} .dss-grid' =>
   'grid-template-columns: repeat({{VALUE}}, 1fr);' }
   This injected an INLINE style on .dss-grid. Inline styles have
   specificity 1,0,0,0 and win over all stylesheet rules including
   those with !important (inline beats !important in the same cascade).
   So mobile media queries were silently ignored — grid stayed 3-col.
   
   Fix: control now sets --dss-cols on {{WRAPPER}} (the Elementor div),
   and .dss-grid reads it via repeat(var(--dss-cols, 3), 1fr).
   No inline style on .dss-grid → breakpoints with !important win cleanly.
════════════════════════════════════════════════════════════════════ */

/* ── TABLET 1024px ───────────────────────────────────────────────── */
@media only screen and (max-width: 1024px) {
    .dss-grid,
    .elementor-widget-dsun_steps .dss-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ── MOBILE 767px ────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {

    .dss-wrap {
        padding: 60px 0;
    }
    /* Ensure auto-container has breathing room on small screens */
    .dss-wrap .auto-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .dss-rule {
        margin-bottom: 36px;
    }

    /* Force single column — beats Elementor inline style */
    .dss-grid,
    .elementor-widget-dsun_steps .dss-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .dss-card {
        padding: 24px 20px !important;
        /* Disable lift animation on touch — no hover state on mobile */
        transform: none !important;
    }
    .dss-card:hover {
        transform: none !important;
        box-shadow: 0 0 20px rgba(0,0,0,0.05) !important;
    }

    /* Disable slide-in hover bg on touch devices — looks broken on tap */
    .dss-card-bg {
        display: none !important;
    }

    /* Reset all hover colour changes since .dss-card-bg is hidden */
    .dss-card:hover .dss-title  { color: var(--color-two) !important; }
    .dss-card:hover .dss-desc   { color: var(--color-two) !important; opacity: 0.60 !important; }
    .dss-card:hover .dss-icon   { background: rgba(170,170,170,0.10) !important; box-shadow: none !important; }
    .dss-card:hover .dss-icon-inner i,
    .dss-card:hover .dss-icon-inner svg { color: var(--main-color) !important; }
    .dss-card:hover .dss-divider { width: 32px !important; background: rgba(0,0,0,0.10) !important; }

    .dss-title  { font-size: 15px !important; }
    .dss-badge  { margin-bottom: 16px !important; }
    .dss-icon   { width: 52px !important; height: 52px !important; margin-bottom: 18px !important; }
    .dss-icon-inner i   { font-size: 22px !important; }
    .dss-icon-inner svg { width: 22px !important; height: 22px !important; }
}

/* ── SMALL MOBILE 420px ─────────────────────────────────────────── */
@media only screen and (max-width: 420px) {
    .dss-wrap { padding: 48px 0; }
    .dss-wrap .auto-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .dss-card { padding: 20px 16px !important; }
    .dss-title { font-size: 14px !important; }
    .dss-desc  { font-size: 13px !important; }
}