/* PQ Ubytování — [pq_ubytovani]
 * Vizuální jazyk převzatý z karet výletů tématu (.pq-tour__card, .pq-tours__chip):
 * stejné tokeny, zaoblení, stín i hover — žádný nový prvek bez předlohy. */

/* Obecná šablona stránky (page.php) omezuje obsah na 860px kvůli čitelnosti
 * textu (.pq-page-generic__wrap, misc.css) — pro mřížku/filtr/mapu je to
 * zbytečně úzké. Na stránce s tímhle shortcodem se rozšíří na stejnou šířku
 * jako zbytek webu (--container-xl), žádná nová hodnota. */
.pq-page-generic__wrap:has(.pq-ubyt) { max-width: var(--container-xl); }

.pq-ubyt { display: flex; flex-direction: column; gap: var(--space-8); }

/* ── Filtr ── */
.pq-ubyt__filtr {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.pq-ubyt__filtr-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.pq-ubyt__filtr-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 180px; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.pq-ubyt__filtr-field select,
.pq-ubyt__filtr-field input[type="search"] {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
}

.pq-ubyt__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  min-height: 44px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.pq-ubyt__chip:hover { border-color: var(--color-secondary); }
.pq-ubyt__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pq-ubyt__chip:has(input:checked) { background: var(--logo-turq); border-color: var(--logo-turq); color: var(--color-text-invert); }
.pq-ubyt__chip:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.pq-ubyt__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pq-ubyt__reset:hover, .pq-ubyt__reset:focus-visible { background: var(--color-secondary); color: var(--color-text-invert); }
.pq-ubyt__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.pq-ubyt__count:not(:empty)::before { content: "Nalezeno: "; }

/* ── Zóny a mřížka ── */
.pq-ubyt__zona + .pq-ubyt__zona { margin-block-start: var(--space-10); }
.pq-ubyt__list > .pq-ubyt__zona:first-child { padding-block-start: 0; } /* šablona dává sekcím horní padding */
.pq-ubyt__zona-title { margin: 0 0 var(--space-5); font-family: var(--font-heading); font-size: var(--text-2xl); }
.pq-ubyt__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .pq-ubyt__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pq-ubyt__grid { grid-template-columns: repeat(3, 1fr); } }
.pq-ubyt__empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); }

/* ── Dlaždice (= .pq-tour__card) ── */
.pq-ubyt__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pq-ubyt__card--link:hover, .pq-ubyt__card--link:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pq-ubyt__media { position: relative; }
.pq-ubyt__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pq-ubyt__img--placeholder { position: relative; overflow: hidden; background: var(--color-bg-card); }
.pq-ubyt__map-tiles { position: absolute; inset: 0; overflow: hidden; }
.pq-ubyt__map-tiles img.pq-ubyt__map-tile {
  position: absolute;
  width: calc(100% / 3);
  height: 50%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pq-ubyt__img--placeholder .pq-ubyt__map-credit {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  padding: 2px 5px;
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.5;
  text-decoration: underline;
}
.pq-ubyt__tag {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-invert);
}
.pq-ubyt__tag--muted { background: var(--color-text-muted); }

.pq-ubyt__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-3); padding: var(--space-5); }
.pq-ubyt__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: 1.3; }
.pq-ubyt__link { color: var(--color-text); text-decoration: none; }
.pq-ubyt__link::after { content: ""; position: absolute; inset: 0; }
.pq-ubyt__link:hover { color: var(--color-secondary); }
.pq-ubyt__stars { white-space: nowrap; color: var(--color-accent); font-size: var(--text-sm); }

.pq-ubyt__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.pq-ubyt__meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.pq-ubyt__popis { margin: 0; font-size: var(--text-sm); }

.pq-ubyt__vybaveni { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pq-ubyt__vyb {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.pq-ubyt__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width) dashed var(--color-border);
}
.pq-ubyt__map-btn {
  position: relative; z-index: 1; /* nad ::after odkazu na detail */
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  text-decoration: underline;
}
.pq-ubyt__map-btn:hover { text-decoration: none; }
.pq-ubyt__more { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-secondary); }

/* ── Mapa ── */
.pq-ubyt__map-title { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-2xl); }
.pq-ubyt__map { height: 480px; border-radius: var(--radius-lg); overflow: hidden; border: var(--border-width) var(--border-style) var(--color-border); }
.pq-ubyt__map .leaflet-popup-content { font-family: var(--font-body); font-size: var(--text-sm); }
@media (max-width: 640px) { .pq-ubyt__map { height: 360px; } }

/* Vyzvedávání: úvod + filtr vlevo, vysoká mapa celého ostrova vpravo. */
.pq-ubyt__hero { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.pq-ubyt__hero-text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pq-ubyt__hero-text p { margin: 0; }
.pq-ubyt__hero-map { min-width: 0; }
.pq-ubyt__hero .pq-ubyt__map-title--below { margin: var(--space-3) 0 0; font-size: var(--text-base); }
@media (min-width: 900px) {
	.pq-ubyt__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
	.pq-ubyt__hero .pq-ubyt__map { height: 810px; }
}

/* Žlutý špendlík kanceláře — divIcon bez výchozího pozadí Leafletu */
.pq-ubyt__office-pin { background: none; border: 0; }

/* Vyzvedávání: kompaktní karty — název nahoře, stav trasy a odkaz na mapu na jednom řádku (zóna je v nadpisu sekce). */
.pq-ubyt--pickup .pq-ubyt__grid { gap: var(--space-4); }
.pq-ubyt--pickup .pq-ubyt__body { gap: var(--space-2); padding: var(--space-4); }
.pq-ubyt.pq-ubyt--pickup .pq-ubyt__body .pq-ubyt__title { margin: 0; font-size: var(--text-base); } /* šablona dává h3 vnější okraje */
.pq-ubyt--pickup .pq-ubyt__foot { padding-block-start: var(--space-2); flex-wrap: wrap; }

/* Vyzvedávání: šablona (.pq-main section) dává sekcím zón svislý padding 64 px — nulujeme */
.pq-ubyt--pickup .pq-ubyt__zona { padding-block: 0; }