/* =============================================================================
   Mount Pleasant - DIRECTORY overrides
   Loaded by SiteDirectory.cshtml as {SiteDomainkey}-directory-<version>.css,
   after default-directory.css, so it overrides the shared layout.

   WHY THIS IS A SEPARATE, VERSIONED FILE:
   CloudFront in front of this app ignores the query string, so a `?v=` bump
   ships nothing and a changed file can serve stale for up to 24 hours. The only
   reliable way to release a static asset is to change its FILENAME. Keeping
   these rules out of mountpleasant.css means the long-lived theme file never
   has to be renamed, while this file, which has no history worth preserving,
   can be renamed as often as needed.

   TO RELEASE A CHANGE: rename this file with a new date suffix AND bump
   DirectoryCssVersion in SiteDirectory.cshtml. Do the rename in its own commit
   with no content change, so git rename detection stays reliable.
   ============================================================================= */

/* =============================================================================
   Directory customization (client feedback, 2026-08)
   Card grid instead of one full-width row per business. Scoped under
   .bia-directory and loaded after default-directory.css, so no other BIA site
   is affected. Target look: logo across the top of the card, category label
   above the name, description clamped to a few lines, action at the foot.
   ============================================================================= */

.bia-directory {
    background-color: #f4f8fa;
    color: #033655;
}

/* Grid shell: fills whatever width the host gives it, wider than the old 1100px */
.bia-directory .business-list {
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
    padding: 8px 16px 24px;
}

/* Card: vertical, equal height across the row */
.bia-directory .business-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: 12px;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(3, 54, 85, 0.10);
    transition: box-shadow 0.2s ease;
}

.bia-directory .business-item:hover {
    box-shadow: 0 6px 18px rgba(3, 54, 85, 0.18);
}

/* Logo band across the top, much smaller than the old 180px square */
.bia-directory .business-logo {
    flex: 0 0 auto;
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background-color: #f5f9fb;
}

.bia-directory .business-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.bia-directory .business-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0;
    object-fit: contain;
}

/* Body: flex column so the category can sit above the name via order */
.bia-directory .business-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 8px;
}

/* Category label above the business name, small caps, brand blue */
.bia-directory .business-item .business-category,
.bia-directory .business-item .business-category.default-category {
    order: -1;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    color: #0a6f9e;
    padding: 0;
    margin: 0 0 6px;
    border-radius: 0;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Category icon sits with the label, so the search buttons and the cards can
   show the same artwork. Sized small: these are the shared platform category
   icons, which are multicolour, not brand-blue line art. */
.bia-directory .business-category-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

.bia-directory .business-category-text {
    line-height: 1;
}

.bia-directory .business-info h2 {
    font-size: 1.18em;
    font-weight: 600;
    line-height: 1.3;
    color: #033655;
    margin: 0 0 10px;
}

.bia-directory .business-address,
.bia-directory .business-phone {
    font-size: 0.86em;
    line-height: 1.45;
    margin: 0 0 2px;
    color: #4a6572;
}

/* Excerpt rather than the full description, so cards stay even */
.bia-directory .business-description {
    font-size: 0.88em;
    line-height: 1.5;
    color: #4a6572;
    margin: 10px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bia-directory .social-icons {
    margin-top: auto;
    padding-top: 12px;
    gap: 8px;
}

.bia-directory .social-icons img {
    width: 26px;
    height: 26px;
}

/* Action pinned to the foot of the card */
.bia-directory .website-button-container {
    flex: 0 0 auto;
    width: auto;
    padding: 0 18px 16px;
    text-align: left;
}

.bia-directory .website-button {
    display: inline-block;
    width: auto;
    padding: 7px 18px;
    font-size: 0.85em;
    border-radius: 6px;
    background-color: #033655;
    border: 1px solid #033655;
    color: #ffffff;
    text-decoration: none;
}

.bia-directory .website-button:hover {
    background-color: #0a6f9e;
    border-color: #0a6f9e;
}

/* Phone and tablet: fewer columns, the grid handles the rest */
@media (max-width: 900px) {
    .bia-directory .business-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px;
    }
}

@media (max-width: 560px) {
    .bia-directory .business-list {
        grid-template-columns: 1fr;
        padding: 8px 12px 20px;
    }

    .bia-directory .business-logo {
        flex: 0 0 auto;
        height: 110px;
        margin-bottom: 0;
    }
}