/* Survey results infographic (replaces .bp-lead-survey). Desktop order: intro → cards → stat → chart.
   Mobile (≤768px): intro → stat → chart → cards (order swap, docs/figma/results/1-…-mobile.jpg).
   Cards stack single-column on mobile (the design's side-by-side pair overflowed on narrow phones). */
.bp-survey-results {
    height: auto;
    min-height: 100vh;
    display: block;
    padding: 120px 24px 72px;
    background: #141414 url('../../images/hero-bg-desktop.jpg') center top / cover no-repeat;
    color: #fff;
}
.bp-survey-results__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }

.bp-survey-results__intro { text-align: center; }
.bp-survey-results__kicker { font-size: 1.6rem; font-weight: 600; margin: 0 0 8px; }
.bp-survey-results__banner {
    display: inline-block; margin: 0; padding: 4px 72px;
    font-size: clamp(2.5rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.3;
    background: linear-gradient(90deg, rgba(224,28,36,0) 0%, #E01C24 18%, #E01C24 82%, rgba(224,28,36,0) 100%);
}
.bp-survey-results__subtitle { font-size: 1.6rem; font-weight: 600; margin: 16px 0 0; }

.bp-survey-results__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: -8px; }
.bp-sr-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 32px 24px; border-radius: 20px;
    background: linear-gradient(180deg, #161616 0%, #050505 100%);
    border: 1px solid rgba(255,255,255,.12);
}
.bp-sr-card__title { margin: 0; font-size: 1.6rem; font-weight: 600; }
.bp-sr-card__arrow { width: 180px; height: 110px; margin: 36px 0 24px; }
.bp-sr-card__bars { display: flex; align-items: flex-end; gap: 68px; height: 124px; margin: 40px 0 20px; }
.bp-sr-card__bars span { width: 116px; background: linear-gradient(180deg, #F07A7A 0%, #8E0B10 100%); }
.bp-sr-card__bars span:first-child { height: 100%; }
.bp-sr-card__bars span:last-child  { height: 46%; }
.bp-sr-card__value { margin: 0; color: #E01C24; font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.bp-sr-card__value--pair { display: flex; gap: 52px; }
.bp-sr-card__caption { margin: 4px 0 0; font-size: 1.6rem; font-weight: 600; }

.bp-survey-results__stat { display: flex; align-items: center; gap: 24px; }
.bp-survey-results__big { margin: 0; flex: none; color: #E01C24; font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.bp-survey-results__headline { margin: 0; font-size: clamp(1.6rem, 2.7vw, 2.4rem); font-weight: 700; line-height: 1.4; }
.bp-survey-results__body { margin: 8px 0 0; font-size: 1.25rem; line-height: 1.6; }

.bp-sr-chart {
    margin: 0; padding: 36px 100px 24px; border-radius: 20px;
    background: linear-gradient(180deg, #161616 0%, #050505 100%);
    border: 1px solid rgba(255,255,255,.12);
}
.bp-sr-chart__title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 32px; }
.bp-sr-chart__bars {
    --plot: 300px;
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px;
}
/* grid lines (7 vertical / 6 horizontal cells, as in the design) — plot area only, not the labels */
.bp-sr-chart__bars::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--plot); pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / 100% calc(var(--plot) / 6) repeat-y,
        linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / calc(100% / 7) 100% repeat-x;
}
.bp-sr-chart__bars li { --bar-h: calc(var(--plot) * var(--v) * 0.007); /* tallest bar = 70% of the plot */
    display: grid; grid-template-rows: var(--plot) auto; justify-items: center; position: relative; }
.bp-sr-chart__bar {
    grid-row: 1; align-self: end; width: 64%; height: var(--bar-h);
    background: linear-gradient(180deg, #F07A7A 0%, #8E0B10 100%);
}
.bp-sr-chart__value {
    grid-row: 1; align-self: end; margin-bottom: calc(var(--bar-h) + 8px);
    position: relative; z-index: 1; font-size: 1.35rem; font-weight: 700;
}
.bp-sr-chart__bars li > * { grid-column: 1; }
.bp-sr-chart__label { grid-row: 2; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.35); width: 100%; text-align: center; font-size: 1.1rem; font-weight: 600; line-height: 1.6; }
.bp-sr-chart__label b { display: block; font-weight: 600; }

.bp-survey-results__source { margin: -12px 0 0; font-size: 1.1rem; }
.bp-survey-results__download { text-align: center; }
.bp-sr-download {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
    background: #000; color: #fff; font-family: inherit; font-size: 1.75rem; font-weight: 700; cursor: pointer;
    transition: background .2s ease;
}
.bp-sr-download:hover { background: #1F1F1F; }
.bp-survey-results__note { margin: 12px 0 0; font-size: 0.95rem; }
.bp-d { display: inline; }

@media (max-width: 768px) {
    .bp-survey-results { padding: 96px 16px 56px; background-image: url('../../images/hero-bg-mobile.jpg'); }
    .bp-survey-results__inner { gap: 24px; }
    .bp-survey-results__intro    { order: 1; }
    .bp-survey-results__stat     { order: 2; flex-direction: column; text-align: center; gap: 8px; }
    .bp-sr-chart                 { order: 3; padding: 24px 12px 16px; }
    .bp-survey-results__cards    { order: 4; grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
    .bp-survey-results__source   { order: 5; margin: 0; text-align: left; }
    .bp-survey-results__download { order: 6; }

    /* intro is not in the mobile design — scaled to fit */
    .bp-survey-results__kicker   { font-size: 1.1rem; }
    .bp-survey-results__banner   { padding: 2px 40px; font-size: 2rem; max-width: 100%; }
    .bp-survey-results__subtitle { font-size: 1.05rem; max-width: 18em; margin: 12px auto 0; }

    .bp-survey-results__big      { font-size: 6.5rem; }
    .bp-survey-results__headline { font-size: 1.45rem; }
    .bp-survey-results__body     { font-size: 1rem; }
    .bp-d { display: none; }

    .bp-sr-chart__title  { font-size: 1.1rem; margin-bottom: 16px; }
    .bp-sr-chart__bars   { --plot: 200px; column-gap: 4px; }
    .bp-sr-chart__bar    { width: 88%; }
    .bp-sr-chart__value  { font-size: 1rem; }
    .bp-sr-chart__label  { font-size: 0.7rem; line-height: 1.5; }

    .bp-sr-card          { padding: 24px 16px; border-radius: 14px; }
    .bp-sr-card__title   { font-size: 1.25rem; }
    .bp-sr-card__arrow   { width: 120px; height: 74px; margin: 24px 0 16px; }
    .bp-sr-card__bars    { gap: 40px; height: 90px; margin: 24px 0 12px; }
    .bp-sr-card__bars span { width: 56px; }
    .bp-sr-card__value   { font-size: 1.5rem; }
    .bp-sr-card__value--pair { gap: 16px; }
    .bp-sr-card__caption { font-size: 1.1rem; }

    .bp-sr-download { padding: 14px 28px; font-size: 1.3rem; }
}