/* Homepage layout overrides (enqueued separately so they are not stuck behind cached css.php).
   Keep in sync with the "Homepage" block in pc-css/brand.css. */

:root {
  --pc-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2012%27%3E%3Cpath%20d%3D%27M0%206h45M39.6%201.2L44.8%206l-5.2%204.8%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27square%27%2F%3E%3C%2Fsvg%3E");
}

body.home .tm-page > .builder,
body.home main ~ .builder,
body.home #builderwidget-2 {
  display: none !important;
}

.pc-photo-tile .uk-inline-clip,
.pc-home-hero .uk-inline-clip,
.pc-explore-tiles .uk-inline-clip {
  display: block !important;
  width: 100%;
  position: relative;
}

.pc-photo-tile .uk-inline-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.46), transparent 52%);
  pointer-events: none;
  z-index: 1;
}

.pc-photo-tile .uk-position-bottom-left,
.pc-photo-tile .uk-position-cover,
.pc-photo-tile .uk-panel {
  z-index: 2;
}

/* Hero: full viewport width, and tall enough to fill the viewport below the
   header so the "Veins" / "Skin" titles and links are above the fold. */
:root {
  --pc-header-h: 162px;
}

@media (min-width: 960px) {
  :root {
    --pc-header-h: 124px;
  }
}

.pc-home-hero,
.pc-home-hero > .uk-container {
  max-width: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pc-home-hero .el-image {
  display: block;
  width: 100%;
  height: calc(100vh - var(--pc-header-h));
  height: calc(100dvh - var(--pc-header-h));
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}

.pc-explore-tiles .el-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pc-why .el-image,
.pc-split .el-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pc-quote-section .pc-cutout .el-image {
  aspect-ratio: 960 / 810;
  object-fit: contain;
  object-position: bottom;
}

.pc-quote,
.pc-quote p {
  font-style: normal;
}

/* Arrow from the design, drawn as a mask so it inherits the text colour,
   sliding right on hover. */
.pc-photo-tile .pc-tile-arrow {
  flex: 0 0 auto;
  display: inline-block;
  width: 46px;
  height: 12px;
  margin-bottom: 0.5em;
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask: var(--pc-arrow) no-repeat center / contain;
  mask: var(--pc-arrow) no-repeat center / contain;
  transition: transform 0.28s ease;
}

.pc-photo-tile:hover .pc-tile-arrow,
.pc-photo-tile a:hover .pc-tile-arrow,
a:hover .pc-photo-tile .pc-tile-arrow {
  transform: translateX(12px);
}

@media (prefers-reduced-motion: reduce) {
  .pc-photo-tile .pc-tile-arrow {
    transition: none;
  }
}

/* Explore tiles sit directly above a doctor quote section; collapse the tile
   section's bottom padding so the gap is one 130px step, not two. */
@media (min-width: 960px) {
  .uk-section.pc-explore-tiles {
    padding-bottom: 0;
  }
}

/* Body copy 18px (23 Sep 2026, was 22px); uppercase kickers stay 22px. */
.home #tm-main p,
.home #tm-main li,
.home #tm-main .el-content,
.home #tm-main .el-content p,
.home #tm-main .pc-why-text,
.home #tm-main .pc-why-text p {
  font-size: 18px;
  line-height: 1.6;
}

.home .pc-kicker,
.home .pc-kicker .el-title,
.home .pc-kicker h3 {
  font-size: 22px !important;
  font-weight: 500 !important; /* was 600, 23 Sep 2026 */
}

/* Doctor quotes 20px (23 Sep 2026); the body rule above would otherwise take them to 18px. */
.home #tm-main .pc-quote,
.home #tm-main .pc-quote p {
  font-size: 20px;
}

.home .pc-text-link,
.home .pc-text-link a,
.home #tm-main .pc-text-link p {
  font-size: 18px !important;
}

/* Booking bands: default section padding (15px / 25px@m) plus 30px. */
.uk-section.pc-band-green,
.uk-section.pc-band-pink {
  padding-top: 45px;
  padding-bottom: 45px;
}

@media (min-width: 960px) {
  .uk-section.pc-band-green,
  .uk-section.pc-band-pink {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

/* 25% taller than half the space below the header (23 Sep 2026), so the second
   tile's title now sits just below the fold. Keep in sync with the other file. */
@media (max-width: 959px) {
  .pc-home-hero .el-image {
    height: calc((100vh - var(--pc-header-h)) * 0.625);
    height: calc((100dvh - var(--pc-header-h)) * 0.625);
  }
}

/* Hero tiles anchor their photos top centre (23 Sep 2026). Keep in sync with
   brand.css. */
.pc-home-hero .pc-photo-tile .el-image {
  object-position: 50% 0 !important;
}

/* Homepage "large" sections at half padding on desktop: 65px instead of 130px
   (23 Sep 2026) - Welcome, Why Choose, both Explore tile sections, and the top of
   both doctor-quote sections. Mobile was already 65px. The explore tiles keep
   their collapsed 0 bottom. Keep in sync with brand.css. */
@media (min-width: 960px) {
  .home #tm-main .uk-section.uk-section-large {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .home #tm-main .uk-section.uk-section-large.pc-explore-tiles {
    padding-bottom: 0;
  }

  .home #tm-main .uk-section.uk-section-large-top {
    padding-top: 65px;
  }
}

/* Doctor-quote sections have no top padding at any width (23 Sep 2026). Keep in
   sync with brand.css. */
.home #tm-main .uk-section.uk-section-large-top.pc-quote-section {
  padding-top: 0;
}

/* Photo tiles: heading to subtitle gap halved, 30px -> 15px (6 Oct 2026). Overrides theme.css .uk-margin-top 30px !important. */
.pc-photo-tile .el-content.uk-margin-top {
  margin-top: 15px !important;
}