/* Studio tour page (hand-written, 2026-10-01). Same colors, fonts and boxes as the Pricing page. Booking: tour.js. */

.skl-tour{--teal:#133e54;--gold:#ae9863;--gold-text:#8c6d2f;--cream:#f1e3cd;--paper:#fbf6ec;--line:#e2d3b6;--muted:#4c5f69;
  color:var(--teal);font-family:Manrope,"Nunito Sans",sans-serif;font-size:17px;line-height:1.55;letter-spacing:normal;margin-bottom:70px}
.skl-tour *{box-sizing:border-box}
.skl-tour h2,.skl-tour h3{font-family:Outfit,sans-serif;color:var(--teal);text-transform:uppercase;letter-spacing:-.5px;margin:0}
.skl-tour p{margin:0}
.skl-tour a{color:var(--teal)}
.skl-tour img{max-width:100%;height:auto;display:block}
.skl-tour ul{list-style:none;margin:0;padding:0}
.skl-tour [hidden]{display:none!important}
.skl-tour .tr-kicker{font:700 13px/1.3 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}

.skl-tour .tr-intro{text-align:center;max-width:900px;margin:0 auto}
.skl-tour .tr-intro h2{font-size:clamp(36px,5.4vw,60px);line-height:1;font-weight:600;margin-top:10px}
.skl-tour .tr-intro h2 span{display:block;color:var(--gold-text)}
.skl-tour .tr-lede{font-size:19px;font-weight:600;color:var(--muted);max-width:60ch;margin:18px auto 0}

/* Two equal cards side by side, the same height, the same frame (Slawek, Oct 1: "evenness … i like symmetry") */
.skl-tour .tr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:48px;align-items:stretch}
.skl-tour .tr-side{display:flex;flex-direction:column}
.skl-tour .tr-side .tr-where{margin-top:auto}
.skl-tour .tr-list{margin-bottom:24px}
.skl-tour .tr-side,.skl-tour .tr-book{background:var(--paper);border:6px solid var(--gold);box-shadow:12px 12px 0 var(--cream);padding:28px}

