/* 📄 File: public/assets/styles.css */

/* ================== Tokens ================== */
:root{
  --bg:#0f1113;
  --panel:#171a1e;
  --line:#232a32;
  --text:#e9edf1;
  --muted:#b9c0c7;
  --brand:#ffcc00;
  --radius:16px;
  --gutter:20px;
  --max:1200px;
}

/* ================== Base ================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
h1{font-size:clamp(1.8rem,3.6vw,2.75rem); line-height:1.2; margin:0 0 .8rem}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem); margin:0 0 .6rem}
h3{font-size:1.15rem; margin:0 0 .45rem}
p{margin:0 0 .8rem; color:var(--muted)}
a{color:inherit; text-decoration:underline 0.08em transparent; transition:.15s}
a:hover{ text-decoration-color: currentColor; }

/* ================== Buttons ================== */
.btn{
  display:inline-block; font-weight:700; color:#000; background:var(--brand);
  padding:.8rem 1.1rem; border-radius:12px; text-decoration:none; border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.25); transition:.18s ease;
}
.btn:hover{filter:brightness(.96)}

/* ================== Cards & Grids ================== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(16px,3vw,22px);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.grid{display:grid; gap:clamp(14px,2.4vw,20px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:920px){ .grid-3{grid-template-columns:1fr} }
.stack > * + *{margin-top:clamp(10px,1.6vw,14px)}

/* ================== NAVBAR ================== */
.nav{
  --nav-h: 90px; /* desktop bar height */
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("/assets/dumbbell1.jpg") center/cover no-repeat;
  overflow: hidden; /* กันของล้นในเดสก์ท็อป (จะ override เป็น visible บนมือถือ) */
}
.nav-inner{
  height: var(--nav-h);
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* โลโก้ */
.brand, .menu, .burger { height: 100%; display:flex; align-items:center; }
.brand img.logo{
  display:block;
  height:100%;               /* ให้สูงเท่าบาร์ */
  width:auto;
  object-fit:contain;
}

/* เมนู */
.menu{display:flex; align-items:center; gap:22px}
.menu a{color:#d6dbe1; text-decoration:none; font-weight:600}
.menu a:hover, .menu a.active{color:var(--brand)} /* active/hover เหลือง */

/* burger toggle (เดสก์ท็อปซ่อน) */
#nav-toggle{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.burger{
  display:none;
  width:var(--nav-h); height:var(--nav-h);
  justify-content:center; position:relative; cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:""; position:absolute; width:22px; height:2px; background:#e9edf1; border-radius:2px;
}
.burger span::before{transform:translateY(-6px)}
.burger span::after {transform:translateY( 6px)}

/* NAV — Mobile */
@media (max-width:820px){
  .nav{ --nav-h:90px; }
  .burger{display:flex}

  /* header ไม่ล็อกสูง และให้พับบรรทัดได้ */
  .nav-inner{
    min-height: var(--nav-h);
    height:auto;
    flex-wrap:wrap;
    align-items:center;
    padding-block:0 10px;
  }

  /* ✅ ล็อกขนาดโลโก้ในมือถือ */
  .brand{ height: var(--nav-h); }       /* กล่องแบรนด์สูงเท่า bar */
  .brand img.logo{
    height:auto;                        /* ไม่ยืดเต็ม 100% ของ header */
    max-height: calc(var(--nav-h) - 5px);                    /* คุมให้พอดีบาร์ */
    width:auto;
  }

  /* เมนูเป็นกล่องปกติ จะดันเนื้อหาลง ไม่ซ้อน */
  .menu{
    display:none;
    position:static;
    width:100%;
    order:3;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-top:8px;
    padding:10px var(--gutter) 12px;
    background:rgba(0,0,0,.92);
    border-top:1px solid var(--line);
  }
  #nav-toggle:checked ~ .menu{ display:flex; }

  .menu a{ padding:6px 0; }
}

/* ================== HERO / INTRO ================== */
.hero{ padding:clamp(24px,3.6vw,36px) 0; }

/* เดสก์ท็อป: 2 คอลัมน์, โมบาย: เรียงลง */
.hero .hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px,3vw,24px);
  align-items: center;
}
@media (max-width:820px){
  .hero .hero-grid{
    display:flex;
    flex-direction:column;
  }
  .hero .hero-grid .text{ order:1; }
  .hero .hero-grid .quick-info{
    order:3;
    width:100%;
    margin-top:16px;
    padding: clamp(14px,3.2vw,18px);
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
  }
}

/* (คง style เดิมของอินโทรเก่าไว้ เผื่อหน้าอื่นใช้) */
.hero .intro{
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(16px,3vw,24px); align-items:center;
}
@media (max-width:920px){ .hero .intro{grid-template-columns:1fr} }

