/* 取材・視察・講演について専用CSS。farmvisit/index.html の head でだけ読み込む。Figma: 12_PC_/farmvisit/ / 12_SP_/farmvisit/ */

@layer pages {
  /* ---------- Future Farming（Figma: PC 1400×843 / SP 400×772） ---------- */
  .p-farmvisit-future {
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--50);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    background-color: var(--wp--preset--color--background-soft);
  }

  .p-farmvisit-future__inner {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
    width: min(100% - var(--wp--preset--spacing--15) * 2, var(--wp--preset--layout--container-max));
    margin: var(--wp--preset--spacing--40) auto 0;
  }

  /* 写真（Figma: Rectangle 69）。右下に 10px ずらした半透明のグラデーション（Rectangle 72） */
  .p-farmvisit-future__image {
    position: relative;
    width: calc(100% - var(--wp--preset--spacing--10));
    aspect-ratio: 680 / 500;
    border-radius: var(--wp--preset--radius--medium); /* SP は 10px（Figma: Rectangle 69） */
  }

    .p-farmvisit-future__image img {
      position: relative;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      border-radius: inherit;
    }

    .p-farmvisit-future__image::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      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-farmvisit-future__body {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
  }

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

  .p-farmvisit-future__text {
    margin: 0;
    font-size: var(--wp--preset--font-size--body);
    line-height: var(--wp--preset--line-height--body);
  }

  /* ---------- お申込み前にご確認ください（Figma: PC 1400×983 / SP 400×1069） ---------- */
  .p-farmvisit-notes {
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--80);
    background-color: var(--wp--preset--color--background-soft);
  }

  .p-farmvisit-notes__card {
    width: min(
      100%,
      calc(var(--wp--preset--layout--content-max) + var(--wp--preset--spacing--140))
    );
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--preset--radius--large);
  }

  .p-farmvisit-notes__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--tight);
    color: var(--wp--preset--color--primary);
    text-align: center;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

  .p-farmvisit-notes__list {
    margin: var(--wp--preset--spacing--40) 0 0;
    font-size: var(--wp--preset--font-size--body);
    line-height: var(--wp--preset--line-height--body);
    letter-spacing: var(--wp--preset--letter-spacing--narrow);
  }

  /* 各項目は「・」の ぶら下げ。下に 1px の線（Figma: Line 240〜） */
  .p-farmvisit-notes__item {
    padding: 0 0 var(--wp--preset--spacing--25) 1em;
    text-indent: -1em;
    border-bottom: 1px solid var(--wp--preset--color--border);
  }

    .p-farmvisit-notes__item::before {
      content: "・";
    }

    .p-farmvisit-notes__item + .p-farmvisit-notes__item {
      padding-top: var(--wp--preset--spacing--25);
    }

  /* ---------- Application Form（Figma: 2_News。PC 1400×1554 / SP 400×1763） ---------- */
  .p-farmvisit-form {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--100);
    background-color: var(--wp--preset--color--background-soft);
  }

  .p-farmvisit-form__intro {
    margin: var(--wp--preset--spacing--40) 0 0;
    font-size: var(--wp--preset--font-size--body);
    line-height: var(--wp--preset--line-height--body);
    letter-spacing: var(--wp--preset--letter-spacing--narrow);
  }

  .p-farmvisit-form__body {
    width: min(100%, 742px);
    margin: var(--wp--preset--spacing--60) auto 0;
  }

  /* 時間帯は SP で縦に並ぶ */
  .p-farmvisit-form__slots {
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
    align-items: flex-start;
  }

  @media (min-width: 768px) {
    .p-farmvisit-future {
      padding-top: var(--wp--preset--spacing--75);
      padding-bottom: var(--wp--preset--spacing--100);
    }

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

    .p-farmvisit-future__lead {
      line-height: var(--wp--preset--line-height--heading);
    }

    .p-farmvisit-future__text {
      line-height: var(--wp--preset--line-height--loose);
    }

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

    .p-farmvisit-notes__card {
      padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--100);
    }

    .p-farmvisit-notes__title {
      line-height: var(--wp--preset--line-height--normal);
    }

    .p-farmvisit-notes__list {
      margin-top: var(--wp--preset--spacing--40);
    }

    .p-farmvisit-notes__item {
      padding-bottom: var(--wp--preset--spacing--20);
    }

      .p-farmvisit-notes__item + .p-farmvisit-notes__item {
        padding-top: var(--wp--preset--spacing--20);
      }

    .p-farmvisit-form {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--150);
    }

    .p-farmvisit-form__intro {
      margin-top: var(--wp--preset--spacing--80);
      text-align: center;
    }

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

    .p-farmvisit-form__form {
      --c-form-row-gap: var(--wp--preset--spacing--25);
    }

    .p-farmvisit-form__slots {
      flex-direction: row;
      gap: var(--wp--preset--spacing--30);
      align-items: center;
    }
  }

  /* 写真 680 + 間 100 + 文章 580 の横並びは 1200px 以上だけ。写真は左端から 20px はみ出す（Figma: Frame 1105 x=-20） */
  @media (min-width: 1200px) {
    /* 1400 の枠を中央に置き、その左端から 20px はみ出す（写真 680 + 間 80 + 文章 580 = 1340。右の余白 80）。
       1400 より広い画面でも写真が左端に貼り付かないよう、margin-left を枠の位置から計算する */
    .p-farmvisit-future__inner {
      display: grid;
      grid-template-columns: minmax(0, 680px) minmax(0, 580px);
      grid-column-gap: var(--wp--preset--spacing--80);
      -moz-column-gap: var(--wp--preset--spacing--80);
           column-gap: var(--wp--preset--spacing--80);
      align-items: center;
      width: min(100% - var(--wp--preset--spacing--60), 1340px);
      margin-left: max(calc((100% - 1400px) / 2 - 20px), -20px);
    }

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

    .p-farmvisit-future__body {
      gap: var(--wp--preset--spacing--60);
    }
  }
}