/* ==========================================================================
   Kachanan Tarot — Responsive Stylesheet
   Mobile-first base lives in style.css; this file layers breakpoints on top.
   Breakpoints: 1200px / 992px / 768px / 576px / 380px
   ========================================================================== */

/* ==========================================================================
   <= 1200px — large tablet / small laptop
   ========================================================================== */
@media (max-width: 1200px) {
  :root {
    --container-width: 1060px;
  }

  .nav-list {
    gap: 0.1rem;
  }

  .nav-link {
    padding-inline: 0.45rem;
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   <= 992px — tablet: switch to hamburger navigation
   ========================================================================== */
@media (max-width: 992px) {
  :root {
    --header-height: 68px;
  }

  /* --- Mobile drawer --- */
  .nav-toggle {
    display: flex;
    order: 3;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: min(340px, 86vw);
    height: 100vh;
    height: 100dvh;
    padding: 1.5rem 1.5rem 2.5rem;
    overflow-y: auto;
    border-left: var(--border-gold-strong);
    background: linear-gradient(170deg, rgba(104, 20, 19, 0.96), rgba(36, 8, 7, 0.98));
    -webkit-backdrop-filter: var(--blur-glass);
    backdrop-filter: var(--blur-glass);
    box-shadow: -18px 0 50px rgba(20, 4, 4, 0.45);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition), visibility var(--transition);
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .nav-link {
    display: block;
    padding: 0.95rem 0.85rem;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid rgba(218, 188, 153, 0.12);
  }

  .nav-link::after {
    display: none;
  }

  .nav-link[aria-current="page"] {
    background: var(--gold-a10);
    border-left: 2px solid var(--color-gold);
  }

  /* --- ปุ่มเปลี่ยนภาษา: ย้ายขึ้นมาอยู่บนแถบ header ข้างปุ่มแฮมเบอร์เกอร์ ---
     อยู่นอกลิ้นชัก จึงกดเปลี่ยนภาษาได้เลยโดยไม่ต้องเปิดเมนูก่อน
     ตัวที่อยู่ใน .nav-cta (ข้างปุ่มจอง) ซ่อนไว้ ไม่งั้นจะมีปุ่มภาษาสองอันพร้อมกัน */
  .lang-switch--bar {
    display: inline-flex;

    /* .header-inner เป็น space-between — margin auto ดันปุ่มภาษาไปชิดขวา
       ให้ไปเกาะกลุ่มกับปุ่มแฮมเบอร์เกอร์ แทนที่จะลอยอยู่กลางแถบ */
    margin-inline-start: auto;
    order: 2;
  }

  .lang-switch--drawer {
    display: none;
  }

  /* --- ไอคอนบัญชี: โชว์บนแถบ header ต่อจากปุ่มภาษา ---
     order เท่ากับ .nav-toggle (3) แต่อยู่ก่อนใน DOM จึงมาอยู่ระหว่าง
     ปุ่มภาษากับปุ่มแฮมเบอร์เกอร์ */
  .account-bar {
    display: inline-flex;
    order: 3;
  }

  /* ซ่อนปุ่มข้อความในลิ้นชัก ไม่งั้นจะมีทางเข้าสู่ระบบสองจุดพร้อมกัน
     (ตรรกะเดียวกับที่ .lang-switch--drawer ถูกซ่อนบนจอแคบ) */
  .nav-cta [data-account-link] {
    display: none;
  }

  /* ปุ่มภาษาบนแถบ header ย่อลงหน่อย จะได้ไม่เบียดปุ่มแฮมเบอร์เกอร์ */
  .lang-switch--bar .lang-toggle {
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
  }

  /* --- เมนูย่อยในลิ้นชัก ---
     กางค้างไว้เลย ไม่ต้องกดเปิด เพราะการซ่อนไว้ทำให้ต้องกดสองครั้ง
     กว่าจะถึงหน้าที่ต้องการ ทั้งที่ในลิ้นชักมีที่ว่างเหลือเฟือ */
  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;

    min-width: 0;
    padding: 0;
    margin: 0 0 0.35rem 0.85rem;

    /* เส้นแนวตั้งบอกว่าทั้งกลุ่มนี้อยู่ใต้หัวข้อเดียวกัน
       ชัดกว่าการเยื้องอย่างเดียวซึ่งดูแทบไม่ออกบนจอแคบ */
    border: 0;
    border-inline-start: 2px solid var(--gold-a25);
    border-radius: 0;

    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* หัวข้อกลุ่ม — เป็นป้ายกำกับ ไม่ใช่ปุ่มที่กดได้
     ปุ่ม HTML จัดข้อความกลางมาโดยกำเนิด ต้องสั่ง start เอง
     ไม่งั้นคำว่า "ไพ่" จะไปลอยอยู่กลางจอเหมือนรายการหลงทาง */
  .nav-sub-toggle {
    display: block;
    width: 100%;
    padding: 1.35rem 0.85rem 0.5rem;

    text-align: start;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    color: var(--cream-a55);

    pointer-events: none;
    border-bottom: 0;
  }

  .nav-caret { display: none; }

  /* รายการย่อย — เล็กลงและจางลงกว่ารายการหลักอย่างเห็นได้ชัด
     ตัดเส้นคั่นล่างกับมุมมนออก ให้เส้นแนวตั้งของกลุ่มเป็นตัวบอกขอบเขตแทน */
  .nav-sub-link {
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    color: var(--cream-a70);
    border-bottom: 0;
    border-radius: 0;
  }

  /* หน้าที่เปิดอยู่ — ใช้สีทองสว่างกับพื้นจางๆ ไม่ใส่เส้นซ้ายซ้อนกับเส้นของกลุ่ม */
  .nav-sub-link[aria-current="page"] {
    background: var(--gold-a10);
    border-left: 0;
    color: var(--color-gold-bright);
  }

  /* --- ปุ่มปิดลิ้นชัก: มุมขวาบน ลอยทับเนื้อหาในลิ้นชัก --- */
  .nav-close {
    display: inline-flex;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
  }

  /* --- โลโก้บนสุดของลิ้นชัก --- */
  .nav-brand {
    display: block;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(218, 188, 153, 0.14);
  }

  /* ตัว <a> กินเต็มความกว้างเพื่อให้เส้นคั่นยาวเต็มลิ้นชัก
     ส่วนรูปโลโก้จัดกึ่งกลางด้วย margin-inline: auto */
  /* .brand-mark ตัวฐานถูกล็อกไว้ 44x44 สำหรับโลโก้บนแถบ header
     ต้องปลด height ด้วย ไม่งั้นรูปที่สูงกว่ากล่องจะล้นออกไปทับเส้นคั่นด้านล่าง */
  .nav-brand .brand-mark {
    display: block;
    width: 88px;
    height: auto;
    margin-inline: auto;
  }

  .nav-brand img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* --- ท้ายลิ้นชัก: ปุ่มจอง --- */
  .nav-cta {
    flex-direction: column;
    align-items: stretch;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(218, 188, 153, 0.14);
  }

  .nav-cta .btn {
    width: 100%;
  }

  /* --- ช่องทางติดต่อล่างสุดของลิ้นชัก ---
     margin-top: auto ดันลงไปติดขอบล่างเสมอ ไม่ว่าเมนูจะสั้นหรือยาว
     (.nav เป็น flex column อยู่แล้ว) */
  .nav-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;

    margin: 2rem 0 0;
    padding: 1.25rem 0 0;
    margin-top: auto;
    list-style: none;
    border-top: 1px solid rgba(218, 188, 153, 0.14);
  }

  .nav-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: var(--border-gold);
    background: var(--gold-a10);
    color: var(--color-gold);
    transition: border-color var(--transition), box-shadow var(--transition);
  }

  .nav-social a svg {
    width: 20px;
    height: 20px;
  }

  .nav-social a:focus-visible {
    border-color: var(--color-gold);
    box-shadow: var(--glow-gold);
  }

  /* --- Layout --- */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 3rem);
  }

  .hero-copy {
    text-align: center;
  }

  .hero-title,
  .hero-text {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-meta {
    justify-content: center;
    text-align: center;
  }

  .hero-meta-item {
    align-items: center;
  }

  .hero-visual {
    max-width: 460px;
    margin-inline: auto;
    order: -1;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .slider-slide {
    flex-basis: calc((100% - clamp(1rem, 2.2vw, 1.6rem)) / 2);
  }

  .portrait {
    max-width: 420px;
    margin-inline: auto;
  }

  /* วงโค้งไพ่ย่อลงตามจอ (ยังเป็นวงโค้งอยู่ จะเปลี่ยนเป็นสไลด์ที่ <= 768px) */

}

/* ==========================================================================
   <= 768px — mobile landscape / small tablet
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    /* ลดรัศมี blur บนมือถือ — ต้นทุนการวาดของ backdrop-filter แปรตามรัศมี
       หน้านี้มีชั้นกระจกราว 26 ชั้น ถ้าใช้ 20px เต็มบนเครื่องรุ่นเก่าจะเลื่อนกระตุก
       ลดเหลือ 12px ตายังอ่านว่าเป็นกระจกเหมือนเดิม */
    --glass-blur: blur(12px) saturate(150%);
    --glass-blur-strong: blur(18px) saturate(160%);
    --section-space: clamp(3rem, 11vw, 4.5rem);
    --radius-lg: 20px;
    --radius-xl: 22px;
  }

  /* แถบไพ่ประดับ: ตัดไพ่ริมสุด 2 ใบออก ไม่งั้นล้นความกว้างจอ */
  .topic-arc img:nth-child(1),
  .topic-arc img:nth-child(7) {
    display: none;
  }

  body {
    line-height: 1.75;
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .slider-slide {
    flex-basis: 100%;
  }

  .section-head {
    margin-bottom: 2rem;
  }

  /* Buttons go full width in key call-to-action areas */
  .btn-group--stack-mobile {
    flex-direction: column;
  }

  .btn-group--stack-mobile .btn {
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* --- ปุ่มกรองหมวด — แถวเดียวเลื่อนแนวนอน ---
     ตัดบรรทัดแบบเดิมกินพื้นที่ 3 แถว ดันสินค้าหลุดลงไปใต้จอ
     เปลี่ยนเป็นแถวเดียวปัดนิ้วดู เป็นรูปแบบที่คนคุ้นจากแอปช้อปปิ้งอยู่แล้ว
     และเพิ่มหมวดใหม่ในอนาคตได้เรื่อยๆ โดยความสูงไม่เปลี่ยน */
  .chip-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 0.5rem;

    /* ยืดให้ชนขอบจอ แล้วดันด้วย padding แทน
       ปุ่มตัวแรกกับตัวสุดท้ายจะได้ไม่ติดขอบตอนเลื่อนสุดทาง */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 0.25rem;

    /* scroll-snap-align: start จะเล็งขอบปุ่มชนขอบ scrollport ซึ่งอยู่ด้านในของ padding
       ทำให้เบราว์เซอร์เลื่อนกลบ padding ซ้ายทิ้ง ปุ่มแรกเลยไปติดขอบจอ
       scroll-padding บอกให้จุดหยุดของ snap ร่นเข้ามาเท่ากับ padding */
    scroll-padding-inline: var(--gutter);

    /* ซ่อนแถบเลื่อน แต่ยังปัดนิ้ว/เลื่อนด้วยล้อได้ปกติ */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .chip-group::-webkit-scrollbar { display: none; }

  .chip {
    flex: none;
    scroll-snap-align: start;
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
  }

  /* :hover ยกปุ่มขึ้น 2px ซึ่งบนมือถือค้างไว้หลังแตะ แล้วยังไปโดน overflow ตัดยอด
     จอสัมผัสไม่ต้องมีเอฟเฟกต์นี้อยู่แล้ว */
  .chip:hover {
    transform: none;
  }

  /* จุดเด่น 3 ข้อ — เรียงเป็น 2 คอลัมน์ ข้อสุดท้ายกินเต็มแถวแล้วอยู่กึ่งกลาง
     เรียงเป็นคอลัมน์เดียวจะยาวจนดันเนื้อหาข้างล่างหลุดจอไปหมด */
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1rem;
  }

  /* :nth-child(odd):last-child = ตกค้างอยู่คอลัมน์ซ้ายตัวเดียว
     ถ้าวันหลังเพิ่มเป็น 4 ข้อ กริดจะเต็มพอดีและกฎนี้ไม่ทำงานเอง */
  .hero-meta-item:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  .tarot-deck {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  /* --- ARC : มือถือเปลี่ยนจากวงโค้งเป็นสไลด์แนวนอนแบบ snap ---
     วงโค้งแคบเกินบนจอมือถือ ไพ่จะเล็กจนดูไม่ออก */





  /* คืนไพ่กลับเป็น flow ปกติ ไม่ต้องคำนวณวงโค้ง */

  /* ไม่มี hover จริงบนจอสัมผัส */



  .reading-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .reading-item-mark {
    width: 46px;
    height: 79px;
  }

  .horo-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .selector-grid {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  .modal-summary dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .modal-summary dt {
    margin-top: 0.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   <= 576px — mobile portrait
   ========================================================================== */
@media (max-width: 576px) {
  :root {
    --gutter: 1.15rem;
    --fs-body: 0.95rem;
  }

  /* จอแคบมาก เหลือไพ่ 3 ใบกลาง ไม่งั้นล้นขอบจอ */
  .topic-arc img:nth-child(1),
  .topic-arc img:nth-child(2),
  .topic-arc img:nth-child(6),
  .topic-arc img:nth-child(7) {
    display: none;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .card {
    padding: 1.25rem;
  }

  .card-icon {
    width: 50px;
    height: 50px;
  }

  .card-icon svg {
    width: 25px;
    height: 25px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .chip {
    padding: 0.6rem 1rem;
    font-size: 0.86rem;
  }

  .chip-group {
    gap: 0.5rem;
  }

  .tarot-deck {
    /* 3 คอลัมน์บนจอมือถือทำให้ไพ่เล็กเกินอ่านภาพไม่ออก — ให้ลดเหลือ 2 เองตามความกว้าง */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.55rem;
  }

  .selector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .horo-tabs {
    width: 100%;
  }

  .horo-tab {
    flex: 1;
    padding-inline: 0.6rem;
    font-size: 0.85rem;
    text-align: center;
  }

  .faq-question {
    padding: 1rem 1.1rem;
    font-size: 0.94rem;
  }

  .faq-answer-inner {
    padding: 0 1.1rem 1.1rem;
  }

  .lucky-row,
  .horo-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .btn {
    padding-inline: 1.35rem;
  }

  .quote::before {
    font-size: 3.5rem;
  }
}

/* ==========================================================================
   <= 380px — very small devices
   ========================================================================== */
@media (max-width: 380px) {
  .tarot-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-author {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Landscape phones — trim vertical padding
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    padding-top: calc(var(--header-height) + 2rem);
  }

  .nav {
    padding-top: 1rem;
  }
}

/* ==========================================================================
   Wide screens
   ========================================================================== */
@media (min-width: 1440px) {
  :root {
    --container-width: 1240px;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .nav-backdrop,
  .modal,
  .slider-nav,
  .btn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #222;
  }

  body::before {
    display: none;
  }

  .card,
  .reading-item,
  .horo-body {
    border: 1px solid #bbb;
    background: #fff;
  }

  h1, h2, h3, p, .card-text, .reading-item-text {
    color: #222;
  }
}