.hp-projects tbody tr.hp-project {
    display: table-row !important;
}

.hp-projects tbody tr.hp-project td {
    display: table-cell !important;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

/* Ensure images don't break layout */
.hp-projects tbody tr.hp-project img {
    max-width: 50px;
    height: auto;
    border-radius: 4px;
}

/* Project Single Page - Blog Post Style */

.hp-project__meta-separator {
    color: #ccc;
    font-size: 0.8em;
}

/* Hide project categories on tablet/mobile */
@media (max-width: 1024px) {
    .hp-projects tbody tr.hp-project td.hp-project__categories {
        display: none !important;
    }
}

/* Featured Image - Ensure responsiveness */
/* Featured Image - Force 800x500px aspect/size */
.hp-project__images img {
    width: 100%;
    max-width: 800px;
    height: 500px !important;
    object-fit: cover !important;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    /* Center if container > 800px */
}

/* Project Single - Hero Category Badge */
.hp-project-hero-cats a,
.hp-project-hero-cats span {
    display: inline-block !important;
    text-decoration: none !important;
    position: relative;
    color: #0058a2 !important;
    /* primary-color */
    text-transform: uppercase !important;
    letter-spacing: 1px;
    font-size: 0.6875rem !important;
    /* 11px */
    font-weight: 700 !important;
    white-space: nowrap;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px;
    background-color: rgba(0, 88, 162, 0.1) !important;
    transition: color 0.25s, background-color 0.25s;
}

.hp-project-hero-cats a:hover,
.hp-project-hero-cats span:hover {
    color: #fff !important;
    background-color: #0058a2 !important;
}

/* Project Card Layout */
.hp-project--view-block .hp-project__header {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Image Aspect Ratio (800x500 -> 1.6:1) */
.hp-project--view-block .hp-project__header img {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 500;
    object-fit: cover;
    display: block;
}

/* Status Badge - Top Left Overlay */
.hp-project--view-block .hp-project__badge--status {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    background: #22c55e;
    /* Success Green per example */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    /* Pill shape */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: normal;
}

/* Favorite Heart - Top Right Overlay */
.hp-project--view-block .hp-project__actions--primary {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

/* Heart button – “floating action button” style*/
.hp-project--view-block .hp-project__action--favorite {
    position: relative;
    color: rgba(7, 36, 86, .25);
    background: #fff;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    transition:
        color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .15s ease;
}

/* Heart icon */
.hp-project--view-block .hp-project__action--favorite i {
    margin: 0;
    pointer-events: none;
}

/* Hover – slightly accentuated */
.hp-project--view-block .hp-project__action--favorite:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

/* Active state (when already favorited):
   Add a .is-favorite class from JS / template */
.hp-project--view-block .hp-project__action--favorite.is-favorite {
    background: #fff0f4;
    color: #e11d48;
    /* pink-red */
}

/* Heart pop animation when favorited */
.hp-project--view-block .hp-project__action--favorite.is-favorite i {
    animation: heart-pop 0.25s ease-out;
}

@keyframes heart-pop {
    0% {
        transform: scale(0.7);
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* --- Redesigned Project Card --- */

/* Card Container */
.hp-project--view-block {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hp-project--view-block:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Header (Image) - Already styled, just ensure margin/padding flow */
.hp-project--view-block .hp-project__header {
    margin-bottom: 0;
    /* Content padding handles spacing */
    border-radius: 4px 4px 0 0;
    /* Top radius only */
}

/* Content Area */
.hp-project--view-block .hp-project__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Pushes footer down */
}

.hp-project--view-block .hp-project__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.hp-project--view-block .hp-project__excerpt {
    font-size: 14px;
    color: #627c7c;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Meta Row (Category | Location) */
.hp-project__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-top: auto;
    /* Push to bottom of content before footer */
}

.hp-project__meta .hp-project__location {
    font-size: 0.85rem;
    color: #627c7c;
}

.hp-project__meta .hp-project__location .hp-icon {
    font-size: 0.85rem;
    color: #627c7c;
}

.hp-project__badge.hp-project__badge--category {
    display: inline-block !important;
    text-decoration: none !important;
    position: relative;
    color: #0058a2 !important;
    /* primary-color */
    text-transform: uppercase !important;
    letter-spacing: 1px;
    font-size: 0.6875rem !important;
    /* 11px */
    font-weight: 700 !important;
    white-space: nowrap;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px;
    background-color: rgba(0, 88, 162, 0.1) !important;
    transition: color 0.25s, background-color 0.25s;
}

/* Hide Generic Vendor Styling to apply Custom Footer */
.hp-project--view-block .hp-project__vendor {
    border: none;
    padding: 0;
    box-shadow: none;
}

/* --- Footer Styling (Strict 3-Column Grid) --- */

/* Footer Container: 1/5, 2/5 2/5 Columns */
.hp-project--view-block .hp-project__vendor {
    display: grid !important;
    grid-template-columns: 1fr 2fr 2fr !important;
    align-items: center !important;
    /* General Center */
    padding: 15px 8px 15px 0px;
    border-top: 1px solid #e2e8f0;
    margin-top: 0;
    width: 100%;
    gap: 10px;
    box-sizing: border-box !important;
}

/* Unwrap wrappers so Items become direct Grid Children */
.hp-project--view-block .hp-project__footer-left,
.hp-project--view-block .hp-project__footer-right,
.hp-project--view-block .hp-vendor__info {
    display: contents !important;
}

/* Column 1: Avatar (1/5) */
.hp-project--view-block .hp-vendor__image,
.hp-project--view-block .hp-vendor__image--placeholder {
    grid-column: 1 !important;
    justify-self: start;
    align-self: center !important;
    /* Strict Vertical Center */
    width: 36px;
    flex-shrink: 0;
    order: unset !important;
}

.hp-project--view-block .hp-vendor__image img,
.hp-project--view-block .hp-vendor__image--placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* Fix User's auto width adjustment */
.hp-project--view-block .hp-project__footer-left .hp-vendor__image {
    width: auto;
    margin-bottom: 0;
}

.hp-project--view-block .hp-vendor__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #085ea3, #0058a2);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

/* Column 2: Details (2/5) */
.hp-project--view-block .hp-vendor__details {
    grid-column: 2 !important;
    justify-self: start;
    align-self: center !important;
    /* Strict Vertical Center */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Vertically center content */
    gap: 0;
    line-height: 1.2;
    text-align: left;
    width: 100%;
    order: unset !important;
    margin-right: 0 !important;
    min-height: 36px;
    /* Match avatar height for clean centering */
}

.hp-project--view-block .hp-vendor__name a {
    font-size: 13px;
    font-weight: 600;
    color: #1f2121;
    text-decoration: none;
}

.hp-project--view-block .hp-vendor__category {
    font-size: 11px;
    color: #627c7c;
}

.hp-project--view-block .hp-project__footer-left .hp-vendor__details .hp-vendor__name {
    text-align: left;
    margin-bottom: 0;
}

/* Column 3: Rating (2/5, Aligned Right) */
.hp-project--view-block .hp-vendor__rating {
    grid-column: 3 !important;
    justify-self: end;
    align-self: center !important;
    /* Strict Vertical Center */
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    margin-left: 0 !important;
    /* Remove Auto Margin */
    order: unset !important;
    padding-right: 2px;
    /* Prevent edge clipping */
}

/* Precise Rating Stars (Overlay Method) */
.hp-rating-stars {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.hp-rating-stars .hp-icon {
    font-size: 14px;
    margin-right: 1px;
    color: inherit;
}

/* Base Layer (Grey) */
.hp-rating-stars__base {
    color: #cbd5e1;
    display: flex;
}

/* Fill Layer (Yellow, Clipped) */
.hp-rating-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #fbbf24;
    display: flex;
    z-index: 1;
}

.hp-project--view-block .hp-vendor__rating-value {
    font-size: 12px;
    font-weight: 600;
    color: #1f2121;
    margin-left: 4px;
}

.hp-project--view-block .hp-project__footer-right .hp-vendor__rating {
    position: unset;
}