/* ============================================================
   Card de case — foto real em 4:5, vidro escuro embaixo com segmento,
   cliente e o título (partials/case-card.php).
   ============================================================ */

.case-card {
    position: relative;
    isolation: isolate;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--night);
    box-shadow: var(--shadow-lift);
    color: #FFFFFF;
}

.case-card__photo,
.case-card__placeholder {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
}

.case-card__photo {
    object-fit: cover;
    transition: transform var(--dur-slower) var(--ease-out-expo);
}

/* Escurece só a metade de baixo: o vidro é translúcido, e foto clara
   (telhado ao sol, céu) tiraria o contraste do texto branco. */
.case-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(17, 17, 20, 0) 35%, rgba(17, 17, 20, 0.62) 100%);
}

/* Case sem foto no admin: campo roxo com o camaleão, nunca um buraco. */
.case-card__placeholder {
    overflow: hidden;
    background: var(--brand-deep) var(--field-purple);
}
.case-card__placeholder .cam-mark {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06));
    opacity: 1;
}

.case-card__panel {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5) calc(var(--space-5) + 40px) var(--space-5) var(--space-5);
    border-radius: calc(var(--radius-card) - 12px);
}

.case-card__segment { color: var(--lilac-soft); }

.case-card__client {
    font-family: var(--font-title);
    font-size: var(--fs-2xl);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.case-card__title {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}
.case-card__title::first-letter { text-transform: uppercase; }

.case-card__title em {
    font-style: normal;
    font-weight: 700;
    color: var(--lilac);
}

.case-card__arrow {
    position: absolute;
    top: var(--space-5);
    right: var(--space-4);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    transition: background-color var(--dur-base) var(--ease-apple), transform var(--dur-base) var(--ease-apple);
}
.case-card__arrow svg { width: 15px; height: 15px; }

@media (hover: hover) {
    .case-card:hover .case-card__photo { transform: scale(1.04); }
    .case-card:hover .case-card__arrow { background: var(--brand); transform: rotate(45deg); }
}