/* ==========================================================================
   For schools & venues. Loaded on that page only (inc/enqueue.php).
   The page head, 1 quote list form card in 2 columns with a send bar across
   the bottom, then 3 idea cards. Spacing, chips, fields and the upload box
   match Get in touch: content on the breadcrumb's lines, the card 36px under
   the intro (28px on phones), 36px inside the card (22px on phones), 22px
   between fields, 72px to the next section (48px on phones).
   ========================================================================== */

#kd-schools{--sv-pad:clamp(22px,3vw,36px);--sv-red:var(--copper-pressed)}
#kd-schools .page-head{padding-bottom:0}
#kd-schools h2{font-family:var(--fh);font-weight:600;text-wrap:balance}

.sv-notice:empty{display:none}
.sv-notice{margin-top:24px}

/* the form card: steps 1 and 2 on the left, 3 and 4 on the right */
.pg-form.sv-card{display:block;padding:0;margin-top:36px;min-width:0}
.sv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sv-col{min-width:0}
.sv-col+.sv-col{border-left:1px solid var(--rule)}
.sv-step-sec{padding:32px var(--sv-pad)}
.sv-step-sec+.sv-step-sec{border-top:1px solid var(--rule)}
.sv-sh{display:flex;align-items:center;gap:12px}
.sv-num{width:32px;height:32px;flex:none;border-radius:50%;background:var(--ink);color:#FFFFFF;display:grid;place-items:center;font-family:var(--fm);font-weight:700;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
#kd-schools .sv-sh h2{font-size:var(--fs-h3);line-height:var(--lh-snug)}
.sv-sh .req,.sv-card .req{color:var(--ink)}
.sv-sub{margin:4px 0 16px 44px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-soft)}
.sv-f{display:grid;gap:22px}
.sv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pg-form .sv-fl>span:first-child{display:block}
.pg-form .sv-fl>input,.pg-form .sv-fl>select,.pg-form .sv-fl>textarea{margin-top:6px}
.sv-opt{font-weight:400;color:var(--ink-soft)}
.sv-card input:user-invalid,.sv-card textarea:user-invalid,.sv-card select:user-invalid{border-color:var(--sv-red)}

/* type of space: the Get in touch topic chips */
.sv-chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.pg-form .sv-chip{position:relative;display:inline-flex}
.sv-chip input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.sv-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--rule);background:var(--surface);font-size:var(--fs-sm);font-weight:600;line-height:1;color:var(--ink);transition:border-color .16s,background .16s,color .16s}
.sv-chip:hover span{border-color:var(--sage)}
.sv-chip input:checked+span{background:var(--ink-hover);border-color:var(--ink-hover);color:var(--cream);text-shadow:var(--ink-shadow)}
.sv-chip input:focus-visible+span{outline:3px solid rgba(var(--copper-rgb),.35);outline-offset:2px}

