/* Dedicated card visuals: each asset keeps its native aspect ratio inside a reserved frame.
   Never use these as stretched or cropped card backgrounds. */
body.category-page .category-directory-card.has-category-art {
  min-height: 218px;
}
body.category-page .category-directory-card .category-card-art {
  position: absolute;
  right: .45rem;
  bottom: .45rem;
  z-index: 1;
  width: min(43%, 122px);
  height: 122px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .96;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .32));
}
body.category-page .category-directory-card .category-card-art img,
body.home .lp-guides .guide-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
  mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
}
body.category-page .category-directory-card.has-category-art .card-desc,
body.category-page .category-directory-card.has-category-art .card-route {
  max-width: 60%;
}

body.home .lp-guides .feature-card.has-guide-art {
  min-height: 202px;
}
body.home .lp-guides .guide-card-art {
  position: absolute;
  right: .5rem;
  bottom: .45rem;
  z-index: 1;
  width: min(48%, 132px);
  height: 112px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .28));
}
body.home .lp-guides .feature-card.has-guide-art h3,
body.home .lp-guides .feature-card.has-guide-art p,
body.home .lp-guides .feature-card.has-guide-art .fc-go {
  position: relative;
  z-index: 3;
  max-width: 62%;
}

/* Home categories use the same dedicated, contained art as category.html.
   The image remains an independent decorative layer, never a stretched background. */
body.home .category-home-card.has-home-category-art {
  min-height: 202px;
}
body.home .category-home-card .home-category-art {
  position: absolute;
  right: .3rem;
  bottom: .25rem;
  z-index: 1;
  width: min(43%, 122px);
  height: 112px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .66;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}
body.home .category-home-card .home-category-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
  mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
}
body.home .category-home-card.has-home-category-art .card-title,
body.home .category-home-card.has-home-category-art .card-desc,
body.home .category-home-card.has-home-category-art .card-meta {
  z-index: 3;
  max-width: 64%;
}

/* Guide-directory cards use the same contained visual treatment as the home guides.
   These are decorative, independent elements rather than cropped card backgrounds. */
body.guides-page .feature-card.has-guide-directory-art {
  position: relative;
  min-height: 204px;
  overflow: hidden;
}
body.guides-page .guide-directory-art {
  position: absolute;
  right: .45rem;
  bottom: .4rem;
  z-index: 1;
  width: min(46%, 138px);
  height: 118px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3));
}
body.guides-page .guide-directory-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
  mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
}
body.guides-page .feature-card.has-guide-directory-art h3,
body.guides-page .feature-card.has-guide-directory-art p,
body.guides-page .feature-card.has-guide-directory-art .fc-go,
body.guides-page .feature-card.has-guide-directory-art .fc-icon {
  position: relative;
  z-index: 3;
  max-width: 63%;
}

/* Setup cards: product facts remain the foreground; the category art is a
   separate, contained decorative element rather than a card background. */
body.support-page-body .device-profile-card.has-setup-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body.support-page-body .device-profile-card.has-setup-art > :not(.setup-card-art) {
  position: relative;
  z-index: 2;
}
body.support-page-body .setup-card-art {
  position: absolute;
  right: .25rem;
  bottom: .2rem;
  z-index: 1;
  width: min(38%, 154px);
  height: 132px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .44;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .34));
}
body.support-page-body .setup-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
  mask-image: radial-gradient(ellipse 78% 78% at 62% 62%, #000 48%, transparent 94%);
}
body.support-page-body .device-profile-card.has-setup-art > :nth-child(2) {
  max-width: 76%;
}

@media (max-width: 600px) {
  body.category-page .category-directory-card.has-category-art { min-height: 190px; }
  body.category-page .category-directory-card .category-card-art {
    width: 132px;
    height: 132px;
    right: .35rem;
    bottom: .2rem;
  }
  body.home .lp-guides .feature-card.has-guide-art { min-height: 158px; }
  body.home .lp-guides .guide-card-art {
    width: 96px;
    height: 90px;
    right: .25rem;
    bottom: .25rem;
  }
  body.home .category-home-card.has-home-category-art { min-height: 146px; }
  body.home .category-home-card .home-category-art {
    width: 86px;
    height: 82px;
    right: .12rem;
    bottom: .1rem;
    opacity: .5;
  }
  body.home .category-home-card.has-home-category-art .card-title,
  body.home .category-home-card.has-home-category-art .card-desc,
  body.home .category-home-card.has-home-category-art .card-meta {
    max-width: 67%;
  }
  body.guides-page .feature-card.has-guide-directory-art { min-height: 164px; }
  body.guides-page .guide-directory-art {
    width: 102px;
    height: 92px;
    right: .25rem;
    bottom: .25rem;
  }
  body.support-page-body .setup-card-art {
    width: 104px;
    height: 96px;
    right: .1rem;
    bottom: .1rem;
    opacity: .34;
  }
  body.support-page-body .device-profile-card.has-setup-art > :nth-child(2) {
    max-width: 100%;
  }
}