/* ==========================================================================
   Offer page (offers/show.blade.php), loaded after base.css + cards.css.
   spa.cz / Dertour layout: H1 + meta line, gallery 1 big + 4 small, two columns
   (content left, sticky booking box right), mobile bottom bar, lightbox.
   ========================================================================== */

/* ---------- Head: H1, meta line (stars, score, location), actions ---------- */
.offer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 32px; padding: 4px 0 20px; }
.offer-head__main { min-width: 0; }
.offer-head__title { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.offer-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; font-size: 0.9375rem; color: var(--text); }
.offer-head__meta .stars { font-size: 16px; }
.offer-head__meta .rating { font-size: 0.9375rem; color: var(--text); }
.offer-head__loc { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 500; color: var(--navy); }
.offer-head__loc i { flex: none; font-size: 18px; color: var(--blue); }
a.offer-head__loc { position: relative; }
a.offer-head__loc::before { content: ""; position: absolute; inset: -11px -4px; } /* 44px touch target without a taller line */
a.offer-head__loc span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
a.offer-head__loc:hover { color: var(--blue-700); }
a.offer-head__loc:hover span { text-decoration-color: currentColor; }

.offer-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; flex: none; }
/* Small underlined text actions (map, share, save): Dertour style */
.offer-action {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  color: var(--navy); font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  transition: color var(--t-fast);
}
.offer-action i { flex: none; font-size: 20px; }
.offer-action span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.offer-action:hover { color: var(--blue-700); }
.offer-action:hover span { text-decoration-color: currentColor; }
.offer-action:focus-visible { outline-offset: 0; }
.offer-action__short { display: none; }

/* ---------- Gallery: 1 big photo + 2x2 small, rounded outer corners ---------- */
.gallery {
  position: relative; display: grid;
  grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px;
  height: clamp(320px, 36vw, 460px);
  border-radius: var(--r-lg); overflow: hidden;
}
.gallery--3, .gallery--2 { grid-template-columns: 2fr 1fr; }
.gallery--1 { grid-template-columns: minmax(0, 1fr); }
.gallery__item { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--soft-2); }
.gallery__item:first-child, .gallery--2 .gallery__item { grid-row: 1 / -1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.gallery__item:hover img { transform: scale(1.03); }
/* The whole tile opens the lightbox at that photo */
.gallery__btn { position: absolute; inset: 0; z-index: 1; width: 100%; }
.gallery__btn:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; border-radius: 0; box-shadow: inset 0 0 0 3px var(--blue); }
.gallery__tag { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
/* "Виж всички N снимки": always on the bottom-right tile; on phones a "1 / N" counter */
.gallery__all {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 10px; background: var(--white); color: var(--navy);
  font-size: 0.875rem; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-float);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.gallery__all i { font-size: 20px; color: var(--blue); }
.gallery__all:hover { background: var(--blue-50); color: var(--blue-700); }
.gallery__all-count { display: none; font-variant-numeric: tabular-nums; }

/* ---------- Two columns: content + booking box ---------- */
.offer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; margin-top: 32px; }
.offer-main { min-width: 0; }

/* Content blocks: no boxes, a thin line between them */
.block { min-width: 0; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.block__title { margin-bottom: 16px; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.block__lead { font-size: 1.25rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--navy); text-wrap: pretty; }
.block__sub { margin: 24px 0 14px; font-size: 1.0625rem; font-weight: 700; }
.block__text { max-width: 68ch; color: var(--muted); }

/* Facts row with icons (spa.cz: "6 nocí · polopenze · …") */
.facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 24px; margin-top: 20px; }
.fact { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.fact i { flex: none; margin-top: 2px; font-size: 26px; color: var(--blue); }
.fact span { min-width: 0; }
.fact small { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }
.fact b { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--navy); }

/* Check list (free cancellation, kids free) */
.incl { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.incl li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--navy); }
.incl i { flex: none; margin-top: 1px; font-size: 20px; color: var(--green); }

.offer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.offer-tags .chip { min-height: 36px; }

/* Amenities: icon bullets in columns (Dertour) */
.amen { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.amen li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 0.9375rem; color: var(--navy); }
.amen i { flex: none; font-size: 22px; color: var(--blue); }

/* ---------- Description and price tables from visit.bg ---------- */
.offer-body-wrap { position: relative; }
.offer-body { font-size: 0.9375rem; line-height: 1.7; color: var(--text); overflow-wrap: break-word; }
.offer-body > * + * { margin-top: .85em; }
.offer-body strong, .offer-body b { font-weight: 600; color: var(--navy); }
.offer-body ul, .offer-body ol { padding-left: 1.3em; }
.offer-body a { text-decoration: underline; text-underline-offset: 3px; }
.offer-body img { border-radius: var(--r-md); }

