/* Mobile quality pass: predictable icons, collision-free header and heroes
   that keep the photographed subject separate from the main message. */
.ui-arrow{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:20px;
  height:12px;
  margin-inline-start:8px;
  color:currentColor;
  vertical-align:middle;
}
.ui-arrow::before{
  content:"";
  position:absolute;
  left:1px;
  right:2px;
  top:50%;
  height:1px;
  background:currentColor;
  transform:translateY(-50%);
}
.ui-arrow::after{
  content:"";
  position:absolute;
  right:1px;
  top:50%;
  width:7px;
  height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.enter i .ui-arrow{width:16px;height:10px;margin:0}

/* The compact selector belongs only to the mobile start-page header. */
.selector-language-switch{display:none}

/* Translations may contain longer words than Polish. Let grid children shrink
   and wrap real text instead of clipping it with the decorative card image. */
main :is(.deep-copy,.goal-copy,.editorial-body,.split-head > *,.price-band > *,.offer-card-body){min-width:0}
main :is(.deep-copy h2,.goal-copy h2,.goal-copy h3,.editorial-body h2,.price-band h3,.offer-card h3,.split-head h2){overflow-wrap:anywhere;hyphens:auto}
@media(max-width:680px){main .comparison{table-layout:fixed;overflow-wrap:anywhere;hyphens:auto}}

@media (max-width:760px){
  /* Phone is the primary mobile contact action on every subpage. */
  .nav .nav-actions .phone,
  .est-nav .est-actions>.est-phone{
    font-family:Manrope,Arial,sans-serif!important;
    font-size:15.5px!important;
    font-weight:650!important;
    line-height:1!important;
    letter-spacing:.025em!important;
    font-variant-numeric:tabular-nums;
    white-space:nowrap!important;
  }

  /* One active language stays in the header; the full list opens on demand. */
  .selector-language-bar{display:none!important}
  .selector-language-switch{
    position:fixed!important;
    z-index:23!important;
    top:16px!important;
    right:72px!important;
    left:auto!important;
    display:block!important;
    color:#f0e6df!important;
  }
  .selector-language-switch>summary{
    width:46px!important;
    min-width:46px!important;
    height:44px!important;
    padding:0!important;
    gap:6px!important;
    border-color:rgba(220,190,171,.42)!important;
    background:rgba(11,9,8,.56)!important;
    backdrop-filter:blur(12px);
  }
  .selector-language-switch>summary span{font-size:9px!important}
  .selector-language-switch .language-switch__panel{top:52px!important;right:0!important;left:auto!important;width:206px!important}
  .selector-language-switch .language-switch__panel::before{right:18px!important;left:auto!important}
  .selector .topline{
    right:auto!important;
    left:50%!important;
    width:max-content!important;
    transform:translateX(-50%)!important;
  }
  .selector .contact-chip.phone{font-size:14px!important;letter-spacing:.02em!important}

  /* Selector cards: smaller typography and consistent drawn arrows. */
  .selector .world-copy{left:22px!important;right:22px!important;bottom:20px!important}
  .selector .world h1{max-width:8.8ch;margin:8px 0!important;font-size:clamp(34px,9.4vw,40px)!important;line-height:.94!important;text-wrap:balance}
  .selector .world .count{font-size:7px!important;line-height:1.5}
  .selector .enter{gap:10px!important;margin-top:10px!important;font-size:8px!important;line-height:1.35}
  .selector .enter i{width:38px!important;height:38px!important}

  /* Root direction view: the portrait and the copy receive separate zones. */
  .experience{overflow-y:auto!important}
  .experience .exp-bg picture,.experience .exp-bg{height:100%!important}
  .experience .exp-bg img{
    width:100%!important;
    height:52%!important;
    object-fit:cover!important;
    object-position:center 18%!important;
  }
  .experience .exp-bg::after{
    background:linear-gradient(180deg,rgba(6,7,7,.04) 0%,rgba(6,7,7,.08) 34%,rgba(6,7,7,.9) 51%,#070808 63%,#070808 100%)!important;
  }
  .experience.mode-ortho .exp-bg::after{
    background:linear-gradient(180deg,rgba(239,229,218,.03) 0%,rgba(239,229,218,.08) 34%,rgba(239,229,218,.93) 51%,#efe5da 63%,#efe5da 100%)!important;
  }
  .experience .exp-content,.experience.mode-est .exp-content{
    top:48%!important;
    right:22px!important;
    bottom:auto!important;
    left:22px!important;
    max-width:520px!important;
    padding:18px 0 126px!important;
    transform:none!important;
    text-align:left!important;
  }
  .experience .exp-content h2{
    max-width:10ch!important;
    margin:15px 0 17px!important;
    font-size:clamp(38px,10.4vw,46px)!important;
    line-height:.92!important;
    text-wrap:balance;
  }
  .experience .exp-content p{margin:0!important;font-size:12.5px!important;line-height:1.62!important}
  .experience .exp-links,.experience.mode-est .exp-links{justify-content:flex-start!important;gap:8px!important;margin-top:21px!important}
  .experience .primary,.experience .secondary{min-height:45px!important;padding:0 14px!important;font-size:7px!important}
  .experience .signature{bottom:20px!important}
}

@media (max-width:390px){
  .selector .world h1{font-size:34px!important}
  .experience .exp-content h2{font-size:37px!important}
  .experience .exp-content p{font-size:12px!important}
}

@media (max-width:350px){
  .nav .nav-actions .phone,
  .est-nav .est-actions>.est-phone{font-size:13.5px!important}
  .selector-language-switch{right:64px!important;left:auto!important}
  .selector .topline{right:auto!important;left:50%!important}
  .selector .contact-chip.phone{font-size:12px!important}
  .selector-mobile-menu{right:12px!important}
}

/* Desktop: telefon jest czytelniejszy, a język pozostaje ostatnią akcją. */
@media (min-width:1011px){
  .nav .nav-actions .phone{
    font-size:11.25px!important;
    font-weight:650!important;
    letter-spacing:.075em!important;
    font-variant-numeric:tabular-nums;
    white-space:nowrap!important;
  }
}

/* Na tabletach treść numeru pozostaje dostępna dla czytników ekranu,
   a wizualnie zastępuje ją zwarty przycisk ikonowy z ortho-header.css. */
@media (min-width:761px) and (max-width:1250px){
  .nav .nav-actions .phone{font-size:0!important;letter-spacing:0!important}
}

@media (min-width:1081px){
  .est-nav .est-actions>.est-phone{
    font-size:clamp(11px,.72vw,12.5px)!important;
    font-weight:650!important;
    letter-spacing:.04em!important;
    font-variant-numeric:tabular-nums;
    white-space:nowrap!important;
  }
}
