/* Cafés page (layout "Kohvikud"): two cafés side by side with photo, info and a maps link.
   Type roles come from karlova-tokens.css. */
/* Running text, set like the roastery story (.page-text in main.css): body size, left-aligned
   640px column. The page lead under the title is the only lead-sized text. */
.cafes-intro {
  max-width: 640px;
  margin: 8px auto 40px;
  color: var(--kk-brown);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  text-align: left;
}
.cafes-intro p {
  margin: 0 0 14px;
}
.cafes-intro:empty {
  display: none;
}
.cafes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-bottom: 80px;
  color: var(--kk-brown);
}
.cafe {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cafe-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #EDE3D3;
}
.cafe-photo .edy-texteditor-container,
.cafe-photo .edy-padding-resizer-wrapper,
.cafe-photo picture,
.cafe-photo p {
  margin: 0;
}
.cafe-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cafe-info {
  flex: 1 1 auto;
  margin-top: 20px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
}
.cafe-info p {
  margin: 0 0 12px;
}
.cafes .cafe-info table {
  width: auto;
  margin: 0 0 12px;
  border: 0;
  border-collapse: collapse;
}
.cafes .cafe-info table td {
  padding: 1px 24px 1px 0;
  border: 0;
  background: none;
  vertical-align: top;
}
.cafe-info a {
  color: var(--kk-brown);
}
/* Editor only: the map address field */
.cafe-address-edit {
  margin-top: 8px;
  font-size: var(--fs-small);
  opacity: .7;
}
.cafe-map-link {
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
}
@media (max-width: 780px) {
  .cafes {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

/* Café photo: background set with Voog's picker (page.data cafe_N_photo). */
.cafe-photo {
  position: relative;
  background-position: center;
  background-size: cover;
}
.editmode .cafe-photo .voog-bg-picker-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
}