/* =============================================================================
   THEME.CSS — ไฟล์สำหรับ "คุณ" แก้เอง
   -----------------------------------------------------------------------------
   ไฟล์นี้ถูกโหลดเป็นไฟล์สุดท้าย ทุกอย่างที่เขียนตรงนี้จะทับค่าเดิมทั้งหมด
   แก้ที่นี่ได้เลย ไม่ต้องแตะ style.css

   วิธีเปลี่ยนสีมี 2 ทาง
   ทางที่ 1 (ง่ายที่สุด) เปลี่ยนชุดสีสำเร็จรูป
            เปิด includes/config.php แล้วแก้บรรทัด
            $THEME_PRESET = 'emerald';
            เป็น 'sapphire' (น้ำเงินไพลิน) หรือ 'lacquer' (แดงชาด)

   ทางที่ 2 กำหนดสีเองทีละค่า
            แก้ในบล็อก :root ด้านล่างนี้ได้เลย ค่าที่ไม่ต้องการเปลี่ยนให้ลบทิ้ง
   ========================================================================== */


/* ---------------------------------------------------------------------------
   [1] สีของเทมเพลต
       ตอนนี้ปิดไว้ทุกบรรทัด (มี // นำหน้าไม่ได้ใน CSS จึงใช้วิธีลบบรรทัดออก)
       ถ้าต้องการใช้ค่าใด ให้ลบบรรทัดนั้นออกจากคอมเมนต์ด้านล่าง
       แล้วนำไปวางในบล็อก :root ที่หัวข้อ [2]

       --c-deep          สีเข้มสุด  ใช้กับแถบบนสุด ท้ายเว็บ และพื้นหลัง hero
       --c-deep-2        สีเข้มรอง  ใช้ไล่เฉด
       --c-primary       สีหลักของแบรนด์  ปุ่ม ลิงก์ หัวข้อเน้น
       --c-primary-soft  สีหลักอ่อน  ใช้ตอนเอาเมาส์ชี้
       --c-gold          สีทอง  เส้นคั่น ลายไทย ปุ่มหลัก
       --c-gold-light    ทองอ่อน  ตัวอักษรบนพื้นเข้ม
       --c-lacquer       แดงชาด  ใช้เน้นน้อย ๆ เช่น เครื่องหมายช่องบังคับกรอก
       --c-ivory         พื้นหลังสว่างหลัก
       --c-ivory-2       พื้นหลังสว่างรอง  ใช้กับ section สลับสี
       --c-ink           สีตัวอักษรหลัก
       --c-muted         สีตัวอักษรรอง
       --c-line          สีเส้นขอบ
   ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
   [2] ใส่สีที่ต้องการตรงนี้  (ตอนนี้ว่างไว้ = ใช้สีจาก config.php)
       ตัวอย่างการใช้งาน  ให้พิมพ์ต่อในวงเล็บปีกกาด้านล่าง เช่น
           --c-gold: #d4af37;
           --c-primary: #123f8a;
   ------------------------------------------------------------------------ */
:root{
  /* ใส่สีของคุณที่บรรทัดถัดจากนี้ */
}


/* ---------------------------------------------------------------------------
   [3] ฟอนต์
       ถ้าเปลี่ยนไปใช้ฟอนต์อื่น อย่าลืมแก้ลิงก์ Google Fonts ใน includes/header.php ด้วย
       ตัวอย่าง   --font-display: 'Kanit', sans-serif;
   ------------------------------------------------------------------------ */
:root{
  /* --font-display: 'Trirong', Georgia, serif; */
  /* --font-body: 'IBM Plex Sans Thai', system-ui, sans-serif; */
  /* --font-mono: 'IBM Plex Mono', monospace; */
}


/* ---------------------------------------------------------------------------
   [4] รูปทรงและระยะห่าง
       --radius     ความมนของปุ่มและกล่อง  0 คือเหลี่ยมคม  12px คือมนมาก
       --shell      ความกว้างสูงสุดของเนื้อหา
       --sp-section ระยะห่างบนล่างของแต่ละ section
   ------------------------------------------------------------------------ */
:root{
  /* --radius: 3px; */
  /* --radius-lg: 6px; */
  /* --shell: 1240px; */
  /* --sp-section: 96px; */
}


/* ---------------------------------------------------------------------------
   [5] พื้นหลังลายไทยทั้งหน้า (ทางเลือก)
       เตรียมไฟล์ assets/img/bg/pattern.png แล้วลบเครื่องหมายคอมเมนต์ออก
   ------------------------------------------------------------------------ */
