/* 環境への取り組み専用CSS。sustainability/index.html の head でだけ読み込む。Figma: 03_PC_/sustainability/ / 03_SP_/sustainability/ */
@layer pages {
  /* ---------- S&M and Nature（薄緑地に白いカード） ---------- */
  .p-sustainability-nature {
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--80);
    background-color: var(--wp--preset--color--background-soft);
  }

  /* 白いカード（Figma: Frame 1275。PC 942px、余白 60/113） */
  .p-sustainability-nature__card {
    max-width: var(--wp--preset--layout--card-narrow);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--40) auto 0;
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--preset--radius--large);
  }

  .p-sustainability-nature__lead {
    margin: 0;
    font-size: var(--wp--preset--font-size--section-lead);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--heading);
    text-align: center;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

    .p-sustainability-nature__lead em {
      font-style: normal;
      color: var(--wp--preset--color--primary);
    }

  .p-sustainability-nature__text {
    margin: var(--wp--preset--spacing--35) 0 0;
    font-size: var(--wp--preset--font-size--body);
    line-height: var(--wp--preset--line-height--body);
  }

  /* ---------- 写真 + 見出し + 本文の区画（Solar / Hydroponics / People / Future 共通） ---------- */
  .p-sustainability-section {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    background-color: var(--wp--preset--color--background);
  }

  .p-sustainability-section--soft {
    background-color: var(--wp--preset--color--background-soft);
  }

  .p-sustainability-section--last {
    padding-bottom: var(--wp--preset--spacing--100);
  }

  /* SP は 写真 → 文章 の縦積み。PC は横並び（写真が画面の端からはみ出す） */
  .p-sustainability-intro {
    display: grid;
    grid-gap: var(--wp--preset--spacing--50);
    gap: var(--wp--preset--spacing--50);
    margin-top: var(--wp--preset--spacing--40);
  }

  /* 角丸の写真。右下にグラデーションの同じ形をずらして置く（Figma: Rectangle 70/71、不透明度 50%）。SP は右に 10px 空ける */
  .p-sustainability-intro__image {
    position: relative;
    width: calc(100% - var(--wp--preset--spacing--10));
    aspect-ratio: 68 / 50;
    border-radius: var(--wp--preset--radius--medium); /* SP は 10px（Figma: Rectangle 69） */
    isolation: isolate;
  }

    .p-sustainability-intro__image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: bottom;
         object-position: bottom;
      border-radius: inherit;
    }

    .p-sustainability-intro__image::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      content: "";
      background: var(--wp--preset--gradient--primary);
      border-radius: inherit;
      opacity: 0.5;
      translate: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
    }

  .p-sustainability-intro__lead {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--lead);
    color: var(--wp--preset--color--primary);
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

  .p-sustainability-intro__text {
    margin: var(--wp--preset--spacing--30) 0 0;
    font-size: var(--wp--preset--font-size--body);
    line-height: var(--wp--preset--line-height--body);
  }

    .p-sustainability-intro__text p {
      margin: 0;
    }

    /* Solar Farming は段落の間を 1 行空ける（Figma） */
    .p-sustainability-intro__text p + p {
      margin-top: var(--wp--preset--spacing--30);
    }

  /* 丸写真 + 見出し（c-feature）。このページは SP 250px / PC 300px（Solar）・350px（2 枚並び） */
  .p-sustainability-features {
    margin-top: var(--wp--preset--spacing--80);
  }

    .p-sustainability-features .c-feature__image {
      width: 250px;
      height: 250px;
    }

  /* ========== PC ========== */
  @media (min-width: 768px) {
    .p-sustainability-nature {
      padding-top: var(--wp--preset--spacing--75);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-sustainability-nature__card {
      padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--100);
      margin-top: var(--wp--preset--spacing--60);
    }

    .p-sustainability-nature__lead {
      line-height: var(--wp--preset--line-height--normal);
    }

    .p-sustainability-nature__text {
      margin-top: var(--wp--preset--spacing--50);
      text-align: center;
    }

    .p-sustainability-section {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-sustainability-section--last {
      padding-bottom: var(--wp--preset--spacing--150);
    }

    .p-sustainability-intro {
      margin-top: var(--wp--preset--spacing--80);
    }

    .p-sustainability-intro__lead {
      letter-spacing: var(--wp--preset--letter-spacing--x-wide);
    }

    /* 14 文字の行が 580px に収まるよう字間を詰める（Figma: 1.2px） */
    .p-sustainability-intro__lead--narrow {
      letter-spacing: var(--wp--preset--letter-spacing--narrow);
    }

    .p-sustainability-intro__text {
      margin-top: var(--wp--preset--spacing--50);
      line-height: var(--wp--preset--line-height--loose);
    }

      .p-sustainability-intro__text p + p {
        margin-top: var(--wp--preset--spacing--35);
      }

    .p-sustainability-features {
      margin-top: var(--wp--preset--spacing--100);
    }

      .p-sustainability-features .c-feature__image {
        width: 300px;
        height: 300px;
      }
  }

  /* ========== PC（横並び） ========== */
  @media (min-width: 1200px) {
    /* 写真 680 + 間 80 + 文章 580 = 1340px。写真側は l-container の外（余白 + 20px）まで広げる */
    .p-sustainability-intro {
      grid-template-columns: minmax(0, 68fr) minmax(0, 58fr);
      gap: var(--wp--preset--spacing--80);
      align-items: center;
      width: calc(
        100% + var(--wp--preset--layout--container-gutter) + var(--wp--preset--spacing--20)
      );
      max-width: 1340px;
      margin-left: calc(
        (var(--wp--preset--layout--container-gutter) + var(--wp--preset--spacing--20)) * -1
      );
    }

    .p-sustainability-intro--reverse {
      margin-right: calc(
        (var(--wp--preset--layout--container-gutter) + var(--wp--preset--spacing--20)) * -1
      );
      margin-left: auto;
    }

      .p-sustainability-intro--reverse .p-sustainability-intro__image {
        order: 1;

        /* 右端の写真は影を左下にずらす（Figma: Rectangle 70/71） */
      }
        .p-sustainability-intro--reverse .p-sustainability-intro__image::before {
          translate: calc(var(--wp--preset--spacing--10) * -1) var(--wp--preset--spacing--10);
        }

    .p-sustainability-intro__image {
      border-radius: var(--wp--preset--radius--large);
      width: 100%;
    }

    /* 2 枚並び（Hydroponics / People First）: 500px のカードを 80px 空けて中央に */
    .p-sustainability-features--pair {
      grid-template-columns: repeat(2, 500px);
      gap: var(--wp--preset--spacing--80);
      justify-content: center;
    }

      .p-sustainability-features--pair .c-feature {
        max-width: 500px;
      }

      .p-sustainability-features--pair .c-feature__image {
        width: 350px;
        height: 350px;
      }
  }
}