/* Each table sits in its own scroller with a light frame; light blue header row, zebra rows */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); scrollbar-width: thin; }
.offer-body > .table-wrap { margin-block: 1.25em; }
.offer-body table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.offer-body td, .offer-body th { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.offer-body tr > :first-child { border-left: 0; }
.offer-body tr > :last-child { border-right: 0; }
.offer-body table > :first-child > tr:first-child > * { border-top: 0; }
.offer-body table > :last-child > tr:last-child > * { border-bottom: 0; }
.offer-body tbody > tr:nth-child(even) > td { background: var(--soft); }
.offer-body thead th, .offer-body thead td,
.offer-body table > tbody:first-child > tr:first-child > * { background: var(--blue-50); font-weight: 700; color: var(--navy); }

.offer-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); background: var(--blue-50); color: var(--navy); font-size: 0.875rem; line-height: 1.5; }
.offer-note i { flex: none; font-size: 20px; color: var(--blue); }

/* Early-booking ladder in a light panel */
.offer-ladder { margin-top: 18px; padding: 20px 20px 18px; border-radius: var(--r-lg); background: var(--soft); }
.offer-ladder .ladder { margin-top: 0; }

/* ---------- Map ---------- */
.map-card { position: relative; min-height: 240px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--blue-100); }
.map-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-card__sea { fill: var(--blue-100); }
.map-card__land { fill: var(--soft-2); }
.map-card__shore { stroke: var(--yellow); stroke-opacity: .35; }
.map-card__road { stroke: var(--white); }
.map-card__road-edge { stroke: var(--line); }
.map-card__halo { fill: var(--blue); fill-opacity: .14; }
.map-card__pin { fill: var(--blue); }
.map-card__dot { fill: var(--white); }
.map-card__btn { position: absolute; left: 16px; bottom: 16px; box-shadow: var(--shadow-float); }
.note { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; font-size: 0.875rem; color: var(--muted); }
.note i { flex: none; margin-top: 2px; font-size: 16px; color: var(--blue); }

/* ---------- Booking box (sticky, light blue like spa.cz) ---------- */
.book { position: sticky; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.book__card { padding: 24px; border: 1px solid var(--blue-100); border-radius: var(--r-lg); background: var(--blue-50); }
.book__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.book__badge { background: var(--white); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-100); }
.book__badge i { color: var(--blue); }
.book__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.1; }
.book__price .price__from { font-size: 0.9375rem; }
.book__price .price__value { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; }
.book__price .price__old { font-size: 1rem; }
.book__unit { margin-top: 4px; font-size: 0.875rem; color: var(--muted); }
.book__save { margin-top: 10px; }
.book__action { margin-top: 18px; }
.book__action .btn--cta { min-height: 54px; padding: 8px 16px; font-size: 1.0625rem; white-space: normal; text-align: center; }
.book__hint { margin-top: 10px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); text-align: center; }
.book__list { list-style: none; display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--blue-100); }
.book__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.875rem; line-height: 1.35; }
.book__list i { flex: none; margin-top: 1px; font-size: 20px; color: var(--blue); }
.book__list small { display: block; font-size: 0.8125rem; color: var(--muted); }
.book__list b { font-weight: 600; color: var(--navy); }
.book__trust { list-style: none; display: grid; gap: 8px; padding: 0 6px; font-size: 0.8125rem; color: var(--text); }
.book__trust li { display: flex; align-items: center; gap: 8px; }
.book__trust i { flex: none; font-size: 18px; color: var(--green); }
.book__secondary { display: flex; justify-content: center; gap: 0 28px; margin-top: -8px; }

/* ---------- Similar offers ---------- */
.offer-similar__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.offer-similar__all i { font-size: 16px; transition: transform var(--t-fast) var(--ease); }
.offer-similar__all:hover i { transform: translateX(3px); }

