/* HoefVinyl Weetjes - frontend */

/* ===== Weetje =====
   Foto altijd bovenaan, tekst altijd eronder.
   Links/midden/rechts bepaalt alleen de uitlijning van de foto. */
.hv-weetjes-list-wrap,
.hv-weetje-detail-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.hv-weetje-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.hv-weetje-layout,
.hv-weetje-copy,
.hv-weetje-media {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Geen zij-aan-zij indeling meer. De media staat in de HTML al vóór de tekst. */
.hv-weetje-layout {
    display: block !important;
}

.hv-weetje-copy {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.hv-weetje-copy h2,
.hv-weetje-copy h3,
.hv-weetje-copy h4 {
    margin-top: 0;
}

.weetje-datum,
.weetje-artiest {
    opacity: .88;
}

/* Foto maximaal 400px breed en altijd boven de tekst. */
.hv-weetje-media {
    display: block !important;
    width: min(100%, 400px) !important;
    max-width: 400px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    float: none !important;
}

.hv-photo-left .hv-weetje-media {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.hv-photo-center .hv-weetje-media {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hv-photo-right .hv-weetje-media {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.hv-weetje-media img.hv-weetje-image {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    object-fit: contain;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

@media (max-width: 520px) {
    .hv-weetje-media {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hv-weetje-media img.hv-weetje-image {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===== Artiestenoverzicht - oorspronkelijke HoefVinyl uitstraling behouden ===== */
.hv-artiesten-wrapper{
    background: linear-gradient(180deg, #7a2f00 0%, #5d2200 100%);
    border: 2px solid #d7a13b;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,220,130,.15);
    color: #fff3cf;
}

.hv-artiesten-abc{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 24px 0;
    padding:0;
}

.hv-artiesten-abc a{
    display:inline-block;
    min-width:40px;
    text-align:center;
    padding:8px 12px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    color:#fff7dd;
    background: linear-gradient(180deg, #e9b04a 0%, #c67d18 100%);
    border:2px solid #3a1600;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
}

.hv-artiesten-abc a:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.hv-letter-blok{ margin-bottom:34px; }

.hv-letter-titel{
    font-size:32px;
    line-height:1.1;
    margin:0 0 16px 0;
    color:#ffd98a;
    text-shadow: 2px 2px 0 rgba(0,0,0,.35);
    border-bottom: 2px solid rgba(255,217,138,.35);
    padding-bottom:8px;
}

.hv-artiest-grid{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.hv-artiest-card{
    display:flex;
    align-items:center;
    gap:0;
    text-decoration:none;
    border-radius:18px;
    overflow:hidden;
    border:2px solid #2e1200;
    background: linear-gradient(180deg, #e3a640 0%, #b56b10 100%);
    box-shadow: 0 5px 14px rgba(0,0,0,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}

.hv-artiest-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.36);
}

.hv-artiest-foto{
    width:110px;
    min-width:110px;
    height:110px;
    background:#f3e4be;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-right:3px double #7b4100;
}

.hv-artiest-foto img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hv-artiest-geen-foto{
    font-size:12px;
    color:#6a3b00;
    text-align:center;
    padding:10px;
    font-weight:700;
}

.hv-artiest-naamvak{
    flex:1;
    padding:18px 22px;
    display:flex;
    align-items:center;
    min-height:110px;
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.08) 100%);
}

.hv-artiest-naam{
    color:#fff8e8;
    font-size:24px;
    font-weight:800;
    line-height:1.2;
    text-shadow: 2px 2px 0 rgba(0,0,0,.28);
    word-break:break-word;
}

.hv-artiesten-abc-onder{
    margin-top:30px;
    padding-top:20px;
    border-top:2px solid rgba(255,217,138,.35);
}

@media (max-width: 768px) {
    .hv-artiesten-wrapper{ padding:16px; }
    .hv-artiest-foto{ width:85px; min-width:85px; height:85px; }
    .hv-artiest-naamvak{ min-height:85px; padding:14px 16px; }
    .hv-artiest-naam{ font-size:20px; }
    .hv-letter-titel{ font-size:26px; }
}


.hv-artiest-detail-terug {
    margin: 0 0 16px 0;
}

.hv-artiest-detail-terug a {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
}