/**
 * Maffiosi House Ads & AdSense Vitrine Styling
 * Shows high-converting house ads for PaginaPimpen.nl, Startpagina2000.nl, René le Blanc Fans and Said de Assistent
 * when Google AdSense is blocked (Pi-hole, AdGuard, uBlock) or unfilled.
 */

.maffiosi-vitrine {
    position: relative;
    margin: 16px auto;
    text-align: center;
    max-width: 728px;
    width: 100%;
    box-sizing: border-box;
}

.maffiosi-vitrine ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* AdSense runs in an invisible layer on top initially so clicks are not intercepted.
   The house ad is immediately visible underneath. Only when Google fills an actual ad,
   it takes over the container. */
.maffiosi-vitrine > ins.adsbygoogle {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    width: 100%;
}

.maffiosi-vitrine[data-gevuld="1"] > ins.adsbygoogle {
    position: static !important;
    opacity: 1;
    pointer-events: auto;
}

.maffiosi-vitrine[data-gevuld="1"] > .maffiosi-huis-kaart {
    display: none !important;
}

.maffiosi-vitrine--breed {
    max-width: 728px;
    min-height: 90px;
}

.maffiosi-vitrine--blok {
    max-width: 300px;
    min-height: 250px;
}

.maffiosi-vitrine--hoog {
    max-width: 160px;
    min-height: 600px;
}

/* Base House Ad Card */
.maffiosi-huis-kaart {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    min-height: 90px;
    border-radius: 8px;
    box-sizing: border-box;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

.maffiosi-huis-kaart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .65);
    filter: brightness(1.05);
}

.maffiosi-huis-kaart[hidden] {
    display: none !important;
}

.maffiosi-huis-kaart::after {
    content: 'Advertentie';
    position: absolute;
    top: 3px;
    right: 8px;
    font-size: 9px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .04em;
    opacity: .65;
    pointer-events: none;
    z-index: 3;
}

.maffiosi-huis-beeld {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.maffiosi-huis-tekst {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    text-align: left;
}

.maffiosi-huis-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    line-height: 1;
}

.maffiosi-huis-kop {
    font-weight: 800;
    line-height: 1.2;
}

.maffiosi-huis-sub {
    font-size: .78rem;
    line-height: 1.35;
    opacity: .9;
}

.maffiosi-huis-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 4px;
    transition: all .15s ease;
    cursor: pointer;
}

/* ─── Leaderboard (728x90) Layout ─── */
.maffiosi-vitrine--breed .maffiosi-huis-kaart {
    flex-direction: row;
    align-items: stretch;
    height: 90px;
}