/* ---------- Bottom bar: appears once the main button has scrolled away ---------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(11, 31, 68, .25);
  transform: translateY(110%); transition: transform 300ms var(--ease);
}
.sticky-bar.is-visible { transform: none; }
.sticky-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding-block: 10px; }
.sticky-bar__info { min-width: 0; }
.sticky-bar__name { overflow: hidden; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.sticky-bar__sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 0.8125rem; color: var(--muted); }
.sticky-bar__right { display: flex; align-items: center; gap: 20px; flex: none; }
.sticky-bar__price { justify-items: end; text-align: right; }
.sticky-bar__price .price__row { justify-content: flex-end; }
/* the bar covers the bottom of the page: keep the footer readable above it */
.site-footer { padding-bottom: 76px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(6, 13, 26, .96); color: var(--white);
  opacity: 0; visibility: hidden; transition: opacity var(--t-med), visibility 0s linear var(--t-med);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox :focus-visible { outline-color: var(--yellow); }
.lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 20px; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lightbox .icon-btn { color: var(--white); }
.lightbox .icon-btn:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
.lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 84px; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-md); }
.lightbox__stage img:not([src]) { visibility: hidden; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: var(--white); font-size: 22px;
  transition: background-color var(--t-fast);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__thumbs { display: flex; gap: 8px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; }
.lightbox__thumbs::-webkit-scrollbar { display: none; }
/* centred while they fit, scrollable from the first thumb when they don't */
.lightbox__thumbs > :first-child { margin-left: auto; }
.lightbox__thumbs > :last-child { margin-right: auto; }
.lightbox__thumbs button { flex: none; width: 76px; height: 54px; overflow: hidden; border-radius: var(--r-sm); opacity: .5; transition: opacity var(--t-fast); }
.lightbox__thumbs button:hover { opacity: .85; }
.lightbox__thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--white); }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .offer-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .book__card { padding: 20px; }
  .book__action .btn--cta { font-size: 1rem; }
  .amen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .offer-head { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 16px; }
  .offer-head__actions { margin-left: -2px; }

  .gallery { height: clamp(280px, 48vw, 400px); }
  .gallery--5 { grid-template-columns: 2fr 1fr; }
  .gallery__item:nth-child(n+4) { display: none; }

  /* One column; the booking box comes right after the gallery */
  .offer-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
  .book { position: static; order: -1; }
  .book__secondary { display: none; }
}

/* Tablet: price on the left, button on the right */
@media (min-width: 641px) and (max-width: 900px) {
  .book__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: center; gap: 0 28px; }
  .book__action { margin-top: 0; }
  .book__list { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; }
}

@media (max-width: 640px) {
  .offer-head__meta { gap: 6px 14px; margin-top: 8px; font-size: 0.875rem; }
  .offer-head__meta .rating { font-size: 0.875rem; }
  .offer-head__actions { gap: 0 16px; }
  .offer-action__long { display: none; }
  .offer-action__short { display: inline; }

  /* Phones: one photo with a "1 / N" counter that opens the lightbox */
  .gallery, .gallery--3, .gallery--2, .gallery--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-md); }
  .gallery__item:first-child, .gallery--2 .gallery__item { grid-row: auto; }
  .gallery__item:nth-child(n+2) { display: none; }
  .gallery__tag { left: 12px; top: 12px; }
  .gallery__all { right: 12px; bottom: 12px; gap: 6px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(11, 31, 68, .78); color: var(--white); box-shadow: none; }
  .gallery__all i { color: var(--white); }
  .gallery__all:hover { background: var(--navy); color: var(--white); }
  .gallery__all-text { display: none; }
  .gallery__all-count { display: inline; }

  .offer-layout { gap: 28px; margin-top: 20px; }
  .block { margin-top: 28px; padding-top: 28px; }
  .block__title { font-size: 1.25rem; }
  .block__lead { font-size: 1.125rem; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .fact { gap: 10px; }
  .fact i { font-size: 24px; }
  .amen { gap: 12px 16px; }
  .offer-ladder { padding: 16px 12px 14px; }
  .map-card { min-height: 200px; }

  .book__card { padding: 18px; }
  .book__price .price__value { font-size: 2rem; }

  /* Bottom bar: price on the left, green button on the right */
  .sticky-bar__inner { min-height: 68px; padding-block: 8px; }
  .sticky-bar__info, .sticky-bar__long { display: none; }
  .sticky-bar__right { flex: 1; justify-content: space-between; gap: 12px; }
  .sticky-bar__price { justify-items: start; text-align: left; }
  .sticky-bar__price .price__row { justify-content: flex-start; }
  .sticky-bar__price .price__value { font-size: 1.25rem; }
  .sticky-bar__cta { min-height: 48px; padding: 0 22px; }
  .site-footer { padding-bottom: 68px; }

  .lightbox__top { padding-left: 16px; }
  .lightbox__stage { padding: 0 8px; }
  .lightbox__nav { width: 44px; height: 44px; background: rgba(0, 0, 0, .5); }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__thumbs button { width: 60px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item:hover img { transform: none; }
}

@media print {
  .sticky-bar, .lightbox, .gallery__btn, .gallery__all, .offer-head__actions, .book__secondary { display: none !important; }
  .book { position: static; }
}