/* Phase 5 — directory project detail page. */
.directory-project { padding: 32px 0; }

.directory-project-header { margin-bottom: 24px; }
.directory-project-title { margin: 0 0 4px; font-size: 28px; }
.directory-project-subtitle { margin: 0 0 8px; color: #6b7280; font-size: 16px; }
.directory-project-address { margin: 8px 0; color: #374151; }
.directory-project-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.directory-project-badges .badge { font-size: 12px; }

.directory-project-gallery { margin: 24px 0; }
.directory-project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.directory-project-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    background: #f3f4f6;
}
.directory-project-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.directory-project-gallery-item:hover img { transform: scale(1.04); }
.directory-project-gallery-meta { margin-top: 8px; color: #9ca3af; font-size: 13px; }
.directory-project-gallery-empty {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 32px 16px;
    text-align: center;
}

.directory-project-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 24px;
}
.directory-project-main h2 { font-size: 20px; margin-top: 24px; }
.directory-project-details {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 4px;
    margin: 12px 0;
}
.directory-project-details dt { color: #6b7280; }
.directory-project-details dd { margin: 0; }

.directory-project-map {
    height: 360px;
    border-radius: 8px;
    overflow: hidden;
    z-index: 0;
    margin-top: 8px;
}

.directory-project-aside { font-size: 14px; }
.directory-nearby h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin: 16px 0 8px;
}
.directory-nearby-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.directory-nearby-list li {
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
}
.directory-nearby-line {
    background: #1976d2;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
}
.directory-nearby-name { flex: 1; }
.directory-nearby-distance { color: #9ca3af; font-size: 12px; }
.directory-nearby-cat {
    font-size: 13px;
    margin: 12px 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--cat-color, #2563eb);
}
.directory-nearby-list--compact li { padding: 3px 0; }

.directory-project-listings-title { font-size: 20px; margin-top: 32px; }
.directory-project-listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.directory-project-listing {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: #fff;
    transition: box-shadow .2s;
}
.directory-project-listing:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.directory-project-listing img,
.directory-project-listing-noimage {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 13px;
}
.directory-project-listing-body { padding: 8px 12px; }
.directory-project-listing-price { display: block; color: #6b7280; font-size: 13px; }

@media (max-width: 768px) {
    .directory-project-grid { grid-template-columns: 1fr; }
    .directory-project-aside { order: 2; }
    .directory-project-map { height: 280px; }
    .directory-project-details { grid-template-columns: 120px 1fr; }
}