/* text box + slideshow side by side, stacked on phones */
.ts-split {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two equal columns */
  gap: 1.5rem;
  align-items: center;              /* text centred next to the slideshow */
  margin: 1.5rem 0;
}
.ts-split-text {
  /* background: #f1f3f5;              /* the box */
  /* border-radius: 8px; */
  padding: 1.25rem 1.5rem;
}
.ts-split-text > :last-child { margin-bottom: 0; }

/* phone and small tablet: one column, text on top */
@media (max-width: 767px) {
  .ts-split { grid-template-columns: 1fr; }
}

/* hide Generated: xxxx-xx-xx xx:xx:xx text at the bottom */
.ul-build { display: none; }


/* robots: three in one row */
@font-face { font-family: robofont; src: url("/media/fonts/ashesha.ttf") format("truetype"); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: auto;
}
.view {
  display: block; border: 1px solid #ccc; padding: 10px;
  background: #f9f9f9; text-decoration: none; color: inherit;
}
.view:hover { background: #ddd; }
.view img { width: 100%; height: auto; display: block; }
.caption { margin-top: 10px; font-family: robofont; font-size: 24px; text-align: center; }

/* robots: on phone in one column */
@media (max-width: 575px) { .grid { grid-template-columns: 1fr; } }

/* outline button: border + normal text, filled blue on hover */
/* button: light blue fill + border, dark blue on hover */
.btn-line {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid var(--ts-dark, #142336);
  border-radius: 6px;
  background: #d2deeb; /* #e2e9f2;                 /* light blue-gray, visible at rest */
  color: var(--ts-dark, #142336) !important;
  font-weight: normal;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
.btn-line:hover,
.btn-line:focus {
  background: var(--ts-dark, #142336);
  color: #fff !important;
}