/* Weekly-class listing pages (/classes/{county}/{slug}).
   Markup comes from sortd-admin generate-listings.js (generateClassHTML);
   behaviour from /js/class-page.js. Nav, footer and tokens come from
   /css/site.css. Each page sets --cat and --cat-tint for its category. */

.lp-bc{background:#fff;padding:11px 40px;border-bottom:1px solid var(--bd);font-size:12px;font-weight:700;color:#9aa0ad;}
.lp-bc-inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.lp-bc a{color:#9aa0ad;}.lp-bc a:hover{color:var(--nv);}.lp-sep{opacity:.5;}.lp-cur{color:var(--nv);}

.cl-wrap{background:var(--cat-tint);}
.cl-page{max-width:1120px;margin:0 auto;padding:32px 40px 64px;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"head act" "body act";column-gap:32px;align-items:start;}
.cl-head{grid-area:head;padding-bottom:20px;}
.cl-body{grid-area:body;display:grid;gap:16px;}
.lp-act{grid-area:act;position:sticky;top:20px;}
@media(max-width:900px){
  .cl-page{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "act" "body";padding:24px 20px 96px;}
  .lp-act{position:static;margin-bottom:16px;}
  .lp-bc{padding:10px 20px;}
}

/* Title block */
.cl-eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cat);margin-bottom:8px;}
.cl-head h1{font-weight:800;font-size:clamp(26px,4vw,40px);line-height:1.08;color:var(--nv);margin:0 0 8px;}
.cl-prov{font-size:15px;color:#5b6274;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.cl-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:700;color:var(--nv);box-shadow:0 1px 0 rgba(30,42,68,.06);}
.cl-chip .ti{color:var(--cat);font-size:16px;}
.cl-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;}
.cl-badge--nd{background:var(--pul);color:var(--pu);}
.cl-banner{background:#FFF7E8;border:2px solid #D9971E;border-radius:16px;padding:14px 18px;margin-top:16px;color:#6b4a0c;font-size:14px;line-height:1.5;}
.cl-banner b{display:block;color:#8a5f0f;font-size:16px;margin-bottom:2px;}
.lp-mo-ribbon{background:var(--nv);color:#fff;text-align:center;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.92rem;padding:11px 16px;display:flex;align-items:center;justify-content:center;gap:8px;}

/* Content cards */
.cl-card{background:#fff;border-radius:20px;padding:22px 24px;}
.cl-card h2{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cat);margin:0 0 12px;}
.cl-about{font-size:15.5px;line-height:1.7;color:#3f4557;white-space:pre-line;margin:0;}
.cl-tt{display:grid;gap:14px;}
.cl-tt-grp h3{font-family:'Baloo 2',sans-serif;font-size:17px;font-weight:800;color:var(--nv);margin:0 0 6px;}
.cl-tt-grp h3 span{font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:600;color:#767c8c;}
.cl-tt-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px solid #eef0f4;font-size:14.5px;color:#3f4557;}
.cl-tt-row:first-of-type{border-top:none;}
.cl-tt-row b{color:var(--nv);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cl-tt-plain{margin:0;padding-left:18px;color:#3f4557;line-height:1.7;}
.cl-tt-more{margin-top:4px;}
.cl-note{font-size:13px;color:#767c8c;margin:12px 0 0;}
.cl-where{display:grid;gap:6px;font-size:15px;color:#3f4557;line-height:1.55;}
.cl-where a{font-weight:700;font-size:14px;}
.cl-sib{display:grid;gap:8px;}
.cl-sib a{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;background:var(--pg);border-radius:12px;color:var(--nv);font-weight:700;font-size:14px;text-decoration:none;}
.cl-sib a span{color:#767c8c;font-weight:600;white-space:nowrap;}
.cl-explore{display:flex;flex-wrap:wrap;gap:8px;}
.cl-explore a{background:#fff;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--nv);text-decoration:none;border:1.5px solid var(--bd);}
.cl-explore a:hover{border-color:var(--cat);}
.cl-src{font-size:12.5px;color:#767c8c;margin:4px 2px 0;}

/* Action card */
.lp-act{background:#fff;border-radius:22px;padding:22px;box-shadow:0 10px 32px rgba(30,42,68,.10);display:flex;flex-direction:column;gap:10px;}
.lp-act-price{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px;line-height:1.2;color:var(--nv);}
.lp-act-sub{font-size:13px;color:#767c8c;margin-top:-6px;}
.lp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:999px;padding:14px 16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:opacity .15s,background .15s;}
.lp-btn .ti{font-size:18px;}
.lp-btn--book{background:#fff;color:var(--nv);border-color:var(--nv);order:2;}
.lp-btn--book:hover{background:var(--pg);}
.lp-btn--cal{background:var(--cat);color:#fff;order:1;}
.lp-btn--cal:hover{opacity:.9;}
.lp-btn[disabled]{opacity:.5;cursor:default;}
.lp-minor{display:flex;gap:8px;order:3;}
.lp-mini{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--pg);border:none;border-radius:12px;padding:10px;font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;color:var(--nv);cursor:pointer;}
.lp-mini .ti{font-size:17px;}
.lp-mini.saved{color:#C66686;}
.lp-mini .h-on,.lp-mini.saved .h-off{display:none;}
.lp-mini.saved .h-on{display:inline;}
.lp-act-how{order:4;font-size:13px;color:#5b6274;line-height:1.5;border-top:1px solid #eef0f4;padding-top:10px;}
.lp-act-how a{font-weight:700;}
.lp-booked{order:0;background:#E8F7EF;border-radius:14px;padding:12px 14px;font-size:14px;color:#1d5c3c;line-height:1.45;position:relative;padding-right:34px;}
.lp-booked b{display:block;font-size:15px;color:#174d31;}
.lp-booked button{position:absolute;top:8px;right:8px;border:none;background:transparent;font-size:15px;color:#1d5c3c;cursor:pointer;}

/* Mobile sticky bar */
.lp-bar{display:none;}
@media(max-width:900px){
  .lp-bar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(30,42,68,.12);transform:translateY(110%);transition:transform .2s;}
  .lp-bar.show{transform:none;}
  .lp-bar .lp-btn{padding:12px;font-size:14px;}
  .lp-bar .lp-btn--cal{order:1;flex:1 1 auto;}
  .lp-bar .lp-btn--book{order:2;flex:0 0 auto;width:auto;padding-inline:16px;}
  .lp-bar .lp-btn--cal[aria-label]::after{content:"Add to my Sortd calendar";}
}

/* Add-to-calendar sheet */
.cp-scrim{position:fixed;inset:0;background:rgba(18,26,43,.45);z-index:100;display:flex;align-items:flex-end;justify-content:center;}
.cp-sheet{background:#fff;width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;font-family:'Nunito',sans-serif;color:var(--nv);}
@media(min-width:700px){.cp-scrim{align-items:center;}.cp-sheet{border-radius:22px;}}
.cp-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.cp-head h2{font-family:'Baloo 2',sans-serif;font-size:22px;margin:0;}
.cp-head p{margin:2px 0 0;color:#767c8c;font-size:14px;}
.cp-x{border:none;background:var(--pg);border-radius:10px;width:34px;height:34px;font-weight:800;cursor:pointer;flex:none;}
.cp-fs{border:none;margin:0;padding:0;display:grid;gap:12px;}
.cp-fs legend{font-weight:800;font-size:14px;margin-bottom:6px;}
.cp-grp-h{font-weight:800;font-size:13px;color:#767c8c;margin-bottom:4px;}
.cp-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid var(--bd);border-radius:12px;margin-bottom:6px;cursor:pointer;font-size:14px;}
.cp-opt:has(input:checked){border-color:var(--nv);background:var(--pg);}
.cp-opt input{accent-color:var(--nv);}
.cp-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.cp-f{display:grid;gap:4px;font-weight:700;font-size:13.5px;flex:1 1 140px;}
.cp-f input,.cp-f select{border:1.5px solid var(--bd);border-radius:10px;padding:9px 10px;font:inherit;font-weight:600;color:var(--nv);background:#fff;}
.cp-chk{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;flex:1 1 100%;}
.cp-hint{margin:0;font-size:13px;color:#767c8c;}
.cp-sum{background:var(--pg);border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.5;}
.cp-sum span{font-size:13px;color:#5b6274;}
.cp-acts{display:grid;gap:8px;}
.cp-btn{display:block;text-align:center;border-radius:999px;padding:13px;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;border:2px solid var(--nv);background:#fff;color:var(--nv);text-decoration:none;cursor:pointer;}
.cp-btn--pri{background:var(--nv);color:#fff;}
.lp-act-price--long{font-size:17px;}
/* Keep the result and buttons in view while scrolling a long timetable */
#cp-sum{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom,0px));background:#fff;padding:10px 0 4px;display:grid;gap:8px;box-shadow:0 -10px 14px -10px rgba(30,42,68,.18);}

/* Logged out: calendar needs a free account */
.lp-btn--cal.is-locked{background:#ECEDF2;color:#7A8094;border-color:#ECEDF2;}
.lp-btn--cal.is-locked:hover{opacity:1;background:#E2E4EC;}
.lp-btn--cal.is-locked .ti-lock{font-size:18px;}

/* Sortd calendar sheet: children */
.cp-kids{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.cp-kid{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--bd);background:#fff;border-radius:999px;padding:8px 14px;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:var(--nv);cursor:pointer;}
.cp-kid i{width:12px;height:12px;border-radius:4px;display:inline-block;}
.cp-kid.on{border-color:var(--nv);background:var(--nv);color:#fff;}
.cp-newkid{margin-top:6px;}
.cp-f--age{flex:0 0 90px;}
.cp-link{justify-self:start;background:none;border:none;padding:6px 0;color:var(--sk);font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.cp-btn[disabled]{opacity:.45;cursor:default;}
.cp-err{color:#B4703F;font-weight:700;}
.cp-more summary{cursor:pointer;font-weight:800;font-size:14px;color:var(--sk);padding:4px 0;}
.cp-more .cp-acts{margin-top:10px;}