/* ============================================================
   pages/ichigo.css
   イチノゴ（iOS ゲーム）の動画バナー。inc/ichigo-banner.php
   PC：横長の帯（左に縦長の画面、右に文字）
   SP：画面 → 文字 の縦積み
   ============================================================ */

@layer pages {

  .p-ichigo {
    --ichigo-bg: #120e0a;
    --ichigo-gold: #e3b766;
    --ichigo-gold-soft: rgba(227, 183, 102, 0.7);
    background:
      radial-gradient(60% 120% at 40% 50%, rgba(214, 150, 58, 0.28), transparent 70%),
      linear-gradient(180deg, #1b140d 0%, var(--ichigo-bg) 100%);
    color: var(--c-text-on-dark);
    overflow: hidden;
  }

  .p-ichigo__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .p-ichigo__link:focus-visible {
    outline: 2px solid var(--ichigo-gold);
    outline-offset: -4px;
  }

  .p-ichigo__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--sp-6) var(--container-pad);
    display: grid;
    /* 文字の列は中身の幅だけ取る（固定幅だと右に空きができて左寄りに見える） */
    grid-template-columns: auto auto;
    justify-content: center; /* 画面と文字のまとまりを、帯のまんなかに置く */
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    min-height: 360px;
  }
  .p-ichigo__screen {
    position: relative;
    width: 150px;
    aspect-ratio: 886 / 1920;
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    box-shadow:
      0 0 0 5px #0a0806,
      0 0 0 6px rgba(227, 183, 102, 0.35),
      0 18px 40px rgba(0, 0, 0, 0.55),
      0 0 60px rgba(214, 150, 58, 0.25);
    transform: rotate(-3deg);
    transition: transform var(--dur-slow) var(--ease);
  }
  .p-ichigo__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- 文字 ---- */
  .p-ichigo__body {
    min-width: 0;
    max-width: 32rem;
  }
  .p-ichigo__eyebrow {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-wide);
    color: var(--ichigo-gold-soft);
  }
  .p-ichigo__app {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
  }
  .p-ichigo__icon {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
  .p-ichigo__name {
    margin: 0;
    font-family: var(--ff-display);
    font-size: 1.75rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tr-heading);
    line-height: var(--lh-tight);
    color: #fff;
  }
  .p-ichigo__genre {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-wide);
    color: var(--c-text-on-dark-muted);
  }
  .p-ichigo__catch {
    margin: 0 0 var(--sp-3);
    font-family: var(--ff-display);
    font-size: clamp(1.375rem, 1.2vw + 1rem, 1.875rem);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-display);
    color: var(--ichigo-gold);
  }
  .p-ichigo__text {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--c-text-on-dark);
  }
  .p-ichigo__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.8em 1.6em;
    border-radius: var(--r-pill);
    background: var(--ichigo-gold);
    color: #1a1208;
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-body);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .p-ichigo__btn::after {
    content: "";
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
            mask: var(--icon-arrow-right) center / contain no-repeat;
  }

  @media (hover: hover) {
    .p-ichigo__link:hover .p-ichigo__screen { transform: rotate(0deg) scale(1.03); }
    .p-ichigo__link:hover .p-ichigo__btn { background: #f0ca82; transform: translateX(2px); }
  }

  /* ---- スマホ：縦に積む ---- */
  @media (max-width: 768px) {
    .p-ichigo__inner {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: var(--sp-6);
      padding-block: var(--sp-7);
      min-height: 0;
    }
    .p-ichigo__screen { width: min(46vw, 180px); border-radius: 20px; }
    .p-ichigo__app { justify-content: center; text-align: left; }
  }

  @media (prefers-reduced-motion: reduce) {
    .p-ichigo__screen,
    .p-ichigo__btn { transition: none; }
  }
}