/* =============================================================
   Beleuchtung page — scoped redesign styles
   Loaded only on /de/beleuchtung and /ru/beleuchtung-ru.
   Reuses the hr-* design language (home-redesign.css) + the
   --pa-* tokens (design-system.css). Everything here is scoped
   under .beleuchtung-redesign so it cannot affect other pages.
   ============================================================= */

/* ---- 4 visual light-type cards (photo + caption) ------------ */
.beleuchtung-redesign .bel-light-cards {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   18px;
    margin-top:            28px;
}
.beleuchtung-redesign .bel-light-card {
    display:        flex;
    flex-direction: column;
    background:     #ffffff;
    border:         1px solid var(--pa-border, #e5e7eb);
    border-radius:  var(--pa-radius-card, 12px);
    box-shadow:     var(--pa-shadow-card, 0 2px 10px rgba(0,0,0,.06));
    overflow:       hidden;
    transition:     box-shadow .2s ease, transform .2s ease;
}
.beleuchtung-redesign .bel-light-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    transform:  translateY(-2px);
}
.beleuchtung-redesign .bel-light-card-img {
    display:       block;
    width:         100%;
    height:        auto;
    aspect-ratio:  16 / 10;
    object-fit:    cover;
    background:    #f1efe9;
}
.beleuchtung-redesign .bel-light-card-body {
    padding: 16px 16px 18px;
}
.beleuchtung-redesign .bel-light-card-body h3 {
    margin:      0 0 6px;
    font-size:   16px;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--pa-primary, #1f2a44);
}
.beleuchtung-redesign .bel-light-card-body p {
    margin:      0;
    font-size:   13.5px;
    line-height: 1.55;
    color:       var(--pa-text, #444);
}

@media (max-width: 900px) {
    .beleuchtung-redesign .bel-light-cards {
        grid-template-columns: repeat(2, 1fr);
        gap:                   14px;
    }
}
@media (max-width: 560px) {
    .beleuchtung-redesign .bel-light-cards {
        grid-template-columns: 1fr;
        gap:                   14px;
    }
}

/* ---- Catalog wrapper — let the existing products grid breathe
        inside the new section rhythm, with a light visual refresh.
        Scoped so global catalog pages are untouched. -------------- */
.beleuchtung-redesign .bel-catalog-intro {
    max-width: 760px;
}
.beleuchtung-redesign .bel-catalog-note {
    margin-top:    18px;
    background:    #f8f6f2;
    border:        1px solid #e8e0d0;
    border-left:   3px solid var(--pa-accent, #c8a86b);
    border-radius: 6px;
    padding:       14px 18px;
    font-size:     14px;
    line-height:   1.6;
    color:         var(--pa-text, #444);
}
.beleuchtung-redesign .products-layout { margin-top: 24px; }
.beleuchtung-redesign .product-item-wrap {
    border:        1px solid var(--pa-border, #e5e7eb);
    border-radius: 10px;
    box-shadow:    var(--pa-shadow-card, 0 2px 10px rgba(0,0,0,.06));
    transition:    box-shadow .2s ease;
    background:    #ffffff;
}
.beleuchtung-redesign .product-item-wrap:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* ---- Per-room mini grid (H3 blocks under "Beleuchtung nach Raum") */
.beleuchtung-redesign .bel-room-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   18px;
    margin-top:            22px;
}
.beleuchtung-redesign .bel-room-grid .hr-card h3 { margin-top: 0; }
@media (max-width: 900px) {
    .beleuchtung-redesign .bel-room-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
    .beleuchtung-redesign .bel-room-grid { grid-template-columns: 1fr; }
}

/* ---- FAQ teaser (reuse <details> like the davor-danach page) --- */
.beleuchtung-redesign .bel-faq details {
    border-bottom: 1px solid var(--pa-border, #e5e7eb);
    padding:       14px 0;
}
.beleuchtung-redesign .bel-faq summary {
    cursor:      pointer;
    font-weight: 600;
    font-size:   15.5px;
    color:       var(--pa-primary, #1f2a44);
    list-style:  none;
}
.beleuchtung-redesign .bel-faq summary::-webkit-details-marker { display: none; }
.beleuchtung-redesign .bel-faq summary::after {
    content: "+";
    float:   right;
    color:   var(--pa-accent, #c8a86b);
    font-weight: 700;
}
.beleuchtung-redesign .bel-faq details[open] summary::after { content: "\2013"; }
.beleuchtung-redesign .bel-faq details p {
    margin:    10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color:     var(--pa-text, #444);
}

/* ---- Outline-button contrast on LIGHT sections ----------------
   The base .hr-btn--gold-outline uses white text (built for the dark
   --cta section). On light sections that made the "Beispiele/Примеры"
   buttons almost invisible. Give them a solid white fill, navy text and
   a stronger gold border here; on dark --cta sections they stay white. */
.beleuchtung-redesign .hr-section--soft  .hr-btn--gold-outline,
.beleuchtung-redesign .hr-section--white .hr-btn--gold-outline {
    background:    #ffffff;
    color:         var(--pa-primary, #1f2a44);
    border:        2px solid var(--pa-accent, #c8a86b);
    font-weight:   700;
}
.beleuchtung-redesign .hr-section--soft  .hr-btn--gold-outline:hover,
.beleuchtung-redesign .hr-section--soft  .hr-btn--gold-outline:focus,
.beleuchtung-redesign .hr-section--white .hr-btn--gold-outline:hover,
.beleuchtung-redesign .hr-section--white .hr-btn--gold-outline:focus {
    background:    var(--pa-accent, #c8a86b);
    color:         #ffffff;
    border-color:  var(--pa-accent, #c8a86b);
}