/* Mobile readability and resilient layout across the approved JOK designs. */
/* Preserve the editorial hero proportions without letting long headings cross into imagery. */
@media(min-width:1001px){
  .approved-site .page-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:5vw}
  .approved-site .page-hero h1{font-size:clamp(48px,5.2vw,72px);line-height:.98;letter-spacing:-2.5px}
}
.page-id-12 .page-hero h1{font-size:clamp(28px,5.2vw,72px);line-height:1;letter-spacing:-1.5px}
@media(max-width:540px){.page-id-12 .page-hero h1{font-size:clamp(26px,8vw,42px);letter-spacing:-1px}}
/* Product bundles share content rows so longer names do not shift summaries and prices. */
@media(min-width:1001px){
  .resources-grid{grid-template-rows:auto repeat(8,auto);row-gap:0}
  .resources-grid>.offer-card{display:grid;grid-template-rows:subgrid;grid-row:span 9}
  .resources-grid .offer-copy{display:grid;grid-template-rows:subgrid;grid-row:span 8;row-gap:0}
  .resources-grid .offer-copy>.button{margin-top:0;align-self:end}
}
/* Match shop sale markers to the existing JOK palette. */
.woocommerce span.onsale{background:var(--berry);color:var(--paper)}
/* Keep WooCommerce basket content and recommendations inside the viewport. */
.woocommerce-cart main[data-page="cart"]{box-sizing:border-box;padding:32px clamp(20px,5vw,72px) 64px;max-width:1440px;margin-inline:auto}
.woocommerce-cart .wc-block-grid__products{margin-left:0;margin-right:0}
/* Shared footer: only the inner component owns spacing and columns. */
footer.wp-block-template-part{display:block;padding:0;margin-block-start:0;background:#0e090d;color:#fff}
.approved-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;width:100%;padding:48px 6vw 28px}
.approved-footer>p{white-space:normal;margin:0;max-width:100%;font-size:14px;line-height:1.65}
.approved-footer .footer-links{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 24px;min-width:0}
.approved-footer .footer-links a{min-height:44px;gap:10px;white-space:nowrap}
.approved-footer .footer-icon{box-sizing:border-box;width:36px;height:36px;flex:0 0 36px}
.approved-footer .footer-policies{grid-column:1/-1;margin:0;gap:8px 24px;min-width:0}
.approved-footer .footer-policies a{white-space:normal;min-height:44px;display:inline-flex;align-items:center}
.approved-footer small{grid-column:1/-1;box-sizing:border-box;margin:0;width:100%;padding-top:20px}
@media(min-width:821px){.approved-footer{grid-template-columns:auto minmax(0,1fr);column-gap:32px;padding:60px max(5vw,calc((100vw - 1440px)/2)) 30px}}
@media(min-width:1200px){.approved-footer{grid-template-columns:auto minmax(220px,1fr) auto;align-items:center}.approved-footer .footer-links{grid-column:auto;justify-content:flex-end;gap:12px 20px}}
/* Desktop article cards share actual heading and summary rows, regardless of title length. */
@media(min-width:821px){
.article-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:28px}
.article-grid article{display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0;margin-right:0;min-height:0;padding:27px 28px 10px 0}
.article-grid article>h3{margin:45px 0 18px}
.article-grid article>p{margin:13px 0;align-self:start}
.article-grid article>a{align-self:end}
}