.maffiosi-vitrine--breed .maffiosi-huis-beeld {
    flex: 0 0 140px;
    -webkit-mask-image: linear-gradient(90deg, #000 65%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 65%, transparent 100%);
}

.maffiosi-vitrine--breed .maffiosi-huis-tekst {
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;
    padding: 8px 16px;
}

.maffiosi-vitrine--breed .maffiosi-huis-logo {
    grid-row: 1 / 3;
}

.maffiosi-vitrine--breed .maffiosi-huis-kop {
    grid-column: 2;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maffiosi-vitrine--breed .maffiosi-huis-sub {
    grid-column: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .75rem;
}

.maffiosi-vitrine--breed .maffiosi-huis-knop {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
}

/* Mobile responsive for leaderboard */
@media (max-width: 680px) {
    .maffiosi-vitrine--breed .maffiosi-huis-kaart {
        height: auto;
        min-height: 80px;
    }
    .maffiosi-vitrine--breed .maffiosi-huis-beeld {
        flex: 0 0 75px;
    }
    .maffiosi-vitrine--breed .maffiosi-huis-tekst {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 10px;
    }
    .maffiosi-vitrine--breed .maffiosi-huis-sub {
        display: none;
    }
    .maffiosi-vitrine--breed .maffiosi-huis-knop {
        align-self: flex-start;
        padding: 3px 9px;
        font-size: .75rem;
    }
}

/* ─── Skyscraper (160x600) and Block (300x250) Layout ─── */
.maffiosi-vitrine--hoog .maffiosi-huis-kaart,
.maffiosi-vitrine--blok .maffiosi-huis-kaart {
    flex-direction: column;
}

.maffiosi-vitrine--hoog .maffiosi-huis-kaart {
    min-height: 600px;
}

.maffiosi-vitrine--hoog .maffiosi-huis-beeld {
    flex: 0 0 200px;
}

.maffiosi-vitrine--hoog .maffiosi-huis-tekst {
    flex: 1;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 14px 10px;
}

.maffiosi-vitrine--hoog .maffiosi-huis-knop {
    align-self: center;
    white-space: normal;
}

.maffiosi-vitrine--blok .maffiosi-huis-kaart {
    min-height: 250px;
}

.maffiosi-vitrine--blok .maffiosi-huis-beeld {
    flex: 0 0 110px;
}

.maffiosi-vitrine--blok .maffiosi-huis-tekst {
    flex: 1;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 10px 12px;
}

/* ─── Brand 1: PaginaPimpen.nl ─── */
.maffiosi-huis-kaart--paginapimpen {
    border: 2px solid #ff8800;
    background: linear-gradient(135deg, #1b042e 0%, #350b52 45%, #5a1464 100%);
    color: #ffffff;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-pp-bal {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid #1a0033;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #ffd9a6 0 10%, #ff9a1f 32%, #ff7a00 62%, #d85a00 100%);
    box-shadow: inset -2px -3px 0 rgba(120, 40, 0, .3), 0 2px 4px rgba(0, 0, 0, .4);
    color: #ffffff;
    font: italic 900 1.05rem/1 Impact, Arial Black, sans-serif;
    transform: rotate(-8deg);
    flex-shrink: 0;
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-huis-logo {
    font-size: 1.15rem;
    font-style: italic;
    color: #ff9900;
    text-shadow: 1px 1px 0 #000;
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-huis-logo b {
    color: #ff3fa4;
    font-weight: 900;
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-huis-logo small {
    color: #d1b8eb;
    font-size: .65em;
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-huis-kop {
    color: #ffe600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-huis-sub {
    color: #e5ccff;
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-huis-knop {
    border: 1.5px solid #fff;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffaa00, #ff6600);
    box-shadow: 0 2px 8px rgba(255, 102, 0, .45);
    color: #1a0033;
    font-weight: 900;
}

.maffiosi-huis-kaart--paginapimpen .maffiosi-huis-knop:hover {
    background: linear-gradient(180deg, #ffbb22, #ff7711);
    box-shadow: 0 4px 12px rgba(255, 102, 0, .65);
}

.maffiosi-huis-kaart--paginapimpen::after {
    color: rgba(255, 230, 255, .6);
}

/* ─── Brand 2: Startpagina2000.nl ─── */
.maffiosi-huis-kaart--startpagina {
    border: 2px solid #000080;
    background: radial-gradient(circle, #c3d4f0 1px, transparent 1.5px) 0 0 / 10px 10px, #eef4ff;
    color: #000080;
    font-family: Verdana, Tahoma, sans-serif;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--startpagina .maffiosi-huis-beeld {
    flex-basis: 90px;
    background-size: 64px 64px, auto;
}

.maffiosi-huis-kaart--startpagina .maffiosi-huis-logo {
    background: linear-gradient(180deg, #fff200 0%, #ff9d00 45%, #ff2a00 55%, #a30000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(1px 1px 0 #000080) drop-shadow(1px 1px 0 #000000);
    font: italic 900 1.35rem/1.05 Impact, "Arial Black", sans-serif;
    letter-spacing: 1px;
}

.maffiosi-huis-kaart--startpagina .maffiosi-huis-logo span {
    background: linear-gradient(180deg, #b3ffff 0%, #00ccff 50%, #0033cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--startpagina .maffiosi-huis-logo {
    grid-row: 1;
    font-size: 1.25rem;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--startpagina .maffiosi-huis-kop {
    grid-column: 1;
    grid-row: 2;
    overflow: visible;
    font-size: .72rem;
    color: #cc0000;
    font-style: italic;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--startpagina .maffiosi-huis-sub {
    grid-row: 1 / 3;
    -webkit-line-clamp: 3;
    color: #000080;
}

.maffiosi-huis-kaart--startpagina .maffiosi-huis-knop {
    border: 2px solid #000000;
    background: #ffff00;
    box-shadow: 2px 2px 0 #000000;
    color: #cc0000;
    font-weight: 900;
}

.maffiosi-huis-kaart--startpagina .maffiosi-huis-knop:hover {
    background: #fffb33;
}

.maffiosi-huis-kaart--startpagina::after {
    color: rgba(0, 0, 128, .55);
}

/* ─── Brand 3: René le Blanc Fans ─── */
.maffiosi-huis-kaart--rene {
    border: 2px solid #d4a843;
    background: linear-gradient(135deg, #0a1128 0%, #2d1b4e 55%, #8b1e74 100%);
    color: #f5e6c8;
    font-family: Georgia, "Times New Roman", serif;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--rene .maffiosi-huis-logo {
    color: #e8b93a;
    font-size: 1.15rem;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px #000;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--rene .maffiosi-huis-logo small {
    font-size: .68em;
    color: #ffd777;
    margin-left: 4px;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--rene .maffiosi-huis-kop {
    grid-row: 1 / 3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: .95rem;
    color: #ffffff;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--rene .maffiosi-huis-sub {
    display: none;
}

.maffiosi-huis-kaart--rene .maffiosi-huis-knop {
    border: 1px solid #f6d77a;
    border-radius: 4px;
    background: linear-gradient(#e8b93a, #a8791a);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    color: #1b1206;
    font-weight: 700;
}

.maffiosi-huis-kaart--rene .maffiosi-huis-knop:hover {
    background: linear-gradient(#f0c54e, #b88522);
}

.maffiosi-huis-kaart--rene::after {
    color: rgba(245, 230, 200, .55);
}

/* ─── Brand 4: Said de Assistent ─── */
/* Zonnige tropenlucht met stralen, zijn eigen logo, een glimmende groene boekknop en een sticker. */
.maffiosi-huis-kaart--said {
    border: 2px solid #0b2a6b;
    background:
        repeating-conic-gradient(from 0deg at 100% 0%, rgba(255, 255, 255, .32) 0 4deg, transparent 4deg 9deg),
        radial-gradient(circle at 100% 0%, #fff6b0 0 8%, rgba(255, 246, 176, 0) 45%),
        linear-gradient(180deg, #6ccbff 0%, #bfe8ff 55%, #eefaff 100%);
    color: #0b2a6b;
    font-family: "Trebuchet MS", Verdana, sans-serif;
}

.maffiosi-vitrine--hoog .maffiosi-huis-kaart--said .maffiosi-huis-beeld,
.maffiosi-vitrine--blok .maffiosi-huis-kaart--said .maffiosi-huis-beeld {
    background-position: center top;
}

/* Het logo is een plaatje; de naam staat er als tekst in voor schermlezers. */
.maffiosi-huis-kaart--said .maffiosi-huis-logo {
    flex: none;
    width: 112px;
    height: 58px;
    background: url("../images/vitrine/said-logo.png") center / contain no-repeat;
    color: transparent;
    font-size: 0;
    filter: drop-shadow(0 2px 1px rgba(11, 42, 107, .35));
}

.maffiosi-huis-kaart--said .maffiosi-huis-kop {
    color: #c40000;
    font: italic 900 .95rem/1.1 "Arial Black", "Trebuchet MS", sans-serif;
    text-shadow: 1px 1px 0 #ffffff;
}

.maffiosi-huis-kaart--said .maffiosi-huis-sub {
    color: #0b2a6b;
    opacity: 1;
}

.maffiosi-huis-kaart--said .maffiosi-huis-knop {
    border: 2px solid #0b5e14;
    border-radius: 999px;
    background: linear-gradient(180deg, #9af58b 0%, #3fcb49 48%, #22a52e 52%, #33bf3f 100%);
    box-shadow: 0 2px 0 #0b2a6b, inset 0 1px 0 rgba(255, 255, 255, .7);
    color: #ffffff;
    font-weight: 900;
    text-shadow: 0 1px 0 #0b5e14;
}

.maffiosi-huis-kaart--said .maffiosi-huis-knop:hover {
    background: linear-gradient(180deg, #adf8a0 0%, #52d55b 48%, #2ab536 52%, #41cc4c 100%);
}

.maffiosi-huis-kaart--said::after {
    color: rgba(11, 42, 107, .6);
}

/* Sticker "100% vrolijk!": een gele ster die zachtjes klopt, over de foto. */
.maffiosi-huis-kaart--said::before {
    content: '100%\A vrolijk!';
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 4px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: radial-gradient(circle, #fff79a 0 35%, #ffd000 72%);
    clip-path: polygon(50% 0%, 58% 12%, 69% 4%, 72% 18%, 85% 15%, 82% 28%, 96% 31%, 88% 42%, 100% 50%, 88% 58%, 96% 69%, 82% 72%, 85% 85%, 72% 82%, 69% 96%, 58% 88%, 50% 100%, 42% 88%, 31% 96%, 28% 82%, 15% 85%, 18% 72%, 4% 69%, 12% 58%, 0% 50%, 12% 42%, 4% 31%, 18% 28%, 15% 15%, 28% 18%, 31% 4%, 42% 12%);
    color: #d40000;
    font: 900 9px/1.05 "Arial Black", Impact, sans-serif;
    text-align: center;
    white-space: pre;
    transform: rotate(-12deg);
    animation: maffiosi-said-pols 1.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes maffiosi-said-pols {
    50% { transform: rotate(-12deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .maffiosi-huis-kaart--said::before {
        animation: none;
    }
}

/* Leaderboard: de sticker tussen foto en logo, onder het vervagende stuk van de foto. */
.maffiosi-vitrine--breed .maffiosi-huis-kaart--said::before {
    top: auto;
    left: 98px;
    bottom: 3px;
    width: 48px;
    height: 48px;
    font-size: 8px;
}

.maffiosi-vitrine--breed .maffiosi-huis-kaart--said .maffiosi-huis-logo {
    width: 104px;
    height: 54px;
}

/* Rechthoek: foto links over de hele hoogte, logo, kop en knop ernaast. */
.maffiosi-vitrine--blok .maffiosi-huis-kaart--said {
    flex-direction: row;
}

.maffiosi-vitrine--blok .maffiosi-huis-kaart--said .maffiosi-huis-beeld {
    flex: 0 0 112px;
}

.maffiosi-vitrine--blok .maffiosi-huis-kaart--said .maffiosi-huis-knop {
    margin-top: 2px;
}

.maffiosi-vitrine--blok .maffiosi-huis-kaart--said::before {
    top: auto;
    bottom: 6px;
}

/* Skyscraper: groot logo onder de foto. */
.maffiosi-vitrine--hoog .maffiosi-huis-kaart--said .maffiosi-huis-logo {
    width: 140px;
    height: 73px;
}

.maffiosi-vitrine--hoog .maffiosi-huis-kaart--said .maffiosi-huis-kop {
    font-size: 1.2rem;
}

/* Telefoon: kleiner logo, de kop mag doorlopen en de sticker gaat weg (de foto is dan te smal). */
@media (max-width: 680px) {
    .maffiosi-vitrine--breed .maffiosi-huis-kaart--said .maffiosi-huis-logo {
        width: 84px;
        height: 44px;
    }
    .maffiosi-vitrine--breed .maffiosi-huis-kaart--said .maffiosi-huis-kop {
        white-space: normal;
    }
    .maffiosi-vitrine--breed .maffiosi-huis-kaart--said::before {
        display: none;
    }
}