/* Public dynamic case profile */
body[data-page="cause-detail"]{
  background:
    radial-gradient(circle at 8% 9%,rgba(56,103,223,.08),transparent 27rem),
    radial-gradient(circle at 92% 42%,rgba(23,122,91,.08),transparent 26rem),
    #f6f9fd;
}
body[data-page="cause-detail"] .wrap{max-width:1240px;padding:34px 24px 70px}
body[data-page="cause-detail"] .crumb{display:flex;align-items:center;gap:7px;margin:0 0 18px;color:#75849b}
body[data-page="cause-detail"] .crumb a{font-weight:800}

body[data-page="cause-detail"] .profile{
  position:relative;isolation:isolate;overflow:hidden;
  grid-template-columns:minmax(320px,430px) minmax(0,1fr);gap:42px;
  border:1px solid rgba(202,216,235,.9);border-radius:28px;padding:24px;
  background:rgba(255,255,255,.96);box-shadow:0 28px 70px rgba(21,48,92,.13);
}
body[data-page="cause-detail"] .profile:after{
  content:"";position:absolute;z-index:-1;right:-110px;top:-125px;width:330px;height:330px;
  border-radius:50%;background:linear-gradient(135deg,rgba(56,103,223,.1),rgba(23,122,91,.08));
}
body[data-page="cause-detail"] .profile-photo{min-height:500px;border-radius:21px;box-shadow:0 18px 36px rgba(17,36,75,.2)}
body[data-page="cause-detail"] .profile-photo:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(7,24,53,.72))}
body[data-page="cause-detail"] .profile-photo img{transition:transform .5s ease}
body[data-page="cause-detail"] .profile:hover .profile-photo img{transform:scale(1.025)}
body[data-page="cause-detail"] .case-id{z-index:1;left:18px;bottom:18px;padding:9px 13px;border:1px solid rgba(255,255,255,.5);border-radius:999px;backdrop-filter:blur(8px)}
body[data-page="cause-detail"] .profile-right{display:flex;flex-direction:column;justify-content:center;padding:15px 8px 15px 0}
body[data-page="cause-detail"] .profile-top{align-items:flex-start}
body[data-page="cause-detail"] .profile .eyebrow{letter-spacing:.09em;text-transform:uppercase}
body[data-page="cause-detail"] .profile h1{max-width:720px;margin:13px 0 11px;font-size:clamp(34px,4vw,54px);letter-spacing:-.035em}
body[data-page="cause-detail"] .profile .status{border:0;border-radius:999px;padding:8px 13px;background:#dff5e9;box-shadow:inset 0 0 0 1px #bfe8d1;color:#0f7450}
body[data-page="cause-detail"] .location{font-size:15px;line-height:1.7}
body[data-page="cause-detail"] .metrics{gap:8px;margin:20px 0}
body[data-page="cause-detail"] .metric{border:1px solid #e2eaf4;border-radius:14px;padding:12px;background:#f9fbfe}
body[data-page="cause-detail"] .metric .icon{flex:0 0 42px}
body[data-page="cause-detail"] .metric strong{font-size:15px}
body[data-page="cause-detail"] .callout{margin-top:2px;border:1px solid #d3ebdf;border-left:0;border-radius:15px;padding:17px 18px;background:linear-gradient(135deg,#effaf5,#f8fcfa)}

body[data-page="cause-detail"] .section{margin-top:34px}
body[data-page="cause-detail"] .section-title{display:flex;align-items:center;gap:9px;margin-bottom:15px;font-size:24px}
body[data-page="cause-detail"] .section-title:after{content:"";height:1px;flex:1;margin-left:8px;background:linear-gradient(90deg,#dbe5f1,transparent)}
body[data-page="cause-detail"] .story{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:start;border:0;border-radius:22px;box-shadow:0 18px 42px rgba(21,48,92,.09)}
body[data-page="cause-detail"] .story-copy{padding:34px}
body[data-page="cause-detail"] .story-copy p{font-size:16px;line-height:1.9}
body[data-page="cause-detail"] .story figure{min-height:300px;max-height:420px}

body[data-page="cause-detail"] .public-case-gallery{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
body[data-page="cause-detail"] .public-case-gallery figure{position:relative;border:0!important;border-radius:16px!important;box-shadow:0 11px 25px rgba(21,48,92,.1)}
body[data-page="cause-detail"] .public-case-gallery img{height:210px!important;transition:transform .3s ease}
body[data-page="cause-detail"] .public-case-gallery figure:hover img{transform:scale(1.04)}
body[data-page="cause-detail"] .public-case-gallery figcaption{position:absolute;right:8px;bottom:8px;left:8px;border-radius:9px;padding:7px 9px!important;background:rgba(9,30,62,.78);color:#fff!important;backdrop-filter:blur(5px)}

body[data-page="cause-detail"] .timeline{border:0;border-radius:22px;padding:15px 28px;box-shadow:0 18px 42px rgba(21,48,92,.09)}
body[data-page="cause-detail"] .timeline-row{grid-template-columns:105px 64px minmax(0,1fr) 155px;min-height:188px;padding:19px 0}
body[data-page="cause-detail"] .date{padding:10px;border:1px solid #dfe8f3;background:#f5f8fd}
body[data-page="cause-detail"] .dot{width:48px;height:48px;border:5px solid #e4f3ed;background:#168064;box-shadow:0 7px 18px rgba(22,128,100,.25)}
body[data-page="cause-detail"] .timeline-main{border:1px solid #e0e9f4;border-radius:15px;padding:17px 18px;background:#f9fbfe}
body[data-page="cause-detail"] .timeline-main h3{font-size:18px}
body[data-page="cause-detail"] .timeline-main p{margin-top:7px;line-height:1.65}
body[data-page="cause-detail"] .donor{border-radius:11px;padding:10px 13px;background:#edf8f3}
body[data-page="cause-detail"] .gallery img:first-child{border:0;border-radius:13px;box-shadow:0 9px 22px rgba(21,48,92,.14)}

body[data-page="cause-detail"] .summary{margin-top:35px;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px 27px;background:linear-gradient(115deg,#0b2145,#153969 58%,#11715a);box-shadow:0 20px 42px rgba(11,34,73,.25)}
body[data-page="cause-detail"] .summary h2{margin-bottom:18px;font-size:21px}
body[data-page="cause-detail"] .summary-grid{gap:13px}
body[data-page="cause-detail"] .summary-item{border:0;border-radius:12px;padding:13px 14px;background:rgba(255,255,255,.08)}
body[data-page="cause-detail"] .summary-item small{margin-bottom:4px}
body[data-page="cause-detail"] .summary-item b{font-size:17px}
body[data-page="cause-detail"] .cta{margin-top:22px;border:1px solid #bee2cd;border-radius:17px;padding:18px 20px;background:#f3fcf7;box-shadow:0 10px 24px rgba(21,91,69,.07)}
body[data-page="cause-detail"] .cta a{border-radius:11px;padding:12px 18px;box-shadow:0 8px 18px rgba(23,122,91,.22)}

@media(max-width:1050px){
  body[data-page="cause-detail"] .profile{grid-template-columns:360px minmax(0,1fr);gap:28px}
  body[data-page="cause-detail"] .profile-photo{min-height:460px}
  body[data-page="cause-detail"] .metrics{grid-template-columns:1fr}
  body[data-page="cause-detail"] .public-case-gallery{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:800px){
  body[data-page="cause-detail"] .wrap{padding:22px 15px 50px}
  body[data-page="cause-detail"] .profile{display:block;padding:14px;border-radius:22px}
  body[data-page="cause-detail"] .profile-photo{height:min(520px,110vw);min-height:0}
  body[data-page="cause-detail"] .profile-right{padding:21px 5px 8px}
  body[data-page="cause-detail"] .profile-top{display:block}
  body[data-page="cause-detail"] .profile .status{display:inline-block;margin-top:8px}
  body[data-page="cause-detail"] .story{grid-template-columns:1fr}
  body[data-page="cause-detail"] .story-copy{padding:24px}
  body[data-page="cause-detail"] .public-case-gallery{grid-template-columns:repeat(2,1fr)!important}
  body[data-page="cause-detail"] .public-case-gallery img{height:190px!important}
  body[data-page="cause-detail"] .summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  body[data-page="cause-detail"] .profile h1{font-size:32px}
  body[data-page="cause-detail"] .timeline{padding:12px}
  body[data-page="cause-detail"] .timeline-row{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto auto auto;min-height:0;padding:20px 0}
  body[data-page="cause-detail"] .date{grid-column:1/3;grid-row:1;width:max-content}
  body[data-page="cause-detail"] .dotwrap{grid-column:1;grid-row:2/5}
  body[data-page="cause-detail"] .timeline-main{grid-column:2;grid-row:2}
  body[data-page="cause-detail"] .donor{grid-column:2;grid-row:3}
  body[data-page="cause-detail"] .gallery{grid-column:2;grid-row:4}
  body[data-page="cause-detail"] .public-case-gallery img{height:150px!important}
  body[data-page="cause-detail"] .cta{align-items:stretch}
}