/* ==========================================================================
   STABLY - solutions.css  (solutions.html only; loaded after site.css)

   Every class here is prefixed "s-sol-". Shared shell/utility classes
   (s-section, s-container, s-label, s-h2, s-lead, s-link, s-btn, s-dark,
   s-reveal, s-photo-fill, s-pageheadetc.) come from site.css and are reused
   as-is.

   1. Section head
   2. Applied-space photo grid (one component, used by #inspection and #patrol)
   3. Section foot: delivery line / feature list + CTA
   4. Responsive
   ========================================================================== */


/* 1. Section head - label + h2 + intro, capped so the headline wraps to two
   lines instead of running the full container width */
.s-sol-head { max-width: 780px; }


/* 2. Applied-space photo grid (photo + name only)
   -------------------------------------------------------------------------- */
.s-sol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}

/* Four-tile variant (#patrol): 2 x 2 on desktop so no tile is left alone on
   a second row; the tablet/mobile rules below apply to both grids */
.s-sol-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-sol-grid--2 .s-sol-card { aspect-ratio: 16 / 9; }

.s-sol-card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--s-radius);
  background: var(--s-photo);
  color: var(--s-on-dark);
}
.s-sol-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.s-sol-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75);
  transition: transform .9s var(--s-ease);
}
/* Light uniform tint plus a bottom gradient the name sits on; strong enough
   for the bright girder / warehouse-floor photos */
.s-sol-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, .12) 0%, rgba(11, 18, 32, .22) 48%, rgba(11, 18, 32, .82) 100%);
}
.s-sol-card:hover .s-sol-card__media img { transform: scale(1.04); }

.s-sol-card__name {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}


/* 3. Section foot
   -------------------------------------------------------------------------- */
.s-sol-foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 56px;
  align-items: center;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--s-line);
}
.s-dark .s-sol-foot { border-top-color: var(--s-line-dark); }

/* "제공 방식" - small key above one sentence */
.s-sol-foot__key {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--s-ink-3);
}
.s-sol-foot__line {
  font-size: 18px;
  line-height: 1.7;
  color: var(--s-ink);
}
.s-sol-foot__note { margin-top: 18px; }

/* Feature list (patrol): icon over one line, four columns */
.s-sol-foot--features {
  padding-top: 0;
  border-top: 0;
}
.s-sol-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.s-sol-features li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--s-line-dark);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--s-on-dark);
}
.s-sol-features svg {
  width: 24px;
  height: 24px;
  color: var(--s-blue);
}


/* 4. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  /* Foot stacks before the feature columns get too narrow */
  .s-sol-foot { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  .s-sol-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
  }
  .s-sol-grid--2 .s-sol-card { aspect-ratio: 4 / 3; }
  .s-sol-card__name { left: 24px; right: 24px; bottom: 20px; font-size: 20px; }
  .s-sol-foot { margin-top: 48px; padding-top: 28px; }
}

@media (max-width: 767px) {
  .s-sol-grid { gap: 16px; margin-top: 40px; }
  .s-sol-card { aspect-ratio: 3 / 2; }
  .s-sol-card__name { left: 20px; right: 20px; bottom: 16px; font-size: 20px; }
  .s-sol-foot { gap: 28px; margin-top: 40px; padding-top: 24px; }
  .s-sol-foot__line { font-size: 17px; }
  .s-sol-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .s-sol-features li { gap: 12px; padding-top: 16px; font-size: 15px; }
}

@media (max-width: 559px) {
  .s-sol-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .s-sol-card__media img { transition: none; }
}

/* Solutions page runs tighter: shorter section padding, first section close under the title band */
.s-section { --s-section-y: 80px; }
#inspection { padding-top: 72px; }
@media (max-width: 767px) { .s-section { --s-section-y: 56px; } #inspection { padding-top: 48px; } }