/* Survey results infographic (docs/new-design/new-bp-speakers-banner.jpg) — replaces the old speakers banner.
   Ported from bp-survey-landing's survey-results.css, recoloured blue. Mobile (≤767px): intro → stat → chart → cards,
   cards single-column (side-by-side overflowed narrow phones). Download popup styles at the bottom. */
body.bp-event-template-c-vision .bp-survey-results {
    padding: 4.5rem 1.5rem;
    background: #0B1E5B url('../../../images/event-types/c-vision/bg-speaker-banner-desktop.png') center / 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; }
body.bp-event-template-c-vision .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; letter-spacing: 0;
    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,
.bp-sr-chart {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 22, 92, .85) 0%, rgba(3, 14, 66, .9) 100%);
    border: 1px solid rgba(70, 110, 255, .55);
}
.bp-sr-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; }
.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: 48px; height: 124px; margin: 40px 0 20px; }
.bp-sr-card__bars span { width: 136px; background: linear-gradient(180deg, #8AA5E8 0%, #2563E6 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: #1F5FE6; font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
body.bp-event-template-c-vision .bp-survey-results__headline { margin: 0; font-size: clamp(1.6rem, 2.7vw, 2.4rem); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.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; }
.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,.3) 1px, transparent 1px) 0 0 / 100% calc(var(--plot) / 6) repeat-y,
        linear-gradient(90deg, rgba(255,255,255,.3) 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__bars li > * { grid-column: 1; }
.bp-sr-chart__bar {
    grid-row: 1; align-self: end; width: 64%; height: var(--bar-h);
    background: linear-gradient(180deg, #8AA5E8 0%, #2563E6 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__label { grid-row: 2; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.3); 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: 10px;
    padding: 14px 28px; border-radius: 999px;
    font-family: inherit; font-size: 1.15rem; font-weight: 600; cursor: pointer; /* glass look: base.css */
}
.bp-survey-results__note { margin: 12px 0 0; font-size: 0.95rem; }
.bp-sr-d { display: inline; }

@media (max-width: 767px) {
    body.bp-event-template-c-vision .bp-survey-results { padding: 3rem 1rem; background-image: url('../../../images/event-types/c-vision/bg-speaker-banner-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; }

    .bp-survey-results__kicker   { font-size: 1.1rem; }
    body.bp-event-template-c-vision .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; }
    body.bp-event-template-c-vision .bp-survey-results__headline { font-size: 1.45rem; }
    .bp-survey-results__body     { font-size: 1rem; }
    .bp-sr-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; }
}

/* --- Download popup (partials/download-popup.php) --- */
.bp-dl-popup { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; padding: 16px; }
.bp-dl-popup.is-open { display: flex; }
.bp-dl-popup__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.bp-dl-popup__card {
    position: relative; width: min(100%, 492px); padding: 40px; border-radius: 28px;
    background: #fff; color: #0D0D0D; text-align: center; font-family: var(--bp-font-display);
}
.bp-dl-popup__close { position: absolute; top: 16px; right: 20px; border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: #0D0D0D; }
.bp-dl-popup__icon { display: block; margin: 0 auto 20px; }
body.bp-event-template-c-vision .bp-dl-popup__title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.bp-dl-popup__text { margin: 12px 0 24px; font-size: 1.15rem; }
.bp-dl-popup__error { margin: -12px 0 16px; color: #E01C24; font-size: 0.95rem; }
.bp-dl-popup__btn {
    padding: 12px 24px; border: 0; border-radius: 999px; background: #000; color: #fff;
    font-family: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer;
}
.bp-dl-popup__btn:hover { background: #333; }
.bp-dl-popup__btn:disabled { opacity: .6; cursor: wait; }
.bp-dl-popup[data-variant="confirm"] .bp-dl-popup__only-thanks,
.bp-dl-popup[data-variant="thanks"]  .bp-dl-popup__only-confirm { display: none; }
@media (max-width: 767px) {
    .bp-dl-popup__card { padding: 32px 20px 28px; border-radius: 20px; }
    .bp-dl-popup__close { top: 8px; right: 12px; }
    body.bp-event-template-c-vision .bp-dl-popup__title { font-size: 1.3rem; }
    .bp-dl-popup__text  { font-size: 1rem; }
}

/* --- bp-member login modal (#bp-auth-modal), opened by the guest PDF download ---
   bp-member scopes its input/button rules under body.bp-member-page, which this page
   doesn't have, so the form renders unstyled. Same overrides as bp-survey-landing's landing-base.css. */
#bp-auth-modal .bp-auth-modal-backdrop { background: rgba(0,0,0,.7); }
#bp-auth-modal .bp-auth-modal-dialog {
    max-width: 504px; padding: 40px; border-radius: 28px;
    font-family: 'Kanit', 'Noto Sans Thai', Helvetica, Arial, sans-serif; color: #0D0D0D;
}
#bp-auth-modal .bp-auth-modal-close { top: 18px; right: 18px; color: #0D0D0D; }
#bp-auth-modal .bp-auth-modal-title { font-size: 1.5rem; color: #0D0D0D; }
#bp-auth-modal .bp-social-btn {
    box-sizing: border-box; width: 100%;
    gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid #D9D9D9; border-radius: 8px;
    color: #0D0D0D; font-family: inherit; font-size: 1rem;
}
#bp-auth-modal .bp-social-btn img,
#bp-auth-modal .bp-social-btn svg { position: static; flex: none; }
#bp-auth-modal .bp-label { font-size: 1.1rem; font-weight: 700; color: #0D0D0D; margin-bottom: 4px; }
#bp-auth-modal .bp-required { color: #E01C24; }
#bp-auth-modal .bp-input {
    box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px;
    border: 1px solid #D9D9D9; border-radius: 8px; background: #fff; color: #0D0D0D;
    font-family: inherit; font-size: 1rem; outline: none; box-shadow: none;
}
#bp-auth-modal .bp-input:focus { border-color: #0D0D0D; }
#bp-auth-modal .bp-input::placeholder { color: #A6A6A6; }
#bp-auth-modal .bp-auth-modal-form { gap: 4px; }
#bp-auth-modal .bp-field { margin-bottom: 4px; }
#bp-auth-modal .bp-btn-primary {
    align-self: center; width: auto; margin-top: 16px; padding: 12px 40px;
    border: 0; border-radius: 999px; background: #000; color: #fff;
    font-family: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
#bp-auth-modal .bp-btn-primary:hover { background: #333; }
#bp-auth-modal .bp-btn-primary:disabled { opacity: .6; cursor: wait; }
#bp-auth-modal .bp-auth-modal-footer { color: #0D0D0D; }
#bp-auth-modal .bp-auth-modal-footer a { color: #E01C24; text-decoration: underline; }
@media (max-width: 767px) {
    #bp-auth-modal .bp-auth-modal-dialog { padding: 32px 20px 28px; border-radius: 20px; }
}

/* --- Motion (triggered by [data-reveal].is-revealed from landing.js initSectionReveal) --- */
/* GDP arrow draws itself (paths carry pathLength="1"), then the arrowhead. */
.bp-sr-card__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms cubic-bezier(.4, 0, .2, 1) 300ms; }
.bp-sr-card__arrow path + path { transition-delay: 1100ms; transition-duration: 400ms; }
.bp-survey-results__cards.is-revealed .bp-sr-card__arrow path { stroke-dashoffset: 0; }
/* Bars grow from the baseline, one after another; values fade in once their bar lands. */
.bp-sr-card__bars span,
.bp-sr-chart__bar { transform: scaleY(0); transform-origin: bottom; transition: transform 900ms cubic-bezier(.2, .8, .2, 1) 300ms; }
.bp-sr-card__bars span + span { transition-delay: 450ms; }
.bp-survey-results__cards.is-revealed .bp-sr-card__bars span,
.bp-sr-chart.is-revealed .bp-sr-chart__bar { transform: none; }
.bp-sr-chart__value { opacity: 0; transition: opacity 400ms ease 900ms; }
.bp-sr-chart.is-revealed .bp-sr-chart__value { opacity: 1; }
.bp-sr-chart__bars li:nth-child(2) .bp-sr-chart__bar { transition-delay: 450ms; }
.bp-sr-chart__bars li:nth-child(2) .bp-sr-chart__value { transition-delay: 1050ms; }
.bp-sr-chart__bars li:nth-child(3) .bp-sr-chart__bar { transition-delay: 600ms; }
.bp-sr-chart__bars li:nth-child(3) .bp-sr-chart__value { transition-delay: 1200ms; }
.bp-sr-chart__bars li:nth-child(4) .bp-sr-chart__bar { transition-delay: 750ms; }
.bp-sr-chart__bars li:nth-child(4) .bp-sr-chart__value { transition-delay: 1350ms; }
@media (prefers-reduced-motion: reduce) {
    .bp-sr-card__arrow path { stroke-dashoffset: 0; transition: none; }
    .bp-sr-card__bars span, .bp-sr-chart__bar { transform: none; transition: none; }
    .bp-sr-chart__value { opacity: 1; transition: none; }
}