.jok-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #49152f;outline-offset:4px}
.dark :focus-visible,.newsletter :focus-visible,.approved-footer :focus-visible{outline-color:#fff9f5}
.jok-guard-status{font-size:14px;line-height:1.6;grid-column:1/-1}.jok-guard-status:empty{display:none}
.hero>*,.about-hero>*,.page-hero>*,.approved-footer>*,.newsletter-grid>*,.booking>*,.story-section>*{min-width:0}
.story-section h2{font-size:clamp(30px,4vw,56px);line-height:1;letter-spacing:-1.5px;overflow-wrap:normal}
.about-hero{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.about-hero h1{font-size:clamp(40px,4.6vw,72px);letter-spacing:-2px;line-height:.98;overflow-wrap:break-word}
.about-photo{overflow:hidden}.about-photo img{object-position:50% 35%}
.nav-wrap nav{gap:22px}.nav-wrap .brand{flex-shrink:0}
.button-light,.image-note,.page-hero-image figcaption,.problem-strip,.experience-band,.fit-block,.resource-card.pink,.resource-card.orange{color:#171016}
.nav-wrap nav a,.mobile-nav a{min-height:44px;display:flex;align-items:center}
.service-footer a{width:44px;height:44px}
.jok-event-page input:not([type=checkbox]),.jok-event-page select,.jok-event-page textarea{font-size:16px}
.jok-event-page .header .button,.jok-event-page .mobile-book .button{min-height:44px}
.jok-event-page .included li:before{content:'';width:7px;height:13px;top:10px;left:5px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.jok-event-page .star .jok-icon{width:38px;height:38px}
.jok-event-page .hero h1{overflow-wrap:normal}
/* The workshop audience section has one full-width wrapper, unlike the main site's two fit blocks. */
.jok-event-page .fit-section{display:block}
.jok-event-page .fit-section>.wrap{width:100%;min-width:0}
.jok-event-page .header .logo{object-fit:contain}
.jok-event-page .mobile-book .button{gap:10px}
.jok-event-page .mobile-book .button .jok-icon{font-size:16px;margin:0}
@media(max-width:1100px){
  .nav-wrap nav{display:none}.mobile-nav{display:block}
  .mobile-nav summary{list-style:none;border:1px solid var(--ink);padding:12px 16px;font-size:13px;cursor:pointer;min-height:44px}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav>div{position:absolute;right:5vw;top:74px;width:min(290px,calc(100% - 32px));box-sizing:border-box;max-height:calc(100dvh - 100px);overflow-y:auto;background:var(--paper);border:1px solid var(--ink);box-shadow:0 18px 40px #17101620;display:flex;flex-direction:column;padding:10px}
  .mobile-nav a{padding:12px;border-bottom:1px solid var(--line);font-size:15px}
}
@media(max-width:820px){
  .about-hero{grid-template-columns:minmax(0,1fr)}
  .about-hero h1{font-size:clamp(38px,9.5vw,64px);letter-spacing:-1.5px}
  .enquiry-section .jok-enquiry-form input,.enquiry-section .jok-enquiry-form select,.enquiry-section .jok-enquiry-form textarea,.event-contact .jok-enquiry-form input,.event-contact .jok-enquiry-form select,.event-contact .jok-enquiry-form textarea,.event-prompt .jok-enquiry-form input,.event-prompt .jok-enquiry-form select,.event-prompt .jok-enquiry-form textarea{font-size:16px!important;min-height:44px}
  .enquiry-section .jok-enquiry-form label,.contact-page .jok-enquiry-form label{font-size:12px!important}
  .jok-consent{font-size:13px!important;line-height:1.6}.jok-consent input[type=checkbox]{min-height:20px!important;min-width:20px!important}
  .button,.jok-action,.session-button,.text-link{min-height:44px}
  .approved-footer{column-gap:24px}.approved-footer a{min-height:44px;display:inline-flex;align-items:center}
  .approved-footer .footer-links{gap:12px 18px}
}
@media(max-width:740px){
  .jok-event-page .hero h1{font-size:clamp(76px,24vw,104px)}
  .jok-event-page .wrap{padding-left:20px;padding-right:20px}
  .jok-event-page .hero-description,.jok-event-page .intro-grid p,.jok-event-page .curriculum p,.jok-event-page .fit-grid p,.jok-event-page .host p:not(.eyebrow):not(.large),.jok-event-page .journey p,.jok-event-page .faqs p{font-size:15px;line-height:1.7}
  .jok-event-page label,.jok-event-page .faqs summary{font-size:14px}
  .jok-event-page .fine,.jok-event-page .input-hint,.jok-event-page .checkbox,.jok-event-page .privacy-copy,.jok-event-page .secure-note,.jok-event-page .help-line{font-size:12px!important;line-height:1.65}
  .jok-event-page .checkbox{min-height:44px;align-items:flex-start}
  .jok-event-page .header .button{font-size:12px}
  .jok-event-page .mobile-book{gap:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .jok-event-page .footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .jok-event-page #book{scroll-margin-top:20px}
  .jok-event-page .booking-card,.jok-event-page .newsletter-panel{padding:22px}
  .jok-event-page h2{overflow-wrap:break-word}
  .jok-event-page .hero-art{margin-right:8px}
}
@media(max-width:380px){
  .hero h1,.page-hero h1{font-size:40px;letter-spacing:-1.6px}
  .jok-event-page .art-title{font-size:39px}.jok-event-page .corner-note{display:none}
  .jok-event-page .price{font-size:50px}.jok-event-page .price-sticker{width:64px;height:64px;flex-shrink:0}
  .jok-event-page .host-mini{gap:8px}.jok-event-page .host-mini strong{font-size:17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}