/* Home sections 6-8: locations, FAQ, reviews (contact: contact.css). Mobile first, desktop from 782px. */

/* Flow-layout groups add top margins; these containers space their children with gap. */
.lk-section :is(.locations-grid, .lk-loc, .lk-loc-body, .locations-lines, .lk-loc-line, .faq-columns, .faq-side, .faq-list, .faq-aside,
  .reviews-top, .reviews-score, .reviews-rating, .reviews-rating-meta, .reviews-list, .lk-review, .lk-review-by, .reviews-author) > * { margin-block: 0; }
.lk-section :is(.locations-grid, .faq-columns) { margin-block-end: 0; }

/* Locations */
.lk-section .locations-grid { gap: 16px; }
.lk-loc .lk-loc-img { height: 200px; margin: 0; }
.lk-loc .lk-loc-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.lk-loc .lk-loc-body { padding: 20px; }
.lk-loc .lk-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.locations-lines { display: flex; flex-direction: column; gap: 10px; }
.lk-loc-line > figure { flex-shrink: 0; margin-top: 2px; }
.lk-loc-line img { display: block; }
.lk-section .locations-actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.locations-actions .wp-block-button__link { width: 100%; }
.faq-write .wp-block-button__link::before,
.locations-map figcaption::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; background: var(--gold); }

.locations-map { position: relative; height: 240px; margin: 0; border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.lk-section .locations-map a, .lk-section .locations-map img { display: block; width: 100%; height: 100%; }
.lk-section .locations-map img { object-fit: cover; }
.locations-map a:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: var(--radius-panel); }
.locations-map figcaption { position: absolute; right: 14px; bottom: 14px; margin: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 14px; pointer-events: none; }
.locations-map figcaption::before { width: 16px; height: 16px; rotate: -45deg;
  -webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat; mask: url(../icons/arrow-right.svg) center / contain no-repeat; }
/* ponytail: CSS pin at the map centre; delete when the exported static map carries its own marker. */
.locations-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; translate: -50% -100%; pointer-events: none;
  background: var(--gold); -webkit-mask: url(../icons/pin.svg) center / contain no-repeat; mask: url(../icons/pin.svg) center / contain no-repeat }

/* FAQ */
.lk-section .faq-columns { gap: 40px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.lk-faq summary { padding: 16px 18px; font-size: 16px; }
.lk-faq .lk-faq-a { margin: 0; padding: 0 18px 18px; font-size: 15px; }
.faq-side { display: flex; flex-direction: column; gap: 32px; }
.faq-aside { display: none; flex-direction: column; gap: 12px; padding: 24px; }
.faq-aside-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--text); }
.faq-aside .lk-text { font-size: 15px; }
.faq-write .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; }
.faq-write .wp-block-button__link::before { -webkit-mask: url(../icons/mail.svg) center / contain no-repeat; mask: url(../icons/mail.svg) center / contain no-repeat; }

/* Reviews */
.reviews-top, .reviews-score { display: flex; flex-direction: column; gap: 12px; }
.reviews-top { gap: 40px; }
.reviews-rating { display: flex; align-items: center; gap: 16px; }
.reviews-rating-num { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--text); }
.reviews-rating-meta { display: flex; flex-direction: column; gap: 6px; }
.reviews-rating-count { font-size: 15px; color: var(--muted); }
.lk-section .lk-stars { font-size: 18px; line-height: 1; letter-spacing: 3px; }
.reviews-rating .lk-stars { font-size: 16px; }
.reviews-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.reviews-list > .lk-review { flex: 0 0 300px; scroll-snap-align: start; }
.reviews-author { display: flex; flex-direction: column; gap: 2px; }

@media (min-width: 782px) {
  .lk-section .locations-grid { gap: 24px; }
  .lk-loc .lk-loc-img { height: 230px; }
  .lk-loc .lk-loc-body { padding: 28px; }
  .lk-section .locations-actions { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; }
  .locations-actions .wp-block-button__link { width: auto; }
  .locations-map { height: 100%; min-height: 420px; }

  .lk-section .faq-columns { gap: 64px; }
  .lk-faq summary { padding: 20px 24px; font-size: 18px; }
  .lk-faq .lk-faq-a { padding: 0 24px 24px; font-size: 16px; }
  .faq-aside { display: flex; }

  .reviews-top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
  .reviews-score { align-items: flex-end; gap: 4px; }
  .reviews-rating-num { font-size: 48px; }
  .reviews-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; }
}