/* ==========================================================================
   hub.css — the two index pages: specialities.php and treatments.php.
   Loaded alongside treatment.css, so it inherits the card, doctor band and
   CTA styling and only adds what is unique to an index page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — taller than a guide hero, since these are the entry points
   -------------------------------------------------------------------------- */
.tpage .hub-hero{
  min-height:660px;
  padding:12rem 0 5.5rem;
}
.tpage .hub-hero h1{font-size:clamp(2rem,3.2vw,3.4rem);letter-spacing:-.025em}
.tpage .hub-hero .hero-lede{font-size:1.04rem;max-width:64ch}
@media(max-width:760px){
  .tpage .hub-hero{min-height:400px;padding:5.4rem 0 2.5rem}
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.tpage .hub-section{padding:5rem 0}
.tpage .hub-section-soft{background:var(--surface-soft)}
.tpage .hub-head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3rem;
  align-items:end;
  margin-bottom:2.75rem;
}
.tpage .hub-head h2{
  font-size:clamp(1.75rem,3vw,2.5rem);
  letter-spacing:-.02em;
  line-height:1.14;
  margin-top:.6rem;
}
.tpage .hub-head > p{
  color:var(--text-muted);
  font-size:.97rem;
  line-height:1.7;
  max-width:52ch;
  margin:0;
}
@media(max-width:860px){
  .tpage .hub-head{grid-template-columns:1fr;gap:1.1rem;align-items:start}
  .tpage .hub-section{padding:3.5rem 0}
}

/* --------------------------------------------------------------------------
   Three speciality features — the primary route on the specialities page
   -------------------------------------------------------------------------- */
.tpage .hub-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.tpage .hub-feature{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:400px;
  padding:1.9rem;
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  isolation:isolate;
  transition:transform .28s ease, box-shadow .28s ease;
}
.tpage .hub-feature::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hub-image);
  background-size:cover;background-position:center;
  transition:transform .6s ease;
}
.tpage .hub-feature::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,28,41,.30) 0%,rgba(8,28,41,.72) 52%,rgba(8,28,41,.94) 100%);
}
.tpage .hub-feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.tpage .hub-feature:hover::before{transform:scale(1.06)}
.tpage .hub-feature-num{
  position:absolute;top:1.6rem;left:1.9rem;
  font-family:'DM Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.18em;
  color:var(--secondary);
}
.tpage .hub-feature h3{
  font-size:1.35rem;line-height:1.2;margin:0 0 .6rem;color:#fff;letter-spacing:-.01em;
}
.tpage .hub-feature p{
  font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 1.1rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tpage .hub-feature-go{
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.83rem;
  color:var(--secondary);display:inline-flex;align-items:center;gap:.45rem;
}
.tpage .hub-feature-go i{transition:transform .25s ease}
.tpage .hub-feature:hover .hub-feature-go i{transform:translateX(4px)}
@media(max-width:900px){
  .tpage .hub-feature-grid{grid-template-columns:1fr}
  .tpage .hub-feature{min-height:320px}
}

/* --------------------------------------------------------------------------
   Grouped card rows
   -------------------------------------------------------------------------- */
.tpage .hub-group{margin-bottom:3rem}
.tpage .hub-group:last-of-type{margin-bottom:0}
.tpage .hub-group-head{
  display:flex;align-items:baseline;gap:1.25rem;flex-wrap:wrap;
  padding-bottom:.9rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);
}
.tpage .hub-group-label{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--success);margin:0 0 1.25rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--border);
}
.tpage .hub-group-head .hub-group-label{margin:0;padding:0;border:0}
.tpage .hub-group-note{font-size:.85rem;color:var(--text-muted);margin:0}
.tpage .hub-all-link{margin-top:2.75rem;text-align:center}

/* --------------------------------------------------------------------------
   Quick-jump bar (treatments index)
   -------------------------------------------------------------------------- */
.tpage .hub-jump{
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
/* jump targets must clear the fixed site header */
.tpage .hub-group,
.tpage .hub-section[id]{scroll-margin-top:120px}
.tpage .hub-jump-inner{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:.85rem 0;font-size:.83rem;
}
.tpage .hub-jump-inner > span{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted);
}
.tpage .hub-jump-inner a{
  color:var(--text-muted);text-decoration:none;font-weight:500;
  padding-bottom:2px;border-bottom:2px solid transparent;transition:.18s;
}
.tpage .hub-jump-inner a:hover{color:var(--primary);border-bottom-color:var(--secondary)}
@media(max-width:760px){
  .tpage .hub-jump{position:static}
  .tpage .hub-jump-inner{gap:1rem;font-size:.78rem}
}

