/* ==========================================================================
   Hero Component
   ヒーローセクションの背景演出とレイアウトを制御するスタイルセット。
   ========================================================================== */

/* Hero Section */
.hero {
  --hero-min-height: 720px;
  --hero-gradient-start: rgb(67 97 238 / 5%);
  --hero-gradient-end: rgb(114 9 183 / 15%);
  --hero-text-color: rgb(255 255 255);

  display: grid;
  grid-template-rows: 1fr auto;
  min-block-size: var(--hero-min-height);
  color: var(--hero-text-color);
  margin: 0;
  padding-block: 0;
  background-image:
    url('../../images/aruitasakinimirukeshiki-1920x1360.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  @media (min-width: 768px) {
    background-size: cover;
    background-position: center;
  }

  .hero-content {
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    align-items: stretch;
    align-content: stretch;
    min-block-size: 100%;
    padding-block: clamp(4rem, 12vh, 6rem) 0;
    color: inherit;
    animation: fadeInUp 0.8s ease-out;

    @media (min-width: 768px) {
      padding-block: clamp(3rem, 10vh, 5rem) 0;
    }

    .ui.container.stackable.grid {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 2rem;
      column-gap: clamp(2rem, 6vw, 4rem);
      block-size: 100%;

      @media (min-width: 1024px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0;
      }

      > .column {
        min-width: 0;
        display: grid;
        align-content: start;
        grid-auto-rows: min-content;

        .hero-cta {
          justify-self: start;
          width: 100%;

          .server-side-cta {
            margin-inline: 0;
            text-align: left;
          }
        }
      }

      > .right.floated.column {
        align-content: center;
        padding-block-end: 0;

        @media (min-width: 1024px) {
          align-content: end;
          padding-block-end: clamp(3rem, 12vh, 6rem);
        }

        &.mobile-hidden {
          @media (min-width: 1024px) {
            align-content: end;
            padding-block-end: clamp(3rem, 12vh, 6rem);
          }
        }
      }
    }

    /* Text-only approach: no background panel to avoid altering image look */
    .title {
      font-size: clamp(1.875rem, 5vw, 3rem);
      font-weight: 700;
      line-height: 1.2;
      margin-block-end: 1.5rem;
      color: #ffffff;
      /* Stronger multi-layer shadow for readability on light backgrounds */
      text-shadow:
        0 2px 8px rgb(0 0 0 / 55%),
        0 0 1px rgb(0 0 0 / 50%),
        0 0 2px rgb(0 0 0 / 40%);
    }
    
    .subtitle {
      font-size: clamp(1.2rem, 3.4vw, 1.75rem);
      font-weight: 700;
      line-height: 1.6;
      margin-block-end: 2rem;
      color: #f7f9fc;
      opacity: 0.98;
      text-shadow:
        0 2px 10px rgb(0 0 0 / 65%),
        0 0 2px rgb(0 0 0 / 55%);
    }
    
    .text-primary {
      color: var(--primary-light, #4cc9f0);
      /* Ensure colored span also remains legible */
      text-shadow:
        0 1px 6px rgb(0 0 0 / 50%),
        0 0 1px rgb(0 0 0 / 40%);
    }
  }

  .hero-image {
    animation: fadeIn 1s ease-out;
  }

  .hero-illustration {
    max-width: 100%;
    block-size: auto;
    filter: drop-shadow(0 10px 20px rgb(0 0 0 / 20%));
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
    }
  }

  .hero-cta {
    /* margin-block-start: 2.5rem; */
    display: grid;
    grid-template-columns: 1fr;
    /* gap: 1rem; */
    justify-self: start;
    inline-size: 50% !important;

    .ui.button {
      font-size: clamp(1rem, 2vw, 1.1rem);
      font-weight: 600;
      transition: all 0.3s ease;
      border-radius: 50px;
      width: 100%;
      justify-content: center;

      &.primary {
        background-color: var(--primary, #4361ee);
        color: white;
        box-shadow: 0 4px 15px rgb(67 97 238 / 40%);

        &:hover {
          background-color: var(--primary-dark, #3a0ca3);
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgb(67 97 238 / 60%);
        }
      }

      &.inverted {
        background-color: transparent;
        border: 2px solid white;
        color: white;

        &:hover {
          background-color: rgb(255 255 255 / 15%);
          transform: translateY(-2px);
        }
      }
    }

    @media (min-width: 1024px) {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      inline-size: auto;

      .ui.button {
        width: auto;
        justify-content: center;
      }
    }
  }

  /* Glassmorphic effect for notification box */
  .glassmorphic {
    .ui.header {
      color: #2d3748;
      margin-block-end: 1rem;
      font-size: clamp(1.25rem, 2.8vw, 1.5rem);
      font-weight: 700;
    }

    .ui.message {
      background: rgb(255 255 255 / 90%);
      border-radius: 0.5rem;
      padding: 1rem;
      color: #2d3748;
      font-size: clamp(1.05rem, 2.2vw, 1.25rem);
      font-weight: 500;
      line-height: 1.6;
      box-shadow: none;
      border: none;

      .header {
        font-weight: 600;
        margin-block-end: 0.5rem;
      }

      &.info {
        background: rgb(76 201 240 / 25%);
        border: 1px solid rgb(76 201 240 / 40%);
        color: #1e3a8a;
      }
    }
  }

  .hero-footer {
    grid-area: 1 / 1 / 2 / 2;
    align-self: end;
    display: grid;
    place-items: center;
    min-block-size: 4.5rem;
    z-index: 2;
    background: rgb(0 0 0 / 7%);
  }

  .photo-credit {
    color: rgb(255 255 255 / 100%);
    font-size: 1rem;
    transition: color 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow:
      0 1px 3px rgb(0 0 0 / 65%);
      /* 0 0 1px rgb(0 0 0 / 55%); */

    &:hover {
      color: rgb(255 255 255);
      text-decoration: none;
      text-shadow:
        0 2px 6px rgb(0 0 0 / 70%),
        0 0 2px rgb(0 0 0 / 60%);
    }

    i {
      font-size: 1rem;
    }
  }
}