/* --------------------------------------------------------------------------
   Home reference layout — img/reference/ui-use 1/Home.png

   The supplied artboards are the visual source of truth for this screen:
   Topic.png, Cover.png, Our Expertise.png and the sixteen Menu images are
   used directly. Text and links remain real HTML around those images so the
   screen is keyboard navigable and the destination is not hidden in pixels.
   -------------------------------------------------------------------------- */
#screen-home{
  background:#000;
}

.home--reference{
  position:relative;
  display:block;
  width:100%;
  max-width:1080px;
  min-height:100svh;
  margin-inline:auto;
  padding:0 0 calc(125px + env(safe-area-inset-bottom,0px));
  overflow:clip;
  background:#000;
  color:#fff;
  text-align:left;
}

.home__masthead{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  min-height:clamp(5.5rem,14vw,9.25rem);
  padding:clamp(.75rem,2.2vw,1.5rem) clamp(3.5rem,8vw,5rem) .75rem;
  background:#000;
}

.home__topic{
  width:min(100%,884px);
  height:auto;
  margin-inline:auto;
}

.home__menu-toggle{
  position:fixed;
  /* ต้องอยู่เหนือ navbar (z-index:100) ด้วย ไม่เช่นนั้นพื้นที่โปร่งของ navbar
     จะรับคลิกแทนปุ่มนี้บนหน้าหมวดและหน้าผลงาน */
  z-index:110;
  /* Match Fix Position Menu.png: the 32px artwork sits about 22px from
     the viewport edge and its visible lines begin around y=29px.  The
     button stays 44px for keyboard/touch access; only the artwork is
     visually aligned to the reference. */
  top:calc(15px + env(safe-area-inset-top,0px));
  right:16px;
  display:grid;
  place-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid transparent;
  border-radius:4px;
  color:#fff;
  cursor:pointer;
}

.home__menu-toggle img{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}

.home__menu-toggle:hover{background:rgba(255,255,255,.08)}
.home__menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

.home__cover{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:#000;
  cursor:pointer;
}

.home__cover img{
  display:block;
  width:100%;
  height:auto;
}

.home__cover:hover img{filter:brightness(1.08)}
.home__cover:focus-visible{outline:3px solid #fff;outline-offset:-3px}

.home__expertise{
  padding-top:clamp(1rem,2.6vw,1.75rem);
  scroll-margin-top:1rem;
}

.home--reference .home__expertise-title{
  width:min(42%,419px);
  margin:0 auto clamp(1rem,3.6vw,2.25rem);
  line-height:0;
}

.home__expertise-title img{
  display:block;
  width:100%;
  height:auto;
}

.home__menu-list{
  display:flex;
  flex-direction:column;
  gap:clamp(1rem,3.2vw,2.2rem);
  width:100%;
  margin:0;
  padding:0 clamp(1rem,5vw,3.25rem);
}

.home-menu-card{
  display:block;
  width:min(100%,1006px);
  margin-inline:auto;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:transform .22s ease,filter .22s ease;
}

.home-menu-card img{
  display:block;
  width:100%;
  height:auto;
}

.home-menu-card:hover,
.home-menu-card:focus-visible{
  transform:translateY(-3px);
  filter:drop-shadow(0 10px 18px rgba(255,255,255,.16));
}

.home-menu-card:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
}

/* Fixed footer follows Footer Fix Position.png.  Keep content padding above
   it so the final card is never hidden behind the gradient on a short screen. */
.home__footer{
  position:fixed;
  z-index:20;
  right:0;
  bottom:0;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:min(1080px,100%);
  min-height:clamp(4.5rem,8vw,6.5rem);
  padding:1rem clamp(1rem,5vw,3.25rem) calc(1rem + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.9) 38%,#000 75%);
  pointer-events:none;
}

.home__contact,
.home-social{pointer-events:auto}

.home__contact{
  width:min(141px,34vw);
  height:auto;
}

.home-social{
  display:flex;
  align-items:center;
  gap:clamp(.35rem,1vw,.75rem);
  margin:0;
  padding:0;
  list-style:none;
}

