/* Springsan Home Section 05 — Featured Products V1, 2026-10-14
   Scoped to this section only; inherits original common_base.css and Bootstrap 5.
   PC matches the reference's three-column composition while displaying all eight
   CMS entries (the final two are centered). All imagery is 1:1 by requirement.
*/
.spr-site .spr-featured-products {
  background: #111111;
  color: #fff;
  padding: clamp(3.1rem, 3.7vw, 4rem) 0 clamp(4.2rem, 6vw, 6.4rem);
}
.spr-site .spr-featured-products__heading {
  max-width: 780px;
  margin: 0 auto clamp(2.1rem, 3vw, 2.7rem);
  text-align: center;
}
.spr-site .spr-featured-products__title {
  margin: 0;
  color: #fafafa;
  font: 650 clamp(1.55rem, 1.82vw, 1.95rem)/1.3 var(--spr-font, Arial, sans-serif);
  letter-spacing: -.018em;
  text-align: center;
  overflow-wrap: anywhere;
}
/* Only harmless CMS <span> is preserved; the surrounding title stays white. */
.spr-site .spr-featured-products__title span {
  color: var(--spr-primary, #479ee3);
}
.spr-site .spr-featured-products__intro {
  max-width: 700px;
  margin: .8rem auto 0;
  color: #898989;
  font: 400 clamp(.81rem, .95vw, .93rem)/1.7 var(--spr-font, Arial, sans-serif);
  text-align: center;
  text-wrap: pretty;
}
/* Respect Bootstrap's .container. Only the inner product grid gets a
   design-driven ~1060px maximum for the visual proportions in the mockup. */
.spr-site .spr-featured-products__grid {
  --bs-gutter-x: clamp(1rem, 2.05vw, 2rem);
  --bs-gutter-y: clamp(1.5rem, 2.4vw, 2.5rem);
  max-width: 1072px;
  margin: 0 auto;
  align-items: stretch;
}
.spr-site .spr-featured-products__col {
  display: flex;
  min-width: 0;
}
.spr-site .spr-featured-products__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.spr-site .spr-featured-products__photo-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
}
.spr-site .spr-featured-products__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.spr-site .spr-featured-products__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .32s ease;
}
.spr-site .spr-featured-products__missing {
  display: none;
  color: #8a8a8a;
  font: 400 .8rem/1.5 var(--spr-font, Arial, sans-serif);
  text-align: center;
  padding: 1rem;
}
.spr-site .spr-featured-products__media--empty .spr-featured-products__missing,
.spr-site .spr-featured-products__media--broken .spr-featured-products__missing { display: block; }
.spr-site .spr-featured-products__media--broken img { display: none; }
.spr-site .spr-featured-products__name {
  margin: .95rem 0 0;
  min-height: 3.15em; /* at least two lines even for one-line names */
  text-align: center;
  color: #f7f7f7;
  font: 400 clamp(.75rem, .94vw, .91rem)/1.575 var(--spr-font, Arial, sans-serif);
  overflow-wrap: anywhere;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.spr-site .spr-featured-products__name a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  transition: color .2s ease;
}
@media (hover: hover) {
  .spr-site .spr-featured-products__photo-link:not(.spr-featured-products__photo-link--static):hover img {
    transform: scale(1.035);
  }
  .spr-site .spr-featured-products__name a:hover { color: var(--spr-primary, #479ee3); }
}
.spr-site .spr-featured-products__photo-link:focus-visible,
.spr-site .spr-featured-products__name a:focus-visible {
  outline: 2px solid var(--spr-primary, #479ee3);
  outline-offset: 3px;
}
.spr-site .spr-featured-products__empty {
  text-align: center;
  padding: 3rem 0;
  margin: 0;
  color: #a1a1a1;
  font: 400 .95rem/1.7 var(--spr-font, Arial, sans-serif);
}
@media (max-width: 991.98px) {
  .spr-site .spr-featured-products__heading { margin-bottom: 2rem; }
  .spr-site .spr-featured-products__grid { max-width: 740px; }
}
@media (max-width: 575.98px) {
  .spr-site .spr-featured-products {
    padding: 3rem 0 3.5rem;
  }
  .spr-site .spr-featured-products__grid {
    --bs-gutter-x: .85rem;
    --bs-gutter-y: 1.55rem;
  }
  .spr-site .spr-featured-products__title { font-size: clamp(1.36rem, 5.4vw, 1.7rem); }
  .spr-site .spr-featured-products__intro { font-size: .82rem; }
  .spr-site .spr-featured-products__name {
    font-size: clamp(.72rem, 2.85vw, .8rem);
    line-height: 1.55;
    margin-top: .7rem;
    min-height: 3.1em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spr-site .spr-featured-products__media img,
  .spr-site .spr-featured-products__name a { transition: none; }
}