/* Global Defaults */
.tc-service-box-container {
    display: grid;
    /* Grid columns are set via Elementor control */
}

.tc-service-box {
    position: relative;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    /* Equal height items */
    display: flex;
    flex-direction: column;
}

.tc-service-box * {
    box-sizing: border-box;
}

.tc-sb-content-inner {
    display: flex;
    flex-direction: column;
    /* Default stack, adjusted by icon position */
    height: 100%;
}

.tc-sb-media {
    flex-shrink: 0;
    line-height: 1;
}

.tc-sb-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* --- Icon Positioning Logic --- */

/* TOP Position: Simple stack */
.tc-icon-position-top .tc-sb-content-inner {
    flex-direction: column;
}

/* LEFT Position: Row layout */
.tc-icon-position-left .tc-sb-content-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    /* Default align top */
}

/* LEFT Position specific adjustments */
.tc-icon-position-left .tc-sb-media {
    /* Margin handled by responsive control: margin-right: ... */
}

.tc-icon-position-left .tc-sb-title {
    /* Title should be at the top of the info block */
    margin-top: -5px;
    /* Visual alignment fix with icon if needed */
}


/* --- Styles / Skins --- */

/* Style 1: Corner Shape (Mockup Match) */
.tc-service-box-style-1 {
    /* Standard box with corner */
}

.tc-service-box-style-1::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background-color: #1e73be;
    /* Default, overridden by control */
    border-radius: 50%;
    z-index: 0;
}

.tc-service-box-style-1 .tc-sb-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-self: flex-start;
    /* Do not stretch */
}


/* Style 2: Centered Card (Best for Top Icon) */
.tc-service-box-style-2 {
    /* Alignment controlled by Content Alignment setting, but Style 2 implies center usually */
    /* We adhere to the global content alignment control, but user can choose Center */
}

/* Style 3: Minimal Border (Simple border, no fancy background) */
.tc-service-box-style-3 {
    border: 1px solid #eee;
    background: transparent;
}


/* Style 4: Solid Box (Stronger background, shadow default) */
.tc-service-box-style-4 {
    /* Just standard box style */
}


/* Style 5: Hover Slide (Content slides up on hover) */
.tc-service-box-style-5 {
    padding-bottom: 60px;
    /* Space for hidden link */
}

.tc-service-box-style-5 .tc-sb-link {
    position: absolute;
    bottom: -30px;
    left: 30px;
    /* Match padding roughly */
    opacity: 0;
    transition: all 0.3s ease;
}

/* Fix for Left Position in Style 5: Link needs to be absolute relative to box */
.tc-icon-position-left .tc-service-box-style-5 .tc-sb-link {
    /* This style might be tricky with Left Icon if we want absolute positioning. 
       Let's keep it simple: Slide up works best with Top/Column layout.
       If Left: Icon stays, Text slides? 
       For now, apply simple transform. */
}

.tc-service-box-style-5:hover .tc-sb-link {
    bottom: 30px;
    /* Adjust based on padding */
    opacity: 1;
}

.tc-service-box-style-5:hover {
    transform: translateY(-5px);
}

/* --- Common Typography --- */
.tc-sb-title {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 700;
}

.tc-sb-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    flex: 1;
    /* Pushes link to bottom if flex column */
}

.tc-sb-link {
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Responsive Grid (Elementor handles this via .elementor-grid usually, but we use custom grid) */
@media (max-width: 1024px) {
    .tc-service-box-container {
        /* Fallback or specific adjustments if needed */
    }
}

@media (max-width: 767px) {
    .tc-service-box-container {
        grid-template-columns: 1fr !important;
        /* Force 1 column on mobile by default usually, unless user sets control */
    }
}