/* ==========================================================================
   Component: service card  (<x-site.service-card>)
   --------------------------------------------------------------------------
   Photo (16:10, zooms on hover) · dot + number · name · summary · details →.
   --accent is the service's colour: the dot, the top line that grows on
   hover, and a thin colour rule under the photo.
   ========================================================================== */

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out);
}
.service-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-slow) var(--ease-out);
}
[dir="ltr"] .service-card::before { transform-origin: left; }
.service-card:hover { color: var(--ink); border-color: var(--ink); }
.service-card:hover::before { transform: scaleX(1); }

.service-card__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 3px solid var(--accent); background: var(--panel); }
.service-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.service-card:hover .service-card__photo img { scale: 1.06; }

.service-card__body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; padding: var(--space-5) var(--space-6) var(--space-6); }
.service-card__meta { display: flex; align-items: center; gap: var(--space-2); }
.service-card__num { color: var(--ink-faint); font-size: 0.75rem; font-weight: 600; }
.service-card__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 400; line-height: 1.35; }
.service-card__summary { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.service-card__facts { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; }
.service-card__facts .icon { color: var(--second-text); }
.service-card__more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); color: var(--second-text); font-size: var(--fs-sm); font-weight: 500; }
.service-card__more .icon { transition: transform var(--dur) var(--ease-out); }
.service-card:hover .service-card__more .icon { transform: translateX(-4px); }
[dir="ltr"] .service-card__more .icon { scale: -1 1; }
[dir="ltr"] .service-card:hover .service-card__more .icon { transform: translateX(4px); }