/* ==========================================================================
   PRIJSINDICATIE — tegelprijs (overzicht) + detailpagina
   Bouwt voort op .project-card (inspiratie-tegels) en .project-detail-laag /
   .pd-* (projectdetail) uit theme-custom.css.
   ========================================================================== */

/* --- Tegel: prijs onder de titel --- */
.project-card--prijsindicatie .project-card-content {
    gap: 0.75rem;
}
.project-card--prijsindicatie .project-price {
    color: #7A68AE;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

/* --- Sale: lintje in de hoek + doorgestreepte prijs ---
   Zelfde geel als het Sale-menu-item en de prijsstickers (#F2C201). */
.project-card--prijsindicatie,
.pi-detail .hero-image-content {
    position: relative;
    overflow: hidden;
}
.pi-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 9rem;
    height: 9rem;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}
.pi-ribbon > span {
    position: absolute;
    top: 1.75rem;
    right: -2.75rem;
    width: 12rem;
    padding: 0.5rem 0;
    transform: rotate(45deg);
    background: #F2C201;
    color: #221D1D;
    font-family: "Inter", sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.pi-price__old {
    color: #8a8a8a;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 0.125rem;
    margin-right: 0.5rem;
}
.project-price.is-sale .pi-price__old {
    font-size: 1rem;
}
.pi-specs__value.is-sale .pi-price__old {
    font-size: 1rem;
    display: block;
    margin: 0 0 0.125rem;
}
.pi-price__sale {
    color: #7A68AE;
}

/* --- Detail: specificatie-card --- */
.pi-specs__value {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: #131313;
}
.pi-specs__value--prijs {
    color: #7A68AE;
}
.pi-specs__note {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #666666;
}
.pi-specs__mat-label {
    display: block;
    font-size: 0.875rem;
    color: #666666;
}

/* --- Detail: omschrijving, kenmerken, knoppen --- */
.pi-content__lead {
    font-size: 1.125rem;
    line-height: 1.5;
    color: #000;
    margin: 0;
}
.pi-kenmerken {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pi-kenmerken__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #000;
}
.pi-kenmerken__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #7A68AE;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pi-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}
.pi-cta .btn-primary:hover {
    background-color: #655494;
    border-color: #655494;
    color: #fff;
}
.pi-cta .btn-white:hover {
    border-color: #131313;
}

/* Gerelateerd-grid direct onder de grijze container: gelijke tussenruimte */
.pi-detail + .projects-listing-layer {
    padding-top: 4rem !important;
}

@media (max-width: 767px) {
    .pi-specs__value {
        font-size: 1.125rem;
    }
    .project-card--prijsindicatie .project-price {
        font-size: 1rem;
    }
}

/* --- Overzichtspagina (3290): introtekst ---
   Volle breedte (zoals de rest van de kop), alles gecentreerd en met normale
   ruimte tussen kopjes en alinea's. Het thema zet alinea's in de kop op
   margin 0 en de editor had ze deels links uitgelijnd (inline style). */
.page-id-3290 .header-layer .text-box p {
    text-align: center !important;
    margin: 0 0 1rem;
}
.page-id-3290 .header-layer .text-box h2 {
    margin: 0 0 1rem;
}
.page-id-3290 .header-layer .text-box h3 {
    margin: 2rem 0 0.75rem;
}
.page-id-3290 .header-layer .text-box > :last-child {
    margin-bottom: 0;
}
/* zelfde ondermarge als de originele inspiratiepagina (1972) */
body:not(.home).page-id-3290 section.header-layer {
    padding-bottom: 2.5rem;
}