/* ==========================================================================
   Responsive overrides — loaded after app.css
   ========================================================================== */

/* --- General utilities --- */
html, body { overflow-x: hidden; }
.main-container img { max-width: 100%; height: auto; }

/* --- Frontpage grid: equal-height cards using CSS Grid --- */
.block-cards.grid-container { max-width: 1320px; }
.block-cards .grid-x {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    grid-auto-rows: minmax(auto, 433px);
    align-items: stretch;
    gap: 0.625rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.block-cards .grid-x > .cell {
    width: 100% !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}
.block-cards .cell .callout {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.block-cards .callout .callout-content {
    flex: 1 1 auto;
}
.block-cards .grid-x > .cell.ad {
    grid-column: auto;
    overflow: hidden;
    box-sizing: border-box;
}
@media screen and (max-width: 39.9375em) {
    .block-cards .grid-x > .cell.ad {
        grid-column: 1 / -1;
    }
}

/* --- Item card descriptions: replace fixed height with line-clamp --- */
.block-cards .callout .callout-content p {
    height: auto !important;
    max-height: 6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* --- Card images: ensure fluid sizing with reserved aspect ratio --- */
.block-cards .callout .callout-image { aspect-ratio: 302 / 158; overflow: hidden; }
.block-cards .callout .callout-image img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* --- Placeholder cards: skeleton loading animation --- */
.placeholder-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 3px;
}
.block-cards .callout.placeholder-card .callout-image { min-height: 158px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Ad containers: reserve space to prevent layout shift --- */
.block-cards { overflow: hidden; }
.cell.ad.googlead.callout { overflow: hidden; }
.cell.ad .adsbygoogle { overflow: hidden; }
@media screen and (max-width: 51.1875em) {
    .cell.ad.googlead.callout { min-height: 250px !important; }
    .cell.ad.ownad .adsbyveneporssi { max-height: 400px !important; }
    .cell.ad.ownad .adsbyveneporssi img { max-width: 100%; height: auto; }
}

/* --- Placeholder cards on mobile --- */
@media screen and (max-width: 39.9375em) {
    .block-cards .cell.result.placeholder { min-height: 280px; }
}

/* --- Listing detail slider: constrain on mobile --- */
.ad-item-slider { max-width: 100%; overflow: hidden; }
@media screen and (max-width: 51.1875em) {
    .ad-item-slider-wrapper .ad-item-slider img { max-height: 300px; object-fit: contain; }
}

/* --- Feature tables: side-by-side at tablet --- */
@media print, screen and (min-width: 51.25em) {
    .ad-item-features > .grid-x > .cell.large-6 { width: 50%; flex: 0 0 auto; }
}

/* --- Sidebar: hide excessive ads on mobile, make images fluid --- */
.block-cards .ad-block .callout-image img {
    max-width: 100% !important; width: 100% !important; height: auto !important;
}
@media screen and (max-width: 51.1875em) {
    .cell.medium-4.large-3 .cellout-image.googlead { display: none; }
    .cell.medium-4.large-3 .block-cards { max-width: 400px; margin: 0 auto; }
}

/* --- Filter inputs: wider on small phones --- */
@media screen and (max-width: 39.9375em) {
    .search-filter-wrapper .cell.small-2 { width: 25% !important; }
    .search-filter-wrapper .cell.small-8 { width: 50% !important; }
}

/* --- Header tagline: truncate on small screens --- */
@media screen and (max-width: 30em) {
    header.header-secondary .header-title {
        font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}