/*
  experiences.css
  ------------------------------------------------------------
  히어로 아래 섹션 인트로 + 3장짜리 에디토리얼 배너(Rooms/Dining/Terrace).
  카드 이미지는 실제 사진 대신, 브랜드 컬러로 만든 레이어드 그라디언트를
  사용합니다(저작권 걱정 없이 브랜드 톤을 표현하기 위함).
*/

.section-intro{
  max-width:640px; margin:0 auto; text-align:center; padding:120px 24px 64px;
}
.section-intro .eyebrow{display:block; margin-bottom:18px;}
.section-intro h2{
  font-size:clamp(28px, 3.4vw, 42px); font-weight:400; line-height:1.3; color:var(--ink);
}

.experience-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  padding:0 24px 130px;
}
.exp-card{ display:flex; flex-direction:column; cursor:pointer; }
.exp-visual{
  aspect-ratio:3/3.7; background:var(--sand); overflow:hidden;
  position:relative; margin-bottom:28px;
}
.exp-visual .photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04); transition:transform 1.1s var(--ease);
}
.exp-card:hover .exp-visual .photo{ transform:scale(1.1); }
.exp-visual .grain{ opacity:.14; }
.exp-visual .vignette{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(57,49,32,.12) 0%, transparent 22%, transparent 78%, rgba(57,49,32,.22) 100%);
}
.exp-card h3{font-size:26px; font-weight:400; color:var(--ink); margin-bottom:14px; letter-spacing:-.005em;}
.exp-card p{
  font-family:var(--font-kr); font-size:15px; color:#6b5f47; font-weight:300;
  line-height:1.75; text-align:justify; margin-bottom:18px;
}
.exp-card .arrow{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:12px; letter-spacing:.08em; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:3px; transition:color .3s, border-color .3s;
}
.exp-card:hover .arrow{ color:var(--brass); border-color:var(--brass); }
.exp-card .arrow svg{width:13px; height:13px;}

/* 카드별 그라디언트 "사진" — 클래스명으로 색감 테마만 구분 */
.photo-sail{
  background:
    radial-gradient(ellipse 50% 30% at 78% 14%, rgba(226,236,238,.6), transparent 60%),
    linear-gradient(180deg, #b9cfd6 0%, #7fa0ac 22%, #3f5c60 23%, #5c7166 46%, #3a463a 47%, #6b5a42 68%, #8a7457 100%),
    radial-gradient(ellipse 60% 40% at 30% 78%, rgba(255,244,222,.25), transparent 65%);
}
.photo-cuisine{
  background:
    radial-gradient(ellipse 32% 26% at 62% 40%, #d98a5f 0%, #b85a3c 38%, transparent 70%),
    radial-gradient(ellipse 40% 32% at 58% 46%, #e7c79a 0%, #d1a06a 55%, transparent 78%),
    linear-gradient(160deg, #3a2a1d 0%, #4d3826 45%, #2c2015 100%);
}
.photo-terrace{
  background:
    linear-gradient(180deg, #aed4e6 0%, #cfe6ee 34%, #cfe6ee 36%, transparent 36%),
    radial-gradient(ellipse 30% 40% at 24% 62%, #9fc9c2 0%, transparent 72%),
    radial-gradient(ellipse 26% 36% at 55% 66%, #d69a86 0%, transparent 72%),
    radial-gradient(ellipse 30% 40% at 84% 60%, #e0b7a8 0%, transparent 72%),
    linear-gradient(180deg, transparent 36%, #8f9793 37%, #6d7671 100%);
}

@media (max-width:920px){
  .experience-grid{grid-template-columns:1fr; padding:0 24px 90px;}
}