/* ==========================================================================
   Grow Up — components v3: impact chips, quick donate, thanks, dock, chart,
   KPIs, sketch accents (echo the hand-drawn campaign posters), motion, a11y
   ========================================================================== */

/* Skip link */
.gu-skip { position: absolute; left: 1rem; top: -60px; z-index: 200; padding: .6rem 1rem; border-radius: 10px; background: var(--c-ink); color: #fff !important; font-weight: 700; text-decoration: none; transition: top .15s; }
.gu-skip:focus { top: .75rem; }

/* Impact chips */
.gu-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; }
.gu-chips[hidden] { display: none; }
.gu-chip { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-height: 64px; padding: .7rem .9rem; text-align: left; }
.gu-chip b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.gu-chip small { font-size: .78rem; font-weight: 500; color: var(--c-muted); line-height: 1.3; }
.gu-chip[aria-pressed="true"] small { color: var(--c-primary-700); }
.gu-money-input { position: relative; flex: 1 1 100%; margin-top: .25rem; }
.gu-money-input span { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--c-muted); }
.gu-form .gu-money-input input { padding-left: 2.6rem; font-weight: 700; font-size: 1.05rem; }

/* Copy + QRIS download + quick WA */
.gu-qris .gu-btn { margin-top: .75rem; }
.gu-rek { text-align: left; display: grid; gap: .5rem; }
.gu-rek li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.gu-copy { min-height: 36px; padding: .35rem .8rem; border: 0; border-radius: 8px; background: var(--c-primary-50); color: var(--c-primary-700); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.gu-copy:hover { background: #d9ebf7; }
.gu-copy.is-done { background: #e8f6ec; color: var(--c-accent-700); }
.gu-quickwa small { display: block; text-align: center; margin-top: .5rem; }
.gu-quickwa .gu-btn[hidden] { display: none; }
.gu-secure { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .85rem; color: var(--c-muted); margin: 0 !important; }
.gu-secure .gu-ico { color: var(--c-accent); }

/* Thank-you */
.gu-thanks { max-width: 640px; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--c-line), var(--sh); }
.gu-thanks__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e8f6ec; color: var(--c-accent); }
.gu-thanks h2 { margin: 1rem 0 .3rem; }
.gu-thanks__steps { list-style: none; counter-reset: s; padding: 0; margin: 1.5rem 0; display: grid; gap: .9rem; }
.gu-thanks__steps li { counter-increment: s; position: relative; padding-left: 2.75rem; }
.gu-thanks__steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary-50); color: var(--c-primary-700); font-weight: 800; font-size: .85rem; }
.gu-thanks__steps strong { display: block; color: var(--c-ink); }
.gu-thanks__steps span { color: var(--c-muted); }
.gu-thanks__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Mobile donate dock (hidden on the donation page itself) */
.gu-dock { display: none; }
@media (max-width: 759px) {
	.gu-dock { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; min-height: 54px; border-radius: 14px; box-shadow: 0 10px 30px -8px rgba(10,28,46,.45); }
	body { padding-bottom: 80px; }
	body.pg-donasi .gu-dock { display: none; }
	body.pg-donasi { padding-bottom: 0; }
	.gu-header__cta { display: none !important; }
}

