/* ===== Site-wide layout + mobile fixes =====
   Loaded after the page's own styles. Inline styles in the page need !important to override. */

/* ---- Frame lines (the vertical guide lines on each section) ----
   Like outskill.com: the lines sit a fixed distance from the screen edge
   instead of being boxed into a 1200px column. */
.frame {
  max-width: none !important;
  margin-left: 153px !important;
  margin-right: 153px !important;
}
@media (max-width: 1279px) { .frame { margin-left: 80px !important; margin-right: 80px !important; } }
@media (max-width: 1023px) { .frame { margin-left: 60px !important; margin-right: 60px !important; } }
@media (max-width: 767px)  {
  .frame { margin-left: 5% !important; margin-right: 5% !important; }
  /* only frames that had side padding get the phone padding (Sessions has none: its banners run line to line) */
  .frame[style*="padding"] { padding-left: 18px !important; }
  .frame[style*="padding"]:not([style*="padding: 80px 0px 80px"]) { padding-right: 18px !important; }
  section[aria-labelledby="sess-h"] .frame > div:first-child { padding-left: 18px !important; padding-right: 18px !important; }
}
/* Sessions: when the left session menu is hidden, the content column's own left border doubles the frame line */
@media (max-width: 860px) {
  section[aria-labelledby="sess-h"] [style*="flex: 999 1 560px"] { border-left: 0 !important; }
}

/* no sideways scrolling on phones */
html, body { overflow-x: clip; }

/* ---- Workshop cards: the 380px minimum is wider than a phone ---- */
#workshop [style*="minmax(380px"] { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)) !important; }
#workshop [style*="minmax(300px"] { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }

/* ---- Sessions: show each session photo in full, at a modest size (tablet + desktop) ----
   (It was cropped into a 240px strip.) Text on the left, the complete photo on the right.
   Phones keep the original design: photo behind the text. */
@media (min-width: 768px) {
section[aria-labelledby="sess-h"] article > .hov {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center;
}
section[aria-labelledby="sess-h"] article > .hov > img {
  position: static !important; display: block;
  grid-column: 2; grid-row: 1;
  width: 100% !important; height: auto !important;
}
section[aria-labelledby="sess-h"] article > .hov > div[aria-hidden="true"] { display: none !important; } /* old dark overlay */
section[aria-labelledby="sess-h"] article > .hov > div:last-child {
  position: static !important; grid-column: 1; grid-row: 1;
  max-width: none !important;
}
}
@media (max-width: 767px) {
  /* phones: text over the photo (original design), sized for a small screen */
  section[aria-labelledby="sess-h"] article > .hov { min-height: 210px !important; }
  section[aria-labelledby="sess-h"] article > .hov > div:last-child { padding: 22px 18px !important; gap: 8px !important; }
  section[aria-labelledby="sess-h"] article > .hov > div:last-child > span { font-size: 12px !important; }
  section[aria-labelledby="sess-h"] article > .hov > div:last-child > h3 { font-size: 22px !important; line-height: 1.2; }
  section[aria-labelledby="sess-h"] article > .hov > div:last-child > p { font-size: 15px !important; }
  section[aria-labelledby="sess-h"] article > ul { padding: 24px 18px 40px !important; font-size: 16px !important; }
}

/* ---- Navigation: menu button below 1140px ---- */
.nav-toggle { display: none; }
@media (max-width: 1139px) {
  nav.frame { flex-wrap: wrap !important; row-gap: 0 !important; transition: background .25s ease; }
  .nav-links, .nav-cta { display: none !important; }

  .nav-toggle {
    order: 2; margin-left: auto;
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: #FFFFFF; transition: transform .25s ease, opacity .2s ease; }
  .nav-toggle:focus-visible { outline: 2px solid #FFD43B; outline-offset: 2px; }
  nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  nav.is-open { background: rgba(10,10,10,0.97); }
  nav.is-open .nav-links {
    order: 3; width: 100%;
    display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important;
    margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.12);
  }
  nav.is-open .nav-links a {
    min-height: 52px !important; font-size: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  nav.is-open .nav-cta { order: 4; display: inline-flex !important; justify-content: center; width: 100%; margin: 16px 0 8px; }
}

/* ---- Tablets and below: keep the sticky bar on one row ---- */
@media (max-width: 1023px) { .sticky-meta { display: none !important; } }

/* ---- Phones ---- */
@media (max-width: 767px) {
  /* tighter vertical rhythm */
  .frame[style*="padding: 80px"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* headings scaled for a narrow screen */
  #hero-h { font-size: 36px !important; }
  [style*="font-size: clamp(34px, 4vw, 48px)"] { font-size: 30px !important; }
  [style*="font-size: clamp(32px, 3.6vw, 46px)"] { font-size: 28px !important; }

  /* hero: hide the divider next to the button once it wraps; stats as an even 3-column row */
  #top [style*="width: 1px; height: 40px"] { display: none !important; }
  #top [style*="gap: 20px 0px; margin-top: 20px"] { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: start; }
  #top [style*="gap: 20px 0px; margin-top: 20px"] > div { padding-right: 14px !important; margin-right: 14px !important; }
  #top [style*="gap: 20px 0px; margin-top: 20px"] > div > span:first-child { font-size: 20px !important; white-space: nowrap; }
  #top [style*="gap: 20px 0px; margin-top: 20px"] > div > span:last-child { font-size: 13px !important; line-height: 1.35; }

  /* sticky bottom bar: compact, one row */
  .sticky-title { font-size: 16px !important; }
  .sticky-actions { gap: 0 !important; }
  .sticky-cta { min-height: 44px !important; padding: 0 16px !important; font-size: 15px !important; white-space: nowrap; }
  .sticky-cta, .sticky-title { line-height: 1.2; }
  .sticky-actions, .sticky-title { flex: 0 0 auto; }
  .frame:has(> .sticky-title) { padding-top: 10px !important; padding-bottom: 10px !important; flex-wrap: nowrap !important; }
}
@media (max-width: 480px) {
  /* just a full-width call-to-action */
  .sticky-title { display: none !important; }
  .sticky-actions { flex: 1 1 auto !important; }
  .sticky-cta { width: 100%; justify-content: center; }
}

/* ---- Contact form status messages ---- */
.cf-status { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.5; }
.cf-status:empty { display: none; }
.cf-info { color: #BDBDBD; }
.cf-success { color: #FFD43B; }
.cf-error { color: #FF8A80; }
#contact-form .cf-invalid { border-color: #FF8A80 !important; }
#contact-form button[disabled] { opacity: .7; cursor: progress; }