/* ═══════════════════════════════════════════════════════════
   stone-wiki.css — สารานุกรมหิน /stones (landing โฆษณาที่สอง) + หน้าหินรายชนิด
   สเปค: REDESIGN-NOTES §3 · กริด 4 คอลัมน์ · 7 ส่วนเป็นแถวคั่นเส้น ไม่มีกล่องซ้อน
   ═══════════════════════════════════════════════════════════ */

/* ─── Index ────────────────────────────────────────────────── */
.sw-head { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: end; padding: 88px 0 40px; }
.sw-title { display: flex; align-items: baseline; gap: 20px; }
.sw-title h1 { margin: 0; font-size: 58px; line-height: 1.2; font-weight: var(--lt-fw-light); letter-spacing: var(--lt-ls-tight); }
.sw-title .lt-latin { font-size: 22px; color: var(--lt-ink-3); }
.sw-lead { margin: 20px 0 0; font-size: var(--lt-fs-body-lg); line-height: var(--lt-lh-body); color: var(--lt-ink-2); max-width: 30em; }
.sw-search { display: flex; align-items: center; gap: 10px; height: var(--lt-control-h); padding: 0 14px; border: var(--lt-rule-strong); border-radius: var(--lt-r-1); color: var(--lt-ink-3); background: var(--lt-white); }
.sw-search:focus-within { border-color: var(--lt-sage-700); box-shadow: 0 0 0 3px var(--lt-sage-50); }
.sw-search svg { flex: none; }
.sw-search input { all: unset; flex: 1; min-width: 0; font-family: var(--lt-font); font-size: 16px; font-weight: var(--lt-fw-light); color: var(--lt-ink); }
.sw-search input::placeholder { color: var(--lt-ink-3); }

