/* FARO — Home hero clarity + WHY craft mobile layout
   2026-08-29
   목적:
   1) 메인 히어로 텍스트 보호 오버레이만 약화해 머리/얼굴/의상 디테일을 더 보이게 함
   2) WHY FARO CRAFT 이미지는 PC/태블릿 기존 3장 구조 유지,
      모바일에서만 1장 크게 + 2장 작게 배치
*/

/* =========================
   HOME HERO — OVERLAY ONLY
   ========================= */

/* Mobile: 상단 텍스트 안전영역은 유지하되 기존보다 투명하게 */
@media (max-width: 767px) {
  #home .home-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: var(--hero-top-band-height) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(245,239,230,.60) 0%,
      rgba(241,232,219,.49) 36%,
      rgba(235,222,203,.31) 58%,
      rgba(229,211,185,.13) 78%,
      rgba(229,211,185,0) 100%
    ) !important;
  }
}

/* Tablet: 좌측 카피 보호는 남기고 인물 쪽으로 빠르게 투명해지게 */
@media (min-width: 768px) and (max-width: 1023px) {
  #home .home-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: var(--hero-band-width) !important;
    height: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      90deg,
      rgba(245,239,230,.65) 0%,
      rgba(241,232,219,.52) 42%,
      rgba(234,220,199,.25) 70%,
      rgba(229,211,185,0) 100%
    ) !important;
  }
}

/* PC: 기존 레이아웃/사진 위치는 그대로, 보호막만 약화 */
@media (min-width: 1024px) {
  #home .home-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: var(--hero-band-width-desktop) !important;
    height: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      90deg,
      rgba(245,239,230,.68) 0%,
      rgba(241,232,219,.54) 40%,
      rgba(234,220,199,.27) 69%,
      rgba(229,211,185,0) 100%
    ) !important;
  }
}


/* ====================================
   WHY FARO — CRAFT RESPONSIVE GALLERY
   ==================================== */

/* 모바일: 첫 이미지 크게 / 아래 2장 반반 */
@media (max-width: 767px) {
  #why .why-craft-imgs,
  .why-craft-preview .why-craft-imgs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 7px !important;
    width: 100% !important;
  }

  #why .why-craft-imgs > .why-ph,
  .why-craft-preview .why-craft-imgs > .why-ph {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 3 !important;
  }

  #why .why-craft-imgs > .why-ph:first-child,
  .why-craft-preview .why-craft-imgs > .why-ph:first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    aspect-ratio: 16 / 9 !important;
  }

  #why .why-craft-imgs > .why-ph:nth-child(2),
  .why-craft-preview .why-craft-imgs > .why-ph:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #why .why-craft-imgs > .why-ph:nth-child(3),
  .why-craft-preview .why-craft-imgs > .why-ph:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #why .why-craft-imgs .why-craft-third img,
  .why-craft-preview .why-craft-imgs .why-craft-third img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* 태블릿/PC는 현재 잘 보이는 3장 구조를 명시적으로 보존 */
@media (min-width: 768px) {
  #why .why-craft-imgs,
  .why-craft-preview .why-craft-imgs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #why .why-craft-imgs > .why-ph,
  .why-craft-preview .why-craft-imgs > .why-ph {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}