/* The six looks, made visibly different in the therapist preview.
   The theme draws every sample site with the same layout and only swaps fonts and
   colours, which reads as six copies of one site. Here each look gets its own
   first screen: layout, colour field, picture shape, menu bar and button.
   practice.js (section 8) marks each sample with data-tp-look and adds the empty
   .tp-pvw-art element; the theme sets colours inline, hence !important.
   Loaded on /therapists/ and on /preview/ reached from a therapist link only.

   calm      sage tint, centred, arch-shaped photo, sage pill button
   warm      terracotta screen (#97522f, 5.5:1 with cream), tilted photo on the left, cream pill button
   fresh     teal menu bar, white, wide rounded photo with an amber circle
   editorial black menu bar, huge uppercase heading, red bar, square red button, black-and-white photo band
   trust     navy screen, photo on the right in an offset gold frame, square gold button
   classic   burgundy menu bar, centred, inset gold frame, matted photo, ornament rule

   Photos: media/look-*.webp, Unsplash License (free commercial use, no credit
   required). Sources are listed in LOOK-PHOTOS.md next to this file. */

.pvw-mock[data-tp-look] {
  display: flex;
  flex-direction: column;
}
.pvw-mock[data-tp-look] .pvw-bar {
  border-style: solid !important;
  border-width: 0 0 1px !important;
}
.pvw-mock[data-tp-look] .pvw-hero {
  flex: 1 1 auto;
  position: relative;
}
.pvw-mock[data-tp-look] .tp-pvw-art {
  display: block;
  position: relative;
  flex: none;
}
.pvw-mock[data-tp-look] .tp-pvw-art::before,
.pvw-mock[data-tp-look] .tp-pvw-art::after {
  content: '';
  position: absolute;
}

/* Two columns: text and picture side by side (warm, trust). */
.pvw-mock[data-tp-look='warm'] .pvw-hero,
.pvw-mock[data-tp-look='trust'] .pvw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  grid-template-rows: auto auto auto 1fr;
  column-gap: 16px;
  align-content: start;
}
.pvw-mock[data-tp-look='warm'] .pvw-hero > *,
.pvw-mock[data-tp-look='trust'] .pvw-hero > * {
  grid-column: 1;
}
.pvw-mock[data-tp-look='warm'] .pvw-hero > .tp-pvw-art,
.pvw-mock[data-tp-look='trust'] .pvw-hero > .tp-pvw-art {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: center;
  width: 100%;
  aspect-ratio: 4 / 5;
}
.pvw-mock[data-tp-look='warm'] .pvw-hero {
  grid-template-columns: 34% minmax(0, 1fr);
}
.pvw-mock[data-tp-look='warm'] .pvw-hero > * {
  grid-column: 2;
}
.pvw-mock[data-tp-look='warm'] .pvw-hero > .tp-pvw-art {
  grid-column: 1;
}
.pv-look .pvw-mock[data-tp-look='warm'] .pvw-head,
.pv-look .pvw-mock[data-tp-look='trust'] .pvw-head {
  font-size: 22px;
}
.pv-look .pvw-mock[data-tp-look='warm'] .pvw-sub,
.pv-look .pvw-mock[data-tp-look='trust'] .pvw-sub {
  font-size: 12px;
}

/* Centred (calm, classic). */
.pvw-mock[data-tp-look='calm'] .pvw-hero,
.pvw-mock[data-tp-look='classic'] .pvw-hero {
  align-items: center;
  text-align: center;
}
.pvw-mock[data-tp-look='calm'] .pvw-btns,
.pvw-mock[data-tp-look='classic'] .pvw-btns {
  justify-content: center;
}
.pvw-mock[data-tp-look='calm'] .pvw-sub,
.pvw-mock[data-tp-look='classic'] .pvw-sub {
  max-width: 24em;
}

