.cdj-dir {
margin: 1.5rem 0 2rem;
}
.cdj-dir__loading {
padding: 0.75rem 1rem;
margin-bottom: 0.75rem;
text-align: center;
background: rgba(30, 58, 95, 0.06);
border-radius: 8px;
font-size: 0.95rem;
}
.cdj-dir__layout {
display: grid;
gap: 1.25rem;
}
@media (min-width: 900px) {
.cdj-dir__layout {
grid-template-columns: minmax(260px, 300px) 1fr;
align-items: start;
}
}
.cdj-dir__sidebar-loading,
.cdj-dir__loading-inline {
font-size: 0.95rem;
color: #555;
margin: 0;
}
.cdj-dir__filters-title {
margin: 0 0 0.65rem;
font-size: 1rem;
font-weight: 600;
color: #1e3a5f;
}
.cdj-dir__filters {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cdj-dir__row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.cdj-dir__row--toolbar {
flex-direction: column;
align-items: stretch;
}
.cdj-dir__row--geo {
flex-direction: column;
align-items: stretch;
padding-top: 0.65rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cdj-dir__check-label {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.92rem;
cursor: pointer;
}
.cdj-dir__input-search,
.cdj-dir__filters select {
width: 100%;
max-width: 100%;
padding: 0.5rem 0.65rem;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 8px;
font-size: 0.95rem;
min-height: 2.5rem;
}
.cdj-dir__btn-around.is-active {
box-shadow: inset 0 0 0 2px #fff;
}
.cdj-dir__geo-status {
margin: 0;
font-size: 0.88rem;
color: #6b4a00;
}
.cdj-dir__map-wrap {
margin-bottom: 1rem;
position: relative;
}
.cdj-dir__map-hint {
margin: 0 0 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
color: #444;
background: #f6f7f7;
border-radius: 6px;
border-left: 3px solid #1e3a5f;
}
.cdj-dir__map {
height: 200px;
border-radius: 10px;
overflow: hidden;
background: #e8eef4;
z-index: 0;
}
@media (min-width: 600px) {
.cdj-dir__map {
height: 260px;
}
}
.cdj-dir__grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.cdj-dir__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.cdj-dir__card {
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 10px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.cdj-dir__card-thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #eee;
}
.cdj-dir__card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cdj-dir__card-body {
padding: 0.9rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
flex: 1;
}
.cdj-dir__card-title {
margin: 0;
font-size: 1.05rem;
line-height: 1.35;
}
.cdj-dir__card-title a {
text-decoration: none;
color: #1e3a5f;
}
.cdj-dir__card-title a:hover,
.cdj-dir__card-title a:focus {
text-decoration: underline;
}
.cdj-dir__badge {
display: inline-block;
margin-left: 0.35rem;
padding: 0.12rem 0.45rem;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
background: #1e3a5f;
color: #fff;
border-radius: 4px;
vertical-align: middle;
}
.cdj-dir__card-loc,
.cdj-dir__card-meta {
margin: 0;
font-size: 0.88rem;
color: #444;
}
.cdj-dir__card-styles {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.cdj-dir__style-tag {
display: inline-block;
padding: 0.15rem 0.5rem;
font-size: 0.78rem;
background: rgba(30, 58, 95, 0.08);
color: #1e3a5f;
border-radius: 999px;
}
.cdj-dir__rating--new {
font-style: italic;
color: #666;
}
.cdj-dir__card-cta {
margin-top: auto;
align-self: flex-start;
}
.cdj-dir__pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 1.25rem;
}
.cdj-dir__count {
margin: 0;
font-weight: 600;
}
.cdj-dir__empty,
.cdj-dir__error {
padding: 1.25rem;
text-align: center;
color: #444;
background: #f9f9f9;
border-radius: 8px;
}