/* ==========================================================================
   TopAir Electrical — Service Details pages (shared)
   Small, reusable styles for individual service detail pages. Most styling
   is inherited from common-css, services-page.css and airen-theme.css.
   ========================================================================== */

/* Intro / band media */
.sd-media img {
    width: 100%;
    border-radius: var(--ta-radius-lg);
    box-shadow: var(--ta-shadow);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* Related-service cards */
.related-card {
    display: block;
    background: #fff;
    border: 1px solid var(--ta-grey-100);
    border-radius: var(--ta-radius);
    padding: 32px 28px;
    height: 100%;
    box-shadow: var(--ta-shadow-sm);
    transition: transform var(--ta-transition), box-shadow var(--ta-transition), border-color var(--ta-transition);
    color: inherit;
}
.related-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ta-shadow-lg);
    border-color: transparent;
    color: inherit;
}
.related-card .ta-icon { margin-bottom: 18px; }
.related-card:hover .ta-icon { background: var(--ta-gradient); color: #fff; }
.related-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.related-card p { color: var(--ta-muted); font-size: 0.94rem; margin-bottom: 14px; }
.related-card .rl-link {
    font-family: var(--ta-font-head); font-weight: 600;
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ta-blue); display: inline-flex; align-items: center; gap: 6px;
}

/* Band media: constrain aspect ratio so the paired text column
   doesn't get large empty vertical gaps (see "modern living" band). */
.media-frame img { aspect-ratio: 4 / 3; height: auto; }