.kto-tiles { display: grid; grid-template-columns: repeat(var(--kto-cols, 3), minmax(0, 1fr)); gap: 24px; align-items: stretch; color: #1a1a1a; font-family: inherit; }
@media (max-width: 900px) { .kto-tiles { grid-template-columns: repeat(min(var(--kto-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .kto-tiles { grid-template-columns: minmax(0, 1fr); } }
.kto-tiles .kto-tiles-empty { grid-column: 1 / -1; margin: 0; color: #555; }

.kto-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.kto-tile:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.kto-tile.is-open { border-color: var(--kto-accent, #1f7a5c); box-shadow: 0 0 0 1px var(--kto-accent, #1f7a5c); }
.kto-tile-img { aspect-ratio: 4 / 3; background: #eee; overflow: hidden; }
.kto-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kto-tile-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.kto-tile-title { margin: 0 0 4px; font-size: 19px; line-height: 1.25; }
.kto-tile-price { font-weight: 700; color: var(--kto-accent, #1f7a5c); margin-bottom: 6px; }
.kto-tile-next { font-size: 14px; margin-bottom: 8px; }
.kto-tile-next span { color: #666; }
.kto-tile-nodate { color: #777; font-style: italic; }
.kto-tile-text { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #444; }
.kto-tile-btn { margin-top: auto; align-self: flex-start; background: var(--kto-accent, #1f7a5c); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; }
.kto-tile-btn:hover, .kto-tile-btn:focus-visible { filter: brightness(1.08); }
.kto-tile-btn[aria-expanded="true"] { background: #fff; color: var(--kto-accent, #1f7a5c); box-shadow: inset 0 0 0 2px var(--kto-accent, #1f7a5c); }

/* The unfolded booking form takes the whole row. */
.kto-tile-panel { grid-column: 1 / -1; background: #fff; border: 1px solid var(--kto-accent, #1f7a5c); border-radius: 14px; padding: 8px 20px 20px; }

/* Gift voucher tile (always the first one). */
.kto-tile-gift { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--kto-accent, #1f7a5c), color-mix(in srgb, var(--kto-accent, #1f7a5c) 55%, #000)); }
.kto-tile-panel-voucher { padding: 20px; }

/* Sign-up form of a tile without any date. */
.kto-interest { max-width: 520px; margin: 0 auto; padding: 4px 0 8px; }
.kto-interest h3 { margin: 12px 0 6px; font-size: 20px; }
.kto-interest .kto-i-intro { margin: 0 0 14px; color: #444; }
.kto-interest .kto-i-field { display: block; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
.kto-interest .kto-i-field input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #c8c8c8; border-radius: 8px; font-size: 16px; font-weight: 400; box-sizing: border-box; }
.kto-interest .kto-i-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; margin: 4px 0; }
.kto-interest .kto-i-check input { margin-top: 3px; }
.kto-interest .kto-i-err { color: #b42318; font-size: 13px; min-height: 0; margin: 2px 0 6px; }
.kto-interest .kto-i-submit { margin-top: 10px; background: var(--kto-accent, #1f7a5c); color: #fff; border: 0; border-radius: 8px; padding: 11px 20px; font-weight: 700; font-size: 15px; cursor: pointer; }
.kto-interest .kto-i-submit:disabled { opacity: .6; cursor: wait; }
.kto-interest .kto-i-done { padding: 8px 0; }