.home-social__link{
  display:grid;
  place-items:center;
  width:clamp(40px,5vw,52px);
  height:clamp(40px,5vw,52px);
  border-radius:50%;
  transition:transform .2s ease,filter .2s ease;
}

.home-social__link img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.home-social__link:hover,
.home-social__link:focus-visible{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.12);
}

.home-social__link:focus-visible{outline:2px solid #fff;outline-offset:3px}

.home-menu-panel{
  position:fixed;
  /* แผงต้องอยู่เหนือทั้ง navbar (100) และปุ่มเปิดเมนู (110)
     เพื่อให้ปุ่มปิดและลิงก์แถวบนรับคลิกได้ */
  z-index:120;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  width:min(88vw,370px);
  padding:clamp(1rem,4vw,2rem);
  overflow:auto;
  background:rgba(10,10,10,.98);
  border-left:1px solid rgba(255,255,255,.22);
  box-shadow:-20px 0 50px rgba(0,0,0,.55);
  animation:home-panel-in .2s ease both;
}

.home-menu-panel[hidden]{display:none}

.home-menu-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-family:var(--font-display);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.14em;
}

.home-menu-panel__close{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:4px;
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
}

.home-menu-panel__close:hover{background:rgba(255,255,255,.1)}
.home-menu-panel__close:focus-visible{outline:2px solid #fff;outline-offset:2px}

.home-menu-panel__nav{
  display:grid;
  gap:.25rem;
  margin-top:1rem;
}

.home-menu-panel__link{
  display:block;
  min-height:44px;
  padding:.65rem .75rem;
  color:#fff;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .18s ease,padding-left .18s ease;
}

.home-menu-panel__search{
  display:flex;
  align-items:center;
  gap:.65rem;
  width:100%;
}
.home-menu-panel__search svg{flex:none;width:18px;height:18px}

.home-menu-panel__link:hover,
.home-menu-panel__link:focus-visible{
  padding-left:1rem;
  background:rgba(255,255,255,.1);
}

.home-menu-panel__link:focus-visible{outline:2px solid #fff;outline-offset:-2px}

@keyframes home-panel-in{
  from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:none}
}

@media (max-width:600px){
  .home--reference{padding-bottom:calc(125px + env(safe-area-inset-bottom,0px))}
  /* แยกชื่อออกจากแถวของปุ่มเมนู ไม่ให้ปลายโลโก้วิ่งไปชนไอคอนที่มุมขวา */
  .home__masthead{
    min-height:auto;
    padding:calc(4.25rem + env(safe-area-inset-top,0px)) 1rem 1rem;
  }
  .home--reference .home__expertise-title{width:min(70%,300px);margin-bottom:1rem}
  .home__menu-list{gap:clamp(.9rem,4.8vw,1.5rem);padding-inline:.9rem}
  .home__footer{min-height:4.75rem;padding-inline:1rem}
  .home__contact{width:min(141px,31vw)}
  .home-social{gap:.25rem}
  .home-social__link{width:38px;height:38px}
}

/*
  หน้า Business มีการ์ด 16 ใบ ไม่ใช่เมนู 5 ใบของ layout รุ่นก่อน
  กฎเดิมใน base.css ตั้ง max-width จากความสูงจอเพื่อยัดเมนู 5 ใบให้จบในจอเดียว
  เมื่อโทรศัพท์หมุนแนวนอน (จอเตี้ย) ค่านั้นเกือบเป็นศูนย์ จึงบีบการ์ดจนเล็กมาก
  คงการ์ดเต็มแถวแบบเดิม (ภาพและข้อความสลับซ้าย–ขวา) โดยปล่อยให้
  รายการเลื่อนตามปกติ แทนการย่อทุกอย่างให้เล็กจนใช้งานไม่ได้
*/
@media (orientation:landscape) and (max-height:700px){
  .home__menu-list{
    display:flex;
    flex-direction:column;
    gap:clamp(1rem,3.2vw,2.2rem);
    width:100%;
    max-width:none;
    padding-inline:clamp(1rem,5vw,3.25rem);
  }
  .home-menu-card{width:min(100%,1006px);margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  .home-menu-card,
  .home-social__link,
  .home-menu-panel__link{transition:none}
  .home-menu-panel{animation:none}
}