/*
 * Localizeur overrides.
 *
 * Loaded after the vendored theme stylesheets so these rules win. Keep project
 * specific changes here rather than editing frontend/css/style.css, which is
 * third-party and marked linguist-vendored.
 */

/* ---------------------------------------------------------------------------
 * Listing card images
 *
 * The theme gives .geodir-category-img-wrap overflow:hidden but never a
 * height, so each <img> rendered at its own natural aspect ratio and cards in
 * the same row ended up wildly different heights — a portrait photo produced a
 * card three times taller than a landscape one.
 *
 * Enterprise photos are uploaded at arbitrary sizes; the admin form asks for
 * "Format 600x400", so 3:2 is the intended shape. The wrapper becomes a fixed
 * ratio box and the image covers it, cropping from the centre.
 *
 * padding-top rather than aspect-ratio: this theme ships to older mobile
 * browsers and the ratio box works everywhere.
 * ------------------------------------------------------------------------ */
.geodir-category-img-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6667%; /* 400 / 600 */
    overflow: hidden;
}

.geodir-category-img-wrap > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* The theme's gradient overlay is absolutely positioned against the wrapper,
   which is now the ratio box, so it keeps covering the whole image. */

/* Cards in a row share a height so the grid does not stagger. The footer is
   pinned to the bottom, since titles and descriptions are already clamped to
   fixed heights in the markup. */
.listing-item .geodir-category-listing {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.listing-item .geodir-category-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.listing-item .geodir-category-footer {
    margin-top: auto;
}

/* The markup already pins these two blocks to 60px, but leaves overflow
   visible — so a company name or address that wraps to an extra line pushes
   the whole card taller and the row with it. Clamp them. */
.listing-item .geodir-category-content-title,
.listing-item .geodir-category-text {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Readable truncation inside those clamped blocks
 *
 * overflow:hidden on a fixed 60px box stops the card growing, but it cuts text
 * mid-line — the bottom half of a sentence stays visible and unreadable. Worse,
 * on the community cards the title has no Str::limit (unlike the company cards,
 * which cap it at 25 characters), so a long "Name, Role at Firm" wraps to three
 * lines and pushes the address line completely out of the visible box.
 *
 * Clamping by LINE instead means text always ends at a line boundary with an
 * ellipsis, and the address is guaranteed its own line.
 * ------------------------------------------------------------------------ */

/* The theme reserves 20px of bottom padding inside the 60px title box, which
   is what squeezed the address out. */
.listing-item .geodir-category-content-title {
    padding-bottom: 0;
}

.listing-item .geodir-category-content-title .title-sin_map {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
}

/* Address: always one line, ellipsised, never pushed out by the title. */
.listing-item .geodir-category-location,
.listing-item .geodir-category-location a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-item .geodir-category-text p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

/* The footer was the remaining source of uneven cards: a long sector name
   ("SOCIETES D'EXPLOITATION ET EXPLORATION GAZIERE ET PETROLIERES") wrapped
   onto a second line and took the footer from 40px to 70px, which the grid
   plugin then applied to every card in that row. One line, ellipsised. */
.listing-item .geodir-category-footer {
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.listing-item .listing-item-category-wrap {
    min-width: 0; /* lets the flex child shrink so the ellipsis can apply */
    flex: 1 1 auto;
}

.listing-item .listing-item-category-wrap span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-item .geodir-opt-list {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * Small post/company thumbnails
 *
 * Used by the footer's "Nouvelles entreprises" list and the "Similar listings"
 * sidebar widget. The theme sets height:auto on these, so a portrait photo
 * produced a thumbnail several times taller than a landscape one and the list
 * came out ragged.
 *
 * A fixed height plus object-fit keeps every row the same size; the crop is
 * centred so the subject stays visible.
 * ------------------------------------------------------------------------ */
.widget-posts-img img,
.footer-widget-posts .widget-posts-img img {
    width: 100%;
    height: 75px;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 576px) {
    .widget-posts-img img,
    .footer-widget-posts .widget-posts-img img {
        height: 60px;
    }
}

/* Company logo badge.
 *
 * The theme already sizes this to 50x50 with a circular radius. Do NOT set
 * width/height here: .listing-avatar is position:absolute with no dimensions
 * of its own, so a percentage resolves against nothing and the logo renders at
 * its full intrinsic size, spilling across the card.
 *
 * object-fit alone is enough — it stops a non-square logo being squashed
 * inside the circle the theme draws.
 */
.listing-avatar img {
    object-fit: cover;
}

/* Wider content.
 *
 * The theme caps every page's .container at 1224px, which leaves large empty
 * margins on either side of the content on normal desktop screens. Widening it
 * lets the listing grids, the company detail two-column layout, and the header
 * use more of the viewport. width stays a percentage so there is still a small
 * gutter and the mobile behaviour is unchanged. Change the max-width to tune how
 * wide the content runs.
 */
.container {
    max-width: 1560px;
    width: 94%;
}