/* pages/home.css */

body[data-path="/"] {
  .splide {
    .splide__slide {
      img {
        object-fit: cover;
      }
    }

    .splide__pagination {
      position: unset;
      justify-content: unset;
      gap: calc(5 * 1rem / 16);
      padding: unset;
    }

    .splide__pagination__page {
      display: flex;
      justify-content: center;
      align-items: center;
      inline-size: calc(33 * 1rem / 16);
      block-size: calc(33 * 1rem / 16);
      margin: unset;
      padding: unset;
      border-radius: unset;
      background-color: unset;
      opacity: 1;
      line-height: 1;
      transform: scale(0.715);
      transition: transform 0.2s ease;

      svg {
        rotate: -90deg;

        circle:nth-of-type(2) {
          visibility: hidden;
        }
      }
    }

    .splide__pagination__page.is-active {
      transform: scale(1);

      svg {
        circle:nth-of-type(2) {
          visibility: visible;
        }
      }
    }

    .splide__toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      inline-size: calc(38 * 1rem / 16);
      block-size: calc(22 * 1rem / 16);
      border-radius: calc(2 * 1rem / 16);
      border: 1px solid rgba(var(--color-rgb--white), 0.6);
      background-color: rgba(var(--colorr-rgb--text-black), 0.3);
      line-height: 1;
    }

    @media (hover: hover) {
      .splide__pagination__page {
        /* opacity: 1; */
        transition:
          opacity 0.2s ease,
          transform 0.2s ease;
      }

      .splide__pagination__page:hover {
        opacity: 0.7;
      }
    }
  }

  .p-title-group {
    display: flex;
    flex-flow: column-reverse;

    & > * {
      line-height: 1;
    }

    & > *[lang="en"] {
      letter-spacing: -0.02em;
    }
  }

  .p-business .p-title-group {
    gap: calc((-9 + 15) * 1rem / 16);
    @media (width >= 768px) {
      gap: calc(-10px + 18px);
    }

    /* & > *:first-child {
      margin-block-start: calc((-9 + 15) * 1rem / 16);
      @media (width >= 768px) {
        margin-block-start: calc(-10px + 18px);
      }
    } */
  }

  .p-news .p-title-group {
    gap: calc((-9 + 15) * 1rem / 16);
    @media (width >= 768px) {
      gap: calc(-12px + 18px);
    }

    /* & > *:first-child {
      margin-block-start: calc((-9 + 15) * 1rem / 16);
      @media (width >= 768px) {
        margin-block-start: calc(-12px + 18px);
      }
    } */
  }

  .p-ir .p-title-group {
    & > * {
      line-height: 1.04;
    }
  }

  .p-sustainability .p-title-group {
    gap: calc((-7 + 15) * 1rem / 16);
    @media (width >= 768px) {
      gap: calc(-10px + 18px);
    }

    /* & > *:first-child {
      margin-block-start: calc((-7 + 15) * 1rem / 16);
      @media (width >= 768px) {
        margin-block-start: calc(-10px + 18px);
      }
    } */
  }

  .p-hero {
    position: relative;
    background-color: var(--color--text-black);
    @media (width >= 768px) {
      background-color: unset;
    }

    .splide {
      .splide__slide {
        img {
          inline-size: 100%;
          @media (width >= 768px) {
            block-size: 690px;
          }
        }
      }
    }

    .p-hero__overlay {
      position: absolute;
      inset: calc(215 * 1rem / 16) 0 auto 0;
      display: block;
      block-size: calc(160 * 1rem / 16);
      background: linear-gradient(180deg, rgba(var(--color-rgb--black), 0), rgba(var(--color-rgb--black), 0.65));
      background: linear-gradient(
        180deg in oklab,
        rgba(var(--color-rgb--black), 0),
        rgba(var(--color-rgb--black), 0.65)
      );
      @media (width >= 768px) {
        block-size: 400px;
        inset: auto 0 0 0;
      }
    }

    .p-hero__container {
      padding-inline: calc(var(--padding--page-sm) * 1rem / 16);
      padding-block: calc(20 * 1rem / 16) calc(30 * 1rem / 16);
      @media (width >= 768px) {
        position: absolute;
        inset: 0;
        max-inline-size: calc(var(--max-width--page-md) * 1px);
        min-inline-size: calc(var(--min-width--page-md) * 1px);
        margin-inline: auto;
        padding-inline: revert;
        padding-block: revert;
      }
    }

    .p-hero__content {
      @media (width >= 768px) {
        position: absolute;
        inset: auto 40px 30px auto;
      }

      .p-slide-controller {
        justify-content: center;
        @media (width >= 768px) {
          justify-content: revert;
        }
      }
    }

    .p-hero__title {
      position: absolute;
      inset: calc(265 * 1rem / 16) auto auto calc(32 * 1rem / 16);
      inline-size: calc(328 * 1rem / 16);
      margin: 0;
      @media (width >= 768px) {
        inset: auto auto 40px 80px;
        inline-size: calc(702 / 1440 * 100%);
      }
      @media (width >= 1440px) {
        inline-size: 702px;
      }

      img {
        inline-size: inherit;
      }
    }

    .p-hero__link {
      img {
        inline-size: calc(335 * 1rem / 16);
        @media (width >= 768px) {
          inline-size: 420px;
        }
      }
    }
  }

  .p-alert {
    .p-alert__container {
      @media (width >= 768px) {
        display: grid;
        grid-template-columns: 310px 1fr;
      }

      .c-text-list {
        @media (width >= 768px) {
          grid-column: 2 / 3;
        }
      }
    }

    .p-alert__title {
      @media (width >= 768px) {
        grid-column: 1 / 2;
        align-self: start;
      }
    }
  }

  .p-business {
    .p-business__container {
      position: relative;
      padding-block: calc(60 * 1rem / 16) calc(30 * 1rem / 16);
      border-start-start-radius: calc(32 * 1rem / 16);
      border-start-end-radius: calc(32 * 1rem / 16);
      background-color: var(--color--greige);
      overflow: hidden;
      @media (width >= 768px) {
        padding-block: 90px 50px;
      }

      .p-title-group {
        position: relative;
      }
    }

    .p-business__container::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      block-size: calc(421 * 1rem / 16);
      background: linear-gradient(180deg, rgba(var(--color-rgb--red), 1) 64.3%, rgba(var(--color-rgb--red), 0) 100%);
      background: linear-gradient(
        180deg in oklab,
        rgba(var(--color-rgb--red), 1) 64.3%,
        rgba(var(--color-rgb--red), 0) 100%
      );
      @media (width >= 768px) {
        block-size: calc(494 * 1rem / 16);
        background: linear-gradient(180deg, rgba(var(--color-rgb--red), 1) 69.6%, rgba(var(--color-rgb--red), 0) 100%);
        background: linear-gradient(
          180deg in oklab,
          rgba(var(--color-rgb--red), 1) 69.6%,
          rgba(var(--color-rgb--red), 0) 100%
        );
      }
    }

    .p-business__content {
      position: relative;
      display: grid;
      grid-template-columns: calc(30 * 1rem / 16) calc(10 * 1rem / 16) 1fr calc(20 * 1rem / 16);
      grid-template-rows: auto calc(30 * 1rem / 16) auto calc(35 * 1rem / 16) auto calc(15 * 1rem / 16);
      grid-template-areas:
        "slide slide slide slide"
        ". . . ."
        ". heading heading ."
        ". . . ."
        ". . link-list ."
        ". . . .";
      border-radius: calc(8 * 1rem / 16);
      background-color: var(--color--white);
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(var(--color-rgb--black), 0.05);
      @media (width >= 768px) {
        grid-template-columns: 40px 80px 1fr 40px 680px;
        grid-template-rows: 40px auto 1fr 30px;
        grid-template-areas:
          ". . . . slide"
          ". heading heading . slide"
          ". . link-list . slide"
          ". . . . slide";
      }

      .c-link-list {
        grid-area: link-list;
        @media (width >= 768px) {
          align-self: end;
        }

        li:last-child {
          border-block-end: unset;
        }
      }
    }

    .p-business__heading {
      grid-area: heading;

      /* .c-circle-icon:has(.c-icon--arrow-left_sm) {
        inline-size: calc(44 * 1rem / 16);
      } */
    }
  }

  .p-business-slide {
    position: relative;
    grid-area: slide;

    .splide {
      .splide__slide {
        img {
          inline-size: 100%;
          @media (width >= 768px) {
            /* block-size: 100%; */
            min-block-size: 440px;
          }
        }
      }
    }

    .p-business-slide__overlay {
      position: absolute;
      inset: auto 0 0 0;
      display: block;
      block-size: calc(80 * 1rem / 16);
      background: linear-gradient(180deg, rgba(var(--color-rgb--black), 0), rgba(var(--color-rgb--black), 0.8));
      background: linear-gradient(
        180deg in oklab,
        rgba(var(--color-rgb--black), 0),
        rgba(var(--color-rgb--black), 0.8)
      );
      @media (width >= 768px) {
        block-size: 120px;
      }
    }

    .p-business-slide__controller {
      position: absolute;
      inset: auto 0 calc(15 * 1rem / 16) 0;
      @media (width >= 768px) {
        inset: auto 40px 30px auto;
      }
    }
  }

  .p-news {
    .p-title-group {
      grid-area: title;
    }

    .p-news__container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto calc(35 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(30 * 1rem / 16) auto;
      grid-template-areas:
        "title"
        "."
        "filters"
        "."
        "news-items"
        "."
        "link";
      @media (width >= 768px) {
        grid-template-columns: 310px 1fr;
        grid-template-rows: auto 35px 20px 1fr 55px auto;
        grid-template-areas:
          "title title"
          ". ."
          ". news-items"
          "filters news-items"
          ". news-items"
          "link news-items";
      }
    }

    .p-news__filters {
      grid-area: filters;

      ul {
        display: flex;
        flex-wrap: wrap;
        gap: calc(10 * 1rem / 16);
        @media (width >= 768px) {
          flex-flow: column;
        }
      }

      .c-button {
        block-size: calc(40 * 1rem / 16);
        padding-inline: 1.2em;
        border: 1px solid var(--color--border-gray);
        border-radius: calc(8 * 1rem / 16);
        background-color: var(--color--white);
        box-shadow: 0 1px 0 0 rgba(var(--color-rgb--black), 0.16);
      }

      .c-button[aria-pressed="true"] {
        border-color: var(--hover--border-color);
        background-color: var(--hover--background-color);
        color: var(--color--white);
        box-shadow: unset;
        pointer-events: none;
      }

      @media (hover: hover) {
        .c-button:hover {
          border-color: var(--hover--border-color);
          background-color: var(--hover--background-color);
          opacity: 1;
          color: var(--color--white);
        }
      }
    }

    .p-news__news-items {
      grid-area: news-items;
    }

    .p-news__tag {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-inline-size: calc(130 * 1rem / 16);
      block-size: calc(25 * 1rem / 16);
      padding-inline: 1em;
      border-radius: calc(4 * 1rem / 16);
      background-color: var(--color--text-black);
    }

    .p-news__link {
      grid-area: link;
      justify-self: end;
      @media (width >= 768px) {
        justify-self: unset;
      }
    }
  }

  .p-ir {
    position: relative;
    min-block-size: calc(490 * 1rem / 16);
    background-color: var(--color--text-black);
    background-image: url("/assets/img/pages/home/ir/img_sm.webp");
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    @media (width >= 768px) {
      min-block-size: 500px;
      background-color: unset;
      background-image: url("/assets/img/pages/home/ir/img_md.webp");
      background-position: center;
      background-size: cover;
    }
    .p-ir__container {
      padding-inline: calc(30 * 1rem / 16) calc(20 * 1rem / 16);
      padding-block-start: calc(274 * 1rem / 16);
      @media (width >= 768px) {
        display: flex;
        flex-flow: column;
        align-items: end;
        inline-size: 1200px;
        margin-inline: auto;
        padding-inline: unset;
        padding-block-start: 100px;
      }
    }
    .p-ir__link {
      margin-block-start: calc(22 * 1rem / 16);
      text-align: right;
      @media (width >= 768px) {
        margin-block-start: calc(-12px + 105px);
        text-align: revert;
      }
    }
  }

  .p-sustainability {
    position: relative;
    padding-block-start: calc(80 * 1rem / 16);
    @media (width >= 768px) {
      padding-block-start: 105px;
    }
    .p-title-group {
      grid-area: title;
    }
    .p-sustainability__container {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto calc(30 * 1rem / 16) auto calc(30 * 1rem / 16) auto;
      grid-template-areas:
        "title"
        "."
        "card-nav"
        "."
        "link";
      @media (width >= 768px) {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto calc(50 * 1rem / 16) auto;
        grid-template-areas:
          "title link"
          ". ."
          "card-nav card-nav";
      }
    }
    .p-sustainability__card-nav {
      grid-area: card-nav;
      ul {
        display: grid;
        grid-template-columns: calc(295 * 1rem / 16);
        justify-content: center;
        gap: calc(20 * 1rem / 16);
        @media (width >= 768px) {
          grid-template-columns: repeat(4, 1fr);
          gap: 50px;
        }
      }
      li {
        display: block;
        line-height: 1;
      }

      .c-card-link {
        .c-card-link__image {
          aspect-ratio: 1 / 1;
          /* inline-size: 100%;
          block-size: 100%; */
        }
      }
    }
    .p-sustainability__card {
      position: relative;
      display: block;
      inline-size: calc(295 * 1rem / 16);
      aspect-ratio: 1 / 1;
      @media (width >= 768px) {
        inline-size: inherit;
      }
    }
    .p-sustainability__label {
      position: absolute;
      /* inset: auto auto calc(35 * 1rem / 16) calc(30 * 1rem / 16); */
      inset: auto auto calc(35 * 1rem / 16) calc(25 * 1rem / 16);
      display: flex;
      flex-flow: column;
      gap: calc(10 * 1rem / 16);
    }
    .p-sustainability__link {
      grid-area: link;
      justify-self: end;
      @media (width >= 768px) {
        align-self: end;
      }
    }
  }

  .p-sustainability::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    /* block-size: calc(960 * 1rem / 16); */
    block-size: calc(1280 * 1rem / 16);
    background-color: var(--color--greige);
  }
  @media (width >= 768px) {
    .p-sustainability::before {
      /* block-size: 530px; */
      block-size: 430px;
    }
  }

  .p-recruit {
    .p-recruit__link {
      position: relative;
      /* display: block; */

      picture {
        display: block;
      }

      img {
        inline-size: inherit;
        border-radius: calc(8 * 1rem / 16);
      }

      .c-icon-link {
        position: absolute;
        inset: auto calc(20 * 1rem / 16) calc(20 * 1rem / 16) auto;
        @media (width >= 768px) {
          inset: auto 30px 30px auto;
        }
      }
    }
  }
}