/* Inner marketing pages (guide / blog) — share homepage chrome look */
.inner-section{
  padding-top:calc(32px + 72px + 28px); /* trial banner + fixed nav + gap */
  padding-bottom:calc(var(--py) + 24px);
  content-visibility:visible !important;
  contain-intrinsic-size:auto !important;
}
.container-wide{
  max-width:min(1240px,100%);
}
.inner-article{
  max-width:min(1040px,100%);
  margin:0 auto;
  background:rgba(22,22,27,.72);
  border:1px solid var(--border);
  border-radius:16px;
  padding:clamp(22px,4vw,40px);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.inner-article.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--ease,cubic-bezier(.25,.1,.25,1)),transform .55s var(--ease,cubic-bezier(.25,.1,.25,1));
}
.inner-article.reveal.visible,
.inner-article.reveal.is-ready{
  opacity:1;
  transform:none;
}
.inner-article h1{
  font-size:clamp(1.65rem,2.6vw,2.15rem);
  line-height:1.25;
  margin:0 0 12px;
}
.inner-article .sub,
.inner-article .lede{
  color:var(--text-2);
  margin-bottom:18px;
  line-height:1.7;
  max-width:68ch;
}
.inner-article h2{
  margin-top:28px;
  font-size:1.22rem;
  color:var(--text);
}
.inner-article h3{
  margin-top:18px;
  font-size:1rem;
  color:var(--accent);
}
.inner-article p,
.inner-article li{
  margin-top:10px;
  line-height:1.8;
  color:#d6d6dc;
}
.inner-article ul,
.inner-article ol{padding-left:1.25rem;margin-top:10px}
.inner-article ul{list-style:disc}
.inner-article ol{list-style:decimal}
.inner-article a{color:var(--accent)}
.inner-article a:hover{text-decoration:underline}
.inner-article .callout,
.inner-article .case{
  margin-top:16px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(90,181,173,.08);
  border-left:3px solid var(--accent);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.inner-article .callout:hover,
.inner-article .case:hover{
  border-color:rgba(90,181,173,.28);
}
.inner-article .btn,
.inner-article a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:22px;
  margin-right:10px;
  padding:12px 18px;
  border-radius:50px;
  background:var(--accent);
  color:#0f0f12;
  font-weight:700;
  text-decoration:none;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.inner-article a.btn:hover{
  opacity:.92;
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(90,181,173,.25);
}
.inner-links{margin-top:22px;color:var(--text-2);font-size:.92rem}
.nav-links a[aria-current="page"]{color:var(--accent)}

/* Guide picker (top of guide articles) */
.page-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 22px;
}
.page-picker a{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text) !important;
  font-size:.86rem;
  font-weight:600;
  text-decoration:none !important;
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.page-picker a:hover{
  border-color:rgba(90,181,173,.4);
  color:var(--accent) !important;
  transform:translateY(-1px);
}
.page-picker a.is-current{
  background:rgba(90,181,173,.16);
  border-color:rgba(90,181,173,.55);
  color:var(--accent) !important;
}

