/* ============================================
   一叶舟 Yiyezhou Studio - 首页样式
   英雄区 / 滚动提示 / 装饰文字
   ============================================ */

/* ---- Hero Banner ---- */
.hero-banner{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;background:#fff;background-image:radial-gradient(circle,#ccc 1px,transparent 1px);background-size:12px 12px;border-bottom:4px solid #000}
.hero-bg{position:absolute;inset:0;background:url("../images/hero-bg.jpg") center/cover no-repeat;filter:grayscale(100%) contrast(1.15) brightness(.9)}
.hero-banner.no-image .hero-bg{background:linear-gradient(135deg,#e8e8e8,#cfcfcf 50%,#b8b8b8);filter:none}
.hero-title-strip{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center}
.hero-title-strip .strip-bg{background:#000;padding:18px 60px 18px 48px;clip-path:polygon(0 0,100% 0,calc(100% - 28px) 100%,0 100%);border-right:4px solid #000;box-shadow:6px 6px 0 rgba(0,0,0,.2)}
.hero-title-strip h1{font-size:clamp(36px,6vw,72px);font-weight:900;color:#fff;letter-spacing:16px;text-shadow:3px 3px 0 #000;white-space:nowrap;font-family:"Noto Serif SC",serif;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.hero-decor{position:absolute;right:60px;bottom:80px;font-size:120px;font-weight:900;line-height:1;pointer-events:none;font-family:"Noto Serif SC",serif;color:transparent;-webkit-text-stroke:3px #000;opacity:.35}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);color:#000;font-size:13px;font-weight:700;letter-spacing:3px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:bounce 2s ease-infinite;background:#fff;border:2px solid #000;padding:10px 20px;border-radius:4px;box-shadow:4px 4px 0 #000}
.scroll-hint::after{content:"";width:2px;height:30px;background:#000}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ---- Gallery Cards (index preview) ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.gallery-card{border:3px solid #000;border-radius:4px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 #000;transition:all .2s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;position:relative;top:0;left:0}
.gallery-card:hover{top:-4px;left:-4px;box-shadow:10px 10px 0 #000}
.card-img{width:100%;height:240px;object-fit:cover;border-bottom:3px solid #000;background:linear-gradient(135deg,#e0e0e0,#c0c0c0);position:relative}
.card-img::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(0,0,0,.04) 8px,rgba(0,0,0,.04) 16px)}
.card-info{padding:18px 20px}
.card-info h3{font-size:17px;font-weight:900;color:#000;margin-bottom:6px;letter-spacing:1px}
.card-info p{font-size:13px;color:#666;line-height:1.6;font-weight:500}
.card-tags{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.tag{padding:3px 12px;border:2px solid #000;color:#000;border-radius:0;font-size:11px;font-weight:800;background:#fff}

/* ---- CTA Section (index) ---- */
.cta-section{text-align:center;background:#000;border:4px solid #000;border-radius:4px;padding:64px 32px;color:#fff;box-shadow:8px 8px 0 #333}

/* ---- Service Cards (index) ---- */
.service-card{background:#fff;border:3px solid #000;border-radius:4px;padding:40px 28px;text-align:center;box-shadow:6px 6px 0 #000;transition:all .2s;position:relative;top:0;left:0}
.service-card:hover{top:-4px;left:-4px;box-shadow:10px 10px 0 #000}

/* ---- Responsive (index specific) ---- */
@media(max-width:768px){
  .hero-title-strip h1{letter-spacing:8px;font-size:28px}
  .hero-title-strip .strip-bg{padding:14px 36px 14px 28px}
}
@media(max-width:480px){
  .hero-title-strip h1{font-size:24px;letter-spacing:5px}
  .hero-decor{font-size:70px}
}