/*
 * Favorite heart toggle — shared component CSS for common/favorite-project.volt.
 * Pairs with /js/common/favourite-cards.js (localStorage toggle).
 *
 * SHARED across templates (lives in /css/, not a listing_* dir):
 *   - project / listing cards (via common/favorite-projects-assets.volt)
 *   - microsite hero action rows (listing_2040, listing_2047 — each adds a
 *     small position:static override since the default below pins the heart
 *     to a card's corner)
 */
.favorite {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 10;
    overflow: hidden;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    padding: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.favorite label {
    cursor: pointer;
}

.favorite-heart {
    width: 100%;
    height: 100%;
}

.favorite input[type="checkbox"] {
    display: none;
}

.favorite input[type="checkbox"]:checked + .favorite-heart {
    fill: #ef4444;
    stroke: #ef4444;
}

.favorite input[type="checkbox"]:checked + .favorite-heart path {
    fill: inherit;
    stroke: inherit;
}

.favorite-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: white;
    padding: 4px;
    width: 28px;
    height: 28px;
}

/*
 * Favourite CARD layout (cards from common/favorite-projects-assets.volt's
 * #favorite-card-template). Scoped to .favorite-list so it only affects the
 * favourites grid.
 *   - align-items:start stops the grid stretching every card to the tallest one,
 *     which left huge empty gaps between the image and the text.
 *   - .tt-image is an aspect-ratio box (the template gives it a pb-[N%] utility for
 *     the ratio); templates without a global .tt-image (pc_2040/pc_2050) need these
 *     rules so the image fills the box instead of leaving an empty padded square.
 */
.favorite-list { align-items: start; }
.favorite-list .tt-image { position: relative; overflow: hidden; background: #f0f0f0; }
.favorite-list .tt-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}