/**
 * Service Card Widget — Stylesheet
 *
 * All rules are scoped to .scw-card so they never
 * bleed into other parts of your theme.
 *
 * Color overrides from Elementor's Style tab are
 * injected via inline <style> using {{VALUE}} selectors
 * and will automatically win specificity here.
 */

/* ── Base card ──────────────────────────────────────────────── */
.scw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;                        /* overridden by gap_between control */
    padding: 36px 40px;               /* overridden by card_padding control */
    background-color: #111111;        /* overridden by card_bg_color control */
    border: 1px solid #2a2a2a;        /* overridden by card_border control */
    border-radius: 6px;               /* overridden by card_border_radius control */
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    cursor: pointer;
    /* Transition covers bg, border, box-shadow */
    transition: background-color 300ms ease,
                border-color 300ms ease,
                box-shadow 300ms ease;
}

.scw-card:hover {
    background-color: #161616;        /* overridden by card_bg_color_hover */
    border-color: rgba(201, 168, 76, 0.5); /* overridden by card_border_color_hover */
}

/* ── Animated left accent bar ───────────────────────────────── */
.scw-accent {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;                       /* overridden by accent_bar_width control */
    height: 100%;
    background-color: #C9A84C;        /* overridden by accent_color control */
    transform: scaleY(0);
    transform-origin: bottom;         /* overridden by accent_bar_origin control */
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.scw-card:hover .scw-accent {
    transform: scaleY(1);
}

/* ── Number badge ───────────────────────────────────────────── */
.scw-number {
    display: block;
    font-size: 13px;                  /* overridden by number_typography control */
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4a3f1e;                   /* overridden by number_color control */
    transition: color 300ms ease;
    line-height: 1;
}

.scw-card:hover .scw-number {
    color: #C9A84C;                   /* overridden by accent_color control */
}

/* ── Bottom row: title + arrow ──────────────────────────────── */
.scw-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

/* ── Service title ──────────────────────────────────────────── */
.scw-title {
    flex: 1;
    display: block;
    font-size: 22px;                  /* overridden by title_typography control */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: #e8e4dc;                   /* overridden by title_color control */
    transition: color 300ms ease;
    /* Prevent very long titles from squashing the arrow */
    overflow-wrap: break-word;
    word-break: break-word;
}

.scw-card:hover .scw-title {
    color: #ffffff;                   /* overridden by title_color_hover control */
}

/* ── Arrow circle button ────────────────────────────────────── */
.scw-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;                      /* overridden by arrow_size control */
    height: 44px;
    border-radius: 50%;
    border: 1px solid #2a2a2a;        /* overridden by arrow_border_color control */
    color: #5a5550;                   /* overridden by arrow_color control */
    background-color: transparent;
    transition: background-color 300ms ease,
                border-color 300ms ease,
                transform 300ms ease,
                color 300ms ease;
}

.scw-arrow svg {
    width: 16px;                      /* overridden by arrow_icon_size control */
    height: 16px;
    display: block;
    stroke: currentColor;
}

.scw-card:hover .scw-arrow {
    background-color: #C9A84C;        /* overridden by accent_color control */
    border-color: #C9A84C;
    color: #000000;                   /* overridden by arrow_color_hover control */
    transform: rotate(45deg);         /* overridden by arrow_rotate_hover control */
}

/* ── Focus-visible for keyboard accessibility ───────────────── */
.scw-card:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 3px;
}

/* ── Elementor editor: prevent the card from being unclickable  */
.elementor-editor-active .scw-card {
    pointer-events: none;
}