/* ---- Calm ---- */
.pvw-mock[data-tp-look='calm'] {
  background: #e9ece2 !important;
}
.pvw-mock[data-tp-look='calm'] .pvw-bar {
  border-color: transparent !important;
}
.pvw-mock[data-tp-look='calm'] .tp-pvw-art {
  width: 90px;
  height: 115px;
  border-radius: 999px 999px 12px 12px;
  overflow: hidden;
  background: #d9d3c8 url('media/look-calm.webp') center / cover no-repeat;
  margin-bottom: 2px;
}
.pvw-mock[data-tp-look='calm'] .pvw-btn:not(.pvw-btn-ghost) {
  background: #3f5b4e !important;
  color: #f3eee4 !important;
  border-radius: 999px !important;
}

.pvw-mock[data-tp-look='calm'] .pvw-btn-ghost {
  color: #3f5b4e !important;
  border-color: #3f5b4e !important;
  border-radius: 999px !important;
}

/* ---- Warm ---- */
.pvw-mock[data-tp-look='warm'] .pvw-bar {
  border-color: transparent !important;
}
.pvw-mock[data-tp-look='warm'] .pvw-hero {
  background: #97522f;
  color: #fbf5ee;
}
/* Light text on the coloured screens at full strength (WCAG AA). */
.pvw-mock[data-tp-look='warm'] .pvw-tag,
.pvw-mock[data-tp-look='warm'] .pvw-sub,
.pvw-mock[data-tp-look='trust'] .pvw-tag,
.pvw-mock[data-tp-look='trust'] .pvw-sub {
  opacity: 1;
}
.pvw-mock[data-tp-look='warm'] .tp-pvw-art::before {
  inset: 0;
  border-radius: 20px;
  background: #e0a458;
  transform: rotate(6deg) translate(4px, 2px);
}
.pvw-mock[data-tp-look='warm'] .tp-pvw-art::after {
  inset: 0;
  border-radius: 20px;
  transform: rotate(-2deg);
  background: #d9d3c8 url('media/look-warm.webp') center / cover no-repeat;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}
.pvw-mock[data-tp-look='warm'] .pvw-btn:not(.pvw-btn-ghost) {
  background: #fbf5ee !important;
  color: #8a4a2c !important;
  border-radius: 999px !important;
}
.pvw-mock[data-tp-look='warm'] .pvw-btn-ghost {
  background: transparent !important;
  color: #fbf5ee !important;
  border-color: #fbf5ee !important;
}

/* ---- Fresh ---- */
.pvw-mock[data-tp-look='fresh'] {
  background: #ffffff !important;
}
.pvw-mock[data-tp-look='fresh'] .pvw-bar {
  background: #0f766e;
  color: #ffffff;
  border-color: #0f766e !important;
}
.pvw-mock[data-tp-look='fresh'] .pvw-mono {
  background: #ffffff !important;
  color: #0f766e;
}
.pvw-mock[data-tp-look='fresh'] .tp-pvw-art {
  width: 100%;
  height: 62px;
  margin-bottom: 2px;
}
.pvw-mock[data-tp-look='fresh'] .tp-pvw-art::after {
  inset: 0;
  border-radius: 14px;
  background: #d9d3c8 url('media/look-fresh.webp') center / cover no-repeat;
}
.pvw-mock[data-tp-look='fresh'] .tp-pvw-art::before {
  width: 38px;
  height: 38px;
  right: -6px;
  top: -12px;
  border-radius: 50%;
  background: #f59e0b;
  z-index: 1;
}
.pvw-mock[data-tp-look='fresh'] .pvw-btn-ghost {
  color: #0f766e !important;
  border-color: #0f766e !important;
  border-radius: 10px !important;
}
.pvw-mock[data-tp-look='fresh'] .pvw-btn:not(.pvw-btn-ghost) {
  background: #f59e0b !important;
  color: #1f2937 !important;
  border-radius: 10px !important;
}

/* ---- Editorial ---- */
.pvw-mock[data-tp-look='editorial'] .pvw-bar {
  background: #111111;
  color: #fbfaf7;
  border-color: #111111 !important;
}
.pvw-mock[data-tp-look='editorial'] .pvw-mono {
  background: #d94f30 !important;
}
.pvw-mock[data-tp-look='editorial'] .tp-pvw-art {
  order: 5;
  width: 100%;
  height: 84px;
  margin-top: 6px;
  background: #d9d3c8 url('media/look-editorial.webp') center / cover no-repeat;
}
.pvw-mock[data-tp-look='editorial'] .pvw-hero::before {
  content: '';
  width: 44px;
  height: 7px;
  background: #d94f30;
}
.pvw-mock[data-tp-look='editorial'] .pvw-tag {
  color: #b83a1f;
  opacity: 1;
  font-weight: 700;
}
.pvw-mock[data-tp-look='editorial'] .pvw-head {
  text-transform: uppercase;
  line-height: 0.98;
}
.pv-look .pvw-mock[data-tp-look='editorial'] .pvw-head {
  font-size: 30px;
}
.pvw-mock[data-tp-look='editorial'] .pvw-hero {
  border-bottom: 6px solid #111111;
}
.pvw-mock[data-tp-look='editorial'] .pvw-btn:not(.pvw-btn-ghost) {
  background: #c2401f !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}
.pvw-mock[data-tp-look='editorial'] .pvw-btn-ghost {
  background: transparent !important;
  color: #111111 !important;
  border-color: #111111 !important;
}

/* ---- Trust ---- */
.pvw-mock[data-tp-look='trust'] .pvw-bar {
  border-width: 0 0 3px !important;
  border-color: #b8975a !important;
}
.pvw-mock[data-tp-look='trust'] .pvw-hero {
  background: #1f3a5f;
  color: #f4f2ee;
}
.pvw-mock[data-tp-look='trust'] .tp-pvw-art::before {
  inset: -7px 7px 7px -7px;
  border: 1px solid #b8975a;
}
.pvw-mock[data-tp-look='trust'] .tp-pvw-art::after {
  inset: 0;
  background: #d9d3c8 url('media/look-trust.webp') center / cover no-repeat;
}
.pvw-mock[data-tp-look='trust'] .pvw-btn:not(.pvw-btn-ghost) {
  background: #b8975a !important;
  color: #1c2430 !important;
  border-radius: 0 !important;
}
.pvw-mock[data-tp-look='trust'] .pvw-btn-ghost {
  background: transparent !important;
  color: #f4f2ee !important;
  border-color: #f4f2ee !important;
}

/* ---- Classic ---- */
.pvw-mock[data-tp-look='classic'] .pvw-bar {
  background: #6b2737;
  color: #f7f3ea;
  border-color: #6b2737 !important;
}
.pvw-mock[data-tp-look='classic'] .pvw-mono {
  background: #f7f3ea !important;
  color: #6b2737;
}
.pvw-mock[data-tp-look='classic'] .pvw-hero {
  box-shadow:
    inset 0 0 0 8px #f7f3ea,
    inset 0 0 0 9px #b08d57;
  padding-left: 24px;
  padding-right: 24px;
}
.pvw-mock[data-tp-look='classic'] .tp-pvw-art {
  width: 150px;
  aspect-ratio: 10 / 7;
  padding: 5px;
  background: #ffffff;
  border: 1px solid #b08d57;
  box-sizing: border-box;
}
.pvw-mock[data-tp-look='classic'] .tp-pvw-art::after {
  inset: 5px;
  background: #d9d3c8 url('media/look-classic.webp') center / cover no-repeat;
}
.pvw-mock[data-tp-look='classic'] .pvw-tag::after {
  content: '';
  display: block;
  width: 84px;
  height: 10px;
  margin: 8px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='10'%3E%3Cpath d='M0 5h36M48 5h36' stroke='%23b08d57'/%3E%3Cpath d='M42 1l4 4-4 4-4-4z' fill='%23b08d57'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pvw-mock[data-tp-look='classic'] .pvw-btn:not(.pvw-btn-ghost) {
  background: #6b2737 !important;
  color: #f7f3ea !important;
  border-radius: 2px !important;
}
.pvw-mock[data-tp-look='classic'] .pvw-btn-ghost {
  background: transparent !important;
  color: #6b2737 !important;
}