/* Shared responsive guardrails for Animails service pages.
 * Keep only rules proven useful across at least two service implementations.
 */

.a3-service-page,
.a3-service-page *{box-sizing:border-box}

.a3-service-page{
  --a3-service-inline:max(var(--a3-page-x),calc((100vw - var(--a3-content))/2));
  width:100%;
  max-width:none;
  margin-inline:0;
}
.a3-service-page>section{padding-inline:var(--a3-service-inline)}

/* Canonical service hero: same background and 604 px height on desktop. */
.a3-service-page .a3-service-hero{background:var(--a3-dark,#241040)}
@media (min-width:1081px){
  .a3-service-page .a3-service-hero{
    height:604px;
    min-height:604px;
    max-height:604px;
  }
}

.a3-service-page :where(
  .a3-service-hero__copy,
  .a3-service-hero__actions,
  .a3-service-hero__lead,
  .a3-trust-band__items,
  .a3-conversion__copy,
  .a3-callback-form,
  .a3-contact__copy,
  .a3-contact-form
){min-width:0}
.a3-service-page :where(img,svg){max-width:100%}
.a3-service-page .a3-service-breadcrumbs{max-width:100%;flex-wrap:wrap}

/* A dark hero may provide white inherited text, but every light visual surface
 * must explicitly own its dark foreground. Never rely on hero inheritance for
 * cards, labels or data rows placed on white/lime panels. */
.a3-send-handoff__brief h3,
.a3-send-handoff__brief p,
.a3-send-handoff__sent,
.a3-send-handoff__stages span,
.a3-reach-shortlist__brief strong,
.a3-reach-shortlist__brief>span,
.a3-reach-shortlist__list article:not(.is-selected)>div strong,
.a3-welcome-profile__head strong,
.a3-welcome-profile__head>span,
.a3-welcome-profile__known strong,
.a3-welcome-profile__days>span,
.a3-training-room__notes,
.a3-training-room__notes article span,
.a3-training-room__monday,
.a3-training-room__monday article span,
.a3-delivery-case__head strong,
.a3-delivery-case__evidence b{
  color:#171717;
}

/* Long catalogue propositions need a tighter rhythm even on wide desktop.
 * This preserves the canonical 604 px band without clipping content. */
@media (min-width:1241px){
  .a3-catalog-service .a3-service-hero{padding-block:60px}
  .a3-catalog-service .a3-service-hero__copy{gap:18px}
  .a3-catalog-service .a3-service-hero h1{font-size:48px;line-height:1.08;max-width:660px}
  .a3-catalog-service .a3-service-hero__lead{font-size:15px;line-height:1.5}
  .a3-catalog-service .a3-service-hero__proof{line-height:1.4}
}

/* Small-laptop desktop: keep two columns and the 604 px hero, but reduce the
 * composition instead of letting CTA/proof spill into the next section. */
@media (min-width:1081px) and (max-width:1240px){
  .a3-service-page .a3-service-hero{
    gap:32px;
    grid-template-columns:minmax(0,1fr) 420px;
    padding-block:48px;
  }
  .a3-service-page .a3-service-hero__copy{gap:18px;min-width:0}
  .a3-service-page .a3-service-hero h1{font-size:48px;line-height:1.08}
  .a3-service-page.a3-ma-service .a3-service-hero h1,
  .a3-service-page.a3-catalog-service .a3-service-hero h1{font-size:46px;line-height:1.07}
  .a3-service-page .a3-service-hero__lead{font-size:15px;line-height:1.5}
  .a3-service-page .a3-service-hero__proof{font-size:13px;line-height:1.4}
  .a3-service-page .a3-service-hero__actions{gap:12px;flex-wrap:wrap}
  .a3-email-service .a3-service-visual,
  .a3-ma-service .a3-ma-visual,
  .a3-catalog-service .a3-creative-hero{
    justify-self:end;
    max-width:none;
    transform:scale(.77);
    transform-origin:center right;
    width:540px;
  }
}

@media (max-width:1160px){
  .a3-service-page .a3-trust-band__items{flex-wrap:wrap;gap:20px 24px}
}

/* Tablet/mobile: only here do we stack the hero. */
@media (max-width:1080px){
  .a3-service-page .a3-service-hero{
    grid-template-columns:minmax(0,1fr);
    height:auto;
    min-height:0;
    max-height:none;
    padding-block:72px;
  }
  .a3-service-page .a3-service-hero>*{min-width:0}
  .a3-service-page .a3-service-hero__copy{max-width:760px;width:100%}
  .a3-service-page .a3-service-hero__actions{flex-wrap:wrap}
  .a3-service-page :where(.a3-service-visual,.a3-ma-visual,.a3-creative-hero,[data-a3-catalog-visual]){
    justify-self:start;
    max-width:540px;
    transform:none;
    width:100%;
  }
  .a3-service-page .a3-trust-band{align-items:flex-start;flex-direction:column;gap:28px}
  .a3-service-page .a3-conversion{align-items:flex-start;flex-direction:column;gap:28px}
  .a3-service-page .a3-callback-form{max-width:560px;width:100%}
}

/* A5 (marketing-automation "Zostaw numer"): the 485 px form does not fit beside the copy below 1280 px,
 * so it stacks under the copy in that range; from 1280 px the form keeps its natural width. */
@media (min-width:1081px) and (max-width:1279px){
  .a3-service-page .a3-conversion{align-items:flex-start;flex-direction:column;gap:28px}
  .a3-service-page .a3-callback-form{max-width:560px;width:100%}
}
@media (min-width:1280px){
  .a3-service-page .a3-conversion>.a3-callback-form{flex:0 0 auto}
}

@media (max-width:600px){
  .a3-service-page .a3-service-hero{gap:40px;padding-block:56px}
  .a3-service-page .a3-service-hero__copy{gap:24px}
  .a3-service-page .a3-service-hero__actions{align-items:stretch;flex-direction:column;width:100%}
  .a3-service-page .a3-service-hero__actions .a3-button{width:100%}
  .a3-service-page .a3-service-hero__proof{align-items:flex-start}
  .a3-service-page .a3-trust-band{padding-block:44px}
  .a3-service-page .a3-trust-band__items{align-items:flex-start;flex-direction:column;gap:12px}
  .a3-service-page .a3-trust-band__items i{display:none}
  .a3-service-page .a3-problems__grid{gap:16px}
  .a3-service-page .a3-problem-card{min-height:0;padding:24px}
  .a3-service-page .a3-process__grid{gap:32px;margin-top:48px}
  .a3-service-page .a3-contact-form{width:100%}
  .a3-service-page .a3-faq details p{padding-right:0}
}
/* 901-1100 px: a 520 px form left the contact heading ~250 px, breaking long words (2026-10-10). */
@media (min-width:901px) and (max-width:1100px){.a3-contact{gap:56px;grid-template-columns:minmax(0,1fr) 440px}}