/* ------------------------------------------------------------------------
   DIRECTORY — institutional listing cards (left sidebar widget)
   Sizing baseline: W = 300px (sidebar min-width).
   Core cards:  W x 1.5W  (300 x 450) — image 300x300, text below 300x150
   Tier cards:  W x 0.5W  (300 x 150) — image 150x150 left, text right
   ------------------------------------------------------------------------ */

.vs01-directory {
    font-family: var(--bs-font-sans-serif);
}

.vs01-dir-tabs {
    margin-bottom: var(--civicinfra-space-3);
}

.vs01-dir-content {
    display: flex;
    flex-direction: column;
    gap: var(--civicinfra-space-3);
}

/* --- Core cards (portrait, 300x450) --- */

.vs01-dir-card-core {
    width: 300px;
    height: 450px;
    border: 1px solid var(--civicinfra-border);
    border-radius: var(--civicinfra-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--civicinfra-bg);
}

.vs01-dir-card-core .vs01-card-image {
    width: 300px;
    height: 300px;
    flex: 0 0 300px;
    overflow: hidden;
}

.vs01-dir-card-core .vs01-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vs01-dir-card-core .vs01-card-body {
    flex: 1;
    padding: var(--civicinfra-space-3) var(--civicinfra-space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.vs01-card-role {
    font-size: var(--civicinfra-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--civicinfra-muted);
    margin-bottom: var(--civicinfra-space-1);
}

.vs01-card-name {
    font-size: var(--civicinfra-fs-sm);
    font-weight: 600;
    color: var(--civicinfra-text);
}

.vs01-card-description {
    font-size: var(--civicinfra-fs-xs);
    color: var(--civicinfra-muted);
    line-height: 1.5;
}

/* --- Tier cards (landscape, 300x150) --- */

.vs01-dir-card-tier {
    width: 300px;
    height: 150px;
    border: 1px solid var(--civicinfra-border);
    border-radius: var(--civicinfra-radius);
    overflow: hidden;
    display: flex;
    background: var(--civicinfra-bg);
}

.vs01-dir-card-tier .vs01-card-image {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    overflow: hidden;
}

.vs01-dir-card-tier .vs01-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vs01-dir-card-tier .vs01-card-body {
    flex: 1;
    padding: var(--civicinfra-space-2) var(--civicinfra-space-3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.vs01-card-desc {
    font-size: var(--civicinfra-fs-xs);
    color: var(--civicinfra-muted);
    line-height: 1.4;
    margin-top: var(--civicinfra-space-1);
}

/* --- Placeholder text (Tier-I/II/Other when empty) --- */

.vs01-dir-placeholder {
    padding: var(--civicinfra-space-3) var(--civicinfra-space-4);
}