/* ================== Tables ================== */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px}
.table{width:100%; border-collapse:collapse; min-width:560px}
.table th,.table td{padding:12px 14px; border-bottom:1px solid var(--line)}
.table thead th{background:#121417; color:#cfd3da; text-align:left}

/* ================== Footer ================== */
.footer{
  margin-top:36px;
  padding:20px 0;
  text-align:center;
  color:#9aa3ad;
  font-size:.95rem;

  /* สำหรับเลเยอร์เบลอ */
  position: relative;
  overflow: hidden;         /* กันภาพเบลอหลุดนอกขอบ */
}

/* ภาพพื้นหลังแบบจาง+เบลอทั้งภาพ */
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/dumbbell2.jpg") center/cover no-repeat;
  filter: blur(2px) brightness(0.85);  /* เบลอ + ทำให้มืดลง = จางลง */
  transform: scale(1.05);              /* กันขอบเบลอเป็นเส้น */
  z-index:0;
  pointer-events:none;
}

/* ให้ข้อความอยู่เหนือภาพ */
.footer > *{
  position:relative;
  z-index:1;
}

/* ================== Classes page (bg image + overlay) ================== */
.class-card{
  position: relative;
  overflow: hidden;
  padding: 0;                                      /* ใช้ padding ที่ overlay */
  min-height: clamp(220px, 26vw, 280px);
  display: flex;
  align-items: flex-end;                           /* วาง overlay ที่ก้นการ์ด */
  color: #fff;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

/* ชั้นข้อความให้อ่านชัด (ค่าพื้นฐาน ใช้กับมือถือด้วย) */
.class-card .overlay{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(14px, 2.8vw, 20px);
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: inherit;
}
.class-card h2{ margin: 0 0 8px; font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
.class-card p { margin: 0; color: #e9edf1; line-height: 1.55; }

/* รูปพื้นหลังของแต่ละการ์ด */
.bg-performance { background-image: url("/assets/class-performance.jpg"); }
.bg-yoga        { background-image: url("/assets/class-yoga.jpg"); }
.bg-muaythai    { background-image: url("/assets/class-muaythai.jpg"); }

/* ---- Desktop ปรับภาพให้ "จาง" + gradient ล่าง และย้าย overlay ให้วางล่างซ้าย ---- */
@media (min-width: 992px){
  .class-card{ min-height: clamp(300px, 32vw, 380px); --dim:.32; transition:transform .2s ease, box-shadow .2s ease; }

  /* ชั้นทำให้ภาพจางลงทั่วทั้งใบ (ปรับความเข้มด้วย --dim) */
  .class-card::before{
    content:""; position:absolute; inset:0;
    background: rgb(0 0 0 / var(--dim));
    pointer-events:none; z-index:0;
  }

  /* ไล่เงาล่างเพื่อให้อ่าน text ชัด */
  .class-card::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%);
    pointer-events:none; z-index:0;
  }

  /* เนื้อหาโปร่งในเดสก์ท็อป วางล่างซ้าย กว้างพออ่าน */
  .class-card .overlay{
    position:absolute; left:18px; right:auto; bottom:0;
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter:none;
    padding: 22px 24px;
    max-width: 720px;
  }

  .class-card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.35); }

  /* จัดจุดโฟกัสรูปแต่ละใบ */
  .bg-performance{ background-position: 30% center; }
  .bg-yoga       { background-position: center 40%; }
  .bg-muaythai   { background-position: 70% center; }

  /* ปรับความจางเฉพาะใบถ้าต้องการ */
  .bg-performance{ --dim:.70; }
  .bg-yoga       { --dim:.70; }
  .bg-muaythai   { --dim:.70; }
}

/* มือถือคง overlay ทึบ (ด้านบนกำหนดแล้ว) */
@media (max-width: 991px){
  .class-card { min-height: 220px; }
  .class-card .overlay { padding: 14px 16px; }
}

/* Timetable polish */
.table thead th{ position: sticky; top: 0; z-index: 1; }            /* header ติดบนในกรอบ .table-wrap */
.table td:first-child, .table thead th:first-child{ text-align:left }/* คอลัมน์เวลาให้ชิดซ้าย */
.table td:not(:first-child), .table thead th:not(:first-child){ text-align:center } /* วันให้กึ่งกลาง */

/* ไฮไลต์วันปัจจุบัน */
.table .is-today{
  background: rgba(255, 204, 0, 0.10);
  color: #fff;
  font-weight: 600;
}
.table tbody td.is-today{
  box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.16);              /* เส้นขอบนุ่ม ๆ */
}

/* จอเล็ก: อ่านง่ายขึ้นนิด */
@media (max-width: 600px){
  .table td, .table th{ padding:10px 12px; font-size: .95rem; }
  .table td:first-child{ white-space: nowrap; }                      /* เวลาไม่ตัดบรรทัด */
}

/* ระยะห่างใต้ hero / quick-info */
.hero {
  margin-bottom: 32px; /* ปรับค่าตามที่อยากให้เว้น */
}

.quick-info {
  margin-bottom: 20px; /* ถ้าอยากขยับแค่กล่อง info */
}

.socials {
  display: flex;
  gap: 12px;       /* ระยะห่างระหว่างไอคอน */
  margin-top: 8px;
}

.socials img {
  width: 28px;
  height: 28px;
  transition: transform 0.2s ease;
}

.socials img:hover {
  transform: scale(1.1);
}