/* the quote list */
.sv-list-box{border:1.5px solid var(--rule);border-radius:12px;background:var(--surface)}
.sv-list{list-style:none;margin:0;padding:0}
.sv-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto 36px;gap:12px;align-items:center;padding:10px 8px 10px 10px}
.sv-item+.sv-item{border-top:1px solid var(--rule)}
.sv-th{width:52px;height:52px;border-radius:10px;background:var(--cream-2);display:grid;place-items:center;overflow:hidden;color:var(--ink-soft)}
.sv-th img{width:88%;height:88%;object-fit:contain}
.sv-th svg{width:20px;height:20px}
.sv-name{min-width:0;display:grid;justify-items:start;gap:4px}
.pg-form .sv-name-in{min-height:40px;padding:6px 10px}
.sv-name b{font-size:var(--fs-base);font-weight:600;line-height:var(--lh-snug);overflow-wrap:anywhere}
.sv-tag{font-size:var(--fs-xs);font-weight:700;line-height:1.5;border-radius:999px;padding:1px 9px;color:#FFFFFF;background:var(--sage-pressed);text-shadow:var(--sage-pressed-shadow)}
.sv-tag:empty{display:none}
.sv-tag.soft{background:var(--cream-2);color:var(--ink-soft);font-weight:600;text-shadow:none}
.sv-qty{display:flex;align-items:center;height:40px;border:1.5px solid var(--rule);border-radius:var(--btn-r);background:var(--surface)}
.sv-step{width:36px;height:100%;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:0}
.sv-step svg{width:16px;height:16px}
.pg-form .sv-qty-in{width:44px;min-height:0;height:100%;padding:0;border:0;border-radius:0;background:transparent;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:none;-moz-appearance:textfield;appearance:textfield}
.sv-qty-in::-webkit-outer-spin-button,.sv-qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sv-qty:focus-within{border-color:var(--copper);box-shadow:0 0 0 3px rgba(var(--copper-rgb),.25)}
.sv-rm{width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-soft);border-radius:8px;cursor:pointer;padding:0}
.sv-rm:hover{color:var(--ink);background:var(--cream)}
.sv-rm svg{width:16px;height:16px}
.sv-list:not(.js) .sv-step,.sv-list:not(.js) .sv-rm{display:none}
.sv-list:not(.js) .sv-item{grid-template-columns:52px minmax(0,1fr) auto}
.pg-form .sv-list:not(.js) .sv-qty-in{width:72px}
.sv-empty{padding:16px;font-size:var(--fs-sm);color:var(--ink-soft)}
.sv-adder{display:flex;gap:8px;padding:10px;background:var(--cream);border-top:1px solid var(--rule);border-radius:0 0 10px 10px}
.sv-list-box.is-empty .sv-adder{border-radius:0 0 10px 10px}
.sv-list:empty+.sv-empty+.sv-adder,.sv-empty:not([hidden])+.sv-adder{border-top:0}
.sv-adder[hidden]{display:none}
.sv-search{position:relative;flex:1;min-width:0}
.sv-search>svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none}
.pg-form .sv-search input{min-height:44px;padding-left:38px}
.pg-form .sv-add{min-height:44px;padding:0 16px;font-size:var(--fs-sm);justify-self:auto}
.sv-sugs{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 28px -12px rgba(42,33,24,.35);max-height:320px;overflow:auto}
.sv-sugs[hidden]{display:none}
.sv-sug{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.sv-sug img{width:40px;height:40px;flex:none;border-radius:8px;background:var(--cream-2);object-fit:contain}
.sv-sug b{display:block;font-weight:600;color:var(--ink)}
.sv-sug small{display:block;color:var(--ink-soft)}
.sv-sug[aria-selected="true"],.sv-sug:hover{background:var(--cream)}
.sv-sug.own svg{width:20px;height:20px;margin:0 10px;color:var(--ink-soft)}
.sv-total{margin-top:12px;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.sv-total:empty{display:none}
.sv-err{margin-top:8px;font-size:var(--fs-sm);font-weight:600;color:var(--sv-red)}
.sv-err[hidden]{display:none}
.pg-form .sv-notes{margin-top:22px}
.sv-notes textarea{min-height:96px}

/* delivery or collection */
.sv-ways{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.pg-form .sv-way{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border:1.5px solid var(--rule);border-radius:10px;background:var(--surface);cursor:pointer;font-weight:600;transition:border-color .16s,box-shadow .16s}
.sv-way input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.sv-way b{display:block;font-size:var(--fs-base);font-weight:600;line-height:var(--lh-snug)}
.sv-way small{display:block;font-size:var(--fs-sm);font-weight:400;line-height:var(--lh-snug);color:var(--ink-soft)}
.sv-dot{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--rule-strong);background:var(--surface);transition:border-width .12s,border-color .12s}
.sv-way:hover{border-color:var(--sage)}
.sv-way:has(input:checked){border-color:var(--ink-hover);box-shadow:inset 0 0 0 1px var(--ink-hover)}
.sv-way:has(input:checked) .sv-dot{border:5px solid var(--ink-hover)}
.sv-way:has(input:focus-visible){outline:3px solid rgba(var(--copper-rgb),.35);outline-offset:2px}

/* photo upload: the Get in touch box */
.pg-form .sv-drop{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px dashed var(--rule-strong);border-radius:10px;background:var(--cream);cursor:pointer;font-weight:500;transition:border-color .16s}
.sv-drop:hover{border-color:var(--copper)}
.sv-drop:focus-within{outline:3px solid rgba(var(--copper-rgb),.35);outline-offset:2px}
.sv-drop>svg{width:20px;height:20px;flex:none;color:var(--ink)}
.sv-drop>span{display:grid;gap:2px;min-width:0}
.pg-form .sv-drop input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.sv-files{font-weight:400;color:var(--ink-soft);overflow-wrap:anywhere}
.sv-files:empty{display:none}
.sv-card .check{cursor:pointer;padding-top:0}

/* send bar across the bottom of the card */
.sv-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:20px var(--sv-pad);border-top:1px solid var(--rule);background:var(--paper);border-radius:0 0 17px 17px}
.pg-form .sv-send .btn{justify-self:auto}
.sv-alt{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--fs-sm);color:var(--ink-soft)}
.sv-alt a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none}
.sv-alt a:hover{text-decoration:none}
.sv-alt svg{width:18px;height:18px}