/*
body{
  background-image: url('../img/bg/pattern.png');
  background-size: 360px auto;
  background-attachment: fixed;
}
*/


/* ---------------------------------------------------------------------------
   [6] พื้นที่เขียน CSS เพิ่มเติมของคุณเอง
   ------------------------------------------------------------------------ */

/* ลายทองแบบ Thai mosaic แบบเบามาก — ให้พื้นหลังมีมิติ โดยไม่รบกวนการอ่าน */
.section--alt::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:
    linear-gradient(45deg,transparent 46%,color-mix(in srgb,var(--c-gold) 14%,transparent) 47% 53%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,color-mix(in srgb,var(--c-gold) 14%,transparent) 47% 53%,transparent 54%);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);
}
.section--alt > .shell{position:relative;z-index:1}

/* กรอบภาพหลักให้เหมือนกรอบทองคำเปลว และคงการเคลื่อนไหวอย่างสุภาพ */
.hero__media .img-slot{
  border:1px solid color-mix(in srgb,var(--c-gold-light) 68%,transparent);
  box-shadow:0 26px 60px -32px rgba(0,0,0,.85),0 0 0 8px rgba(255,255,255,.055);
}
.hero__media .img-slot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 28%,transparent 72%,rgba(214,169,63,.2));
}

/* Gallery: เปิดชมภาพสถานที่จริงได้ โดยยังคง fallback เดิมหากรูปยังไม่ถูกเพิ่ม */
.gallery{grid-auto-flow:dense}
.gallery__item{
  display:block;position:relative;overflow:hidden;border:0;border-radius:var(--radius-lg);
  color:inherit;background:transparent;text-align:left;cursor:zoom-in;
}
.gallery__item .img-slot{border-color:color-mix(in srgb,var(--c-gold) 34%,var(--c-line));transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.gallery__caption{
  position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);
  background:rgba(5,38,32,.76);color:#fff;box-shadow:0 10px 22px -14px rgba(0,0,0,.8);backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:10.5px;line-height:1.35;letter-spacing:.07em;opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease-out);
}
.gallery__caption .icon{color:var(--c-gold-light);width:16px;height:16px}
.gallery__item:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px}
.gallery__item:focus-visible .gallery__caption,.gallery__item:focus-within .gallery__caption{opacity:1;transform:none}
.gallery__item:focus-within .img-slot{border-color:var(--c-gold);box-shadow:var(--shadow-lift)}
.gallery__item:focus-within .img-slot img{transform:scale(1.06)}
@media (hover:hover) and (pointer:fine){
  .gallery__item:hover .gallery__caption{opacity:1;transform:none}
  .gallery__item:hover .img-slot{border-color:var(--c-gold);box-shadow:var(--shadow-lift)}
  .gallery__item:hover .img-slot img{transform:scale(1.06)}
  .card:focus-within,.dest:focus-within,.vehicle:focus-within{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--c-gold) 40%,var(--c-line))}
}

/* Native lightbox: Esc, ปุ่มปิด และคลิกพื้นที่ด้านนอกทั้งหมดปิดได้ */
.gallery-lightbox{
  width:min(94vw,76vh,840px);max-width:none;max-height:90vh;margin:auto;padding:0;overflow:visible;
  border:0;border-radius:var(--radius-lg);background:transparent;color:#fff;
}
.gallery-lightbox::backdrop{background:rgba(3,18,15,.82);backdrop-filter:blur(8px)}
.gallery-lightbox__frame{width:100%;margin:0;overflow:hidden;border:1px solid rgba(243,221,162,.42);border-radius:var(--radius-lg);background:var(--c-deep);box-shadow:0 28px 80px -28px #000}
.gallery-lightbox__frame img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--c-deep)}
.gallery-lightbox__frame figcaption{padding:12px 58px 14px 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--c-gold-light)}
.gallery-lightbox__close{
  position:absolute;right:12px;top:12px;z-index:2;width:38px;height:38px;border:1px solid rgba(243,221,162,.55);border-radius:50%;
  background:rgba(5,38,32,.88);color:#fff;font:400 27px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 7px 18px -9px #000;
}
.gallery-lightbox__close:hover{background:var(--foil);color:var(--c-deep)}
.gallery-lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){
  .gallery__caption{opacity:1;transform:none;left:7px;right:7px;bottom:7px;padding:7px 9px;font-size:9.5px}
  .gallery-lightbox{width:min(calc(100vw - 24px),72vh,840px)}
}