/* Directstay.guru answer pages (Q&A content section) and the /answers hub */

/* ---- Single answer page ---- */
.answer-page .page-hero{padding-bottom:0}
.answer-page .page-hero h1{max-width:920px;font-size:clamp(2.6rem,5.4vw,4.6rem)}

.answer-lead{
  width:min(100% - (var(--gutter) * 2),820px);
  margin:0 auto;
  padding:36px var(--gutter) 0;
}
.answer-lead-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 32px;
}
.answer-lead-card p{margin:0;font-size:19px;line-height:1.55;color:var(--ink)}
.answer-lead-card small{
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-dark);
}

.answer-body{
  width:min(100% - (var(--gutter) * 2),820px);
  margin:0 auto;
  padding:56px var(--gutter) 0;
}
.answer-body h2{
  font-size:clamp(1.6rem,3vw,2.3rem);
  max-width:26ch;
  margin:0 0 16px;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.answer-body h2:not(:first-child){margin-top:44px}
.answer-body p{margin:0 0 16px;color:var(--ink);font-size:17px;line-height:1.65}
.answer-body ul,.answer-body ol{margin:0 0 16px;padding-left:22px;color:var(--ink);font-size:17px;line-height:1.65}
.answer-body li{margin-bottom:8px}

.answer-related{
  width:min(100% - (var(--gutter) * 2),820px);
  margin:0 auto;
  padding:56px var(--gutter) 0;
}
.answer-related h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 20px}
.answer-related-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  list-style:none;
  margin:0;
  padding:0;
}
.answer-related-list li{margin:0}
.answer-related-list a{
  display:block;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.answer-related-list a:hover{border-color:var(--teal);color:var(--teal-dark)}

.answer-cta{
  width:min(100% - (var(--gutter) * 2),820px);
  margin:56px auto 0;
  padding:36px var(--gutter);
  background:var(--mist);
  border-radius:16px;
  text-align:left;
}
.answer-cta p{margin:0 0 16px;color:var(--muted);font-size:16px}
.answer-cta .btn{margin-right:8px}

.answer-disclaimer{
  width:min(100% - (var(--gutter) * 2),820px);
  margin:40px auto 0;
  padding:20px 24px;
  background:var(--amber-soft);
  border-radius:12px;
  font-size:14px;
  color:var(--ink);
}
.answer-disclaimer p{margin:0 0 8px}
.answer-disclaimer p:last-child{margin-bottom:0}
.answer-disclaimer strong{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media(max-width:640px){
  .answer-related-list{grid-template-columns:1fr}
  .answer-lead-card{padding:22px 20px}
  .answer-cta{padding:28px 20px}
}

/* ---- /answers hub page ---- */
.answers-hub{
  width:min(100% - (var(--gutter) * 2),var(--max));
  margin:0 auto;
  padding:56px var(--gutter) 0;
}
.answers-cluster{margin-bottom:48px}
.answers-cluster h2{
  font-size:clamp(1.6rem,3vw,2.2rem);
  margin:0 0 6px;
}
.answers-cluster>p{margin:0 0 20px;color:var(--muted);font-size:15px}
.answers-cluster-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.answers-cluster-list li{margin:0}
.answers-cluster-list a,
.answers-cluster-list span.answers-soon{
  display:block;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
  color:var(--ink);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
}
.answers-cluster-list a{transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.answers-cluster-list a:hover{border-color:var(--teal);color:var(--teal-dark);transform:translateY(-1px)}
.answers-cluster-list span.answers-soon{
  color:var(--muted);
  font-weight:500;
  border-style:dashed;
}

@media(max-width:900px){
  .answers-cluster-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .answers-cluster-list{grid-template-columns:1fr}
}