.sw-filters { display: flex; gap: 32px; border-bottom: var(--lt-rule); margin-bottom: 48px; }
.sw-filter { all: unset; cursor: pointer; position: relative; display: flex; align-items: center; gap: 8px; height: 52px; font-family: var(--lt-font); font-size: 15px; color: var(--lt-ink-3); white-space: nowrap; }
.sw-filter:hover { color: var(--lt-ink); }
.sw-filter.is-active { color: var(--lt-ink); }
.sw-filter.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--lt-ink); }
.sw-filter .lt-latin { font-size: 14px; color: var(--lt-ink-3); }
.sw-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sw-dot--love { background: #D28AA0; }
.sw-dot--wood { background: var(--lt-el-wood); } .sw-dot--fire { background: var(--lt-el-fire); } .sw-dot--earth { background: var(--lt-el-earth); } .sw-dot--metal { background: var(--lt-el-metal); } .sw-dot--water { background: var(--lt-el-water); }

.sw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; }
.sw-card { display: flex; flex-direction: column; gap: 14px; color: var(--lt-ink); text-decoration: none; min-width: 0; }
.sw-card[hidden] { display: none; }
.sw-card__media { aspect-ratio: 4/5; background: var(--lt-wash); position: relative; overflow: hidden; }
.sw-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-card__media--empty { display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.sw-card__media--empty .lt-latin { font-size: 26px; color: var(--lt-ink-3); }
.sw-card__text { display: flex; flex-direction: column; gap: 2px; }
.sw-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sw-card__th { font-size: 18px; font-weight: var(--lt-fw-medium); line-height: 1.4; }
.sw-card__el { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lt-ink-2); flex: none; }
.sw-card__en { font-size: 15px; color: var(--lt-ink-3); }
.sw-card__desc { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--lt-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-card:hover .sw-card__th { color: var(--lt-sage-700); }
.sw-empty { font-size: 16px; color: var(--lt-ink-3); padding: 48px 0; }
.sw-empty[hidden] { display: none; }

.sw-main { padding-bottom: var(--lt-section); }
.sw-cta { margin-top: 112px; border-top: var(--lt-rule); padding-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.sw-cta h2 { margin: 0; font-size: 28px; font-weight: var(--lt-fw-regular); line-height: 1.4; }
.sw-cta p { margin: 6px 0 0; font-size: 16px; color: var(--lt-ink-2); }
.sw-cta .btn { flex: none; }

@media (max-width: 1024px) {
    .sw-head { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; }
    .sw-title h1 { font-size: var(--lt-fs-h1); }
    .sw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
}
@media (max-width: 760px) {
    .sw-head { padding: 32px 0 20px; gap: 8px; }
    .sw-title { gap: 12px; }
    .sw-title .lt-latin { font-size: 17px; }
    .sw-lead { margin-top: 8px; font-size: 15px; }
    .sw-search { margin-top: 20px; }
    .sw-filters { gap: 24px; overflow-x: auto; scrollbar-width: none; margin: 8px calc(-1 * var(--lt-page-pad)) 24px; padding: 0 var(--lt-page-pad); }
    .sw-filters::-webkit-scrollbar { display: none; }
    .sw-filter { flex: none; height: 48px; }
    .sw-grid { grid-template-columns: 1fr 1fr; gap: 32px 12px; }
    .sw-card { gap: 10px; }
    .sw-card__top { flex-direction: column; gap: 2px; }
    .sw-card__th { font-size: 16px; }
    .sw-card__desc { display: none; }
    .sw-cta { margin-top: 64px; padding-top: 28px; flex-direction: column; align-items: stretch; gap: 16px; }
    .sw-cta h2 { font-size: 22px; }
}

/* ─── Detail ───────────────────────────────────────────────── */
.sd-crumb { padding: 28px 0 0; font-size: 14px; color: var(--lt-ink-3); display: flex; gap: 10px; }
.sd-crumb a { color: var(--lt-ink-3); }
.sd-crumb a:hover { color: var(--lt-ink); }
.sd-crumb span:last-child { color: var(--lt-ink); }

.sd-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; padding: 40px 0 112px; align-items: start; }
.sd-hero__media { aspect-ratio: 4/5; background: var(--lt-wash); overflow: hidden; }
.sd-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-hero__media--empty { display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--lt-ink-3); }
.sd-hero__text { display: flex; flex-direction: column; padding-top: 24px; }
.sd-el { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lt-ink-2); }
.sd-el .sw-dot { width: 8px; height: 8px; }
.sd-hero__text h1 { margin: 16px 0 0; font-size: 64px; line-height: 1.15; font-weight: var(--lt-fw-light); letter-spacing: var(--lt-ls-tight); }
.sd-hero__latin { font-size: 28px; color: var(--lt-ink-3); margin-top: 4px; }
.sd-hero__tagline { margin: 28px 0 0; font-size: var(--lt-fs-body-lg); line-height: var(--lt-lh-body); color: var(--lt-ink-2); }
.sd-toc { margin-top: 40px; border-top: var(--lt-rule); }
.sd-toc a { display: flex; gap: 20px; align-items: baseline; padding: 11px 0; border-bottom: var(--lt-rule); color: var(--lt-ink); }
.sd-toc a:hover { color: var(--lt-sage-700); }
.sd-toc .lt-num { color: var(--lt-ink-3); width: 20px; font-size: 15px; }
.sd-toc span:last-child { font-size: 15px; font-weight: var(--lt-fw-light); }
.sd-hero__actions { display: flex; gap: 24px; align-items: center; margin-top: 32px; flex-wrap: wrap; }

.sd-row { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; border-top: var(--lt-rule-ink); padding: 48px 0 96px; scroll-margin-top: calc(var(--lt-header-h) + 16px); }
.sd-row__head .lt-num { font-size: 20px; }
.sd-row__head h2 { margin: 8px 0 0; font-size: 28px; line-height: 1.4; font-weight: var(--lt-fw-regular); }

.sd-powers { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
.sd-powers h3 { margin: 0 0 10px; font-size: 19px; font-weight: var(--lt-fw-medium); line-height: 1.5; }
.sd-powers p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--lt-ink-2); }

