/*
 * Het advertentievak (vitrine.php): onze eigen advertentie, met AdSense in een onzichtbare laag erboven
 * die pas zichtbaar wordt als Google echt iets levert (js/vitrine.js).
 * Bewust neutrale namen ("vitrine", "huis"): adblockers verbergen anders ook onze eigen advertentie.
 */

.rlb-vitrine-plek { margin: 36px auto; padding: 0 16px; }
.rlb-vitrine { position: relative; max-width: 728px; margin: 0 auto; }
.rlb-vitrine ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
/* AdSense werkt onzichtbaar en zonder kliks op te vangen; pas als Google echt iets levert, neemt het het vak over. */
.rlb-vitrine > ins.adsbygoogle { position: absolute !important; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
.rlb-vitrine[data-gevuld="1"] > ins.adsbygoogle { position: static !important; opacity: 1; pointer-events: auto; }
.rlb-vitrine[data-gevuld="1"] > .rlb-huis-kaart { display: none; }

/* De eigen advertentie: beeld links, logo + kop + tekst in het midden, knop rechts */
.rlb-huis-kaart {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    min-height: 96px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.rlb-huis-kaart:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); text-decoration: none; }
.rlb-huis-kaart::after { content: attr(data-label); position: absolute; top: 3px; right: 8px; font: 9px/1 Verdana, sans-serif; letter-spacing: .04em; pointer-events: none; }
.rlb-huis-beeld {
    align-self: stretch;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
    mask-image: linear-gradient(90deg, #000 70%, transparent);
}
.rlb-huis-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 0; }
.rlb-huis-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 1.15rem; line-height: 1.05; }
.rlb-huis-kop { font-weight: 800; font-size: .95rem; line-height: 1.2; }
.rlb-huis-sub { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .76rem; line-height: 1.35; }
.rlb-huis-knop { margin-right: 16px; padding: 7px 14px; border-radius: 4px; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.rlb-huis-kaart:hover .rlb-huis-knop { filter: brightness(1.1); }

/* Telefoon: kleiner beeld, geen kleine tekst, knop onder de kop */
@media (max-width: 560px) {
    .rlb-vitrine-plek { margin: 28px auto; padding: 0 12px; }
    .rlb-huis-kaart { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
    .rlb-huis-beeld { grid-row: 1 / 3; }
    .rlb-huis-tekst { padding: 12px 10px 0 0; }
    .rlb-huis-sub { display: none; }
    .rlb-huis-knop { grid-column: 2; justify-self: start; margin: 6px 0 12px; padding: 4px 10px; font-size: .75rem; }
}

/* Maffiosi.com: maffia-game, donkergroen met goud */
.rlb-huis-kaart--maffiosi { border: 2px solid #b8962e; background: linear-gradient(160deg, #10241a, #07130d); color: #f3e6c4; font-family: Georgia, "Times New Roman", serif; }
.rlb-huis-kaart--maffiosi .rlb-huis-beeld { background-image: url("../img/vitrine/maffiosi-villa.jpg"); }
.rlb-huis-kaart--maffiosi .rlb-huis-logo { color: #e8b93a; font-size: 1.25rem; letter-spacing: .06em; text-shadow: 0 2px 0 #000; }
.rlb-huis-kaart--maffiosi .rlb-huis-logo small { font-size: .62em; letter-spacing: .02em; }
.rlb-huis-kaart--maffiosi .rlb-huis-kop { color: #ffffff; }
.rlb-huis-kaart--maffiosi .rlb-huis-sub { color: #cdbd97; }
.rlb-huis-kaart--maffiosi .rlb-huis-knop { border: 1px solid #f6d77a; border-radius: 3px; background: linear-gradient(#e8b93a, #a8791a); box-shadow: 0 2px 0 #000; color: #1b1206; font-family: Georgia, serif; }
.rlb-huis-kaart--maffiosi::after { color: rgba(243, 230, 196, .6); }

/* Startpagina2000: lichtblauw gestippeld, draaiende wereldbol, oranje-blauw logo, gele knop */
.rlb-huis-kaart--startpagina { grid-template-columns: 96px minmax(0, 1fr) auto; 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; }
.rlb-huis-kaart--startpagina .rlb-huis-beeld { background: url("../img/vitrine/startpagina2000-globe.svg") center / 64px 64px no-repeat, radial-gradient(circle at 50% 50%, #ffffff 0 30%, transparent 70%); -webkit-mask-image: none; mask-image: none; }
.rlb-huis-kaart--startpagina .rlb-huis-logo { display: inline-block; 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.4rem/1.05 Impact, "Arial Black", sans-serif; letter-spacing: 1px; }
.rlb-huis-kaart--startpagina .rlb-huis-logo span { background: linear-gradient(180deg, #b3ffff 0%, #00ccff 50%, #0033cc 100%); -webkit-background-clip: text; background-clip: text; }
.rlb-huis-kaart--startpagina .rlb-huis-kop { color: #cc0000; font-style: italic; }
.rlb-huis-kaart--startpagina .rlb-huis-sub { color: #000080; }
.rlb-huis-kaart--startpagina .rlb-huis-knop { border: 2px solid #000000; border-radius: 0; background: #ffff00; box-shadow: 2px 2px 0 #000000; color: #cc0000; font-family: Verdana, sans-serif; }
.rlb-huis-kaart--startpagina::after { color: rgba(0, 0, 128, .55); }
@media (max-width: 560px) {
    .rlb-huis-kaart--startpagina { grid-template-columns: 72px minmax(0, 1fr); }
    .rlb-huis-kaart--startpagina .rlb-huis-beeld { background-size: 52px 52px, auto; }
}

/* Pagina Pimpen: paars met oranje en roze, het PP-icoon */
.rlb-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; }
.rlb-huis-kaart--paginapimpen .rlb-huis-beeld { background-image: url("../img/vitrine/paginapimpen-breed.jpg"); }
.rlb-huis-kaart--paginapimpen .rlb-huis-logo { display: block; color: #ff9900; font-style: italic; text-shadow: 1px 1px 0 #000; }
.rlb-huis-kaart--paginapimpen .rlb-huis-logo b { color: #ff3fa4; font-weight: 900; }
.rlb-huis-kaart--paginapimpen .rlb-huis-logo small { color: #d1b8eb; font-size: .65em; }
.rlb-huis-kaart--paginapimpen .rlb-huis-kop { color: #ffe600; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.rlb-huis-kaart--paginapimpen .rlb-huis-sub { color: #e5ccff; }
.rlb-huis-kaart--paginapimpen .rlb-huis-knop { border: 1.5px solid #ffffff; border-radius: 999px; background: linear-gradient(180deg, #ffaa00, #ff6600); box-shadow: 0 2px 8px rgba(255, 102, 0, .45); color: #1a0033; font-weight: 900; }
.rlb-huis-kaart--paginapimpen::after { color: rgba(255, 230, 255, .6); }

/* Said de Assistent: zonnige tropenlucht met stralen, zijn eigen logo, glimmende groene knop en een sticker */
.rlb-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;
}
.rlb-huis-kaart--said .rlb-huis-beeld { background-image: url("../img/vitrine/said-de-assistent-breed.jpg"); }
/* Het logo is een plaatje; de naam staat er als tekst in voor schermlezers */
.rlb-huis-kaart--said .rlb-huis-logo { flex: none; width: 104px; height: 54px; background: url("../img/vitrine/said-logo.png") left center / contain no-repeat; color: transparent; font-size: 0; filter: drop-shadow(0 2px 1px rgba(11, 42, 107, .35)); }
.rlb-huis-kaart--said .rlb-huis-kop { color: #c40000; font: italic 900 .95rem/1.1 "Arial Black", "Trebuchet MS", sans-serif; text-shadow: 1px 1px 0 #ffffff; }
.rlb-huis-kaart--said .rlb-huis-sub { color: #0b2a6b; }
.rlb-huis-kaart--said .rlb-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; }
.rlb-huis-kaart--said::after { color: rgba(11, 42, 107, .6); }
/* Sticker "100% vrolijk!": een gele ster die zachtjes klopt, op het vervagende stuk van de foto */
.rlb-huis-kaart--said::before {
    content: '100%\A vrolijk!';
    position: absolute;
    z-index: 1;
    left: 104px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    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 8px/1.05 "Arial Black", Impact, sans-serif;
    text-align: center;
    white-space: pre;
    transform: rotate(-12deg);
    animation: rlb-said-pols 1.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes rlb-said-pols { 50% { transform: rotate(-12deg) scale(1.1); } }
@media (max-width: 560px) {
    .rlb-huis-kaart--said .rlb-huis-logo { width: 84px; height: 44px; }
    .rlb-huis-kaart--said::before { display: none; }
}

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