/* Mobile editorial heroes: the visual subject gets a dedicated frame and the
   copy starts below it. This prevents faces, teeth and treatment areas from
   being covered by translated headings of different lengths. */
@media (max-width:680px){
  :root{--mobile-hero-nav:76px;--mobile-hero-media:390px;--mobile-hero-copy-start:450px}

  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child{
    min-height:0!important;
    height:auto!important;
    padding:var(--mobile-hero-copy-start) 22px 58px!important;
    display:block!important;
    overflow:hidden;
  }

  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child :is(h1,.offer-hero-copy h1,.goal-hero-copy h1,.esthetic-faq-hero-copy h1,.ortho-faq-hero-copy h1){
    max-width:100%!important;
    margin:19px 0 21px!important;
    font-size:clamp(34px,10.5vw,44px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
    overflow-wrap:break-word;
    hyphens:auto;
  }

  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child :is(.lead,p){
    max-width:36rem!important;
    font-size:13.5px!important;
    line-height:1.72!important;
  }

  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child :is(.hero-copy,.about-est-copy,.offer-hero-copy,.goal-hero-copy,.esthetic-faq-hero-copy,.ortho-faq-hero-copy){
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }

  /* Orthodontic pages use a real image panel. */
  .offer-hero > .offer-hero-media,
  .condition-detail-hero > .offer-hero-media{
    position:absolute!important;
    inset:var(--mobile-hero-nav) 0 auto!important;
    width:100%!important;
    height:var(--mobile-hero-media)!important;
    min-height:0!important;
    box-shadow:none!important;
  }
  .offer-hero > .offer-hero-media img,
  .condition-detail-hero > .offer-hero-media img,
  .offer-hero > .offer-hero-media video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 24%!important;
  }
  .offer-hero > .offer-hero-media:after,
  .condition-detail-hero > .offer-hero-media:after{
    background:linear-gradient(180deg,transparent 48%,rgba(233,222,212,.62) 78%,#e9ded4 100%)!important;
    box-shadow:none!important;
  }
  .condition-detail-hero > .offer-hero-media:after{
    background:linear-gradient(180deg,transparent 46%,rgba(31,21,17,.68) 79%,#1f1511 100%)!important;
  }

  /* Full-bleed dark aesthetic heroes become image-above-copy layouts. */
  .goal-hub-media,.goal-detail-media,.esthetic-faq-hero-media,.about-est-photo{
    position:absolute!important;
    inset:var(--mobile-hero-nav) 0 auto!important;
    width:100%!important;
    height:var(--mobile-hero-media)!important;
    transform:none!important;
    background-size:cover!important;
    background-position:center 24%!important;
  }
  :is(.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.about-est-hero):after{
    background:linear-gradient(180deg,rgba(8,9,9,.04) 0,rgba(8,9,9,.06) 47%,rgba(8,9,9,.72) 76%,#080909 96%)!important;
  }

  /* FAQ and profile photography has a portrait focal point. */
  .esthetic-faq-hero-media,.about-est-photo{background-position:center 20%!important}

  /* Orthodontic FAQ: keep Anna in a clean, dedicated portrait frame. */
  .ortho-faq-hero-media{
    position:absolute!important;
    inset:var(--mobile-hero-nav) 0 auto!important;
    width:100%!important;
    height:var(--mobile-hero-media)!important;
    transform:none!important;
    opacity:1!important;
    background-size:cover!important;
    background-position:68% 26%!important;
  }
  .ortho-faq-hero:after{
    background:linear-gradient(180deg,rgba(231,216,200,0) 0%,rgba(231,216,200,.02) 49%,rgba(231,216,200,.68) 78%,#e7d8c8 96%)!important;
  }
  .ortho-faq-hero-copy{margin-top:22px!important}

  /* Light orthodontic profile and contact pages. */
  .about-photo,.hero-bg{
    position:absolute!important;
    inset:var(--mobile-hero-nav) 0 auto!important;
    width:100%!important;
    height:var(--mobile-hero-media)!important;
    opacity:1!important;
    background-position:center 24%!important;
    background-size:cover!important;
  }
  .about-hero:after,
  main > .hero:first-child:after{
    background:linear-gradient(180deg,rgba(238,227,216,.04) 0,rgba(238,227,216,.08) 48%,rgba(238,227,216,.77) 76%,#eee3d8 96%)!important;
  }

  /* Video price hero follows the same two-zone composition. */
  main > .hero:first-child > .hero-video{
    inset:var(--mobile-hero-nav) 0 auto!important;
    width:100%!important;
    height:var(--mobile-hero-media)!important;
    object-fit:cover!important;
    object-position:center 24%!important;
  }
  main > .hero:first-child:has(> .hero-video):after{
    background:linear-gradient(180deg,rgba(8,9,9,.03) 0,rgba(8,9,9,.08) 48%,rgba(8,9,9,.75) 77%,#080909 96%)!important;
  }

  .hero-meta,.about-meta{
    gap:11px 18px!important;
    margin-top:24px!important;
    padding-top:0!important;
    font-size:8px!important;
    line-height:1.55!important;
  }
}

@media (max-width:390px){
  :root{--mobile-hero-media:350px;--mobile-hero-copy-start:410px}
  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child{
    padding-inline:19px!important;
  }
  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child :is(h1,.offer-hero-copy h1,.goal-hero-copy h1,.esthetic-faq-hero-copy h1,.ortho-faq-hero-copy h1){font-size:34px!important}
}

/* Konsultacja: krótszy, filmowy kadr z widocznym monitorem i bezpiecznym headroomem. */
@media (max-width:680px){
  main > .consultation-hero:first-child{
    padding:385px 22px 88px!important;
    background:#17110f!important;
  }
  .consultation-hero > .offer-hero-media{
    inset:76px 0 auto!important;
    height:320px!important;
  }
  .consultation-hero > .offer-hero-media img,
  .consultation-hero > .offer-hero-media video{
    object-position:42% center!important;
  }
  .consultation-hero > .offer-hero-media:after{
    background:linear-gradient(180deg,rgba(24,17,14,.03) 0%,rgba(24,17,14,.08) 56%,rgba(24,17,14,.74) 88%,#17110f 100%)!important;
  }
  .consultation-hero > .offer-hero-copy{
    background:linear-gradient(145deg,#261b17,#17110f)!important;
  }
}
@media (max-width:390px){
  main > .consultation-hero:first-child{padding-inline:19px!important}
}