/* Horizontal article strip (blog / festival articles) */
.article-strip-wrap{margin:0 0 22px}
.article-strip-label{
  margin:0 0 10px !important;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-2);
}
.article-strip{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:4px 2px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.article-strip .guide-card,
.article-strip .strip-card{
  flex:0 0 min(280px,78vw);
  scroll-snap-align:start;
  margin:0;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.article-strip .guide-card:hover,
.article-strip .strip-card:hover{
  transform:translateY(-2px);
}

/* Reuse guide hub cards inside inner pages */
.inner-article .guide-hub{display:grid;gap:12px;margin-top:18px}
@media(min-width:720px){.inner-article .guide-hub{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.inner-article .guide-hub{grid-template-columns:repeat(3,1fr)}}
.inner-article .guide-card{
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  text-decoration:none;
  color:inherit;
  background:rgba(90,181,173,.05);
  transition:border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.inner-article .guide-card:hover{
  border-color:rgba(90,181,173,.4);
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.inner-article .guide-cat,
.inner-article .guide-badge{
  display:inline-block;
  font-size:.75rem;
  color:var(--text-2);
  margin-right:8px;
  margin-bottom:6px;
}
.inner-article .guide-badge{color:var(--accent);font-weight:700}
.inner-article .guide-card h2,
.inner-article .guide-card h3{font-size:1.05rem;margin:0;color:var(--text)}
.inner-article .guide-card p{margin-top:8px;font-size:.92rem;color:#d6d6dc}

.inner-article figure.article-media{
  margin:18px 0 8px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
}
.inner-article figure.article-media img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
}
.inner-article figcaption{
  padding:10px 12px 12px;
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-2);
}
.inner-article table.facts{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  font-size:.92rem;
}
.inner-article table.facts th,
.inner-article table.facts td{
  border:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  color:#d6d6dc;
}
.inner-article table.facts th{
  background:rgba(90,181,173,.1);
  color:var(--text);
  font-weight:600;
  width:28%;
}
.inner-article table.facts thead th{width:auto}
.inner-article .note{
  margin-top:12px;
  font-size:.88rem;
  color:var(--text-2);
}
.inner-article .media-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
}
@media(min-width:640px){
  .inner-article .media-grid{grid-template-columns:1fr 1fr}
}
.inner-article .media-grid figure.article-media{margin:0}

@media (prefers-reduced-motion:reduce){
  .inner-article,
  .inner-article .guide-card,
  .inner-article a.btn,
  .page-picker a{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* —— Blog / Guide layout panels —— */
.blog-layout,
.guide-layout{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.blog-panel,
.guide-panel{
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(22,22,27,.55);
  padding:clamp(18px,3vw,28px);
}
.blog-panel--intro,
.guide-panel--intro{
  background:rgba(90,181,173,.07);
  border-color:rgba(90,181,173,.22);
}
.blog-panel--latest{
  background:linear-gradient(165deg,rgba(90,181,173,.12),rgba(22,22,27,.78) 42%);
  border-color:rgba(90,181,173,.35);
  box-shadow:0 0 0 1px rgba(90,181,173,.08) inset;
}
.blog-panel--festivals{
  background:rgba(232,165,75,.06);
  border-color:rgba(232,165,75,.28);
}
.blog-panel--tips{
  background:rgba(124,156,255,.07);
  border-color:rgba(124,156,255,.26);
}
.blog-panel--more,
.guide-panel--more{
  background:rgba(255,255,255,.03);
}
.panel-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.blog-panel--festivals .panel-kicker{color:#e8a54b}
.blog-panel--tips .panel-kicker{color:#9bb0ff}
.panel-title{
  margin:0 0 8px !important;
  font-size:clamp(1.2rem,2.2vw,1.45rem) !important;
  color:var(--text) !important;
}
.panel-desc{
  margin:0 0 16px !important;
  color:var(--text-2) !important;
  max-width:62ch;
  line-height:1.7;
}
.blog-panel--latest .guide-hub,
.blog-panel .guide-hub{margin-top:4px}

/* Category-colored cards */
.inner-article .guide-card[data-cat="節日"],
.inner-article .guide-card[data-cat="Festivals"]{
  border-left:3px solid #e8a54b;
  background:rgba(232,165,75,.07);
}
.inner-article .guide-card[data-cat="Blog"]{
  border-left:3px solid #5ab5ad;
  background:rgba(90,181,173,.08);
}
.inner-article .guide-card[data-cat="節日"] .guide-cat,
.inner-article .guide-card[data-cat="Festivals"] .guide-cat{color:#e8a54b}
.inner-article .guide-card[data-cat="Blog"] .guide-cat{color:var(--accent)}

/* Guide topic blocks */
.topic-block{
  margin-top:0;
  padding:16px 16px 16px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  border-left-width:4px;
  background:rgba(255,255,255,.025);
}
.topic-block + .topic-block{margin-top:14px}
.topic-block h2{margin-top:0 !important;font-size:1.08rem !important}
.topic-block--setup{border-left-color:#5ab5ad;background:rgba(90,181,173,.06)}
.topic-block--talk{border-left-color:#7c9cff;background:rgba(124,156,255,.06)}
.topic-block--flow{border-left-color:#e8a54b;background:rgba(232,165,75,.06)}
.topic-block--save{border-left-color:#c78bff;background:rgba(199,139,255,.06)}
.topic-block--faq{border-left-color:#7c7c86;background:rgba(255,255,255,.03)}
.guide-panel--picker{
  padding-bottom:14px;
  background:rgba(15,15,18,.45);
}
.guide-panel--picker .page-picker{margin:0}
.page-picker a:nth-child(1){border-color:rgba(90,181,173,.35)}
.page-picker a:nth-child(2){border-color:rgba(124,156,255,.35)}
.page-picker a:nth-child(3){border-color:rgba(232,165,75,.35)}
.page-picker a:nth-child(1).is-current{background:rgba(90,181,173,.18)}
.page-picker a:nth-child(2).is-current{background:rgba(124,156,255,.18);border-color:rgba(124,156,255,.55);color:#9bb0ff !important}
.page-picker a:nth-child(3).is-current{background:rgba(232,165,75,.18);border-color:rgba(232,165,75,.55);color:#e8a54b !important}

/* When panels live inside article, soften the outer card so panels read as sections */
.inner-article.has-panels{
  background:transparent;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:0;
  max-width:min(1100px,100%);
}
.inner-article.has-panels > .blog-panel,
.inner-article.has-panels > .guide-panel,
.inner-article.has-panels > .guide-panel-stack{
  margin-bottom:0;
}
.guide-panel-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(18px,3vw,28px);
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(22,22,27,.72);
}