@import url(reset.css);
@import url(menu.css);
@import url(layout.css);
@import url(color.css);
@import url(typography.css);
@import url(img.css);
@import url(component.css);

/* =========================== TABLET VIEW ================================= */
@media (min-width: 768px) and (max-width: 1199px){

  /* --------------home--------------------- */
  nav { padding: 1rem 1.5rem; }
  nav .menu ul { gap: 2rem; }

  
  .hero{
    position: relative;
    display: block;    
  }
  .heroVideo{
    width: 100%;
    height: clamp(50vh, 70vh, 70vh);
    object-fit: cover;             
    display: block;
  }
  .heroContent{
    position: absolute;
    inset: 0;                     
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;         
    padding: clamp(16px, 4vw, 48px);
    gap: .5rem;
    max-width: 520px;              
    margin-left: auto;             
    text-align: left;              
  }
  .heroContent h1{
    font-size: clamp(2.8rem, 5.8vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: .5px;
    color: var(--mainColor);
    
  }
  .heroContent h2{
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 300;
    opacity: .9;
    color: var(--mainColor);
  }
  .linkButton{
    align-self: flex-end;        
    margin-top: .5rem;
    padding: .8rem 1.6rem;
    font-size: 1rem;
  }
  /* 平板模式隱藏中線 */
@media (min-width: 768px) and (max-width: 1199px) {
  .verticalHr {
    display: none;
  }
}

  .aboutMe{
    display: grid;
    grid-template-columns: 1fr;   
    gap: clamp(20px, 3vw, 32px);
    padding: clamp(2rem, 12vh, 8rem) ;
    text-align: center;
    justify-items:center; 
    align-items:center;
  }
  /* 讓圖片在前、文字在後（若現在順序相反） */
  .aboutMeRight{ 
    order: 1; 
    place-self: center;
    display:flex;
    justify-content:center; }
  .aboutMeLeft{  
    order: 2; 
    place-self: center; 
}

  .selfPortrait{
    width: min(520px, 80%);
    aspect-ratio: 550 / 655;
    border: clamp(18px, 4.5vw, 48px) solid var(--mainColor); 
    display: block;
    
  }

  .aboutMeLeft h1{
    font-size: clamp(2.8rem, 5.5vw, 4rem);
    line-height: 1.1;
    margin: .5rem 0 1rem;
    margin-top: clamp(4rem, 7vh, 7rem);
  }
  .aboutMeLeft h2{
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    font-weight: 300;
    max-width: 38ch;               /* 行長更好讀 */
    margin: .25rem auto;
  }

  /* ---------gallery---------- */
  .galleryHeroWrap{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
  }

  .galleryHeroImg{
    width: 100%;
    height: auto;
    max-height: 470px;
  }

  .pageTitle{
    font-size: clamp(10px, 3vw, 30px);

  }
  .galleryHero h1{
    font-size: clamp(20px, 6vw, 50px);
  }

  .galleryBody{
    width: 100%;
  }
 
 .set1, .set2, .set3{
    object-fit: contain;
 }

 

  /* -----contact------- */


 }



 


/* ===============Mobile View=================== */
.menuWrap { 
    display: none; 
}
.siteNav{
    display: flex;
}

@media (max-width: 767px){

  /* --- NAV --- */

  .menuWrap { display: block;}
  .siteNav  { display: none;}

  .siteNav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
  }
  .logo{ 
    width: 2.25rem; 
    height: 2.75rem; 
    padding-bottom: .25rem; 
    padding-left: 1rem;
}
 .siteNav  .menu ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
    margin: 0; padding: 0;
  }
  #link a{ font-size: 1rem; }

  /* --- HERO --- */
  .hero{
    position: relative;
  }
  .heroVideo{
    width: 100%;
    height: clamp(480px, 70vh, 820px);
    object-fit: cover;
    display: block;
  }
 .heroContent{
    position:absolute; 
    inset:0;
    display:flex; 
    flex-direction:column;
    justify-content:center; 
    align-items:flex-end;
    text-align:right;
    padding: clamp(16px, 4vw, 48px);
    z-index: 2;                 
    width: min(90%, 46ch);
    margin-left:auto;          
  }

  
  .heroContent h1{
    color: var(--mainColor);
    font-size: clamp(2rem, 7vw, 2.8rem);
    
  }
  .heroContent h2{
    color: var(--mainColor);
    font-size: clamp(1rem, 4vw, 1.3rem);
    font-weight: 300;
    
  }
  .heroContent br {
  line-height: 0;
  margin: 0;
  display: none; 
}

  
  .linkButton{
    align-self:flex-end;
    background: var(--mainColor);
    color:#fff;
    padding: .8rem 1.6rem;
    font-size: 1rem;
    border: none;
    z-index: 3;
  }
  

  /* --- ABOUT --- */
  .aboutMe{
    display: grid;
    grid-template-columns: 1fr;          
    gap: clamp(1.5rem, 6vh, 3rem);       
    padding-block: clamp(2rem, 8vh, 4rem);
    text-align: center;
  }
  /* show photo first, text after */
  .aboutMeRight{ 
    rder: 1; 
    place-self: center; }
  .aboutMeLeft{  
    order: 2; 
    margin-top: 0; 
    padding-left: 0

}

  .selfPortrait{
    display: block;
    margin-inline: auto;                  
    width: 90%;
    aspect-ratio: 550 / 655;
    border: clamp(12px, 4.5vw, 28px) solid var(--mainColor);
    box-sizing: border-box;
  }

  .aboutMeLeft h1{
    font-size: clamp(2rem, 7vw, 2.8rem);
    line-height: 1.2;
    margin: .5rem 0 1rem;
  }
  .aboutMeLeft h2{
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    max-width: 38ch;
    margin: .25rem auto;
  
  }

  /* --- DIVIDERS / MISC --- */
  .verticalHr{ display: none; }          /* hide the center red line on mobile */
  hr{ margin: clamp(12px, 3vh, 24px) 0; height: 1px; }

  /* --- FOOTER --- */
  .igHandle{ font-size: .9rem; opacity: .9; }

  .siteNav{
    position: sticky; top: 0; z-index: 120;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg);                   /* dark strip */
    padding: .5rem .75rem;                   /* like the screenshot */
  }
  .siteNav .menu{ display: none; }           /* hide the desktop links */
  .siteNav .logo{ width: 24px; height: auto; }/* small red logo at left */

  /* Show hamburger button at right */
  .menuWrap{
    display: block;
    position: fixed; 
    top: .6rem; 
    right: .75rem; 
    z-index: 200; 
  }

  /* invisible checkbox hit area */
  #navToggle.toggle{
    position: absolute; 
    inset: 0;
    width: 40px; 
    height: 40px;
    opacity: 0; 
    cursor: pointer; 
    z-index: 202;
  }

  /* hamburger icon (3 red lines) */
  .hamburger{
    position: relative; 
    width: 40px; 
    height: 40px;
    display: grid; 
    place-items: center;
    background: transparent;
    z-index: 201;
  }
  .hamburger div,
  .hamburger div::before,
  .hamburger div::after{
    content: ""; display: block;
    width: 22px; height: 2px;
    background: var(--mainColor);            
    position: relative; transition: .25s ease;
  }
  .hamburger div::before{ position: absolute; top: -7px; left: 0; }
  .hamburger div::after { position: absolute; top:  7px; left: 0; }

  /* turn into X when open */
  #navToggle:checked + .hamburger div{ transform: rotate(45deg); }
  #navToggle:checked + .hamburger div::before{ top: 0; transform: rotate(90deg); }
  #navToggle:checked + .hamburger div::after { top: 0; opacity: 0; }

  /* full-screen overlay menu */
  .menu{
    position: fixed; 
    inset: 0; 
    display: none;
    background: rgba(0,0,0,.92);       
    align-items: center; 
    justify-content: center;
    flex-direction: column;
    z-index: 150;
  }
  #navToggle:checked ~ .menu{ display: flex; }

    .menuWrap .menu ul{
    display: flex;              /* override any previous display */
    flex-direction: column;     /* stack */
    gap: 0.75rem;               /* space between items */
    margin: 0;
    padding: 0;
    list-style: none;
}
.menuWrap .menu li{ display: block; }

  .menu a{
    display: block; 
    text-align: center; 
    text-decoration: none;
    color: var(--secondaryColor);
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    line-height: 1.9; margin: .4rem 0;
    margin: 0.75rem 0;             /* spacing between links */
  transition: color .3s ease;
  }

  /* =========Gallery======== */

   .pageTitle {
    font-size: clamp(1.2rem, 4vw, 2.2rem);
    margin: 1rem 0 0.5rem;
  }
  .galleryHero h1 {
    font-size: clamp(2rem, 8vw, 5rem);
    line-height: 100%;
  }

    .galleryHeroImg {
    width: 100%;
    height: auto;
    display: block;
  }
  .setWrap { 
    padding: 0 2rem; 
}

  .set1, .set2, .set3{
    width: 100%;
    height: auto;
    object-fit: cover;
 }
 
 .set1Div,
.set2Div,
.set3Div {
  display: flex;
  flex-direction: column; 
  align-items: center;    
}
 .galleryButton1,
.galleryButton2,
.galleryButton3 {
  position: static;      
  margin-top: 1rem;      
  display: inline-block; 
  text-align: center;
}

}