/* Impact chart */
.gu-chart { margin: 0; padding: 1.35rem 1.35rem 2.1rem; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--c-line); }
.gu-chart__head { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.gu-chart__head strong { display: block; color: var(--c-ink); }
.gu-chart__head small { color: var(--c-muted); }
.gu-chart__plot { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 1.75rem; border-bottom: 1px solid var(--c-line); }
.gu-chart__bar { position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
.gu-chart__bar i { display: block; height: var(--h); min-height: 4px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #34b24a, #1b8a3a); opacity: .85; transition: opacity .15s, transform .6s var(--ease); transform-origin: bottom; }
.gu-chart__bar:hover i { opacity: 1; }
.gu-chart__bar em { position: absolute; bottom: -1.5rem; left: 0; right: 0; text-align: center; font-style: normal; font-size: .72rem; color: var(--c-muted); font-weight: 600; }
.gu-chart__tip { position: absolute; bottom: calc(var(--h) + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .25rem .5rem; border-radius: 6px; background: var(--c-navy); color: #fff; font-size: .74rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
.gu-chart__bar:hover .gu-chart__tip { opacity: 1; }
.gu-split--report { align-items: start; }
@media (min-width: 1000px) { .gu-split--report { grid-template-columns: .9fr 1.1fr; gap: 1.25rem; } }
.gu-block--chart { margin-top: 2rem; }
.gu-chart.gu-reveal:not(.is-in) .gu-chart__bar i { transform: scaleY(0); }

/* KPI cards (partner page) */
.gu-kpis { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1.5rem 0 clamp(2.5rem, 6vw, 4rem); }
.gu-kpis > div { display: grid; gap: .2rem; padding: 1.2rem 1.25rem; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--c-line); }
.gu-kpis .gu-ico { color: var(--c-primary); margin-bottom: .35rem; }
.gu-kpis small { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.gu-kpis strong { color: var(--c-ink); font-size: 1.1rem; line-height: 1.35; }
.single-gu_lembaga .gu-body .wp-block-post-content > p:first-child { font-size: 1.15rem; line-height: 1.7; color: var(--c-muted); max-width: 70ch; }
.gu-grid-cards:not(.gu-grid-cards--laporan) > .gu-card--campaign:only-child { grid-column: auto; }

/* Stat band note */
.gu-statband dt small { display: block; margin-top: .2rem; font-size: .78rem; color: #7d93a8; }

/* Sketch accents — echo the blue-ink campaign posters, kept subtle */
.gu-hero .gu-grad { position: relative; }
.gu-hero h1 .gu-grad::after { content: ""; position: absolute; left: 0; right: 4%; bottom: -.12em; height: .32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14c40-8 90-11 148-9 52 2 98 5 146 1' fill='none' stroke='%231b8a3a' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M20 18c60-6 140-8 250-4' fill='none' stroke='%230d6aa0' stroke-width='2.5' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.gu-hero__text { position: relative; }
.gu-hero__text::before { content: ""; position: absolute; right: 2%; top: -10px; width: 46px; height: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230d6aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M24 4l5 12 13 1-10 8 4 13-12-7-12 7 4-13-10-8 13-1z'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-12deg); pointer-events: none; }
@media (max-width: 959px) { .gu-hero__text::before { display: none; } }
.gu-cta-band::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 28px); pointer-events: none; }
.gu-cta-band::after { content: ""; position: absolute; right: 26px; top: 18px; width: 64px; height: 56px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.45'%3E%3Cpath d='M32 50C12 37 5 27 6 17 7 8 15 3 23 5c4 1 7 4 9 8 2-4 5-7 9-8 8-2 16 3 17 12 1 10-6 20-26 33z'/%3E%3Cpath d='M12 10c-3 3-4 6-3 10' opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(10deg); pointer-events: none; }
.gu-cta-band > * { position: relative; z-index: 1; }
.gu-sechead .gu-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 10px; margin-right: .1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='%230d6aa0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 8c5-5 9-5 13-2s5 3 7-1'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Reveal on scroll (only when JS ran and motion is allowed) */
.gu-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.gu-reveal.is-in { opacity: 1; transform: none; }
.gu-card.gu-reveal.is-in:hover { transform: translateY(-2px); }

/* A11y: visible focus on dark surfaces, comfortable tap targets */
.gu-footer a:focus-visible, .gu-cta-band a:focus-visible, .gu-sec--dark a:focus-visible { outline-color: #fff; }
.gu-footer ul a { display: inline-block; padding-block: .15rem; }

/* Pembina quote card (Tentang) */
.gu-pembina { display: grid; gap: 1.5rem; align-items: center; margin-inline: 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-lg); background: linear-gradient(135deg, #eef7f1 0%, #f4f9fd 100%); box-shadow: inset 0 0 0 1px #d8ebe0; }
@media (min-width: 760px) { .gu-pembina { grid-template-columns: 240px 1fr; gap: 2.5rem; } }
.gu-pembina img { width: 100%; max-width: 240px; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 20%; border-radius: 18px; box-shadow: var(--sh); }
.gu-pembina blockquote { position: relative; margin: 0; padding-top: 2.25rem; }
.gu-pembina blockquote::before { content: "\201C"; position: absolute; top: -1.25rem; left: -.25rem; font-size: 5.5rem; line-height: 1; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gu-pembina blockquote p { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.65rem); line-height: 1.45; font-weight: 700; color: var(--c-ink); letter-spacing: -.012em; }
.gu-pembina footer { margin-top: 1.25rem; display: grid; gap: .15rem; }
.gu-pembina footer strong { color: var(--c-ink); }
.gu-pembina footer span { color: var(--c-muted); font-size: .92rem; }
.gu-people__av--photo { padding: 0; object-fit: cover; object-position: 50% 20%; background: none; }

@media print { .gu-dock, .gu-skip { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .gu-reveal { opacity: 1; transform: none; } }