/* Service-page diagnostics, assessment, damage, and examples. */

/* Service-page tokens */
:root {
    --issue-icon-size: 20px;
}

/* Diagnostics */
.issue-list li {
    position: relative;
    padding: var(--space-s);
    padding-inline-start: var(--space-2xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    font-size: var(--font-m);
    line-height: 1.4;
    list-style: none;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(17, 24, 39, var(--a-xs));
}

.issue-list li::before {
    content: "";
    position: absolute;
    inset-block-start: calc( var(--space-s) + ( 1lh - var(--issue-icon-size) ) / 2 );
    inset-inline-start: var(--space-s);
    width: var(--issue-icon-size);
    height: var(--issue-icon-size);
    background: url("/assets/media/icons/exclamation.svg") center / contain no-repeat;
}

/* Assessment cards */
.fit-card {
    --fit-rgb: 107, 114, 128;
    --fit-title: var(--text);
    position: relative;
    overflow: hidden;
    padding: var(--space-l);
    border: 1px solid rgba( var(--fit-rgb), var(--a-xl) );
    background: radial-gradient( circle at 85% 0%, rgba( var(--fit-rgb), var(--a-l) ), transparent 38% ), linear-gradient( 180deg, rgba( var(--fit-rgb), var(--a-m) ), rgba( var(--fit-rgb), var(--a-xs) ) );
}

.fit-card::after {
    content: "";
    position: absolute;
    inset-block-start: -60px;
    inset-inline-end: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba( var(--fit-rgb), var(--a-l) ), transparent 70% );
    pointer-events: none;
}

.fit-card.fit-good {
    --fit-rgb: 34, 197, 94;
    --fit-title: #14532d;
}

.fit-card.fit-check {
    --fit-rgb: 245, 158, 11;
    --fit-title: #78350f;
}

.fit-card.fit-bad {
    --fit-rgb: 239, 68, 68;
    --fit-title: #7f1d1d;
}

.fit-card h4 {
    position: relative;
    z-index: 1;
    color: var(--fit-title);
}

.fit-card p {
    position: relative;
    z-index: 1;
    color: var(--text-soft);
}

/* Complex damage cards */
.service-damage-card {
    --service-damage-rgb: 107, 114, 128;
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: var(--space-xl);
    border-color: rgba( var(--service-damage-rgb), var(--a-xl) );
    background: radial-gradient( circle at top right, rgba( var(--service-damage-rgb), var(--a-l) ), transparent 42% ), var(--surface);
}

.service-damage-previous {
    --service-damage-rgb: 245, 158, 11;
}

.service-damage-water {
    --service-damage-rgb: 59, 130, 246;
}

.service-damage-heat {
    --service-damage-rgb: 239, 68, 68;
}

/* Repair examples */
.case-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color var(--transition-purple-glow), box-shadow var(--transition-purple-glow);
}

.case-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    border-block-end: 1px solid var(--border-soft);
}

.case-media[data-popup-open]::before {
    border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.js .case-card.reveal {
    transition: opacity var(--transition-slow), transform var(--transition-slow), border-color var(--transition-purple-glow), box-shadow var(--transition-purple-glow);
}

.card:has(.case-image) {
    padding: 0;
}

/* Responsive layout */
@media (max-width: 699px) {
    .service-damage-card {
        padding: var(--space-l);
    }
}