/* ════════════════════════════════════
   index-page.css — 首頁元件（index.html 專用）
   來源：hero-slider + work-grid + profile + news + sns-grid + contact-simple
════════════════════════════════════ */

/* ── work-grid.css ── */
/* ── WORK FILTER ── */
.work-filter{
  display:flex;align-items:center;gap:0;
  border-bottom:1px solid #e8e8e8;margin-bottom:28px;
}
.wf-btn{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:8px 0;margin-right:32px;margin-bottom:-1px;
  font-size:var(--fs-small);font-weight:500;color:#aaa;cursor:pointer;
  letter-spacing:.04em;transition:color .2s,border-color .2s;
  display:flex;align-items:baseline;gap:5px;
  font-family:var(--font-body);
}
.wf-btn:hover{color:#555}
.wf-btn.active{color:#222;border-bottom-color:#222}
.wf-btn .cnt{font-size:var(--fs-micro);font-family:'Montserrat',sans-serif;color:inherit;opacity:.7}

/* ── WORK GRID ── */
.work-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;margin-bottom:40px;
}
.work-card{position:relative;cursor:pointer;transition:transform .2s}
.work-card[data-work-hidden="true"]{display:none}
.work-card:hover{transform:translateY(-3px)}
.work-thumb{
  width:100%;aspect-ratio:1/1;
  background:#f5f5f5;overflow:hidden;position:relative;margin-bottom:10px;
}
.work-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s ease}
.work-thumb img.work-img-nail{
  height:calc(100% + 50px);
  transform:translateY(-50px);
}
.work-card:hover .work-thumb img{transform:scale(1.05)}
.work-card:hover .work-thumb img.work-img-nail{transform:translateY(-50px) scale(1.05)}
.work-card[data-cat="demo"] .work-thumb{aspect-ratio:16/9}
.work-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-icon-hero);color:#ddd}
.work-thumb-tea{
  background:
    radial-gradient(circle at 78% 18%, rgba(174,215,158,.32), transparent 42%),
    linear-gradient(135deg,#11241a,#173324);
}
.work-thumb-tea img{
  filter:saturate(.92) contrast(.98) brightness(.96);
  object-position:center 58%;
}
.work-thumb-tea::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(17,36,26,.03),rgba(17,36,26,.1));
  pointer-events:none;
  z-index:1;
}
.work-thumb-tea .work-new{
  z-index:2;
}
.work-thumb-tea .work-thumb-ph{
  color:#aed79e;
  font-family:var(--font-body);
  font-size:var(--fs-icon-hero-lg);
  letter-spacing:.14em;
}
.work-type-badge{
  position:absolute;top:0;left:0;
  background:rgba(255,255,255,.92);
  font-size:var(--fs-micro);letter-spacing:.06em;color:#555;
  padding:4px 8px;display:flex;align-items:center;gap:4px;
}
.work-type-badge .yr{color:#aaa;font-size:var(--fs-micro);font-family:'Montserrat',sans-serif}
.work-new{
  position:absolute;top:0;right:0;
  background:#222;color:#fff;
  font-size:var(--fs-micro);letter-spacing:.12em;font-weight:700;
  padding:3px 7px;font-family:'Montserrat',sans-serif;
  display:none;
}
.work-name{font-size:var(--fs-small);font-weight:500;line-height:1.55;margin-bottom:3px;color:#333}
.work-meta{font-size:var(--fs-micro);color:#aaa;letter-spacing:.04em}


/* ── profile.css ── */
/* ── PROFILE ── */
.profile-wrap{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;border:1px solid #e8e8e8;
}
.profile-card{
  padding:50px 48px;display:flex;align-items:flex-start;gap:28px;
  border-right:1px solid #e8e8e8;
}
.profile-card:last-child{border-right:none}
.profile-illust{
  flex-shrink:0;width:100px;height:100px;
  border-radius:50%;background:#f0f0f0;
  overflow:hidden;border:3px solid #fff;
  outline:1px solid #e8e8e8;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-icon-xxl);
}
.profile-job{font-size:var(--fs-micro);letter-spacing:.16em;color:#aaa;margin-bottom:6px;text-transform:uppercase;font-family:'Montserrat',sans-serif}
.profile-name{
  font-family:'Montserrat',sans-serif;font-size:var(--fs-display-md);font-weight:800;
  letter-spacing:.06em;color:#222;margin-bottom:12px;line-height:1.2;
}
.profile-txt{font-size:var(--fs-small);line-height:1.9;color:#777;margin-bottom:16px}
.profile-more{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.12em;
  text-decoration:none;color:#222;border-bottom:1px solid #222;
  padding-bottom:1px;transition:gap .2s;text-transform:uppercase;
}
.profile-more:hover{gap:16px}
.skill-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.skill{
  font-size:var(--fs-micro);letter-spacing:.1em;border:1px solid #ddd;
  padding:3px 9px;color:#888;font-family:'Montserrat',sans-serif;text-transform:uppercase;
}


/* ── news.css ── */
/* ── NEWS ── */
.news-list{border-top:1px solid #e8e8e8}
.news-row{
  display:flex;align-items:center;gap:20px;
  padding:16px 0;border-bottom:1px solid #e8e8e8;
  text-decoration:none;color:#222;
  transition:background .15s;cursor:pointer;
}
.news-row:hover .news-arr{transform:translateX(5px)}
.news-thumb{
  width:52px;height:42px;flex-shrink:0;
  background:#f5f5f5;border:1px solid #eee;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-icon-md);overflow:hidden;
}
.news-thumb img{width:100%;height:100%;object-fit:cover}
.news-date{
  font-size:var(--fs-caption);color:#aaa;font-family:'Montserrat',sans-serif;
  letter-spacing:.08em;min-width:72px;flex-shrink:0;
}
.news-txt{flex:1;font-size:var(--fs-body);font-weight:400;line-height:1.55}
.news-arr{color:#aaa;font-size:var(--fs-small);flex-shrink:0;transition:transform .2s}
.view-all-news{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;font-size:var(--fs-caption);font-weight:700;
  letter-spacing:.14em;text-decoration:none;color:#222;
  border-bottom:1px solid #222;padding-bottom:2px;
  transition:gap .2s;text-transform:uppercase;
}
.view-all-news:hover{gap:14px}


/* ── sns-grid.css ── */
/* ── SNS / INSTAGRAM GRID（首頁版）── */
.insta-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:3px;margin-bottom:24px;
}
.insta-item{
  aspect-ratio:1/1;background:#2a2a2a;
  overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.insta-item:hover .insta-img{transform:scale(1.06)}
.insta-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.insta-ph{font-size:var(--fs-icon-xl);color:#444}
.insta-follow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.14em;
  text-decoration:none;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:2px;transition:gap .2s;text-transform:uppercase;
}
.insta-follow:hover{gap:14px}


/* ── contact-simple.css ── */
/* ── CONTACT（首頁圓形按鈕版）── */
#contact{background:#fff;text-align:center}
.contact-sub{font-size:var(--fs-small);color:#888;line-height:2;margin-bottom:36px}
.contact-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:100px;height:100px;border-radius:50%;
  border:1px solid #222;text-decoration:none;color:#222;
  font-size:var(--fs-micro);letter-spacing:.14em;font-weight:700;
  transition:background .2s,color .2s;text-transform:uppercase;
  margin-bottom:36px;
}
.contact-btn span{font-size:var(--fs-icon-lg);margin-bottom:4px}
.contact-btn:hover{background:#222;color:#fff}
.contact-faq{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-caption);letter-spacing:.12em;text-decoration:none;color:#aaa;
  border-bottom:1px solid #ddd;padding-bottom:2px;transition:gap .2s;
}
.contact-faq:hover{gap:14px;color:#222;border-bottom-color:#222}


/* ── HOMEPAGE RESPONSIVE OVERRIDES ── */
@media(max-width:900px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-wrap{grid-template-columns:1fr}
  .profile-card{
    border-right:none;
    border-bottom:1px solid #e8e8e8;
    padding:36px 24px;
  }
  .profile-card:last-child{border-bottom:none}
  .profile-body{min-width:0}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:600px){
  .profile-card{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:30px 22px;
  }
  .profile-illust{
    width:72px;
    height:72px;
    font-size:var(--fs-icon-xl);
  }
  .profile-body{width:100%}
  .profile-name{font-size:var(--fs-display-sm)}
  .skill-list{gap:6px}
  .view-all-link{
    width:100%;
    justify-content:center;
    padding:10px 18px;
    text-align:center;
  }
}