/**
 * Tarney’s Tails – client-only overrides.
 * First services block must set overrideClass `tt-services-intro` on that module (home page config).
 * !important beats global `.section { padding: … }` shorthand at all breakpoints.
 */

/* Match `theme.colors.background` in styles.js (canvas + overscroll; :root defaults to white). */
html:has([data-client="tarneystails"]),
body:has([data-client="tarneystails"]) {
  background-color: #f1f0eb;
}

/* Home hero: first CTA (Book a walk) half width on mobile; hide second (Learn more) on small screens */
@media (max-width: 767.98px) {
  [data-client="tarneystails"] [data-hero-cta-slot="1"] {
    display: none !important;
  }

  [data-client="tarneystails"] [data-hero-cta-slot="0"] {
    width: 50%;
    max-width: 50%;
    align-self: flex-start;
  }

  [data-client="tarneystails"] [data-hero-cta-slot="0"] a {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Gallery CTA — full `border` on hover too (Button.secondary:hover sets white border shorthand). */
[data-client="tarneystails"][data-secondary-button-hover="lift"] main [data-gallery-cta] a,
[data-client="tarneystails"] main [data-gallery-cta] a {
  background-color: transparent !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

[data-client="tarneystails"][data-secondary-button-hover="lift"] main [data-gallery-cta] a span,
[data-client="tarneystails"] main [data-gallery-cta] a span,
[data-client="tarneystails"][data-secondary-button-hover="lift"] main [data-gallery-cta] a img,
[data-client="tarneystails"] main [data-gallery-cta] a img {
  color: #000000 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-client="tarneystails"][data-secondary-button-hover="lift"] main [data-gallery-cta] a:hover,
[data-client="tarneystails"][data-secondary-button-hover="lift"] main [data-gallery-cta] a:focus-visible,
[data-client="tarneystails"] main [data-gallery-cta] a:hover,
[data-client="tarneystails"] main [data-gallery-cta] a:focus-visible {
  background-color: #000000 !important;
  color: var(--colors-primary) !important;
  border: 2px solid var(--colors-primary) !important;
  box-shadow: none !important;
}

[data-client="tarneystails"][data-secondary-button-hover="lift"] main [data-gallery-cta] a:hover span,
[data-client="tarneystails"][data-secondary-button-hover="lift"] main [data-gallery-cta] a:focus-visible span,
[data-client="tarneystails"] main [data-gallery-cta] a:hover span,
[data-client="tarneystails"] main [data-gallery-cta] a:focus-visible span {
  color: var(--colors-primary) !important;
}

[data-client="tarneystails"] main section.tt-services-intro.section {
  padding-top: 0 !important;
  padding-bottom: 3rem;
}

/* About section: decorative paw trail in bottom-right corner */
[data-client="tarneystails"] main #about>div>section {
  position: relative;
  overflow: visible;
}

[data-client="tarneystails"] main #about>div>section::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -2rem;
  width: clamp(20rem, 26vw, 26rem);
  height: clamp(20rem, 26vw, 26rem);
  background: url("/clients/tarneystails/tarneys-tails-paw-trail.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 767px) {
  [data-client="tarneystails"] main #about>div>section::after {
    right: -4rem;
    bottom: -1.2rem;
    width: 14rem;
    height: 14rem;
  }
}

/* Walkies and more section: heart-sparks decoration */
[data-client="tarneystails"] main #services>div>section {
  position: relative;
  overflow: visible;
}

[data-client="tarneystails"] main #services>div>section::after {
  content: "";
  position: absolute;
  top: 12rem;
  right: 12rem;
  width: clamp(3.8rem, 5vw, 5.6rem);
  height: clamp(3.8rem, 5vw, 5.6rem);
  background: url("/clients/tarneystails/tarneys-tails-heart-sparks.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 2;
  transform: rotate(10deg);
  transform-origin: center;
}

@media (max-width: 767px) {
  [data-client="tarneystails"] main #services>div>section::after {
    top: auto;
    right: 1.6rem;
    bottom: 1.2rem;
    width: 4.8rem;
    height: 4.8rem;
  }
}