/* ==========================================================================
   SECTION: ADVANTAGES — ten reasons, each with a reason and a photo attached
   ========================================================================== */

.advantages { background: var(--c-base); }

/* Dark section, but .t-h2 defaults to dark ink — the heading was invisible. */
.advantages .t-h2 { color: var(--c-surface); }

/* Ten cards. Only column counts that divide 10 evenly (5, 2, 1) — anything else
   leaves a short final row. */
.advantages__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--c-line-d);
  border: 1px solid var(--c-line-d);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (max-width: 1080px) { .advantages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .advantages__grid { grid-template-columns: 1fr; } }

/* Photo on top, content beneath — the same image-with-content pattern the rest
   of the site uses, rather than a photo washed out behind the text. */
.adv {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-base);
  overflow: hidden;
  transition: background-color 260ms var(--ease);
}
.adv:hover { background: var(--c-base-soft); }

.adv__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-base-soft);
}
.adv__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease), filter 400ms var(--ease);
}
.adv:hover .adv__media img { transform: scale(1.07); filter: saturate(1.08); }

.adv__body { padding: var(--sp-5); }

.adv__icon {
  width: 32px; height: 32px;
  color: var(--c-energy);
  margin-bottom: var(--sp-4);
  transition: transform 300ms var(--ease);
}
.adv:hover .adv__icon { transform: translateY(-3px); }
.adv__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.adv h3 {
  font-size: var(--fs-h4);
  font-weight: var(--w-bold);
  color: var(--c-surface);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}
.adv p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(247,245,240,0.62);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .adv:hover .adv__media img { transform: none; }
}