/*
 * Pet Care Solutions — page-scoped design for page-petcare-solutions.php.
 * Layers on top of assets/css/content-pages.css; every rule is scoped under
 * .pcs so nothing here can reach another page.
 *
 * The closing band's logo plate is pure #000 and the logo blends with `screen`.
 * Screen over a black backdrop is the identity function, so the supplied
 * petcaresolutions.help artwork renders pixel-for-pixel; any near-black matte in
 * a future re-export dissolves into the plate instead of showing a seam; and a
 * transparent-background replacement composites identically with no CSS change.
 *
 * @package Petland_Florida_2025
 */

.pcs{
  --pcs-ink:#1C2126;   /* closing band ground — kept off pure black so the logo plate reads as its own object */
  --pcs-plate:#000;    /* matches the logo PNG's own background */
}

/* ---- Coverage strip ------------------------------------------------------
   Three .pg-card tiles carrying an icon and a label only. Labels repeat
   phrases from the paragraph above, so there is deliberately no body copy. */
.pcs-cover{
  max-width:1020px;margin-inline:auto;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:20px;
}
/* No hover lift: these tiles are labels, not links, and .pg-card's default
   transform would imply they can be clicked. */
.pcs-cap:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pcs-cap .pg-card__body{align-items:center;text-align:center;gap:14px;padding:30px 24px 32px}
.pcs-cap .pg-card__icon{margin-bottom:0}
.pcs-cap .pg-card__title{font-size:1.08rem;line-height:1.35;text-wrap:balance}

/* ---- Closing action band -------------------------------------------------
   Replaces the shared terracotta .pg-cta on this page only. Dark, so the
   partner's black-ground wordmark reads as a deliberate brand statement
   rather than an untrimmed image. */
.pcs-band{
  position:relative;overflow:hidden;border-radius:20px;text-align:center;color:#fff;
  background:var(--pcs-ink);
  padding:clamp(36px,5vw,60px) clamp(20px,4vw,56px) clamp(34px,5vw,56px);
}
.pcs-band::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
}

.pcs-band__plate{
  display:flex;align-items:center;justify-content:center;
  max-width:492px;margin:0 auto clamp(28px,4vw,38px);
  padding:clamp(20px,3vw,28px) clamp(24px,4vw,46px);
  border-radius:16px;background:var(--pcs-plate);isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.45);
}
/* 400px caps the 800x200 source at exactly 2x, so it stays crisp on retina.
   A 1600x400 or SVG from the vendor would let this go larger. */
.pcs-band__logo{display:block;width:100%;max-width:400px;height:auto;mix-blend-mode:screen}

.pcs-band__title{margin:0 0 12px;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.15}
.pcs-band__text{margin:0 auto 28px;max-width:620px;font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.82)}
.pcs-band__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.pcs-band__btn{
  padding:14px 30px;font-weight:800;border-radius:2px;border:2px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.pcs-band__btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}
.pcs-band__btn--primary:hover,.pcs-band__btn--primary:focus{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.pcs-band__btn--ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.pcs-band__btn--ghost:hover,.pcs-band__btn--ghost:focus{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.78);color:#fff}
/* The theme's default focus ring is --dark-gray, which disappears on this band. */
.pcs-band__btn:focus-visible{outline:3px solid var(--secondary);outline-offset:3px}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:600px){
  .pcs-band__actions{flex-direction:column}
  .pcs-band__btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .pcs-cap,.pcs-band__btn{transition:none}
}