/* HostDrift Blog ↔ Laravel public visual bridge
   Loaded only on Blog/posts/standard archives/search. */

body.hd-blog-unified{
  --hd-blog-bg:#f7f7f5;
  --hd-blog-surface:#fff;
  --hd-blog-ink:#1d1d1f;
  --hd-blog-muted:#6e6e73;
  --hd-blog-line:rgba(29,29,31,.10);
  --hd-blog-accent:#f47721;
  --hd-blog-accent-strong:#e8640c;
  --hd-blog-accent-deep:#aa4300;
  --hd-blog-accent-soft:#fff0e5;
  --hd-blog-line-brand:rgba(244,119,33,.22);
  --hd-blog-dark:#171719;
  background:var(--hd-blog-bg);
  color:var(--hd-blog-ink);
  font-family:"Sukhumvit Set","Thonburi",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif;
  -webkit-font-smoothing:antialiased;
}

body.hd-blog-unified .hd-container{width:min(1240px,calc(100vw - 48px));max-width:none}
body.hd-blog-unified .site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,247,245,.86)!important;
  border-bottom:1px solid rgba(244,119,33,.10)!important;
  backdrop-filter:blur(22px) saturate(150%);
  box-shadow:none!important;
}
body.hd-blog-unified .header-inner{min-height:66px;gap:28px}
body.hd-blog-unified .brand-logo-img{width:42px!important;height:42px!important;object-fit:contain;border-radius:10px}
body.hd-blog-unified .brand-text>span{font-size:16px!important;font-weight:700;letter-spacing:-.025em}
body.hd-blog-unified .brand-text small{font-size:10px!important;color:var(--hd-blog-muted)!important}
body.hd-blog-unified .primary-nav .menu{display:flex;gap:7px;align-items:center}
body.hd-blog-unified .primary-nav a{
  padding:10px 12px!important;border-radius:999px!important;
  color:var(--hd-blog-ink)!important;font-size:13px!important;font-weight:650!important;
}
body.hd-blog-unified .primary-nav .current-menu-item>a,
body.hd-blog-unified .primary-nav a:hover{background:var(--hd-blog-accent-soft)!important;color:var(--hd-blog-accent-deep)!important}
body.hd-blog-unified .header-cta{
  min-height:42px!important;padding:0 17px!important;border-radius:999px!important;
  background:linear-gradient(135deg,var(--hd-blog-accent),var(--hd-blog-accent-strong))!important;color:#fff!important;border:0!important;box-shadow:0 10px 28px rgba(244,119,33,.18)!important;
  display:inline-flex!important;align-items:center!important;
}
.hd-blog-header-actions{display:flex;align-items:center;gap:8px}
.hd-blog-language ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.hd-blog-language li{list-style:none}
.hd-blog-language a{
  display:inline-flex;min-width:42px;min-height:42px;align-items:center;justify-content:center;
  border:1px solid var(--hd-blog-line-brand);border-radius:999px;background:rgba(255,255,255,.82);
  text-decoration:none;color:var(--hd-blog-ink);font-size:12px;font-weight:700;
}

