/* =========================================================
   Altrenotti - Made-in-Italy Manufacturing (BI Skin)
   Path: /html/theme/basic/skin/content/bi/style.css

   정리/수정 사항(시니어 관점)
   - CSS 문법 오류(잘못된 주석) 제거
   - 중복 규칙/충돌 규칙 제거 및 선언 순서 정리
   - HERO 타이틀 54px 확정 적용(실제 DOM: h1.amfg-title.amfg-title--hero)
   - Watch the video: 베이지 바 유지 + 폰트 Noto Sans KR
   - 썸네일: 320x569 고정(PC), 라운드 없음, 모바일 중앙정렬 + 비율 유지
   - 비디오 그리드: 3열 고정, PC 간격 확장
   - 인트로/비디오 간격: 축소 + 비디오 섹션 상단 패딩 제거
========================================================= */

/* Base */
.amfg { background:#fff; }
.amfg-wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
@media (max-width:768px){ .amfg-wrap{ padding:0 16px; } }

/* Sections */
.amfg-sec{ padding:70px 0; }
@media (max-width:768px){ .amfg-sec{ padding:56px 0; } }

/* Videos 섹션 배경 삭제 */
.amfg-sec--alt{ background:transparent !important; }

/* style.css */

/* INTRO 섹션의 h2 타이틀 수정 */
.amfg h2.amfg-title {
  font-family: 'Noto Serif Display', serif !important;
  font-size: 32px;
  color: #c9bca0;
  font-weight: 500;
}

/* 비디오 리스트의 타이틀(h3) 수정 */
.amfg-videoTitle {
  margin: 18px 0 10px;
  /* Noto Sans KR에서 Noto Serif Display로 변경 */
  font-family: 'Noto Serif Display', serif !important; 
  font-size: 24px;       
  line-height: 1.2;
  font-weight: 500;
  color: #c9bca0;
  letter-spacing: -0.01em;
}
/* =========================================================
   HERO
========================================================= */
.amfg-hero{
  position:relative;
  min-height:600px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(17,17,17,.10);
}
@media (max-width:768px){
  .amfg-hero{ min-height:600px; }
}

/* 배너가 너무 어두워지는 것을 방지: 약한 오버레이 */
.amfg-hero__overlay{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.03) 50%,
    rgba(0,0,0,.12) 100%
  );
}

.amfg-hero__content{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:900px;
}

/* =========================================================
   Typography
========================================================= */
.amfg-title{
  font-family:'Noto Serif Display',serif;
  font-size:32px;
  color:#c9bca0;
  margin:0 0 14px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.01em;
}

.amfg-desc{
  font-family:'Noto Sans KR',sans-serif;
  font-size:16px;
  color:#666666;
  line-height:1.85;
  margin:0;
}

/* HERO 설명 가독성 */
.amfg-desc--hero{
  max-width:860px;
  margin:0 auto;
  color:rgba(255,255,255,.88);
}

/* =========================================================
   Intro ↔ Videos 간격 (좁힘)
========================================================= */
#amfg-journey{ padding-bottom:40px; }
#amfg-journey + .amfg-sec{ padding-top:0; }

/* 인트로 정렬: 비디오 그리드 폭 기준으로 맞춤(PC) */
#amfg-journey .amfg-wrap{
  max-width: calc(320px * 3 + 40px * 2);
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:1024px){
  #amfg-journey .amfg-wrap{
    max-width:100%;
    padding-left:24px;
    padding-right:24px;
  }
}
@media (max-width:768px){
  #amfg-journey .amfg-wrap{
    padding-left:16px;
    padding-right:16px;
  }
}

/* =========================================================
   VIDEOS GRID
========================================================= */
.amfg-videoGrid{
  display:grid;
  grid-template-columns: repeat(3, 320px);
  gap:28px 20px;
  justify-content:center;
}

/* PC에서 썸네일 간격 더 넓게 */
@media (min-width:1025px){
  .amfg-videoGrid{ gap:60px 40px; }
}

@media (max-width:1024px){
  .amfg-videoGrid{ grid-template-columns: repeat(2, 320px); }
}
@media (max-width:720px){
  .amfg-videoGrid{ grid-template-columns: 1fr; }
}

/* 비디오 카드 상단 마진: 기본 100px, 첫 줄은 작게 */
.amfg-videoItem{ margin-top:100px; }
.amfg-videoItem:nth-child(-n+3){ margin-top:10px; }
@media (max-width:1024px){
  .amfg-videoItem:nth-child(-n+3){ margin-top:100px; }
  .amfg-videoItem:nth-child(-n+2){ margin-top:10px; }
}
@media (max-width:720px){
  .amfg-videoItem{
    margin-top:50px;
    text-align:center;
  }
}

/* =========================================================
   THUMB (320x569, 라운드 제거)
========================================================= */
.amfg-thumb{
  display:block;
  width:320px;
  height:569px;
  margin:0;
  overflow:hidden;

  border:none;
  border-radius:0;
  background:#f3f3f3;
}

.amfg-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:720px){
  .amfg-thumb{
    width:100%;
    height:auto;
    aspect-ratio: 320 / 569;
    margin-left:auto;
    margin-right:auto;
  }
}

/* =========================================================
   WATCH THE VIDEO (Italy style bar)
   - 베이지 바 + 텍스트 Noto Sans KR
========================================================= */
a.amfg-watch{
  display:flex;
  align-items:center;
  justify-content:center;

  width:320px;
  height:56px;

  margin-top:0;
  background:#d6cbb0;
  color:#000;

  font-family:'Noto Sans KR',sans-serif !important;
  font-size:13px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;

  text-decoration:none;
  border:none;
  border-radius:0;

  transition: background .15s ease, opacity .15s ease;
}

a.amfg-watch:hover{
  background:#cbbf9f;
  opacity:1;
}

@media (max-width:720px){
  a.amfg-watch{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
}

/* =========================================================
   Video title / description
========================================================= */
.amfg-videoTitle{
  margin:18px 0 10px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:22px;
  line-height:1.25;
  font-weight:500;
  color:#c9bca0;
}

.amfg-desc--video{ margin-top:0; }
@media (max-width:720px){
  .amfg-desc--video{ margin-bottom:50px; }
}

/* =========================================================
   wrap 하단 여백(요청값 유지)
========================================================= */
.amfg-wrap{ margin-bottom:100px; }
@media (max-width:768px){
  .amfg-wrap{ margin-bottom:70px; }
}

/* =========================================================
   ✅✅✅ HERO TITLE 54px 확정 (최종 오버라이드, 반드시 맨 아래)
   DOM 확인: <h1 class="amfg-title amfg-title--hero">...</h1>
========================================================= */
.amfg-hero h1.amfg-title.amfg-title--hero{
  font-size:54px !important;
  line-height:1.15;
  margin-bottom:16px;
}
@media (max-width:768px){
  .amfg-hero h1.amfg-title.amfg-title--hero{
    font-size:36px !important;
  }
}