/* WordPress only: small adjustments so the blocks look like the static site. */

/* Area colours, as data-area does on the static site */
.area-krop { --tint: var(--krop); --tint-soft: var(--krop-soft); }
.area-sind { --tint: var(--sind); --tint-soft: var(--sind-soft); }
.area-sjael { --tint: var(--sjael); --tint-soft: var(--sjael-soft); }

/* Pictures keep the margins the static site gives them */
:where(figure.wp-block-image) { margin: 0; }

/* The page content sits one level deeper than on the static site */
.wp-block-post-content > .page-head:last-child { margin-bottom: 0; }

/* Old posts contain button markup; on the static site it shows as an ordinary link */
.prose .wp-block-button__link { display: inline; padding: 0; border-radius: 0; background: none; color: var(--plum); font: inherit; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Testimonials on other pages: the same cards as on the front page */
.reviews { background: var(--blush); text-align: center; padding-block: clamp(3.5rem, 6vw, 5rem); }
.reviews h2 { font-size: max(2.25rem, 2.47vw + 5px); line-height: 1; }
.reviews .cards { text-align: left; }

/* More than three testimonials: they slide sideways on computers too, three at a time */
@media (min-width: 641px) {
  .cards:has(> li:nth-child(4)) {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: auto;
  }
  .cards:has(> li:nth-child(4))::-webkit-scrollbar { display: none; }
  .cards:has(> li:nth-child(4)) > li { flex: 0 0 calc((100% - 2 * 1.5rem) / 3); scroll-snap-align: start; }
  .cards:has(> li:nth-child(4)) + .cards-dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: 1.25rem; }
  .cards:has(> li:nth-child(4)) + .cards-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .cards:has(> li:nth-child(4)) + .cards-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--olive-deep); opacity: 0.25; transition: opacity 0.3s; }
  .cards:has(> li:nth-child(4)) + .cards-dots button[aria-current="true"]::before { opacity: 0.8; }
}
@media (min-width: 961px) {
  .cards:has(> li:nth-child(4)) { gap: calc(var(--u) * 25); width: calc(var(--u) * 926); }
  .cards:has(> li:nth-child(4)) > li { flex-basis: calc(var(--u) * 292); }
}

/* Picture galleries and before/after pictures on treatment pages */
.t-body .wp-block-gallery { margin: 0; }
.t-body .wp-block-gallery img { border-radius: 1rem; }
.before-after figure.wp-block-image figcaption {
  position: static;
  padding: 0.5rem 0 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.875rem;
  text-align: center;
  text-shadow: none;
}
.before-after figure.wp-block-image::before { display: none; }

/* Short video next to the text, without taking over the page */
.t-body .wp-block-video { margin: 0; max-width: 18rem; }
.t-body .wp-block-video video { width: 100%; border-radius: 1rem; background: var(--beige); }

/* Download buttons for PDFs */
.block-body .downloads { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.25rem; }

/* Mega menu: the links in the last column sit under each other, not run together */
.mega-extra .link { display: block; width: fit-content; }
.mega-extra .link + .link { margin-top: 0.85rem; }
.block-body .downloads .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }

/* Phones: long words in the big headings ("krystalhealing", "Sommerferien") fit the screen */
@media (max-width: 420px) {
  .t-hero h1, .post-head h1, .page-head h1, .about-hero h1 { font-size: 2.2rem; }
}