/* Directory Card composes Flux Card, Content Card, Icon and Button.
   Only the category layout is owned here; child components retain their contracts. */
.octopus-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-layout-xs);
    align-items: start;
}
/* Optional four-column board: missing columns leave balanced space on both sides. */
.octopus-directory-grid[data-layout="centered"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.octopus-directory-grid[data-layout="centered"] > * {
    flex: 0 0 calc((100% - 3 * var(--space-layout-xs)) / 4);
    min-width: min(100%, 16rem);
    max-width: 100%;
}
@media (max-width: 639px) {
    .octopus-directory-grid[data-layout="centered"] > * { flex-basis: 100%; }
}
.octopus-directory-card[data-octopus-directory-card] {
    display: flex;
    flex-direction: column;
    align-self: start;
    min-width: 0;
    height: auto;
    border-radius: var(--shape-radius-editorial-card);
    gap: var(--space-layout-xs);
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    overflow-wrap: anywhere;
}
.octopus-directory-card__heading {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--space-component-xs) * 1.5);
}
.octopus-directory-card__title {
    white-space: pre-line;
    min-width: 0;
    margin: 0;
    font-size: var(--type-heading-3-size);
    font-weight: var(--type-heading-3-weight);
    line-height: var(--type-heading-3-leading);
    letter-spacing: var(--type-heading-3-tracking);
}
.octopus-directory-card__icon {
    flex: none;
    width: var(--space-layout-xs);
    height: var(--space-layout-xs);
    margin-block-start: calc((var(--type-heading-3-size) * var(--type-heading-3-leading) - var(--space-layout-xs)) / 2);
}
.octopus-directory-card__items {
    display: grid;
    gap: var(--space-component-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}
.octopus-directory-card__items > li { min-width: 0; }
.octopus-directory-contact-card__logo {
    display: block;
    width: var(--directory-contact-logo-width, calc(var(--space-layout-lg) * 2.5));
    max-width: 100%;
    height: var(--directory-contact-logo-height, var(--control-height-md));
    margin-inline: var(--directory-contact-logo-margin-inline, 0);
    object-fit: contain;
    object-position: var(--directory-contact-logo-object-position, left center);
    filter: brightness(0) invert(1);
}