/* ==========================================================================
   RCB GLOBAL STYLE SYSTEM – OVERRIDDEN FOR “LEVÝ” LAYOUT
   ========================================================================== */

/* === FONT === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* === RESET & BASE WRAPPER === */
.rcb-wrapper {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  background-color: #fff;
  border-radius: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.6;

  /* customizable font sizes */
  --rcb-intro-font-size: 18px;
  --rcb-cta-font-size: 16px;

  /* override barvy pro levý layout */
  --rcb-intro-bg: #f7f5ff;    /* světle fialové pozadí intro */
  --rcb-box-bg:   #f4f4f8;    /* světle šedé boxy ve funkcích */
}

/* === INTRO SECTION === */
.rcb-wrapper .rcb-intro {
  text-align: center;
  background-color: var(--rcb-intro-bg);
  padding: 32px 20px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.rcb-wrapper .rcb-intro__title {
  margin-top: 0;
  margin-bottom: 0px;
}
.rcb-wrapper .rcb-intro__tagline {
  font-size: var(--rcb-intro-font-size);
  margin-bottom: 0px;
}

/* === TEXT BLOCK === */
.rcb-wrapper .rcb-text {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 24px;
}
.rcb-wrapper .rcb-text p {
  display: inline-block;
  text-align: center;
  font-size: 16px;
  margin-bottom: 16px;
  max-width: 100%;
}

/* === HEADINGS === */
.rcb-wrapper h1,
.rcb-wrapper h2,
.rcb-wrapper h3,
.rcb-wrapper h4,
.rcb-wrapper h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #222;
  margin-top: 0;
  margin-bottom: 0px;
}
.rcb-wrapper h1 { font-size: 28px; }
.rcb-wrapper h2 { font-size: 24px; }
.rcb-wrapper h3 { font-size: 22px; }
.rcb-wrapper h4 { font-size: 18px; }
.rcb-wrapper h5 { font-size: 16px; font-weight: 600; }

/* === FLEX GRID DEFAULT (4 cols) === */
.rcb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.rcb-grid .rcb-box {
  flex: 1 1 calc(25% - 16px);
  min-width: 200px;
  padding: 20px;
  background-color: var(--rcb-box-bg);
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 14px;
}
.rcb-grid .rcb-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}
.rcb-grid .rcb-box p {
  font-size: 14px;
  margin: 0;
  color: #333;
}

/* === GRID COLUMN VARIANTS === */
.rcb-grid--3cols .rcb-box {
  flex: 1 1 calc(33.333% - 16px);
}
.rcb-grid--2cols .rcb-box {
  flex: 1 1 calc(50% - 16px);
}
.rcb-grid--1col .rcb-box {
  flex: 1 1 100%;
}

/* === INFO SECTION === */
.rcb-info-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.rcb-info-box {
  flex: 1 1 48%;
  background-color: #fff4f4;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.rcb-info-box strong {
  display: inline-block;
  margin-bottom: 0px;
}

/* === SEPARATOR === */
.rcb-separator {
  border-top: 1px solid #ddd;
  margin: 25px 0;
}

/* === CTA === */
.rcb-wrapper .rcb-cta {
  text-align: center;
  font-size: var(--rcb-cta-font-size);
  font-weight: 700;
  color: #000;
  margin-top: 32px;
}

/* === COLOR OPTIONS === */
.rcb-color-options {
  margin: 20px 0;
}
.rcb-color-options h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.rcb-color-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rcb-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ccc;
  box-sizing: border-box;
}
.rcb-color.white   { background-color: #fff; }
.rcb-color.black   { background-color: #000; }
.rcb-color.beige   { background-color: #d7bfa3; }
.rcb-color.selected {
  box-shadow: 0 0 0 2px #000 inset;
}

/* === IMAGE MODULE === */
.rcb-image-block {
  margin: 24px 0;
  text-align: center;
}
.rcb-image-block img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .rcb-grid .rcb-box,
  .rcb-grid--3cols .rcb-box,
  .rcb-grid--2cols .rcb-box {
    flex: 1 1 calc(50% - 16px);
  }
}
@media (max-width: 640px) {
  .rcb-grid .rcb-box,
  .rcb-grid--3cols .rcb-box,
  .rcb-grid--2cols .rcb-box {
    flex: 1 1 100%;
  }
  .rcb-info-box {
    flex: 1 1 100%;
  }
}