/* Bloki opisu produktu Trixbrix KIDS: the look of the blocks in the shop.
 *
 * The HTML is the contract in README.md: a block is a <div class="tb-…">
 * holding ordinary paragraphs and an h3, so it carries no colours and no icons
 * of its own. Four tones (orange, blue, yellow, green) cycle by position, a
 * card's icon is a class, the lead's logo is logo.svg next to this file.
 * Automat writes the blocks (its Lexxy editor adds its own rules on top of
 * these); the shop only needs this file and the logo.
 */

.tb-lead,
.tb-features,
.tb-steps,
.tb-box,
.tb-note {
  --tb-navy: #1e2939;
  --tb-orange: #ff7a1a;
  --tb-blue: #2fa8e0;
  --tb-yellow: #ffb400;
  --tb-green: #5cbf4a;
  --tb-rule: #e6e8ee;
  box-sizing: border-box;
  line-height: 1.6;
}

/* Wstęp: the Trixbrix KIDS logo beside the sentence that sells the set, a thin
 * rule under them. A phrase marked with Lexxy's highlight (<mark>) reads as a
 * yellow marker stroke, slightly tilted. */
.tb-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 125px; /* the logo, 180 × 99, and the 26px under it */
  margin: 0 0 30px;
  padding: 0 0 26px 212px;
  border-bottom: 1px solid var(--tb-rule);
  font-size: 19px;
  line-height: 1.55;
  color: #333333;
}
.tb-lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: calc(100% - 26px);
  background: url("/assets/trixbrix_kids/logo-ddabb022.svg") left center / contain no-repeat;
}
.tb-lead > * {
  margin: 0;
}
.tb-lead > * + * {
  margin-top: 10px;
}
.tb-lead mark {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  background: #fff3a3;
  color: var(--tb-navy);
  font-family: Georgia, "Times New Roman", serif;
  transform: rotate(-1.5deg);
}
@media (max-width: 560px) {
  .tb-lead {
    padding-left: 0;
  }
  .tb-lead::before {
    position: static;
    display: block;
    width: 150px;
    height: auto;
    aspect-ratio: 823 / 453;
    margin-bottom: 16px;
  }
}

/* The three sections share a heading with a rounded square in the section's
 * tone. The heading stays an ordinary block (not a flex row): a click on an
 * empty flex heading lands the caret in the next text, the first card's title. */
.tb-features > h3,
.tb-steps > h3,
.tb-box > h3 {
  position: relative;
  margin: 0 0 16px;
  padding-left: 30px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tb-navy);
}
.tb-features > h3::before,
.tb-steps > h3::before,
.tb-box > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--tb-tone, var(--tb-orange));
  transform: translateY(-50%);
}
.tb-features {
  --tb-tone: var(--tb-orange);
}
.tb-steps {
  --tb-tone: var(--tb-blue);
}
.tb-box {
  --tb-tone: var(--tb-green);
}
.tb-features,
.tb-steps,
.tb-box {
  margin: 34px 0 0;
}

/* Dlaczego to lubią: a two-column grid of cards. */
.tb-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tb-features > :not(.tb-card) {
  grid-column: 1 / -1;
}
.tb-features > h3 {
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .tb-features {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tb-card {
  --tb-tone: var(--tb-orange);
  --tb-soft: #fff8f2;
  --tb-line: #ffe6d3;
  --tb-tilt: rotate(-3deg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 26px 26px;
  border: 1px solid var(--tb-line);
  border-radius: 16px;
  background: var(--tb-soft);
}
.tb-card:nth-of-type(4n + 2) {
  --tb-tone: var(--tb-blue);
  --tb-soft: #f3f9fd;
  --tb-line: #d8eef9;
  --tb-tilt: rotate(3deg);
}
.tb-card:nth-of-type(4n + 3) {
  --tb-tone: var(--tb-yellow);
  --tb-soft: #fffbef;
  --tb-line: #ffefc2;
  --tb-tilt: rotate(-3deg);
}
.tb-card:nth-of-type(4n + 4) {
  --tb-tone: var(--tb-green);
  --tb-soft: #f4fbf2;
  --tb-line: #daf1d4;
  --tb-tilt: rotate(3deg);
}
.tb-card::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: var(--tb-tone) var(--tb-icon, none) center / 26px 26px no-repeat;
  transform: var(--tb-tilt);
}
.tb-card > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #444444;
}
.tb-card > p:first-of-type {
  margin-bottom: 2px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tb-navy);
}

