/* SmartHerb 8Riew — RS-DM06.6
 * Public home vision artwork integration and botanical section treatment.
 * Scope: public_home.php vision section only.
 */

body.public-shell.page-public-home #main-content .sh-vision-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 46%, rgba(242, 140, 40, .19), transparent 29%),
    radial-gradient(circle at 12% 18%, rgba(84, 179, 121, .19), transparent 31%),
    linear-gradient(132deg, #061b14 0%, #0a3022 48%, #071f17 100%);
  color: #f4fff9;
}

body.public-shell.page-public-home #main-content .sh-vision-section::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -2;
  background: url('../img/public-home/vision-ecosystem-rs-dm06-6.webp') center / cover no-repeat;
  opacity: .12;
  filter: blur(22px) saturate(.86) brightness(.72);
  transform: scale(1.08);
  pointer-events: none;
}

body.public-shell.page-public-home #main-content .sh-vision-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(221, 188, 101, .055) 1px, transparent 1px),
    linear-gradient(rgba(221, 188, 101, .045) 1px, transparent 1px),
    radial-gradient(circle at 72% 50%, transparent 0 16%, rgba(229, 190, 89, .09) 16.2% 16.35%, transparent 16.55% 24%, rgba(229, 190, 89, .065) 24.2% 24.35%, transparent 24.55%);
  background-size: 54px 54px, 54px 54px, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 100%);
  pointer-events: none;
}

body.public-shell.page-public-home #main-content .sh-vision-section > .sh-container {
  position: relative;
  z-index: 1;
}

body.public-shell.page-public-home #main-content .sh-vision-grid {
  grid-template-columns: minmax(0, .74fr) minmax(560px, 1.26fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
}

body.public-shell.page-public-home #main-content .sh-vision-copy {
  position: relative;
  min-width: 0;
  max-width: 39rem;
}

body.public-shell.page-public-home #main-content .sh-vision-copy .sh-section-kicker {
  border: 1px solid rgba(255, 195, 116, .32);
  background: rgba(242, 140, 40, .1);
  color: #ffc982 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

body.public-shell.page-public-home #main-content .sh-vision-copy h2 {
  max-width: 17ch;
  color: #f7fff9 !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .22);
}

body.public-shell.page-public-home #main-content .sh-vision-copy__lead {
  max-width: 54ch;
  color: #c5ded4 !important;
}

body.public-shell.page-public-home #main-content .sh-vision-visual {
  position: relative;
  min-width: 0;
  margin: 0;
}

body.public-shell.page-public-home #main-content .sh-vision-visual::before,
body.public-shell.page-public-home #main-content .sh-vision-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

body.public-shell.page-public-home #main-content .sh-vision-visual::before {
  width: 44%;
  aspect-ratio: 1;
  right: 7%;
  bottom: -8%;
  background: rgba(241, 128, 30, .2);
  filter: blur(50px);
}

body.public-shell.page-public-home #main-content .sh-vision-visual::after {
  width: 38%;
  aspect-ratio: 1;
  left: -5%;
  top: -8%;
  background: rgba(79, 184, 118, .14);
  filter: blur(52px);
}

body.public-shell.page-public-home #main-content .sh-vision-visual__frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(232, 199, 115, .58);
  border-radius: clamp(22px, 2.6vw, 38px);
  padding: clamp(5px, .65vw, 9px);
  background: linear-gradient(145deg, rgba(238, 204, 120, .17), rgba(9, 58, 40, .72));
  box-shadow:
    0 34px 82px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 1px rgba(255, 255, 255, .18);
}

body.public-shell.page-public-home #main-content .sh-vision-visual__frame::after {
  content: "";
  position: absolute;
  inset: clamp(5px, .65vw, 9px);
  border: 1px solid rgba(255, 231, 166, .18);
  border-radius: clamp(17px, 2vw, 30px);
  box-shadow: inset 0 0 34px rgba(8, 46, 33, .28);
  pointer-events: none;
}

body.public-shell.page-public-home #main-content .sh-vision-visual__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: clamp(17px, 2vw, 30px);
  object-fit: cover;
  filter: saturate(1.04) contrast(1.025);
}

html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-vision-section,
body.public-shell.page-public-home.theme-dark #main-content .sh-vision-section {
  background:
    radial-gradient(circle at 84% 46%, rgba(242, 140, 40, .16), transparent 29%),
    radial-gradient(circle at 12% 18%, rgba(84, 179, 121, .14), transparent 31%),
    linear-gradient(132deg, #04130f 0%, #08271c 48%, #051811 100%);
}


html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-vision-copy .sh-section-kicker,
body.public-shell.page-public-home.theme-dark #main-content .sh-vision-copy .sh-section-kicker {
  color: #ffc982 !important;
}

html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-vision-copy h2,
body.public-shell.page-public-home.theme-dark #main-content .sh-vision-copy h2 {
  color: #f7fff9 !important;
}

html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-vision-copy__lead,
body.public-shell.page-public-home.theme-dark #main-content .sh-vision-copy__lead {
  color: #c5ded4 !important;
}

@media (max-width: 1199.98px) {
  body.public-shell.page-public-home #main-content .sh-vision-grid {
    grid-template-columns: minmax(0, .8fr) minmax(500px, 1.2fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

@media (max-width: 991.98px) {
  body.public-shell.page-public-home #main-content .sh-vision-grid {
    grid-template-columns: 1fr;
  }

  body.public-shell.page-public-home #main-content .sh-vision-copy {
    max-width: 46rem;
  }

  body.public-shell.page-public-home #main-content .sh-vision-copy h2 {
    max-width: 22ch;
  }

  body.public-shell.page-public-home #main-content .sh-vision-visual {
    width: min(100%, 52rem);
    margin-inline: auto;
  }
}

@media (max-width: 767.98px) {
  body.public-shell.page-public-home #main-content .sh-vision-section::before {
    inset: -8%;
    opacity: .09;
    filter: blur(16px) saturate(.84) brightness(.68);
  }

  body.public-shell.page-public-home #main-content .sh-vision-section::after {
    background-size: 38px 38px, 38px 38px, auto;
  }

  body.public-shell.page-public-home #main-content .sh-vision-grid {
    gap: 1.8rem;
  }

  body.public-shell.page-public-home #main-content .sh-vision-copy__lead {
    line-height: 1.7;
  }

  body.public-shell.page-public-home #main-content .sh-vision-visual__frame {
    border-radius: 22px;
    padding: 4px;
  }

  body.public-shell.page-public-home #main-content .sh-vision-visual__frame::after {
    inset: 4px;
    border-radius: 17px;
  }

  body.public-shell.page-public-home #main-content .sh-vision-visual__image {
    border-radius: 17px;
  }
}

@media (max-width: 479.98px) {
  body.public-shell.page-public-home #main-content .sh-vision-copy .sh-section-kicker {
    font-size: .78rem;
  }

  body.public-shell.page-public-home #main-content .sh-vision-visual__frame {
    box-shadow: 0 22px 52px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .04);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-shell.page-public-home #main-content .sh-vision-visual,
  body.public-shell.page-public-home #main-content .sh-vision-visual__image {
    animation: none;
    transition: none;
  }
}