.sd-bazi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sd-bazi__text { margin: 0; font-size: 17px; line-height: 1.8; }
.sd-bazi__list { list-style: none; padding: 0; margin: 24px 0 0; border-top: var(--lt-rule); }
.sd-bazi__list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: var(--lt-rule); font-size: 16px; font-weight: var(--lt-fw-light); }
.sd-bazi__list .sw-dot { width: 6px; height: 6px; transform: translateY(-2px); }
.sd-bazi__cta { background: var(--lt-sage-50); border-radius: var(--lt-r-2); padding: 28px; display: flex; flex-direction: column; gap: 12px; }   /* แถบเขียวเดียวของหน้า */
.sd-bazi__cta-title { font-size: 22px; font-weight: var(--lt-fw-regular); line-height: 1.45; }
.sd-bazi__cta p { margin: 0; font-size: 15px; color: var(--lt-ink-2); }
.sd-bazi__cta .btn { margin-top: 8px; }

.sd-facts { display: flex; flex-direction: column; }
.sd-fact { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: var(--lt-rule); }
.sd-fact:first-child { padding-top: 0; }
.sd-fact .lt-num { color: var(--lt-ink-3); font-size: 17px; }
.sd-fact h3 { margin: 0 0 8px; font-size: 19px; font-weight: var(--lt-fw-medium); line-height: 1.5; }
.sd-fact p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--lt-ink-2); max-width: 40em; }

.sd-care { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.sd-care__head { font-size: 15px; font-weight: var(--lt-fw-medium); padding-bottom: 12px; border-bottom: var(--lt-rule-ink); }
.sd-care p { margin: 0; padding: 14px 0; border-bottom: var(--lt-rule); font-size: 16px; line-height: 1.7; }

.sd-faq { border-top: var(--lt-rule); }
.sd-faq details { border-bottom: var(--lt-rule); }
.sd-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 17px; font-weight: var(--lt-fw-regular); color: var(--lt-ink); }
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary::after { content: '+'; font-family: var(--lt-font-latin); font-size: 22px; color: var(--lt-ink-3); flex: none; }
.sd-faq details[open] summary::after { content: '−'; }
.sd-faq details p { margin: 0; padding: 0 48px 24px 0; font-size: 16px; line-height: 1.75; color: var(--lt-ink-2); }

.sd-shop { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 32px; }
.sd-shop__right { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.sd-shop__right p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--lt-ink-2); max-width: 30em; }
.sd-pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sd-piece { display: flex; flex-direction: column; gap: 10px; color: var(--lt-ink); }
.sd-piece img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--lt-wash); }
.sd-piece span { font-size: 15px; }
.sd-piece:hover span { color: var(--lt-sage-700); }
.sd-note { margin: 24px 0 0; font-size: 14px; color: var(--lt-ink-3); }

.sd-related { border-top: var(--lt-rule-ink); margin-top: 96px; padding-top: 48px; }
.sd-related__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; }
.sd-related__head > div { display: flex; gap: 20px; align-items: baseline; }
.sd-related__head h2 { margin: 0; font-size: 28px; line-height: 1.4; font-weight: var(--lt-fw-regular); }
.sd-related__head .lt-num { font-size: 20px; }
.sd-related .sw-grid { gap: 24px; }

@media (max-width: 1024px) {
    .sd-hero { gap: 40px; }
    .sd-hero__text h1 { font-size: 48px; }
    .sd-row, .sd-shop { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
    .sd-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .sd-crumb { padding-top: 20px; }
    .sd-hero { grid-template-columns: 1fr; gap: 24px; padding: 20px 0 64px; }
    .sd-hero__media { margin: 0 calc(-1 * var(--lt-page-pad)); }
    .sd-hero__text { padding-top: 0; }
    .sd-hero__text h1 { font-size: var(--lt-fs-h1); margin-top: 10px; }
    .sd-hero__latin { font-size: 20px; }
    .sd-hero__tagline { margin-top: 16px; font-size: var(--lt-fs-body); }
    .sd-toc { margin-top: 28px; }
    .sd-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 56px; }
    .sd-row__head h2 { font-size: 24px; }
    .sd-row__head h2 br { display: none; }
    .sd-powers { grid-template-columns: 1fr; gap: 28px; }
    .sd-bazi { grid-template-columns: 1fr; gap: 28px; }
    .sd-care { grid-template-columns: 1fr; gap: 32px; }
    .sd-shop { grid-template-columns: 1fr; gap: 16px; align-items: start; }
    .sd-shop__right { flex-direction: column; align-items: stretch; gap: 16px; }
    .sd-related { margin-top: 56px; padding-top: 32px; }
    .sd-related .sw-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
}