/*!
 * Osso Feature section · (C) 2026 Osso City Lighting · GPL-2.0-or-later
 */
.osso-feature {
  --_accent: var(--osso-accent, #b08d57);
  --_radius: var(--osso-radius, 4px);
}

.osso-feature__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.osso-feature--split .osso-feature__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.osso-feature--image-left .osso-feature__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.osso-feature--image-right .osso-feature__media { order: 2; }

.osso-feature--stacked .osso-feature__grid { gap: clamp(2rem, 4vw, 3.5rem); }
.osso-feature--image-bottom .osso-feature__media { order: 2; }
.osso-feature--stacked .osso-feature__media { justify-self: center; width: min(100%, 720px); }
.osso-feature--narrow.osso-feature--stacked .osso-feature__media { width: min(100%, 600px); }

.osso-feature--text-only .osso-feature__text,
.osso-feature--stacked .osso-feature__text { max-width: 760px; margin-inline: auto; width: 100%; }

.osso-feature--align-center .osso-feature__text { text-align: center; }
.osso-feature--align-center .osso-eyebrow { justify-content: center; }
.osso-feature--align-center .osso-eyebrow::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.osso-feature__body { color: inherit; }
.osso-section--bg-white .osso-feature__body,
.osso-section--bg-light .osso-feature__body { color: color-mix(in srgb, var(--osso-text, #1d2630) 88%, transparent); }
.osso-feature__body p:first-child::first-line { letter-spacing: .01em; }

.osso-feature__action { margin: 2rem 0 0 !important; }

/* Image treatments */
.osso-feature__media { margin: 0; position: relative; }

.osso-feature__frame { position: relative; }

.osso-feature__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--_radius);
}

.osso-feature__media--frame .osso-feature__frame { padding: 0 1.25rem 1.25rem 0; }
.osso-feature--image-left .osso-feature__media--frame .osso-feature__frame { padding: 0 0 1.25rem 1.25rem; }

.osso-feature__media--frame .osso-feature__frame::before {
  content: "";
  position: absolute;
  inset: 1.25rem 0 0 1.25rem;
  z-index: -1;
  border: 1px solid var(--_accent);
  border-radius: var(--_radius);
}

.osso-feature--image-left .osso-feature__media--frame .osso-feature__frame::before { inset: 1.25rem 1.25rem 0 0; }
.osso-feature__media--frame .osso-feature__frame img { position: relative; }
.osso-feature__media--frame .osso-feature__frame { isolation: isolate; }

.osso-feature__media--arch .osso-feature__frame img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--_radius) var(--_radius);
}

.osso-feature--stacked .osso-feature__media--arch { width: min(100%, 440px); }

.osso-feature__media--oval .osso-feature__frame img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50%;
}

.osso-feature--stacked .osso-feature__media--oval { width: min(100%, 420px); }

.osso-feature__media figcaption {
  margin-top: .9rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--osso-muted, #5f6670);
  text-align: center;
}

.osso-section--bg-brand .osso-feature__media figcaption,
.osso-section--bg-dark .osso-feature__media figcaption { color: var(--osso-on-dark-muted, rgba(255, 255, 255, .7)); }

@media (max-width: 899.98px) {
  .osso-feature--split .osso-feature__grid,
  .osso-feature--image-left .osso-feature__grid { grid-template-columns: 1fr; }
  .osso-feature--image-right .osso-feature__media { order: 0; }
  .osso-feature--split .osso-feature__media { width: min(100%, 600px); justify-self: center; }
}