/*
 * Page blocks: layout building blocks for custom pages (Admin → Website → Custom pages), usable with every
 * template. Loaded automatically on any page whose content uses class="pg…" (event-router.php injectPageAddons).
 * Wrap the page in <div class="pg">…</div> for the base typography, then use the blocks:
 *   .pg-lead (intro)  .pg-kicker (small label)  .pg-section / .pg-band (tinted full-width band)
 *   .pg-grid + .pg-2 / .pg-3 / .pg-4 (responsive columns)  .pg-card (+ .pg-c1…c4 colours, <i class="fas fa-…"> icon)
 *   .pg-timeline (items: .pg-tl > .pg-year + content)  .pg-stats (items: .pg-stat > b + span)
 *   .pg-days (items: .pg-day > header(time + h3) + ul)  .pg-steps (ol)  .pg-checks (ul)
 *   .pg-split (text + aside)  .pg-callout (+ .pg-btn links)  .pg-quote  details.pg-faq (summary + p)
 * Colours follow the template: --pg-accent can be set per page; otherwise the template / event colours are used.
 */
.pg{--pg-a:var(--pg-accent,var(--af-maroon,var(--tk-p,var(--event-primary,#0f766e))));--pg-1:var(--af-maroon,var(--pg-a));--pg-2:var(--af-navy,color-mix(in srgb,var(--pg-a) 70%,#0b1b33));--pg-3:var(--af-leaf,color-mix(in srgb,var(--pg-a) 55%,#3f7d20));--pg-4:var(--af-sunset,color-mix(in srgb,var(--pg-a) 50%,#d97706));
  --pg-line:color-mix(in srgb,currentColor 14%,transparent);--pg-soft:color-mix(in srgb,var(--pg-a) 6%,transparent);font-size:1.02rem;line-height:1.7;max-width:100%}
.pg *{box-sizing:border-box}
.pg>*:first-child{margin-top:0}
.pg h2{font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.15;margin:2.4em 0 .7em;letter-spacing:-.015em}
.pg h2::after{content:"";display:block;width:56px;height:4px;border-radius:4px;margin-top:.45em;background:linear-gradient(90deg,var(--pg-1) 0 25%,var(--pg-2) 25% 50%,var(--pg-3) 50% 75%,var(--pg-4) 75%)}
.pg h3{font-size:1.18rem;line-height:1.3;margin:1.6em 0 .45em}
.pg p{margin:0 0 1em}
.pg ul:not([class]),.pg ol:not([class]){padding-left:1.25em;margin:0 0 1.2em}.pg li{margin:.35em 0}
.pg ul:not([class]) li::marker{color:var(--pg-a)}
.pg a:not(.pg-btn){color:var(--pg-a);text-underline-offset:3px}
.pg img{max-width:100%;height:auto;border-radius:10px}
.pg hr{border:0;border-top:1px solid var(--pg-line);margin:2.4em 0}
.pg table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem}.pg th,.pg td{padding:.7em .8em;border-bottom:1px solid var(--pg-line);text-align:left;vertical-align:top}.pg th{font-weight:700;background:var(--pg-soft)}
.pg blockquote,.pg-quote{margin:1.6em 0;padding:1em 1.3em;border-left:4px solid var(--pg-a);background:var(--pg-soft);border-radius:0 10px 10px 0;font-size:1.08rem;font-style:italic}
.pg-kicker{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pg-a);margin-bottom:.4em}
.pg-lead{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.6;margin:0 0 1.6em;opacity:.92}
.pg-section{margin:3em 0}
.pg-band{margin:3em 0;padding:clamp(22px,4vw,40px);border-radius:16px;background:var(--pg-soft);border:1px solid var(--pg-line)}
.pg-band>h2:first-child,.pg-section>h2:first-child{margin-top:0}
/* columns + cards */
.pg-grid{display:grid;gap:18px;margin:1.4em 0}.pg-2{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-3{grid-template-columns:repeat(3,minmax(0,1fr))}.pg-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-card{position:relative;padding:22px 20px 20px;border-radius:14px;background:color-mix(in srgb,var(--pg-a) 3%,transparent);border:1px solid var(--pg-line);border-top:4px solid var(--pg-c,var(--pg-a));text-align:left}
.pg-card h3{margin:.1em 0 .4em;font-size:1.08rem}.pg-card p{margin:0;font-size:.95rem;line-height:1.6;text-align:left!important}.pg-card>i:first-child,.pg-card .pg-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:12px;font-size:1.15rem;color:#fff;background:var(--pg-c,var(--pg-a))}
.pg-c1{--pg-c:var(--pg-1)}.pg-c2{--pg-c:var(--pg-2)}.pg-c3{--pg-c:var(--pg-3)}.pg-c4{--pg-c:var(--pg-4)}
.pg-card .pg-num{position:absolute;right:16px;top:10px;font-size:2.2rem;font-weight:900;line-height:1;color:color-mix(in srgb,var(--pg-c,var(--pg-a)) 18%,transparent)}
/* timeline */
.pg-timeline{position:relative;margin:1.6em 0;padding-left:0}
.pg-tl{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:0 0 24px;position:relative}
.pg-tl::before{content:"";position:absolute;left:47px;top:44px;bottom:0;width:2px;background:var(--pg-line)}.pg-tl:last-child::before{display:none}
.pg-year{display:grid;place-items:center;width:96px;height:44px;border-radius:999px;font-weight:900;font-size:1.05rem;color:#fff;background:var(--pg-c,var(--pg-a))}
.pg-tl:nth-child(4n+1){--pg-c:var(--pg-1)}.pg-tl:nth-child(4n+2){--pg-c:var(--pg-2)}.pg-tl:nth-child(4n+3){--pg-c:var(--pg-3)}.pg-tl:nth-child(4n+4){--pg-c:var(--pg-4)}
.pg-tl h3{margin:.45em 0 .3em}.pg-tl p{margin:0}
/* figures */
.pg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.6em 0}
.pg-stat{padding:18px 16px;border-radius:14px;background:var(--pg-soft);border:1px solid var(--pg-line);text-align:center}
.pg-stat b{display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;font-weight:900;color:var(--pg-a)}.pg-stat span{display:block;margin-top:6px;font-size:.86rem;line-height:1.35}
/* day cards */
.pg-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:1.6em 0}
.pg-day{border-radius:14px;overflow:hidden;border:1px solid var(--pg-line);background:color-mix(in srgb,var(--pg-c,var(--pg-a)) 4%,transparent)}
.pg-day:nth-child(4n+1){--pg-c:var(--pg-1)}.pg-day:nth-child(4n+2){--pg-c:var(--pg-2)}.pg-day:nth-child(4n+3){--pg-c:var(--pg-3)}.pg-day:nth-child(4n+4){--pg-c:var(--pg-4)}
.pg-day header{padding:14px 16px;background:var(--pg-c,var(--pg-a));color:#fff}.pg-day header time,.pg-day header small{display:block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.pg-day header h3{margin:.25em 0 0;color:#fff;font-size:1.05rem;line-height:1.25}
.pg-day ul,.pg-day p{margin:0;padding:14px 16px 16px 34px;font-size:.92rem;line-height:1.5}.pg-day p{padding-left:16px;text-align:left!important}.pg-day li{margin:.3em 0;text-align:left!important}
/* lists */
.pg-checks{list-style:none;padding:0;margin:1em 0 1.4em}.pg-checks li{position:relative;padding-left:32px;margin:.55em 0}
.pg-checks li::before{content:"";position:absolute;left:0;top:.25em;width:20px;height:20px;border-radius:50%;background:var(--pg-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat}
.pg-steps{list-style:none;counter-reset:pgs;padding:0;margin:1.2em 0 1.6em;display:grid;gap:12px}
.pg-steps>li{counter-increment:pgs;position:relative;padding:14px 16px 14px 64px;border-radius:12px;background:var(--pg-soft);border:1px solid var(--pg-line);margin:0}
.pg-steps>li::before{content:counter(pgs,decimal-leading-zero);position:absolute;left:16px;top:12px;font-weight:900;font-size:1.3rem;color:var(--pg-a)}
/* split + callout */
.pg-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start;margin:1.6em 0}
.pg-split aside{padding:20px;border-radius:14px;background:var(--pg-soft);border:1px solid var(--pg-line)}.pg-split aside h3:first-child{margin-top:0}
.pg-callout{margin:2.4em 0;padding:clamp(22px,4vw,36px);border-radius:16px;color:#fff;background:linear-gradient(120deg,var(--pg-2),var(--pg-1));display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.pg-callout h2,.pg-callout h3{color:#fff;margin:0 0 .3em}.pg-callout h2::after{display:none}.pg-callout p{margin:0;opacity:.9;text-align:left!important}.pg-callout a:not(.pg-btn){color:#fff}
.pg-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:800;text-decoration:none!important;background:var(--pg-4);color:#fff!important;white-space:nowrap}
.pg-btn.pg-ghost{background:transparent;border:2px solid currentColor;color:inherit!important}
/* FAQ accordions */
details.pg-faq{border:1px solid var(--pg-line);border-radius:12px;margin:.6em 0;background:color-mix(in srgb,var(--pg-a) 3%,transparent)}
details.pg-faq summary{cursor:pointer;list-style:none;padding:14px 44px 14px 16px;font-weight:700;position:relative}details.pg-faq summary::-webkit-details-marker{display:none}
details.pg-faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.4rem;line-height:1;color:var(--pg-a)}details.pg-faq[open] summary::after{content:"–"}
details.pg-faq>*:not(summary){padding:0 16px 14px;margin:0}
@media (max-width:860px){.pg-3,.pg-4{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-split{grid-template-columns:1fr}}
@media (max-width:560px){.pg-2,.pg-3,.pg-4{grid-template-columns:1fr}.pg-tl{grid-template-columns:72px 1fr;gap:14px}.pg-year{width:72px;font-size:.95rem}.pg-tl::before{left:35px}.pg-callout{flex-direction:column;align-items:flex-start}}
/* templates that narrow their page text (kit .tk-prose, …): give block pages the full content width */
.tk-prose:has(.pg),.prose:has(.pg){max-width:none}
/* headings keep their weight in templates that reset it (Tailwind-based ones) */
.pg h2,.pg h3,.pg-card h3,.pg-day header h3{font-weight:800}
.pg-lead{font-weight:400}