/* Blocks shared by the home page and /zapis: the booking button with the massage couch, "how to reach you" tiles,
   stars on a review, the wall of diplomas and the list of credentials. Loaded after landing-2.css. */

/* ---------- Booking button with the massage couch; "how to reach you" tiles; stars on a review ---------- */
.btn--book { gap: 12px; padding-left: 10px; box-shadow: 0 18px 36px -18px rgba(122, 31, 53, 0.75), inset 0 0 0 1px rgba(220, 199, 164, 0.4); }
.btn__ic {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(220, 199, 164, 0.6); color: #f3dcb6;
}
.btn__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Small phones: the long label gives way, the button never pushes the page wider than the screen */
@media (max-width: 374px) {
  .btn--book.btn--block { gap: 10px; padding-right: 16px; font-size: 15px; }
  .btn--book.btn--block .btn__ic { width: 36px; height: 36px; }
}
@media (max-width: 339px) { .btn__more { display: none; } }
.btn--sm.btn--book { gap: 8px; padding-left: 6px; }
.btn--sm .btn__ic { width: 32px; height: 32px; }
.btn--sm .btn__ic svg { width: 20px; height: 20px; }

.how { min-width: 0; margin: 0; padding: 0; border: 0; }
.how legend { margin: 0 4px 8px; padding: 0; font: 600 13px/1.2 var(--sans); color: var(--ink-2); }
.how__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.how label { position: relative; }
.how input { position: absolute; opacity: 0; pointer-events: none; }
.how span {
  display: grid; justify-items: center; gap: 6px; padding: 10px 2px 9px; border-radius: 15px; border: 1.5px solid var(--line-2);
  background: var(--paper); font: 600 11.5px/1.1 var(--sans); color: var(--ink-2); cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.how svg { width: 21px; height: 21px; fill: none; stroke: var(--wine); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s; }
.how svg use { pointer-events: none; }
.how input:checked + span { border-color: var(--wine); background: var(--wine); color: #fff; }
.how input:checked + span svg { stroke: #fff; }
.how input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 2px; }
.how span:active { transform: scale(0.97); }
@media (hover: hover) { .how span:hover { border-color: var(--wine); } }
/* 320px phones: four tiles in a row are narrower than the word "WhatsApp" — two rows, icon beside the word */
@media (max-width: 339px) {
  .how__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 6px; font-size: 12.5px; }
}

.review__stars { position: absolute; top: 18px; right: 20px; font-size: 13px; }

/* ---------- About: the wall of diplomas is the proof, the list says who she is ---------- */
.wall { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: var(--rose); }
.wall picture { display: block; }
.wall img { display: block; width: 100%; height: auto; }
.wall figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 14px; background: rgba(255, 253, 251, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-2);
}
.wall figcaption b { flex: none; font-size: 36px; font-weight: 600; line-height: 1; color: var(--wine); }
.creds { margin: 0; padding: 0; list-style: none; }
.creds li { position: relative; padding: 11px 0 11px 32px; border-top: 1px dashed var(--line-2); font-size: 15px; line-height: 1.4; color: var(--ink); }
.creds li:last-child { padding-bottom: 2px; }
.creds li::before {
  content: ''; position: absolute; left: 0; top: 11px; width: 21px; height: 21px; border-radius: 50%; background-color: var(--blush);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a1f35' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.5'/%3E%3C/svg%3E");
  background-position: center; background-size: 15px; background-repeat: no-repeat;
}

/* ---------- Screenshots of clients' messages: a strip on phones, three in a row on a wide screen ---------- */
.shots__head { display: grid; gap: 10px; margin-top: clamp(40px, 6vw, 64px); margin-bottom: 22px; }
.shots .gallery__item { flex: 0 0 76vw; max-width: 340px; aspect-ratio: 1; border-radius: 20px; background: var(--paper); }
.shots .gallery__item:hover img { transform: none; }
@media (min-width: 960px) {
  .gallery.shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .shots .gallery__item { max-width: none; }
}

/* ---------- The logo (her own mark, wine line art on transparent) ---------- */
img.brand__mark { object-fit: contain; }
@media (min-width: 960px) { .gallery.shots { width: min(100% - 2 * var(--gutter), var(--max)); padding: 0; } } /* on the axis of the text above */