/* ============================================================
   Claudify Nature — Framer SectionNature recreation
   Dark-card section: image bg + left overlay + white text
   ============================================================ */

/* ---- Section shell ----
   padding: 0px 96px 0px 96px — NO top padding.
   Gap from products section (140px bottom) creates the spacing.
   ------------------------------------------------------------ */
.claudify-nature {
  background-color: var(--bera-color-soft-neutral);
  padding: var(--sp-pt, 0px) var(--sp-pr, 96px) var(--sp-pb, 0px) var(--sp-pl, 96px);
}

.claudify-nature__container {
  max-width: 1800px;
  margin: 0 auto;
}

/* ---- Dark card ----
   bg: rgb(11,38,21) | border-radius: 32px | overflow: hidden
   ------------------------------------------------------------ */
.claudify-nature__card {
  position: relative;
  background-color: rgb(11, 38, 21);
  border-radius: 32px;
  overflow: hidden;
  width: 100%;
  /* isolation: isolate creates a new stacking context so the card's internal
     z-indices (1, 2, 3) are self-contained and never compete with the header */
  isolation: isolate;
}

/* ---- Background image (z-index 1, absolute fill) ---- */
.claudify-nature__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.claudify-nature__bg img {
  width: 101%;
  max-width: none;
  height: 101%;
  object-fit: cover;
  object-position: center right;
  position: absolute;
  top: -0.5%;
  left: -0.5%;
}

/* ---- Left overlay (z-index 2) ----
   Sits between image and content; darkens the left text area.
   Width 78% so the wider heading/text stays legible across viewports,
   while the image's right side (subject) stays clear.
   ------------------------------------------------------------ */
.claudify-nature__overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 78%;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(11, 38, 21, 0.92) 0%,
    rgba(11, 38, 21, 0.9)  42%,
    rgba(11, 38, 21, 0.74) 60%,
    rgba(11, 38, 21, 0.42) 80%,
    transparent            100%
  );
}

/* ---- Content (z-index 3, padding 96px, gap 50px) ---- */
.claudify-nature__content {
  position: relative;
  z-index: 3;
  padding: 96px;
  display: flex;
  flex-direction: column;
  gap: 36px; /* tightened from 50 so heading/body/list read as one group */
  max-width: 1000px; /* wide enough that each heading line stays on one line (longest = 752px @96) */
}

/* ---- Top: heading + body text ---- */
.claudify-nature__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Eyebrow — small spaced-out label above the headline */
.claudify-nature__eyebrow {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Heading block: two lines, gap 2px */
.claudify-nature__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Line 1: Cormorant Garamond Bold 96px */
.claudify-nature__heading-line1 {
  display: block;
  font-family: var(--sp-heading-font, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(40px, 7vw, var(--sp-heading-size, 96px));
  font-weight: var(--sp-heading-weight, 500);
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0;
  color: rgb(255, 255, 255);
}

/* Line 2: Cormorant Garamond Bold Italic 96px */
.claudify-nature__heading-line2 {
  display: block;
  font-family: var(--sp-heading-font, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(40px, 7vw, var(--sp-heading-size, 96px));
  font-weight: var(--sp-heading-weight, 500);
  font-style: italic;
  line-height: 100%;
  letter-spacing: 0;
  color: rgb(255, 255, 255);
}

/* Body text: Jost Regular 22px, max-width 550px */
.claudify-nature__body {
  font-family: var(--sp-body-font, 'Jost', sans-serif);
  font-size: var(--sp-body-size, 22px);
  font-weight: var(--sp-body-weight, 400);
  line-height: 150%;
  color: rgba(255, 255, 255, 0.82);
  max-width: 550px;
  margin: 0;
}

/* ---- List: single column by default (mobile/tablet/narrow) ---- */
.claudify-nature__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Two columns of 3 once there's room (column-major: items 1-3 left, 4-6 right) */
@media screen and (min-width: 1100px) {
  .claudify-nature__list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: max-content;
    column-gap: 56px;
    row-gap: 18px;
  }
}

/* Each item: horizontal, gap 12px, icon + text */
.claudify-nature__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Icon: 26×24px white */
.claudify-nature__list-icon {
  width: 26px;
  height: 24px;
  flex-shrink: 0;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
}

.claudify-nature__list-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* List text: Jost Regular 18px */
.claudify-nature__list-text {
  font-family: var(--sp-list-font, 'Jost', sans-serif);
  font-size: var(--sp-list-size, 18px);
  font-weight: var(--sp-list-weight, 400);
  line-height: 150%;
  color: rgb(255, 255, 255);
}

/* ============================================================
   Tablet (750px – 989px)
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .claudify-nature {
    padding: 96px 40px 0;
  }

  .claudify-nature__card {
    border-radius: 24px;
  }

  .claudify-nature__content {
    padding: 64px;
    gap: 32px;
    max-width: 720px; /* room for each heading line on one line at tablet sizes */
  }

}

/* ============================================================
   Mobile (< 750px)
   On mobile the image fills the whole card; text is fully
   readable over the overlay which covers the full card.
   ============================================================ */
@media screen and (max-width: 749px) {
  .claudify-nature {
    padding: 64px 16px 0;
  }

  .claudify-nature__card {
    border-radius: 20px;
  }

  /* Full-width overlay on mobile for legibility */
  .claudify-nature__overlay {
    width: 100%;
    background: linear-gradient(
      to bottom,
      rgba(11, 38, 21, 0.85) 0%,
      rgba(11, 38, 21, 0.75) 100%
    );
  }

  .claudify-nature__content {
    padding: 40px 28px;
    gap: 28px;
    max-width: 100%;
  }

  .claudify-nature__eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .claudify-nature__heading-line1,
  .claudify-nature__heading-line2 {
    letter-spacing: 0;
  }

  .claudify-nature__body {
    max-width: 100%;
  }
}