/* ThaiAudiophile Core Master CSS */
:root{
  --bg:#f7f6f4;
  --surface:#ffffff;
  --surface-alt:#efe6da;
  --border:#ddd0bf;
  --text:#1f2855;
  --muted:#666575;
  --eyebrow:#9a7c61;
  --cta:#7a6c60;
  --cta-hover:#6d5f54;
  --shadow:0 14px 32px rgba(31,40,85,.08);
  --shadow-strong:0 18px 40px rgba(31,40,85,.12);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai",Arial,sans-serif;
  line-height:1.65;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

.wrap{
  width:min(calc(100% - 32px), var(--max));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(247,246,244,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  font-weight:800;
  letter-spacing:.02em;
}
.brand span{color:var(--eyebrow)}

.top-nav .menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
}
.top-nav .menu a{
  padding:9px 12px;
  border-radius:999px;
  color:var(--muted);
}
.top-nav .menu a:hover{
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
}

.site-footer{
  padding:28px 0 40px;
}
.footer-inner{
  border-top:1px solid var(--border);
  padding-top:18px;
  color:var(--muted);
  font-size:.92rem;
}

.hero-section{
  padding:28px 0 10px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:22px;
  align-items:center;
}

.panel,
.mini-card,
.feature-main,
.feature-side,
.entry-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.hero-copy{padding:34px}
.hero-media{padding:16px}

.badge{
  display:inline-block;
  margin-bottom:14px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(154,124,97,.12);
  color:var(--eyebrow);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.badge-soft{
  margin-bottom:10px;
}

h1,h2,h3{
  margin:0;
  color:var(--text);
}
.hero-copy h1{
  font-size:clamp(2.35rem,4vw,4.25rem);
  line-height:1.02;
  letter-spacing:-.04em;
  margin-bottom:14px;
}
.hero-copy p,
.section-head p,
.mini-card p,
.feature-body p,
.entry-content{
  color:var(--muted);
}
.hero-copy p{
  margin:0 0 22px;
  max-width:620px;
  font-size:1.03rem;
}

.hero-actions,
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  font-weight:700;
  transition:.2s ease;
}
.btn-primary{
  background:var(--cta);
  color:#fff;
}
.btn-primary:hover{
  background:var(--cta-hover);
}
.btn-secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover{
  background:#f8f3ed;
  border-color:#cdb89f;
}

.content-section{
  padding:18px 0 10px;
}
.section-head{
  margin-bottom:18px;
}
.section-head h2{
  font-size:2rem;
  line-height:1.08;
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.section-head p{
  margin:0;
  max-width:760px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.mini-card{
  display:block;
  padding:12px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mini-card:hover,
.feature-main:hover,
.feature-side:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-strong);
  border-color:#ccb69d;
}
.mini-card img{
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:18px;
}
.mini-card h3{
  margin:12px 0 8px;
  font-size:1.25rem;
  line-height:1.16;
  letter-spacing:-.02em;
}
.mini-card p{
  margin:0;
  font-size:.95rem;
}

.featured-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.95fr);
  gap:22px;
}
.feature-stack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:22px;
}
.feature-main,
.feature-side{
  overflow:hidden;
}
.feature-main img{
  aspect-ratio:16 / 10;
  object-fit:cover;
}
.feature-side img{
  aspect-ratio:3 / 2;
  object-fit:cover;
}
.feature-body{
  padding:18px;
}
.feature-main h3{
  margin:0 0 10px;
  font-size:1.8rem;
  line-height:1.1;
  letter-spacing:-.03em;
}
.feature-side h3{
  margin:0 0 8px;
  font-size:1.14rem;
  line-height:1.18;
}
.feature-body p{
  margin:0;
}
.panel-alt{
  background:linear-gradient(180deg, #f3eadf 0%, #e2d6c6 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:34px 0;
  margin-top:18px;
}

.page-shell,
.single-post-page{
  padding:30px 0 50px;
}
.prose-area{
  max-width:840px;
}
.entry-card{
  padding:30px;
}
.entry-title{
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.08;
  letter-spacing:-.03em;
  margin-bottom:16px;
}
.featured-media{
  margin-bottom:20px;
}
.featured-media img{
  border-radius:22px;
}
.entry-header-block{
  margin-bottom:18px;
}
.entry-content{
  color:var(--text);
}
.entry-content p,
.entry-content li{
  color:var(--text);
}
.entry-content a{
  text-decoration:underline;
}

@media (max-width: 980px){
  .hero-grid,
  .featured-wrap{
    grid-template-columns:1fr;
  }
  .feature-stack{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
  }
  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .wrap{
    width:min(calc(100% - 24px), var(--max));
  }
  .top-nav{display:none}
  .hero-copy{padding:24px}
  .hero-copy h1{
    font-size:2.2rem;
  }
  .section-head h2{
    font-size:1.65rem;
  }
  .feature-stack,
  .grid-4,
  .grid-3{
    grid-template-columns:1fr;
  }
  .entry-card{
    padding:22px;
  }
}


/* =========================
   Affiliate / Full-width system
   ========================= */
.ta-rich-content > *:first-child{margin-top:0}
.ta-rich-content > *:last-child{margin-bottom:0}

.ta-fullwidth-page,
.ta-fullwidth-article,
.ta-fullwidth-content{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.ta-fullwidth-page{
  padding:30px 0 50px;
}

.ta-fullwidth-header{
  padding-top:0;
  padding-bottom:20px;
}

.ta-fullwidth-title{
  margin-bottom:0;
}

.ta-fullwidth-content .wp-block-post-content,
.ta-fullwidth-content .entry-content,
.ta-fullwidth-content .wp-block-group,
.ta-fullwidth-content .wp-block-columns,
.ta-fullwidth-content .alignwide,
.ta-fullwidth-content .alignfull{
  width:100%;
  max-width:none !important;
}

.ta-fullwidth-content .wp-block-group,
.ta-fullwidth-content .wp-block-columns{
  margin-top:0;
  margin-bottom:0;
}

.ta-fullwidth-content > *{
  max-width:none;
}

.ta-affiliate-landing .ta-affiliate-content{
  overflow:visible;
}

.ta-affiliate-landing .ta-affiliate-content > *:not(script):not(style){
  width:100%;
  max-width:none;
}

/* optional helper wrapper for HTML pages pasted into Gutenberg */
.ta-breakout,
.ta-affiliate-shell{
  width:100vw;
  max-width:none;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.ta-affiliate-shell{
  padding-left:24px;
  padding-right:24px;
}

.ta-affiliate-inner{
  width:min(100%, 1280px);
  margin:0 auto;
}

/* centered sticky CTA system */
.ta-sticky-cta,
.ta-sticky-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:120;
  display:flex;
  justify-content:center;
  padding:12px 18px;
  background:rgba(247,246,244,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
}

.ta-sticky-cta__inner,
.ta-sticky-bar__inner{
  width:min(100%, 820px);
  display:grid;
  grid-template-columns:repeat(2,minmax(220px, 320px));
  justify-content:center;
  gap:12px;
}

.ta-sticky-cta a,
.ta-sticky-bar a{
  min-height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  padding:0 16px;
}

.ta-sticky-cta a:first-child,
.ta-sticky-bar a:first-child{
  background:var(--cta);
  color:#fff;
}

.ta-sticky-cta a:last-child,
.ta-sticky-bar a:last-child{
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
}

/* reusable affiliate blocks */
.ta-section{
  padding:22px 0;
}

.ta-section--tight{
  padding:14px 0;
}

.ta-section--alt{
  background:linear-gradient(180deg, #f3eadf 0%, #e2d6c6 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.ta-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.ta-card--plain{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
}

.ta-grid-2,
.ta-grid-3,
.ta-grid-4{
  display:grid;
  gap:22px;
}

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

.ta-compare-table{
  overflow:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}

.ta-compare-table table{
  width:100%;
  min-width:700px;
  border-collapse:collapse;
}

.ta-compare-table th,
.ta-compare-table td{
  padding:12px 14px;
  border-bottom:1px solid #ece4d8;
  text-align:left;
  vertical-align:top;
}

.ta-compare-table th{
  background:#efe6da;
}

.ta-product-card{
  overflow:hidden;
}

.ta-product-card__media{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
}

.ta-product-card__body{
  padding:18px;
}

.ta-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ta-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#f7f2eb;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}

body.admin-bar .ta-sticky-cta,
body.admin-bar .ta-sticky-bar{
  bottom:0;
}

@media (max-width: 980px){
  .ta-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ta-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 782px){
  body.admin-bar .ta-sticky-cta,
  body.admin-bar .ta-sticky-bar{
    bottom:0;
  }
}

@media (max-width: 640px){
  .ta-affiliate-shell{
    padding-left:16px;
    padding-right:16px;
  }

  .ta-grid-2,
  .ta-grid-3,
  .ta-grid-4{
    grid-template-columns:1fr;
  }

  .ta-sticky-cta__inner,
  .ta-sticky-bar__inner{
    width:min(100%, 520px);
    grid-template-columns:1fr;
  }
}


/* singular full-width breakout helpers */
.ta-post-fullwidth-mode .ta-fullwidth-content,
.ta-page-fullwidth-mode .ta-fullwidth-content,
.ta-post-fullwidth-template .ta-fullwidth-content{
  overflow:visible;
}

.ta-fullwidth-content .uagb-is-root-container,
.ta-fullwidth-content .uagb-container-inner-blocks-wrap,
.ta-fullwidth-content .wp-block-uagb-container,
.ta-fullwidth-content .is-layout-constrained,
.ta-fullwidth-content .wp-block-group__inner-container,
.ta-fullwidth-content .entry-content > *{
  width:100%;
  max-width:none !important;
}

.ta-fullwidth-content .wp-block-uagb-container.alignfull,
.ta-fullwidth-content .alignfull,
.ta-fullwidth-content .alignwide{
  max-width:none !important;
}

.ta-fullwidth-featured-media{
  margin-bottom:20px;
}

@media (max-width: 640px){
  .ta-affiliate-shell{
    padding-left:12px;
    padding-right:12px;
  }
}