/* --------------------------------------------------------------------------
   Three-step process
   -------------------------------------------------------------------------- */
.tpage .hub-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.tpage .hub-steps article{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:1.8rem;transition:.2s;
}
.tpage .hub-steps article:hover{box-shadow:var(--shadow-soft);border-color:var(--secondary)}
.tpage .hub-steps span{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;
  color:var(--secondary);background:var(--primary);padding:.3rem .6rem;
  border-radius:.3rem;display:inline-block;
}
.tpage .hub-steps h3{font-size:1.08rem;margin:.9rem 0 .5rem}
.tpage .hub-steps p{font-size:.87rem;color:var(--text-muted);line-height:1.6;margin:0}
@media(max-width:860px){.tpage .hub-steps{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Principle block
   -------------------------------------------------------------------------- */
.tpage .hub-principle{
  display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;
  margin-top:3.5rem;padding:2.5rem;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-lg);
}
.tpage .hub-principle h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:.5rem 0 .9rem;line-height:1.18}
.tpage .hub-principle > div > p{color:var(--text-muted);font-size:.95rem;line-height:1.7;margin-bottom:1.5rem;max-width:52ch}
.tpage .hub-principle-list{list-style:none;margin:0;padding:0}
.tpage .hub-principle-list li{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1rem 0;border-bottom:1px solid var(--border);
}
.tpage .hub-principle-list li:last-child{border-bottom:0}
.tpage .hub-principle-list i{color:var(--success);font-size:1rem;margin-top:.15rem;flex:0 0 auto}
.tpage .hub-principle-list span{display:flex;flex-direction:column;font-size:.85rem;color:var(--text-muted);line-height:1.5}
.tpage .hub-principle-list strong{
  font-family:'Manrope',sans-serif;font-size:.92rem;color:var(--text);margin-bottom:.15rem;
}
@media(max-width:860px){
  .tpage .hub-principle{grid-template-columns:1fr;gap:2rem;padding:1.75rem}
}

/* --------------------------------------------------------------------------
   "What every guide contains" — the ten shared sections
   -------------------------------------------------------------------------- */
.tpage .hub-structure{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;
}
.tpage .hub-structure li{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:1.25rem 1.1rem;display:flex;flex-direction:column;transition:.2s;
}
.tpage .hub-structure li:hover{border-color:var(--secondary);box-shadow:var(--shadow-soft)}
.tpage .hub-structure-num{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;
  color:var(--text-muted);
}
.tpage .hub-structure i{color:var(--secondary);font-size:1.15rem;margin:.7rem 0 .6rem}
.tpage .hub-structure strong{font-family:'Manrope',sans-serif;font-size:.88rem;line-height:1.3;margin-bottom:.35rem}
.tpage .hub-structure small{font-size:.76rem;color:var(--text-muted);line-height:1.5}
@media(max-width:1080px){.tpage .hub-structure{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.tpage .hub-structure{grid-template-columns:repeat(2,1fr)}}

.tpage .hub-note{
  display:flex;gap:1rem;align-items:flex-start;
  margin-top:2rem;padding:1.35rem 1.6rem;
  background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--success);border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.tpage .hub-note i{color:var(--success);font-size:1.05rem;margin-top:.15rem;flex:0 0 auto}
.tpage .hub-note p{font-size:.85rem;color:var(--text-muted);line-height:1.65;margin:0}

/* --------------------------------------------------------------------------
   Speciality area links (bottom of the treatments index)
   -------------------------------------------------------------------------- */
.tpage .hub-area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.tpage .hub-area{
  display:flex;flex-direction:column;
  background:var(--primary);color:#fff;border-radius:var(--radius-md);
  padding:1.75rem;text-decoration:none;transition:.22s;
}
.tpage .hub-area:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tpage .hub-area-cat{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--secondary);
}
.tpage .hub-area strong{
  font-family:'Manrope',sans-serif;font-size:1.1rem;color:#fff;margin:.6rem 0 .5rem;line-height:1.25;
}
.tpage .hub-area small{
  font-size:.83rem;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:1.1rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tpage .hub-area i{color:var(--secondary);margin-top:auto;transition:transform .25s ease}
.tpage .hub-area:hover i{transform:translateX(4px)}
@media(max-width:860px){.tpage .hub-area-grid{grid-template-columns:1fr}}