.hd-blog-hero{padding:96px 0 70px;position:relative;overflow:hidden}
.hd-blog-hero:before{content:"";position:absolute;width:720px;height:720px;right:-280px;top:-420px;border-radius:50%;background:radial-gradient(circle,#ffe2cd 0,rgba(255,226,205,0) 70%)}
.hd-blog-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:end;position:relative}
.hd-blog-hero-copy .eyebrow,.hd-blog-list-heading .eyebrow{color:var(--hd-blog-accent)}
.hd-blog-hero h1{
  font-size:clamp(54px,6.4vw,92px)!important;line-height:1.0!important;
  letter-spacing:-.055em!important;margin:22px 0 18px!important;max-width:820px;
}
html[lang^="th"] .hd-blog-hero h1{letter-spacing:-.025em!important;line-height:1.08!important}
.hd-blog-hero-copy>p{font-size:clamp(18px,1.7vw,23px);line-height:1.55;color:var(--hd-blog-muted);max-width:780px}
.hd-blog-search-card{background:#fff;border:1px solid var(--hd-blog-line);border-radius:28px;padding:30px;box-shadow:0 24px 70px rgba(20,20,20,.06)}
.hd-blog-search-card small{font-size:10px;letter-spacing:.14em;color:var(--hd-blog-accent);font-weight:800}
.hd-blog-search-card h2{font-size:30px!important;line-height:1.08!important;letter-spacing:-.04em!important;margin:12px 0 22px!important}
.hd-blog-search-card .search-form{display:flex;gap:8px}
.hd-blog-search-card input[type=search]{min-width:0;flex:1;border:1px solid var(--hd-blog-line)!important;border-radius:999px!important;padding:12px 16px!important;background:#f7f7f5!important}
.hd-blog-search-card .search-submit{border:0!important;border-radius:999px!important;background:linear-gradient(135deg,var(--hd-blog-accent),var(--hd-blog-accent-strong))!important;color:#fff!important;padding:0 18px!important;font-weight:700!important}

.hd-blog-category-dock{position:relative;z-index:3;padding-bottom:18px}
.hd-blog-category-row{display:flex;gap:8px;overflow:auto;padding:3px 0 10px;scrollbar-width:none}
.hd-blog-category-row::-webkit-scrollbar{display:none}
.hd-blog-chip{flex:0 0 auto;padding:9px 14px;border:1px solid var(--hd-blog-line);border-radius:999px;background:#fff;text-decoration:none;font-size:12px;font-weight:700;color:#555}
.hd-blog-chip.is-active,.hd-blog-chip:hover{background:var(--hd-blog-accent);color:#fff;border-color:var(--hd-blog-accent)}

.hd-blog-stream{padding-top:52px!important}
.hd-blog-feature-grid{display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:1fr 1fr;gap:16px}
.hd-blog-feature-card{
  min-height:300px;display:grid;grid-template-columns:.9fr 1.1fr;
  overflow:hidden;border:1px solid var(--hd-blog-line);border-radius:28px;background:#fff;
}
.hd-blog-feature-card.is-primary{grid-row:1/3;grid-template-columns:1fr;grid-template-rows:1.1fr .9fr}
.hd-blog-feature-media{display:block;background:#e9e9e5;overflow:hidden;text-decoration:none;min-height:210px}
.hd-blog-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hd-blog-feature-card:hover .hd-blog-feature-media img{transform:scale(1.025)}
.hd-blog-feature-media>span{display:grid;place-items:center;height:100%;font-size:40px;font-weight:800;color:#aaa}
.hd-blog-feature-body{padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.hd-blog-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:#777}
.hd-blog-meta>*+*:before{content:"•";margin-right:10px;color:var(--hd-blog-accent)}
.hd-blog-feature-body h2{font-size:clamp(25px,2.8vw,42px)!important;line-height:1.08!important;letter-spacing:-.04em!important;margin:18px 0 12px!important}
.hd-blog-feature-card:not(.is-primary) .hd-blog-feature-body h2{font-size:22px!important}
.hd-blog-feature-body h2 a,.hd-blog-row h3 a{text-decoration:none;color:inherit}
.hd-blog-feature-body p{color:var(--hd-blog-muted);line-height:1.6}
.hd-blog-read{margin-top:auto;text-decoration:none;font-size:12px;font-weight:750}
.hd-blog-read span{color:var(--hd-blog-accent)}

.hd-blog-list-heading{margin:74px 0 26px}
.hd-blog-list-heading h2{font-size:clamp(34px,4vw,56px)!important;letter-spacing:-.045em!important;margin:12px 0 0!important}
.hd-blog-list{border-top:1px solid var(--hd-blog-line)}
.hd-blog-row{display:grid;grid-template-columns:220px 1fr auto;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--hd-blog-line)}
.hd-blog-row-media{display:block;height:145px;border-radius:20px;overflow:hidden;background:#e9e9e5;text-decoration:none}
.hd-blog-row-media img{width:100%;height:100%;object-fit:cover}
.hd-blog-row-media>span{display:grid;height:100%;place-items:center;color:#aaa;font-weight:800;font-size:26px}
.hd-blog-row h3{font-size:clamp(21px,2.2vw,31px)!important;line-height:1.15!important;letter-spacing:-.03em!important;margin:9px 0!important}
html[lang^="th"] .hd-blog-row h3{line-height:1.32!important;letter-spacing:-.01em!important}
.hd-blog-row p{color:var(--hd-blog-muted);line-height:1.55;margin:0}
.hd-blog-row-arrow{width:46px;height:46px;border:1px solid var(--hd-blog-line);border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:18px}
.hd-blog-row:hover .hd-blog-row-arrow{background:var(--hd-blog-accent);color:#fff}
.hd-blog-pagination{padding-top:32px}
.hd-blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--hd-blog-line);border-radius:999px;margin-right:5px;text-decoration:none;background:#fff}
.hd-blog-pagination .current{background:var(--hd-blog-accent);color:#fff;border-color:var(--hd-blog-accent)}

/* Single posts */
body.hd-blog-unified.single-post .single-hero{padding:86px 0 48px!important}
body.hd-blog-unified.single-post .narrow-content{max-width:900px!important}
body.hd-blog-unified.single-post .single-post-title{
  font-size:clamp(44px,5.8vw,78px)!important;line-height:1.03!important;letter-spacing:-.05em!important;
}
html[lang^="th"] body.hd-blog-unified.single-post .single-post-title{line-height:1.15!important;letter-spacing:-.02em!important}
body.hd-blog-unified.single-post .single-hero p{font-size:19px!important;line-height:1.6!important;color:var(--hd-blog-muted)!important}
body.hd-blog-unified.single-post .single-content-section{padding-top:28px!important}
body.hd-blog-unified.single-post .single-featured-image{border-radius:28px!important;overflow:hidden!important;box-shadow:0 24px 70px rgba(20,20,20,.08)!important}
body.hd-blog-unified.single-post .entry-content{
  background:#fff;border:1px solid var(--hd-blog-line);border-radius:30px;
  padding:clamp(28px,5vw,62px)!important;margin-top:28px!important;
  font-size:17px!important;line-height:1.82!important;color:#2b2b2d!important;
}
body.hd-blog-unified.single-post .entry-content h2{font-size:clamp(29px,3.5vw,42px)!important;line-height:1.18!important;letter-spacing:-.03em!important;margin-top:1.7em!important}
body.hd-blog-unified.single-post .entry-content h3{font-size:24px!important;line-height:1.3!important;margin-top:1.5em!important}
body.hd-blog-unified.single-post .entry-content img{border-radius:18px}
body.hd-blog-unified.single-post .entry-content a{color:#a74e16;text-decoration-thickness:1px;text-underline-offset:3px}
body.hd-blog-unified.single-post .single-post-tags,
body.hd-blog-unified.single-post .single-related-content{margin-top:54px!important}
body.hd-blog-unified.single-post .single-related-grid .post-card{border-radius:24px!important;background:#fff!important;border:1px solid var(--hd-blog-line)!important;box-shadow:none!important}

/* Archive/search use the same visual language */
body.hd-blog-unified .compact-hero{padding:78px 0 42px!important}
body.hd-blog-unified .compact-hero h1{font-size:clamp(42px,5vw,70px)!important;letter-spacing:-.045em!important}
body.hd-blog-unified .archive-section{padding-top:30px!important}
body.hd-blog-unified .archive-grid .post-card{border-radius:24px!important;background:#fff!important;border:1px solid var(--hd-blog-line)!important;box-shadow:none!important}

/* Footer */
body.hd-blog-unified .site-footer{background:#111113!important;color:#fff!important;padding:72px 0 24px!important}
body.hd-blog-unified .footer-grid{grid-template-columns:1.05fr repeat(3,.65fr)!important;gap:42px!important}
body.hd-blog-unified .footer-brand p{color:#aaaab0!important;line-height:1.65!important}
body.hd-blog-unified .footer-col h3{font-size:12px!important;color:#fff!important}
body.hd-blog-unified .footer-col a{color:#9d9da3!important}
body.hd-blog-unified .footer-col a:hover{color:#fff!important}
body.hd-blog-unified .footer-glow{display:none!important}
body.hd-blog-unified .footer-bottom{border-top:1px solid rgba(255,255,255,.1)!important}

@media(max-width:1000px){
  body.hd-blog-unified .hd-container{width:min(100% - 32px,900px)}
  .hd-blog-feature-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .hd-blog-feature-card.is-primary{grid-column:1/-1;grid-row:auto}
  .hd-blog-feature-card:not(.is-primary){grid-template-columns:1fr}
  .hd-blog-feature-card:not(.is-primary) .hd-blog-feature-media{height:220px}
  body.hd-blog-unified .footer-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:760px){
  body.hd-blog-unified .hd-container{width:calc(100vw - 28px)}
  body.hd-blog-unified .header-inner{grid-template-columns:1fr auto!important}
  .hd-blog-header-actions{position:absolute;right:58px}
  .hd-blog-header-actions .header-cta{display:none!important}
  .hd-blog-language ul{margin:0}
  .hd-blog-hero{padding:62px 0 42px}
  .hd-blog-hero-grid{grid-template-columns:1fr;gap:28px}
  .hd-blog-hero h1{font-size:clamp(44px,13vw,64px)!important}
  .hd-blog-feature-grid{grid-template-columns:1fr}
  .hd-blog-feature-card.is-primary,.hd-blog-feature-card{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto}
  .hd-blog-feature-media{height:230px}
  .hd-blog-row{grid-template-columns:110px 1fr;gap:16px}
  .hd-blog-row-media{height:92px;border-radius:14px}
  .hd-blog-row-arrow{display:none}
  .hd-blog-row p{display:none}
  body.hd-blog-unified.single-post .entry-content{padding:26px 20px!important;border-radius:22px}
  body.hd-blog-unified .footer-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  body.hd-blog-unified *,body.hd-blog-unified *:before,body.hd-blog-unified *:after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important
  }
}

/* HostDrift Brand UI 0.2.1 — force menu/header geometry to match Laravel */
body.hd-blog-unified,
body.hd-blog-unified button,
body.hd-blog-unified input,
body.hd-blog-unified select,
body.hd-blog-unified textarea{
  font-family:"Sukhumvit Set","Thonburi",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif!important;
}
body.hd-blog-unified .header-inner{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:28px!important;
  min-height:auto!important;
}
body.hd-blog-unified .brand{justify-self:start!important;min-width:max-content}
body.hd-blog-unified .primary-nav{justify-self:center!important;margin:0!important}
body.hd-blog-unified .primary-nav .menu{justify-content:center!important;margin:0!important;padding:0!important}
body.hd-blog-unified .hd-blog-header-actions{justify-self:end!important}
body.hd-blog-unified .primary-nav a{line-height:1.2!important}
body.hd-blog-unified .hd-blog-language a{color:var(--hd-blog-accent-deep)!important}
body.hd-blog-unified .hd-blog-search-card,
body.hd-blog-unified .hd-blog-feature-card,
body.hd-blog-unified .hd-blog-row-media,
body.hd-blog-unified.single-post .entry-content,
body.hd-blog-unified.single-post .single-related-grid .post-card{
  border-color:var(--hd-blog-line-brand)!important;
}
body.hd-blog-unified .hd-blog-search-card{
  box-shadow:0 20px 58px rgba(244,119,33,.06)!important;
}
body.hd-blog-unified .hd-blog-chip{
  border-color:var(--hd-blog-line-brand)!important;
}
body.hd-blog-unified .hd-blog-chip.is-active,
body.hd-blog-unified .hd-blog-chip:hover{
  background:var(--hd-blog-accent)!important;
  border-color:var(--hd-blog-accent)!important;
  color:#fff!important;
}
body.hd-blog-unified .hd-blog-row-arrow{
  border-color:var(--hd-blog-line-brand)!important;
}
body.hd-blog-unified .hd-blog-row:hover .hd-blog-row-arrow{
  background:var(--hd-blog-accent)!important;color:#fff!important;
}
body.hd-blog-unified .site-footer{border-top:3px solid var(--hd-blog-accent)!important}
body.hd-blog-unified .footer-col a:hover{color:#ffad72!important}
@media(max-width:760px){
  body.hd-blog-unified .header-inner{grid-template-columns:1fr auto!important;gap:10px!important}
  body.hd-blog-unified .primary-nav{
    justify-self:stretch!important;
    position:fixed!important;
    left:14px!important;right:14px!important;top:70px!important;
  }
  body.hd-blog-unified .hd-blog-header-actions{position:absolute!important;right:58px!important}
}

/* HostDrift Locale + Header Parity 0.2.2 */
body.hd-blog-unified,
body.hd-blog-unified button,
body.hd-blog-unified input,
body.hd-blog-unified select,
body.hd-blog-unified textarea{
  font-family:"Sukhumvit Set","Thonburi",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif!important;
}

body.hd-blog-unified .site-header{
  padding:12px 0!important;
  min-height:67px!important;
}

body.hd-blog-unified .header-inner{
  width:min(1240px,calc(100vw - 48px))!important;
  max-width:none!important;
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:28px!important;
  padding:0!important;
}

body.hd-blog-unified .brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  justify-self:start!important;
  min-width:max-content!important;
  text-decoration:none!important;
}

body.hd-blog-unified .brand-logo{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
}

body.hd-blog-unified .brand-logo img,
body.hd-blog-unified .brand-logo svg{
  display:block!important;
  width:42px!important;
  height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  object-fit:contain!important;
  margin:0!important;
}

body.hd-blog-unified .brand-text{
  display:grid!important;
  align-items:center!important;
  line-height:1.05!important;
  margin:0!important;
}

body.hd-blog-unified .brand-text>span{
  font-size:16px!important;
  line-height:1.05!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
}

body.hd-blog-unified .brand-text small{
  display:block!important;
  font-size:10px!important;
  line-height:1.05!important;
  margin-top:4px!important;
}

body.hd-blog-unified .primary-nav{
  justify-self:center!important;
  margin:0!important;
  padding:0!important;
}

body.hd-blog-unified .primary-nav .menu{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
}

body.hd-blog-unified .primary-nav .menu>li{
  display:block!important;
  margin:0!important;
  padding:0!important;
}

body.hd-blog-unified .primary-nav a{
  display:block!important;
  padding:10px 12px!important;
  border-radius:999px!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:650!important;
  white-space:nowrap!important;
}

body.hd-blog-unified .hd-blog-header-actions{
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  margin:0!important;
}

body.hd-blog-unified .hd-blog-language-switch{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0 12px!important;
  border:1px solid var(--hd-blog-line-brand)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.82)!important;
  color:var(--hd-blog-accent-deep)!important;
  text-decoration:none!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:700!important;
}

body.hd-blog-unified .hd-blog-language-switch:hover{
  background:var(--hd-blog-accent-soft)!important;
}

body.hd-blog-unified .header-cta{
  min-height:42px!important;
  padding:0 17px!important;
  line-height:42px!important;
  font-size:13px!important;
  white-space:nowrap!important;
}

body.hd-blog-unified .hd-blog-search-form{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
}

/* Prevent subtle typography jump caused by older theme rules. */
body.hd-blog-unified h1,
body.hd-blog-unified h2,
body.hd-blog-unified h3,
body.hd-blog-unified p,
body.hd-blog-unified a{
  font-family:inherit!important;
}

@media(max-width:820px){
  body.hd-blog-unified .header-inner{
    width:calc(100vw - 28px)!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
  }

  body.hd-blog-unified .brand-text small{display:none!important}

  body.hd-blog-unified .hd-blog-header-actions{
    position:absolute!important;
    right:58px!important;
  }

  body.hd-blog-unified .hd-blog-header-actions .header-cta{
    display:none!important;
  }

  body.hd-blog-unified .primary-nav{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    top:70px!important;
    justify-self:stretch!important;
  }
}

/* HostDrift 0.2.6 header CTA contrast */
body.hd-blog-unified .header-cta,
body.hd-blog-unified a.header-cta{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}