/* The icons, white on the card's tile and navy in the editor's menu. */
.tb-icon-cross {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M3 12h18'/><path d='M8 3v2M16 3v2M8 19v2M16 19v2M3 8h2M3 16h2M19 8h2M19 16h2'/></svg>");
}
.tb-icon-train {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='5' width='16' height='11' rx='2'/><path d='M4 11h16'/><circle cx='8' cy='19' r='2'/><circle cx='16' cy='19' r='2'/></svg>");
}
.tb-icon-star {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6 6.6 19.5l1.2-6-4.5-4.2 6.1-.7z'/></svg>");
}
.tb-icon-factory {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V10l6 4V10l6 4V5h6v16z'/><path d='M3 21h18'/></svg>");
}
.tb-icon-switch {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 21V3'/><path d='M7 15c0-5 4-8 10-8'/><path d='M14 4l3 3-3 3'/></svg>");
}
.tb-icon-arrows {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h14'/><path d='M15 5l3 3-3 3'/><path d='M20 16H6'/><path d='M9 13l-3 3 3 3'/></svg>");
}
.tb-icon-crossover {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3v18'/><path d='M18 3v18'/><path d='M6 16L18 8'/></svg>");
}
.tb-icon-circle {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a9 9 0 1 1-9 9'/><path d='M3 12a9 9 0 0 1 9-9'/></svg>");
}
.tb-icon-oval {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 6h10a6 6 0 0 1 0 12H7A6 6 0 0 1 7 6z'/></svg>");
}
.tb-icon-long {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18'/><path d='M6 9l-3 3 3 3'/><path d='M18 9l3 3-3 3'/></svg>");
}
.tb-icon-half {
  --tb-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18'/><path d='M12 8v8'/><path d='M3 9v6'/><path d='M21 9v6'/></svg>");
}

/* Pomysły na zabawę: every paragraph is a numbered idea on one grey panel; the
 * numbers are a CSS counter, in circles of the four tones. */
.tb-steps {
  counter-reset: tb-step;
}
.tb-steps > p {
  position: relative;
  margin: 0;
  padding: 9px 26px 9px 82px;
  min-height: 44px;
  background: #f5f6f9;
  font-size: 17px;
  line-height: 1.6;
}
/* The corners one by one, so a lone point (first and last at once) keeps
 * all four. */
.tb-steps > p:first-of-type {
  padding-top: 26px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.tb-steps > p:last-of-type {
  padding-bottom: 26px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.tb-steps > p::before {
  counter-increment: tb-step;
  content: counter(tb-step);
  position: absolute;
  left: 30px;
  top: calc(9px + 0.8lh - 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tb-orange);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.tb-steps > p:first-of-type::before {
  top: calc(26px + 0.8lh - 18px);
}
.tb-steps > p:nth-of-type(4n + 2)::before {
  background: var(--tb-blue);
}
.tb-steps > p:nth-of-type(4n + 3)::before {
  background: var(--tb-yellow);
}
.tb-steps > p:nth-of-type(4n + 4)::before {
  background: var(--tb-green);
}

/* Co w pudełku: label / value rows. */
.tb-spec {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  border-bottom: 1px solid var(--tb-rule);
  font-size: 15px;
}
.tb-spec > p {
  margin: 0;
  padding: 11px 12px;
}
.tb-spec > p:first-of-type {
  font-weight: 700;
  color: var(--tb-navy);
}

/* The small print. */
.tb-note > p {
  margin: 18px 0 0;
  font-size: 12px;
  color: #6b6b6b;
}