/* Page header infographics (see public/js/page-heads.js). Content is editable in Admin; layout lives only here. */
.page-head.has-info{align-items:center;flex-wrap:wrap}
.page-head.has-info .page-head-copy{flex:1 1 340px}
.page-head-info{flex:0 1 480px;min-width:0;margin-left:auto;position:relative;z-index:1;color:#2f2027}
@media(max-width:1000px){.page-head-info{flex:1 1 100%;max-width:640px;margin:6px 0 0}}
@media(max-width:700px){
 .page-head.has-info{gap:10px;padding-bottom:20px}
 .page-head.has-info .page-head-icon{display:none}
 .page-head.has-info .page-head-copy p{display:none}
 .page-head-info{max-width:none}
}

@keyframes ph-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ph-pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes ph-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ph-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ph-drop{0%{opacity:0;transform:translateY(-16px)}60%{opacity:1;transform:translateY(3px)}100%{transform:none}}
@keyframes ph-ring{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.3);opacity:0}}
@keyframes ph-travel{from{left:0}to{left:calc(100% - 14px)}}
@keyframes ph-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ph-tilt{from{opacity:0;transform:rotate(-9deg) translateY(16px)}to{opacity:1;transform:rotate(-3deg)}}

/* About: number tiles and timeline */
.ph-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ph-stat{background:#fff;border:1px solid #e6d3ad;border-radius:14px;padding:11px 14px;animation:ph-rise .6s ease both}
.ph-stat:nth-child(2){animation-delay:.12s}.ph-stat:nth-child(3){animation-delay:.24s}.ph-stat:nth-child(4){animation-delay:.36s}
.ph-stat b{display:block;font-size:28px;line-height:1.15;font-weight:700;color:#800020}
.ph-stat span{font-size:14px;color:#6d5a5e}
.ph-timeline{list-style:none;margin:18px 4px 0;padding:0;display:flex;justify-content:space-between;position:relative}
.ph-timeline:before{content:'';position:absolute;left:9%;right:9%;top:8px;height:3px;border-radius:2px;background:#d4ad55;transform-origin:left;animation:ph-grow 1.2s ease both .6s}
.ph-timeline li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative}
.ph-timeline i{width:19px;height:19px;border-radius:50%;background:#800020;border:3px solid #fffaf2;box-shadow:0 0 0 1px #d4ad55;animation:ph-pop .4s ease both}
.ph-timeline li:nth-child(1) i{animation-delay:.8s}.ph-timeline li:nth-child(2) i{animation-delay:1.1s}.ph-timeline li:nth-child(3) i{animation-delay:1.4s}.ph-timeline li:nth-child(4) i{animation-delay:1.7s}.ph-timeline li:nth-child(5) i{animation-delay:2s}.ph-timeline li:nth-child(6) i{animation-delay:2.3s}
.ph-timeline span{font-size:13px;line-height:1.35;color:#4c130e;padding:0 2px}
.ph-timeline span b{display:block;font-size:14px}

/* TIS: poster, countdown, route, buttons */
.ph-tis{display:flex;gap:16px;align-items:center}
.ph-poster{width:104px;height:146px;object-fit:cover;border-radius:8px;border:2px solid #d4ad55;box-shadow:0 8px 18px #5c0b1c33;transform:rotate(-3deg);animation:ph-tilt .8s ease both .1s;flex:none}
.ph-count{animation:ph-rise .6s ease both .3s}
.ph-count span{display:block;font-size:15px;color:#6d5a5e}
.ph-count b{display:block;font-size:52px;line-height:1;font-weight:700;color:#800020}
.ph-count b.ph-live,.ph-count b.ph-done{font-size:24px;line-height:1.3}
.ph-tag{display:inline-block;margin-top:8px;background:#800020;color:#fff3d6;border-radius:999px;padding:4px 14px;font-size:15px;font-weight:700;animation:ph-rise .6s ease both .5s}
.ph-route{margin-top:16px;animation:ph-rise .6s ease both .6s}
.ph-route>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;font-weight:600;color:#4c130e}
.ph-route-line{position:relative;height:14px;margin-top:6px}
.ph-route-line:before{content:'';position:absolute;left:7px;right:7px;top:6px;height:2px;background:repeating-linear-gradient(90deg,#d4ad55 0 8px,transparent 8px 14px)}
.ph-route-line i{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:#800020;animation:ph-travel 2.4s ease-in-out both 1s}
.ph-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;animation:ph-rise .6s ease both .8s}
.ph-actions .btn{justify-content:center;text-align:center;min-height:48px;margin:0}

/* TSC: branch pins */
.ph-map{position:relative;height:270px;border-radius:16px;background:radial-gradient(circle at 30% 20%,#fbf3e2,#f1e3c8);border:1px solid #e0c99c;overflow:hidden}
.ph-map:before{content:'';position:absolute;left:50%;top:16px;bottom:16px;border-left:2px dashed #d8b57599}
.ph-pin{position:absolute;display:flex;align-items:center;gap:8px;max-width:48%;animation:ph-drop .5s ease both}
.ph-pin:nth-child(1){left:12%;top:6%;animation-delay:.3s}
.ph-pin:nth-child(2){left:54%;top:22%;animation-delay:.55s}
.ph-pin:nth-child(3){left:6%;top:42%;animation-delay:.8s}
.ph-pin:nth-child(4){left:52%;top:57%;animation-delay:1.05s}
.ph-pin:nth-child(5){left:20%;top:77%;animation-delay:1.3s}
.ph-pin:nth-child(6){left:60%;top:84%;animation-delay:1.55s}
.ph-pin i{flex:none;position:relative;width:16px;height:16px;border-radius:50%;background:#800020;border:3px solid #fff;box-shadow:0 1px 4px #5c0b1c55}
.ph-pin i:before{content:'';position:absolute;inset:-3px;border-radius:50%;background:#b3122a;z-index:-1;animation:ph-ring 2s ease-out infinite 2s}
.ph-pin span{background:#fff;border-radius:10px;padding:4px 10px;font-size:13px;line-height:1.3;color:#5e4b4f;box-shadow:0 2px 8px #5c0b1c14}
.ph-pin b{display:block;color:#800020;font-size:14px}
.ph-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;animation:ph-rise .6s ease both 1.8s}
.ph-chips span{background:#fff;border:1px solid #e0c99c;border-radius:999px;padding:5px 13px;font-size:14px}
.ph-chips span.is-main{background:#800020;border-color:#800020;color:#fff3d6;font-weight:600}

/* Events: next activity */
.ph-next{display:flex;gap:14px;align-items:stretch}
.ph-cal{flex:none;width:96px;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #e0c99c;text-align:center;transform-origin:top;animation:ph-rise .7s ease both .2s}
.ph-cal small{display:block;background:#800020;color:#fff3d6;font-size:13.5px;font-weight:700;padding:4px 2px}
.ph-cal b{display:block;font-size:42px;line-height:1.15;font-weight:700;color:#4c130e}
.ph-cal span{display:block;font-size:13px;color:#6d5a5e;padding-bottom:6px}
.ph-next-copy{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;animation:ph-rise .6s ease both .4s}
.ph-kicker{font-size:12.5px;font-weight:700;letter-spacing:1px;color:#94702e}
.ph-next-copy strong{font-size:19px;line-height:1.35;color:#2f2027}
.ph-next-copy span{font-size:14.5px;color:#6d5a5e}
.ph-next-copy em{font-style:normal;font-weight:700;color:#800020;font-size:16px}
.ph-empty b{font-size:17px;color:#4c130e}
.ph-more{margin:12px 0 0;font-size:14.5px;color:#4c130e;animation:ph-rise .6s ease both .7s}

/* Gallery: count, mosaic and moving strip */
.ph-count-line{display:flex;align-items:baseline;gap:10px;animation:ph-rise .6s ease both .1s}
.ph-count-line b{font-size:44px;line-height:1;font-weight:700;color:#800020}
.ph-count-line span{font-size:19px;font-weight:600;color:#4c130e}
.ph-mosaic{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:92px 92px;gap:6px;margin-top:12px}
.ph-mosaic a{display:block;min-width:0;min-height:0;border-radius:12px;overflow:hidden;animation:ph-rise .5s ease both}
.ph-mosaic a:first-child{grid-row:span 2;animation-delay:.25s}.ph-mosaic a:nth-child(2){animation-delay:.4s}.ph-mosaic a:nth-child(3){animation-delay:.55s}
.ph-mosaic.ph-n1{grid-template-columns:1fr}.ph-mosaic.ph-n2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:150px}.ph-mosaic.ph-n2 a:first-child{grid-row:auto}
.ph-mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.ph-strip{margin-top:8px;overflow:hidden;border-radius:10px}
.ph-strip>div{display:flex;gap:6px;width:max-content;animation:ph-slide 40s linear infinite 1s}
.ph-strip img{width:80px;height:56px;object-fit:cover;border-radius:8px;display:block}

/* Join: steps */
.ph-steps{list-style:none;margin:0;padding:0 0 0 50px;position:relative}
.ph-steps:before,.ph-steps:after{content:'';position:absolute;left:17px;top:20px;bottom:20px;width:4px;border-radius:2px;background:#eadbbd}
.ph-steps:after{background:#800020;transform-origin:top;animation:ph-fill 1.6s ease both .5s}
.ph-steps li{position:relative;margin-bottom:12px;animation:ph-rise .5s ease both}
.ph-steps li:nth-child(1){animation-delay:.3s}.ph-steps li:nth-child(2){animation-delay:.8s}.ph-steps li:nth-child(3){animation-delay:1.3s}.ph-steps li:nth-child(4){animation-delay:1.8s}.ph-steps li:nth-child(5){animation-delay:2.3s}
.ph-steps i{position:absolute;left:-50px;top:3px;z-index:1;width:38px;height:38px;border-radius:50%;background:#800020;color:#fff3d6;display:grid;place-items:center;font-style:normal;font-size:18px;font-weight:700}
.ph-steps li:last-child i{background:#d4ad55;color:#4c130e}
.ph-steps span{display:block;background:#fff;border:1px solid #e6d3ad;border-radius:12px;padding:8px 12px}
.ph-steps b{display:block;font-size:16px;color:#2f2027}
.ph-steps small{display:block;font-size:13.5px;color:#6d5a5e}
.ph-cta{display:flex;justify-content:center;align-items:center;width:100%;min-height:52px;font-size:17px;margin:4px 0 0;animation:ph-rise .5s ease both 1.8s}
.ph-note{text-align:center;margin:8px 0 0;font-size:14px;color:#6d5a5e}

/* Contact: channel tiles (header) and logo grid (page body) */
.ph-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ph-tiles.ph-n2{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-tiles.ph-n1{grid-template-columns:1fr}
.ph-tile,.ph-logo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:16px;background:#fff;border:1px solid #e6d3ad;text-decoration:none;color:#2f2027;text-align:center;min-width:0;transition:transform .2s,box-shadow .2s}
.ph-tile{animation:ph-rise .5s ease both}
.ph-tile:nth-child(1){animation-delay:.3s}.ph-tile:nth-child(2){animation-delay:.45s}.ph-tile:nth-child(3){animation-delay:.6s}
.ph-tile:hover,.ph-logo:hover{transform:translateY(-3px);box-shadow:0 10px 22px #5c0b1c1f}
.ph-tile i,.ph-logo i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#800020}
.ph-tile svg,.ph-logo svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ph-tile b,.ph-logo b{font-size:15.5px}
.ph-tile small,.ph-logo small{font-size:12.5px;color:#6d5a5e;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-ch-facebook i{background:#1877f2}.ph-ch-line i{background:#06c755}.ph-ch-youtube i{background:#e62117}.ph-ch-tiktok i{background:#111}
.ph-ch-instagram i{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ph-ch-email i{background:#800020}.ph-ch-phone i{background:#94702e}.ph-ch-map i{background:#2f7a3e}
.ph-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:14px}
.ph-logo{padding:20px 10px}
.ph-logo i{width:64px;height:64px}.ph-logo svg{width:30px;height:30px}
.ph-logo b{font-size:17px}.ph-logo small{font-size:14px}

@media(max-width:700px){
 .ph-stat b{font-size:25px}
 .ph-count b{font-size:46px}
 .ph-poster{width:92px;height:130px}
 .ph-map{height:250px}
 .ph-pin span{font-size:12.5px;padding:3px 8px}
 .ph-tile{padding:12px 4px}
 .ph-tile small{font-size:12px}
 .ph-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(prefers-reduced-motion:reduce){
 .page-head-info *,.page-head-info *:before,.page-head-info *:after,.ph-steps:after,.ph-timeline:before{animation:none!important}
 .ph-route-line i{left:calc(100% - 14px)}
}

/* Footer social icons (every page) */
.ph-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ph-social a{display:block;border-radius:50%;transition:transform .2s}
.ph-social a:hover{transform:translateY(-2px)}
.ph-social i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2px #f0cf7866}
.ph-social svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Line up every page header with the content cards below it (same edges as .section in identity.css). */
@media(min-width:701px){.page-head{padding-left:calc(max(50px,(100% - 1380px) / 2) + 5%);padding-right:calc(max(50px,(100% - 1380px) / 2) + 5%)}}
@media(min-width:701px) and (max-width:1100px){.page-head{padding-left:calc(24px + 5%);padding-right:calc(24px + 5%)}}

/* Contact page body: channel list + address card with a drawn map */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.ct-grid h2{margin:6px 0 18px}
.ct-list{display:grid;gap:12px}
.ct-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:14px 18px;border-radius:16px;background:#fff;border:1px solid #e6d3ad;text-decoration:none;color:#2f2027;transition:transform .2s,box-shadow .2s,border-color .2s}
.ct-row:after{content:'→';grid-column:3;grid-row:1/3;font-size:22px;color:#b8862f;transition:transform .2s}
.ct-row:hover{transform:translateY(-2px);box-shadow:0 12px 26px #5c0b1c1a;border-color:#d4ad55}
.ct-row:hover:after{transform:translateX(4px)}
.ct-row i{grid-row:1/3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.ct-row svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-row b{font-size:18px;align-self:end}
.ct-row small{font-size:15px;color:#6d5a5e;align-self:start;overflow-wrap:anywhere}
.ct-map{border-radius:20px;overflow:hidden;background:#fff;border:1px solid #e6d3ad;box-shadow:0 14px 34px #5c0b1c14}
.ct-map-art{position:relative;height:220px;background:linear-gradient(0deg,#d4ad5522 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,#d4ad5522 1px,transparent 1px) 0 0/34px 34px,radial-gradient(circle at 60% 45%,#fbf3e2,#efe0c2)}
.ct-road{position:absolute;display:block;height:14px;background:#fff;box-shadow:0 0 0 2px #e6d3ad}
.ct-road-1{left:-10%;right:-10%;top:58%;transform:rotate(-8deg)}
.ct-road-2{width:14px;height:auto;top:-10%;bottom:-10%;left:38%;transform:rotate(14deg)}
.ct-pin{position:absolute;left:calc(50% - 18px);top:calc(45% - 40px);width:36px;height:36px;border-radius:50% 50% 50% 0;background:#800020;transform:rotate(-45deg);box-shadow:0 6px 14px #5c0b1c55;animation:ph-drop .6s ease both .3s}
.ct-pin:after{content:'';position:absolute;inset:11px;border-radius:50%;background:#f6d98a}
.ct-pin:before{content:'';position:absolute;left:-10px;bottom:-10px;width:56px;height:56px;border-radius:50%;background:#b3122a;opacity:.35;z-index:-1;animation:ph-ring 2.2s ease-out infinite 1s}
.ct-map-body{padding:20px 24px 24px}
.ct-addr{font-size:18px;line-height:1.6;margin:6px 0 16px;color:#2f2027}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:700px){.ct-row{grid-template-columns:48px minmax(0,1fr) auto;padding:12px 14px;column-gap:12px}.ct-row i{width:48px;height:48px}.ct-row b{font-size:17px}.ct-map-art{height:170px}}
@media(prefers-reduced-motion:reduce){.ct-pin,.ct-pin:before{animation:none}}

/* Event landing page */
.event-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:16px 0 18px;padding:14px 18px;border-left:3px solid #d4ad55;background:#fff8eb;border-radius:0 12px 12px 0}
.event-facts dt{font-weight:700;color:#800020}
.event-facts dd{margin:0}
.event-page .btn{margin:0 0 10px}

/* Small screens: keep the top bar reachable — hides while scrolling down, returns when scrolling up (public/js/sticky-header.js). */
@media(max-width:1100px){
 body>header{position:sticky;top:0;z-index:60;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 14px #2a040933}
 body>header.is-hidden{transform:translateY(-100%);box-shadow:none}
}
@media(max-width:1100px) and (prefers-reduced-motion:reduce){body>header{transition:none}}
/* The whole address card is one link to Google Maps */
a.ct-map{display:block;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.ct-map:hover{transform:translateY(-3px);box-shadow:0 18px 40px #5c0b1c26}
a.ct-map:focus-visible{outline:3px solid #b8862f;outline-offset:4px}
.ct-map-art,.ct-map-body,.ct-addr{display:block}
.ct-map-body .btn{display:inline-flex}