/*
 * Catalyst Krav Maga - additions stylesheet
 *
 * Loaded after all Mobirise/theme CSS. Holds layout styles for new content
 * sections only. Every selector must be scoped under a .ck- prefixed class.
 * No element selectors, no overrides of existing classes.
 */

/* ---------- Tokens (values copied from the theme's mbr-additional.css) ---------- */
.ck-section {
  --ck-lime: #e0ed28;
  --ck-lime-text: #131402;
  --ck-dark: #16181c;
  --ck-dark-2: #232323;
  --ck-light: #fafafa;
  --ck-white: #ffffff;
  --ck-muted: #bbbbbb;
  padding: 4.5rem 0;
}

/* ---------- Section backgrounds ---------- */
.ck-bg-white { background: var(--ck-white); color: var(--ck-dark-2); }
.ck-bg-light { background: var(--ck-light); color: var(--ck-dark-2); }
.ck-bg-dark  { background: var(--ck-dark);  color: var(--ck-white); }
.ck-bg-lime  { background: var(--ck-lime);  color: var(--ck-lime-text); }

/* ---------- Shared headings ---------- */
.ck-heading { margin: 0 0 2.5rem; text-align: center; }
.ck-eyebrow { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .08em; }
.ck-bg-dark .ck-eyebrow { color: var(--ck-lime); }
.ck-lead { max-width: 40rem; margin: 0 auto; }

/* ---------- Offer strip ---------- */
.ck-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 4rem; }
.ck-offer-price { text-align: center; }
.ck-offer-amount { display: block; margin: 0; color: var(--ck-lime); font-size: 9rem; font-weight: 700; line-height: 1; }
.ck-offer-note { display: block; margin-top: .5rem; color: var(--ck-muted); text-transform: uppercase; letter-spacing: .08em; }
.ck-offer-body { flex: 1 1 22rem; max-width: 36rem; }
.ck-offer-body .ck-offer-title { margin: 0 0 1rem; }
.ck-offer-body p { margin: 0 0 1.5rem; }

/* ---------- Step cards ---------- */
.ck-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.ck-step { background: var(--ck-white); border: 1px solid #e6e6e6; border-radius: .5rem; padding: 2rem 1.5rem; }
.ck-step-num { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: 1rem;
  border-radius: 50%; background: var(--ck-lime); color: var(--ck-lime-text); font-weight: 700; font-size: 1.4rem; }
.ck-step-title { margin: 0 0 .5rem; }
.ck-step p { margin: 0; }

/* ---------- Two-column checklists ---------- */
.ck-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.ck-col-title { margin: 0 0 1.25rem; }
.ck-checks { margin: 0; padding: 0; list-style: none; }
.ck-checks li { position: relative; margin: 0 0 .9rem; padding-left: 2.5rem; }
.ck-checks .ck-check { position: absolute; left: 0; top: .15rem; display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ck-dark); color: var(--ck-lime); font-size: .85rem; }

/* ---------- Class time cards ---------- */
.ck-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.ck-time-card { background: var(--ck-white); border: 1px solid #e6e6e6; border-left: .35rem solid var(--ck-lime); border-radius: .5rem; padding: 1.5rem; }
.ck-time-level { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .06em; }
.ck-time-list { margin: 0; padding: 0; list-style: none; }
.ck-time-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid #eee; }
.ck-time-list li:first-child { border-top: 0; }
.ck-time-day { font-weight: 600; }
.ck-more { margin: 2rem 0 0; text-align: center; }
.ck-more a { font-weight: 800; }
.ck-more-dark a { color: var(--ck-lime); text-decoration: underline; }
.ck-times-note { margin: 1rem auto 0; max-width: 40rem; }

/* ---------- Testimonials ---------- */
.ck-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ck-quote { position: relative; display: flex; flex-direction: column; margin: 0; padding: 3.5rem 2rem 2rem; background: var(--ck-dark-2); border-radius: .5rem; }
.ck-quote::before { content: "\201C"; position: absolute; top: .6rem; left: 1.5rem; color: var(--ck-lime); font-size: 5rem; font-weight: 700; line-height: 1; }
.ck-quote-text { margin: 0 0 1.5rem; padding: 0; border: 0; background: none; font-style: normal; color: inherit; }
.ck-quote figcaption { margin-top: auto; }
.ck-quote-name { margin: 0; color: var(--ck-lime); font-weight: 700; }
.ck-quote-role { margin: 0; color: var(--ck-muted); }

/* ---------- Closing call to action ---------- */
.ck-cta { text-align: center; }
.ck-cta .ck-cta-title { margin: 0 0 1.5rem; }

/* ---------- CTA band (sitewide, pages without a booking button) ---------- */
.ck-cta-text { margin: 0 0 1.5rem; }
.ck-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; }
.ck-cta-buttons .btn { margin: 0; }

/* ---------- Phone / tablet ---------- */
@media (max-width: 991px) {
  .ck-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ck-section { padding: 3rem 0; }
  .ck-offer-amount { font-size: 6rem; }
  .ck-steps, .ck-columns, .ck-quotes { grid-template-columns: 1fr; }
  .ck-columns { gap: 2rem; }
  .ck-quote { padding: 3.25rem 1.5rem 1.5rem; }
}

/* ---------- Phone: centered text and buttons (cards stay left-aligned) ---------- */
@media (max-width: 767px) {
  .ck-section,
  .ck-intro .text-wrapper { text-align: center; }
  .ck-intro .mbr-section-btn { text-align: center; }
  .ck-step,
  .ck-time-card,
  .ck-quote { text-align: left; }
  .ck-checks { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
}

/* ---------- Contact page hours ---------- */
.ck-hours-card { max-width: 34rem; margin: 0 auto; }
.ck-hours-note { max-width: 40rem; margin: 2rem auto 0; text-align: center; }