/* ============================================================
   PM Hub — full-screen responsive layout
   Replaces the fixed 680px mockup width with a fluid container,
   scalable type and three real breakpoints. Applies to both the
   guide template (.pmh) and existing post markup (.pmhx, .pmart).
   ============================================================ */

.pmhub-skin {
  /* gutter grows with the viewport instead of stepping at breakpoints */
  --pm-gutter: clamp(16px, 3.5vw, 48px);
  --pm-max: 1280px;
  --pm-measure: 74ch;
}

/* ---------- fluid container ----------
   .pmhx carries a max-width:1180px !important from the style block
   still embedded in post 189's content, so this one rule has to match
   that weight. Everything else wins on specificity alone. */

.pmhub-skin .pmh,
.pmhub-skin .pmhx {
  width: 100% !important;
  max-width: var(--pm-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--pm-gutter) !important;
  box-sizing: border-box;
}

.pmhub-skin .pmart-body .pmart-wrap {
  max-width: var(--pm-max);
  padding-inline: var(--pm-gutter);
}

/* ---------- scalable typography ----------
   Every size below is fluid between the mobile floor and the desktop
   ceiling, so nothing steps abruptly at a breakpoint. */

.pmhub-skin .pmh,
.pmhub-skin .pmhx,
.pmhub-skin .pmart-body {
  font-size: clamp(15px, 0.35vw + 13.9px, 17px);
  line-height: 1.7;
}

.pmhub-skin .pmh .hb h1,
.pmhub-skin .pmhx .pmh-h1 {
  font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.25rem);
  line-height: 1.06;
}

.pmhub-skin .pmh h2,
.pmhub-skin .pmhx h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.16;
}

.pmhub-skin .pmh h3,
.pmhub-skin .pmhx h3,
.pmhub-skin .pmhx .pmh-tool h3 {
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
  line-height: 1.22;
}

.pmhub-skin .pmhx h4 { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }

.pmhub-skin .pmhx .pmh-standfirst,
.pmhub-skin .pmh .hb-sf {
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  line-height: 1.65;
}

/* prose keeps a readable measure even when the shell goes wide */
.pmhub-skin .pmhx .pmh-main > p,
.pmhub-skin .pmhx .pmh-main > ul,
.pmhub-skin .pmhx .pmh-main > ol {
  max-width: var(--pm-measure);
}

/* ---------- dark blocks run full-bleed on wide screens ---------- */

@media (min-width: 1024px) {
  .pmhub-skin .pmh .hb,
  .pmhub-skin .pmh .ca,
  .pmhub-skin .pmhx .pmh-quick,
  .pmhub-skin .pmhx .pmh-cta {
    border-radius: 22px;
  }
}

/* ---------- desktop: give the sidebar room ---------- */

@media (min-width: 1024px) {
  .pmhub-skin .pmhx .pmh-shell {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3.2rem;
  }
  .pmhub-skin .pmhx .pmh-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .pmhub-skin .pmhx .pmh-short { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

@media (min-width: 1440px) {
  .pmhub-skin { --pm-max: 1380px; }
  .pmhub-skin .pmhx .pmh-shell { grid-template-columns: minmax(0, 1fr) 330px; }
}

/* ---------- tablet ---------- */

@media (max-width: 1023px) {
  .pmhub-skin .pmhx .pmh-shell { grid-template-columns: 1fr; gap: 1.6rem; }
  .pmhub-skin .pmhx .pmh-side { position: static; order: -1; }
  .pmhub-skin .pmh .ds-cd { grid-template-columns: 200px minmax(0, 1fr); }
}

/* ---------- mobile ---------- */

@media (max-width: 639px) {
  .pmhub-skin .pmh .hb,
  .pmhub-skin .pmh .ca { padding: 22px 20px; border-radius: 16px; }

  .pmhub-skin .pmh .ds-cd { grid-template-columns: 1fr; }
  .pmhub-skin .pmh .ds-pcg,
  .pmhub-skin .pmhx .pmh-pc { grid-template-columns: 1fr; gap: .8rem; }

  .pmhub-skin .pmhx .pmh-tool { padding: 1.1rem 1rem; }
  .pmhub-skin .pmhx .pmh-specs { grid-template-columns: 1fr 1fr; }
  .pmhub-skin .pmhx .pmh-glance { grid-template-columns: 1fr; }

  /* wide tables keep their shape and scroll rather than crushing */
  .pmhub-skin .pmhx .pmh-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pmhub-skin .pmhx .pmh-tablewrap table { min-width: 560px; }

  .pmhub-skin .pmh .ca-btns a,
  .pmhub-skin .pmhx .pmh-cta-row a { width: 100%; text-align: center; }
}

/* ---------- images never overflow their column ---------- */

.pmhub-skin .pmh img,
.pmhub-skin .pmhx img { max-width: 100%; height: auto; }