/* idea cards: colour card with the photo in a white glass frame */
.sv-ideas-sec{margin-top:72px}
.sv-sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
#kd-schools .sv-sec-head h2{margin-top:12px;font-size:var(--fs-h2)}
.sv-ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sv-idea{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center;padding:10px 18px 10px 10px;border-radius:22px;background:var(--tc);color:#FFFFFF;text-decoration:none;box-shadow:0 10px 22px -12px rgba(42,33,24,.4);transition:transform .24s cubic-bezier(.22,.7,.3,1),box-shadow .24s}
.sv-idea:hover{color:#FFFFFF;transform:translateY(-4px);box-shadow:0 14px 26px -12px rgba(42,33,24,.45)}
.sv-frame{display:block;padding:6px;border-radius:16px;background:var(--glass-frame);box-shadow:var(--glass-ring)}
.sv-frame img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:11px}
.sv-idea-t{display:grid;gap:4px;min-width:0;text-shadow:var(--tcs,var(--on-fill-shadow))}
.sv-idea-h{font-family:var(--fh);font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-snug)}
.sv-idea-p{font-size:var(--fs-sm);line-height:1.4}
.sv-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:var(--fs-sm);font-weight:600}
.sv-go svg{width:14px;height:14px}

@media (max-width:1060px){
  .sv-cols{grid-template-columns:minmax(0,1fr)}
  .sv-col+.sv-col{border-left:0;border-top:1px solid var(--rule)}
  .sv-ideas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639px){
  .pg-form.sv-card{margin-top:28px}
  .sv-step-sec{padding:22px var(--sv-pad)}
  .sv-sub{margin:4px 0 14px}
  .sv-row{grid-template-columns:minmax(0,1fr)}
  .sv-chips{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg-form .sv-chip,.sv-chip span{display:flex;width:100%}
  .sv-chip span{justify-content:center;padding:0 6px;text-align:center;line-height:1.15}
  .pg-form .sv-add{width:auto;flex:none}
  .sv-item{grid-template-columns:48px minmax(0,1fr) 36px;row-gap:8px;padding:10px 6px 10px 10px}
  .sv-th{width:48px;height:48px}
  .sv-qty{grid-column:2;grid-row:2;justify-self:start}
  .sv-rm{grid-column:3;grid-row:1}
  .sv-send{padding:16px var(--sv-pad)}
  .pg-form .sv-send .btn{width:100%}
  .sv-alt{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
  .sv-alt a{justify-content:center;min-height:48px;border:1.5px solid var(--rule);border-radius:var(--btn-r);background:var(--surface)}
  .sv-alt a:hover{text-decoration:none;border-color:var(--copper)}
  .sv-ideas-sec{margin-top:48px}
  .sv-sec-head .btn{display:none}
  .sv-idea{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:8px 14px 8px 8px}
}
@media (prefers-reduced-motion:reduce){.sv-chip span,.sv-way,.sv-dot,.sv-drop,.sv-idea{transition:none}}