/* Stylesheet entrypoint for the section-lifestyle-spaces-grid component. This file
and all its imports will be processed through PostCSS */

n-lifestyle-spaces-grid {
  display: block;
}

.lifestyle-spaces-grid {
  padding: var(--size-12) 0;

  @media screen and (max-width: 768px) {
    padding: var(--size-8) 0;
  }

  /* Wrapper */
  .lifestyle-spaces-grid__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);

    @media screen and (max-width: 768px) {
      gap: var(--size-2);
    }
  }

  /* Hero Banner */
  .lifestyle-spaces-grid__hero {
    position: relative;
    width: 100%;
  }

  .lifestyle-spaces-grid__hero-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .lifestyle-spaces-grid__hero-image {
    position: relative;
    width: 100%;
    height: 547px;
    border-radius: var(--size-3);
    overflow: hidden;

    @media screen and (max-width: 768px) {
      height: 512px;
    }

    .block-image {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .lifestyle-spaces-grid__hero-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* Desktop video - varsayılan olarak görünür, mobile varsa 768px altında gizlenir */
    .lifestyle-spaces-grid__hero-video--desktop {
      display: block;

      @media screen and (max-width: 768px) {
        display: none;
      }
    }

    /* Mobile video yoksa desktop her zaman görünür */
    .lifestyle-spaces-grid__hero-video--always {
      display: block;

      @media screen and (max-width: 768px) {
        display: block;
      }
    }

    /* Mobile video - sadece 768px altında görünür */
    .lifestyle-spaces-grid__hero-video--mobile {
      display: none;

      @media screen and (max-width: 768px) {
        display: block;
      }
    }

    /* Hero Image responsive */
    .lifestyle-spaces-grid__hero-img {
      width: 100%;
      height: 100%;

      .block-image,
      .block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    /* Desktop image - varsayılan olarak görünür, mobile varsa 768px altında gizlenir */
    .lifestyle-spaces-grid__hero-img--desktop {
      display: block;

      @media screen and (max-width: 768px) {
        display: none;
      }
    }

    /* Mobile image yoksa desktop her zaman görünür */
    .lifestyle-spaces-grid__hero-img--always {
      display: block;

      @media screen and (max-width: 768px) {
        display: block;
      }
    }

    /* Mobile image - sadece 768px altında görünür */
    .lifestyle-spaces-grid__hero-img--mobile {
      display: none;

      @media screen and (max-width: 768px) {
        display: block;
      }
    }
  }

  .lifestyle-spaces-grid__hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, .5) 0%,
      rgba(128, 128, 128, .3) 50%,
      rgba(255, 255, 255, .2) 100%
    );
    z-index: 1;
    pointer-events: none;
  }

  .lifestyle-spaces-grid__hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--size-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--size-6);
    z-index: 2;
    @media screen and (max-width: 768px) {
      justify-content: flex-end;
      align-items: flex-start;
      padding: var(--size-4);
      gap: var(--size-2);
      .button{
        padding: var(--size-2-5) var(--size-4);
      }
    }
  }

  .lifestyle-spaces-grid__hero-title {
    font-family: var(--heading-font-family), sans-serif;
    font-size: var(--text-7xl);
    font-weight: var(--font-weight-bold);
    line-height: 64px;
    letter-spacing: -0.25px;
    color: var(--text-white);
    text-align: center;
    margin: 0;

    @media screen and (max-width: 768px) {
      font-size: var(--text-3xl);
      line-height: 40px;
      letter-spacing: 0;
      text-align: left;
    }
  }

  .lifestyle-spaces-grid__hero-btn {
    background-color: var(--color-white);
    border: 1px solid var(--divider);
    border-radius: var(--size-3);
    padding: var(--size-4) var(--size-6);
    font-family: var(--body-font-family), sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background-color: var(--color-background-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    @media screen and (max-width: 768px) {
      font-size: var(--text-sm);
      line-height: 20px;
      letter-spacing: 0.1px;
      padding: var(--size-2-5) var(--size-4);
    }
  }

  /* Grid Items */
  .lifestyle-spaces-grid__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-3);
  }

  .lifestyle-spaces-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    flex: 1;
    min-width: 0;

    /* 4'lü grid için desktop: 4 item, aralarında 3 gap (36px total) */
    @media screen and (min-width: 769px) {
      flex-basis: calc((100% - (3 * var(--size-3))) / 4);
      max-width: calc((100% - (3 * var(--size-3))) / 4);
    }

    /* 2x2 grid için mobile: 2 item, aralarında 1 gap (12px total) */
    @media screen and (max-width: 768px) {
      flex-basis: calc((100% - var(--size-3)) / 2);
      max-width: calc((100% - var(--size-3)) / 2);
    }
  }

  .lifestyle-spaces-grid__item-link {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;

    &:hover {
      transform: translateY(-4px);

      .lifestyle-spaces-grid__item-image .block-image img {
        transform: scale(1.05);
      }
    }

    @media screen and (max-width: 768px) {
      &:hover {
        transform: none;
      }
    }
  }

  .lifestyle-spaces-grid__item-image {
    position: relative;
    width: 100%;
    border-radius: var(--size-2);
    overflow: hidden;

    .block-image {
      width: 100%;
      aspect-ratio: 1 / 1;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
      }
    }
  }

  .lifestyle-spaces-grid__item-title {
    font-family: var(--body-font-family), sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--color-text);
    margin: 0;

    @media screen and (max-width: 768px) {
      font-size: var(--text-sm);
      line-height: 20px;
      letter-spacing: 0.25px;
    }
  }
}