.skl-tour .tr-photo{margin:0;background:var(--teal)}
.skl-tour .tr-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.skl-tour .tr-side h3{font-size:30px;font-weight:700;margin-top:24px}
.skl-tour .tr-list{margin-top:12px}
.skl-tour .tr-list li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid var(--line);font-weight:600}
.skl-tour .tr-list li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:12px;background:var(--gold);transform:rotate(45deg)}
.skl-tour .tr-where{margin-top:24px;padding:16px 18px;background:#fff;border-left:4px solid var(--gold)}
.skl-tour .tr-where p+p{margin-top:8px}

.skl-tour .tr-book h3{font-size:30px;font-weight:700}
.skl-tour .tr-note{font-size:14px;color:var(--muted);margin-top:4px}
.skl-tour .tr-loading{margin-top:20px;color:var(--muted)}
.skl-tour .tr-step{font:700 14px/1.3 Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:24px 0 10px}

/* Days sit in their weekday column (Mon to Fri), like a small calendar */
.skl-tour .tr-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.skl-tour .tr-day{width:100%;padding:10px 4px;border:2px solid var(--line);background:#fff;color:var(--teal);cursor:pointer;
  font:600 13px/1.2 Outfit,sans-serif;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.skl-tour .tr-day b{display:block;font-size:24px;line-height:1.1;letter-spacing:0;margin:2px 0}
.skl-tour .tr-day:hover:not(:disabled){border-color:var(--gold)}
.skl-tour .tr-day:disabled{opacity:.35;cursor:default;background:transparent}
.skl-tour .tr-day[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}

/* Times in even rows; a shorter last row sits in the middle */
.skl-tour .tr-times{--cols:4;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.skl-tour .tr-time{flex:0 0 calc((100% - (var(--cols) - 1) * 8px) / var(--cols))}
.skl-tour .tr-time{padding:11px 6px;border:2px solid var(--line);background:#fff;color:var(--teal);cursor:pointer;font:700 15px/1 Outfit,sans-serif}
.skl-tour .tr-time:hover{border-color:var(--gold)}
.skl-tour .tr-time[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff}

/* Step 3 opens as a full-width box under the two cards, with the same frame, so the cards stay even */
.skl-tour .tr-form{margin-top:40px;background:var(--paper);border:6px solid var(--gold);box-shadow:12px 12px 0 var(--cream);padding:28px 40px 32px;text-align:center}
.skl-tour .tr-form .tr-fields{text-align:left;max-width:860px;margin:0 auto}
.skl-tour .tr-form .tr-step{margin-top:18px}
.skl-tour .tr-chosen{display:inline-block;margin:0 auto;padding:12px 22px;background:#fff;border:2px solid var(--gold);font:700 18px/1.35 Outfit,sans-serif}
.skl-tour .tr-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.skl-tour .tr-fields label{display:flex;flex-direction:column;gap:6px;font:600 14px/1.3 Outfit,sans-serif;color:var(--teal)}
.skl-tour .tr-fields label em{font-style:normal;font-weight:400;color:var(--muted)}
.skl-tour .tr-fields .tr-wide{grid-column:1/-1}
.skl-tour .tr-fields input,.skl-tour .tr-fields select,.skl-tour .tr-fields textarea{width:100%;padding:11px 12px;border:2px solid var(--line);background:#fff;
  color:var(--teal);font:500 16px/1.3 Manrope,"Nunito Sans",sans-serif;border-radius:0;margin:0}
.skl-tour .tr-fields input:focus,.skl-tour .tr-fields select:focus,.skl-tour .tr-fields textarea:focus{outline:none;border-color:var(--teal)}
.skl-tour .tr-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.skl-tour .tr-btn{display:inline-block;margin-top:20px;padding:15px 30px;font:700 15px/1 Outfit,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;text-align:center;border:2px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer;transition:background .2s,color .2s}
.skl-tour .tr-btn:hover,.skl-tour .tr-btn:focus-visible{background:#fff;color:var(--teal)}
.skl-tour .tr-btn:disabled{opacity:.6;cursor:wait}
.skl-tour .tr-btn-line{background:#fff;color:var(--teal)}
.skl-tour .tr-btn-line:hover{background:var(--teal);color:#fff}
.skl-tour .tr-msg{margin-top:12px;font-weight:600;color:#9b2c1f}
.skl-tour .tr-msg.ok{color:var(--muted)}

.skl-tour .tr-done,.skl-tour .tr-closed{margin-top:20px}
/* Booked: the confirmation sits in the middle of its card */
.skl-tour .tr-book{display:flex;flex-direction:column}
.skl-tour .tr-book.is-done>h3,.skl-tour .tr-book.is-done>.tr-note{display:none}
.skl-tour .tr-book.is-done .tr-done{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:0;gap:4px}
.skl-tour .tr-book.is-done .tr-done p{max-width:40ch}
.skl-tour .tr-done-when{font:700 24px/1.25 Outfit,sans-serif;margin:8px 0 12px}
.skl-tour .tr-closed p+p{margin-top:6px}

/* One column: pick a time, then your details, then about the tour */
@media (max-width:1024px){.skl-tour .tr-wrap{display:flex;flex-direction:column;gap:32px;margin-top:40px}.skl-tour .tr-grid{display:contents}
  .skl-tour .tr-book{order:1}.skl-tour .tr-form{order:2;margin-top:0}.skl-tour .tr-side{order:3}}
@media (max-width:1200px) and (min-width:1025px){.skl-tour .tr-times{--cols:3}}
@media (max-width:680px){
  .skl-tour{font-size:16px}
  .skl-tour .tr-side,.skl-tour .tr-book,.skl-tour .tr-form{padding:20px 16px 24px;box-shadow:8px 8px 0 var(--cream)}
  .skl-tour .tr-times{--cols:3}
  .skl-tour .tr-day{font-size:11px;letter-spacing:.03em}.skl-tour .tr-day b{font-size:20px}
  .skl-tour .tr-fields{grid-template-columns:1fr}
  .skl-tour .tr-btn{width:100%}
}