/* ============================================================
   service-card.css  — Shared card styles for Services & Posts
   listing pages (service.blade.php, post.blade.php)
   RTL-aware via CSS logical properties throughout
   ============================================================ */

.service-card {
    display:        flex;
    flex-direction: column;
    background:     #fff;
    border-radius:  12px;
    overflow:       hidden;
    box-shadow:     0 2px 12px rgba(0,0,0,.08);
    transition:     transform .3s ease, box-shadow .3s ease;
    color:          inherit;
}
.service-card:hover {
    transform:       translateY(-6px);
    box-shadow:      0 10px 28px rgba(0,0,0,.14);
    color:           inherit;
    text-decoration: none;
}

.service-card__image-wrap {
    position: relative;
    overflow: hidden;
    height:   220px;
}

.service-card__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.service-card:hover .service-card__image { transform: scale(1.06); }

.service-card__overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(to top, rgba(34,66,41,.55) 0%, transparent 60%);
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    padding-bottom:  1rem;
    opacity:         0;
    transition:      opacity .3s ease;
}
.service-card:hover .service-card__overlay { opacity: 1; }

.service-card__icon {
    font-size: 2rem;
    color:     #fff;
}

.service-card__body {
    padding:        1.25rem 1.5rem 1.5rem;
    display:        flex;
    flex-direction: column;
    flex:           1;
}

.service-card__title {
    font-size:     1.15rem;
    font-weight:   700;
    color:         #224229;
    margin-bottom: .5rem;
}

.service-card__text {
    font-size:     .9rem;
    color:         #555;
    line-height:   1.6;
    flex:          1;
    margin-bottom: 1rem;
}

.service-card__btn {
    display:              inline-flex;
    align-items:          center;
    font-size:            .88rem;
    font-weight:          600;
    color:                #224229;
    border-block-end:     2px solid transparent; /* logical → RTL safe */
    padding-block-end:    2px;
    transition:           border-color .25s ease;
    align-self:           flex-start;
}
.service-card:hover .service-card__btn { border-color: #224229; }