/**
 * Berke 0.21.8 — live screenshot composition polish.
 * Late scoped overrides only; no content, URL or stored SEO mutation.
 */

/* P-0008: make the live desktop composition denser and more legible. */
@media (min-width:64.01rem){
  .berke-p8 .berke-p8-section{padding-block:clamp(3.55rem,4.55vw,4.75rem)}
  .berke-p8 .berke-p8-heading{margin-block-end:1.45rem}
  .berke-p8 .berke-p8-cost .berke-p8-heading{max-inline-size:48rem}
  .berke-p8 .berke-p8-factor-grid article{min-block-size:9.65rem}

  /* Five equal cards were visibly cramped in the live screenshot: 3 + 2 reads better. */
  .berke-p8 .berke-p8-process__steps{grid-template-columns:repeat(6,minmax(0,1fr));gap:.72rem}
  .berke-p8 .berke-p8-process__steps>li{grid-column:span 2;min-block-size:10.4rem}
  .berke-p8 .berke-p8-process__steps>li:nth-last-child(-n+2){grid-column:span 3}

  .berke-p8 .berke-p8-process__story{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:clamp(1.6rem,3vw,2.65rem);
    margin-block-start:1.55rem;
    padding:1.15rem;
  }
  .berke-p8 .berke-p8-process__visual img{aspect-ratio:16/9}
  .berke-p8 .berke-p8-process__story-copy{padding-inline:.25rem}

  .berke-p8 .berke-p8-route-grid a{min-block-size:7.65rem;padding:1.05rem 1.1rem}
  .berke-p8 .berke-p8-prep{padding-block:2.35rem}
  .berke-p8 .berke-p8-inquiry{padding-block:4.4rem}
}

/* Dark service-routing cards: increase scan contrast without changing the palette. */
.berke-p8 .berke-p8-boundary .berke-p8-heading p:not(.berke-p8-kicker){color:#dcebf2!important}
.berke-p8 .berke-p8-route-grid a{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));border-color:rgba(255,255,255,.22)}
.berke-p8 .berke-p8-route-grid a span{color:#aee2f3;font-weight:700}
.berke-p8 .berke-p8-route-grid a strong{color:#fff;font-size:.95rem}

/* Tablet: keep modules comfortable and move conversion copy before the image. */
@media (max-width:64rem){
  .berke-p8 .berke-p8-section{padding-block:3.35rem}
  .berke-p8 .berke-p8-process__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .berke-p8 .berke-p8-process__steps>li,
  .berke-p8 .berke-p8-process__steps>li:nth-last-child(-n+2){grid-column:auto;min-block-size:0}
  .berke-p8 .berke-p8-process__steps>li:last-child{grid-column:1/-1}
  .berke-p8 .berke-p8-process__story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem}
}

@media (max-width:56rem){
  .berke-p8 .berke-p8-hero__layout{grid-template-areas:"copy" "visual" "principles";gap:1.25rem}
  .berke-p8 .berke-p8-hero__copy{grid-area:copy}
  .berke-p8 .berke-p8-hero__visual{grid-area:visual}
  .berke-p8 .berke-p8-principles{grid-area:principles}
  .berke-p8 .berke-p8-process__story{grid-template-columns:1fr}
  .berke-p8 .berke-p8-process__visual{max-inline-size:none}
  .berke-p8 .berke-p8-process__story-copy{max-inline-size:44rem}
}

/* Mobile: reduce drag, preserve readable tap targets, and keep visual storytelling strong. */
@media (max-width:48rem){
  .berke-p8 .berke-p8-hero{padding-block:1.45rem 2.2rem}
  .berke-p8 .berke-p8-hero__layout{gap:1rem}
  .berke-p8 .berke-p8-hero__copy h1{margin-block-end:.75rem}
  .berke-p8 .berke-p8-actions{margin-block:.9rem 0}
  .berke-p8 .berke-p8-hero__visual{aspect-ratio:4/3}
  .berke-p8 .berke-p8-hero__image{object-position:50% 44%}
  .berke-p8 .berke-p8-section{padding-block:2.65rem}
  .berke-p8 .berke-p8-heading{margin-block-end:1.05rem}
  .berke-p8 .berke-p8-process__steps{grid-template-columns:1fr}
  .berke-p8 .berke-p8-process__steps>li,
  .berke-p8 .berke-p8-process__steps>li:last-child{grid-column:auto}
  .berke-p8 .berke-p8-process__story{padding:.62rem;gap:.9rem}
  .berke-p8 .berke-p8-process__visual img{aspect-ratio:16/10}
  .berke-p8 .berke-p8-process__story-copy h3{font-size:1.3rem;line-height:1.65}
  .berke-p8 .berke-p8-route-grid a{padding:.9rem;min-block-size:0}
  .berke-p8 .berke-p8-prep{padding-block:1.8rem}
  .berke-p8 .berke-p8-inquiry{padding-block:2.8rem}
  .berke-p8 .berke-p8-inquiry__layout{gap:1.2rem}
}

/* WordPress admin bar must not cover the in-page review/navigation bar while QA is active. */
body.admin-bar .berke-p8 .berke-p8-anchorbar{inset-block-start:32px}
@media (max-width:782px){body.admin-bar .berke-p8 .berke-p8-anchorbar{inset-block-start:46px}}
