/* Oko na Dziecko 3.6 - responsive refinements.
   Kept separate from legacy CSS to make this pass auditable and reversible. */

/* Consistent actions and context controls */
.home-prices .section-end{display:flex;justify-content:flex-end;width:100%;max-width:1100px;margin:28px auto 0}
.home-prices .section-end>.text-link{display:inline-flex;align-items:center;justify-content:flex-end;text-align:right;width:max-content}
.home-contact-copy .home-contact-meta{max-width:520px;width:100%}

/* Popover in browser top-layer: can never be clipped by the next section. */
.phone-picker-panel[popover]{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;z-index:9999}
.phone-picker-panel[popover]:not(:popover-open){display:none}
.phone-picker-panel:popover-open{box-shadow:0 20px 56px rgba(20,47,33,.23);border-color:#d5e3d5}

/* FAQ: move the link in DOM as well as visually, for intuitive tab order. */
.faq-home-grid{grid-template-rows:auto 1fr;align-items:start}
.faq-home-grid>.faq-home-intro{grid-column:1;grid-row:1}
.faq-home-grid>.faq-home-questions{grid-column:2;grid-row:1 / span 2}
.faq-home-grid>.faq-more{grid-column:1;grid-row:2;align-self:start;justify-content:flex-start;margin-top:26px}

/* Stable, clearer button text/icon geometry on mobile and tablet. */
@media(max-width:850px){
 .hero .action-row>.btn,
 .hero .action-row .phone-picker>summary,
 .steps-top .steps-actions>.btn,
 .steps-top .steps-actions .phone-picker>summary,
 .closing-actions>.btn{
   display:grid;grid-template-columns:minmax(0,1fr) 22px;
   justify-content:initial;justify-items:start;align-items:center;
   text-align:left;column-gap:12px;padding-inline:20px;
 }
 .hero .action-row>.btn>span,
 .hero .action-row .phone-picker>summary>span,
 .steps-top .steps-actions>.btn>span,
 .steps-top .steps-actions .phone-picker>summary>span,
 .closing-actions>.btn>.cta-arrow{
   justify-self:end;margin:0!important;text-align:center;
   width:22px;min-width:22px;line-height:1;transform:none!important;
 }
 .closing-actions>.btn>span:first-child{justify-self:start!important;margin:0!important;min-width:0!important}
}

/* Keep all content within viewport, even for long email addresses. */
.page-hero>.shell,.page-hero h1,.page-hero p,.price-main,.entry-content,.contact-info,.footer-grid>div{min-width:0}

@media (min-width:581px) and (max-width:850px){
 .page-hero{padding:62px 0 58px}
 .page-hero>.shell{padding-right:clamp(110px,23%,205px);min-height:0}
 .page-hero h1{font-size:clamp(2.15rem,4.8vw,3.2rem);line-height:1.12}
 .page-hero-art{width:clamp(110px,22%,180px);right:0;top:45%;bottom:auto;opacity:.82}
 .page-hero-art img{max-height:180px}
}

/* Compress oversized gaps on phones without compressing touch targets. */
@media(max-width:580px){
 html{scroll-padding-top:74px}
 .shell{width:calc(100% - 36px)}
 .section{padding-block:52px}
 .section-top{margin-bottom:23px}
 .eyebrow{font-size:.68rem;letter-spacing:.13em;margin-bottom:12px}
 .section-top h2,.team-section .section-top h2{font-size:clamp(1.95rem,7.8vw,2.5rem);line-height:1.13}
 .section-top>p{margin-top:3px;line-height:1.6}
 .page-section{padding:49px 0}

 /* Subpage hero: botanical art is a faded corner detail, not a 115px spacer. */
 .page-hero{padding:40px 0 40px;overflow:hidden}
 .page-hero>.shell{position:relative;display:block;padding-right:0!important;padding-bottom:0!important;min-height:0!important;isolation:isolate}
 .page-hero>.shell>.eyebrow,.page-hero h1,.page-hero p,.page-hero .service-meta-row{position:relative;z-index:1}
 .page-hero h1{font-size:clamp(2.05rem,8.5vw,2.9rem);line-height:1.09;letter-spacing:-.045em;max-width:100%;margin:0 0 16px;text-wrap:balance;overflow-wrap:break-word}
 .page-hero p{max-width:100%;font-size:.99rem;line-height:1.65;margin:0}
 .page-hero-art{position:absolute!important;right:-40px!important;top:-24px!important;bottom:auto!important;left:auto;width:150px!important;transform:none!important;opacity:.18;pointer-events:none;z-index:0}
 .page-hero-art img{width:100%;max-height:170px!important}
 .page-hero .service-meta-row{margin-top:23px;gap:15px;align-items:stretch}
 .page-hero .meta-info{gap:8px}
 .page-hero .chip{font-size:.8rem;line-height:1.4;padding:8px 11px}
 .page-hero .service-meta-cta{width:100%}
 .page-hero .service-meta-cta .btn{display:flex;width:100%;min-height:50px;justify-content:space-between;text-align:left}
 .page-hero .service-meta-cta .btn span{margin-left:auto}
 .service-content-head{padding:19px;gap:12px}
 .service-content-head .service-feature-icon{width:56px;height:56px;flex:0 0 56px}
 .service-content-head .service-feature-icon svg{width:29px;height:29px}

 /* Home hero: same aligned starts and consistent heights. */
 .hero .hero-grid{gap:25px;padding-block:26px 43px!important}
 .hero .hero-copy{padding:0}
 .hero h1{font-size:clamp(2rem,8.5vw,2.7rem);line-height:1.08;letter-spacing:-.045em;margin-bottom:16px}
 .hero .lead{font-size:.98rem;line-height:1.65}
 .hero .action-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
 .hero .action-row>.btn,.hero .action-row>.phone-picker{width:100%;min-height:52px}
 .hero .action-row .phone-picker>summary{min-height:52px}
 .hero .hero-support{font-size:.87rem;line-height:1.55;margin-top:14px}
 .hero .hero-foot{margin-top:14px}
 .hero .hero-visual{height:clamp(275px,79vw,355px);margin-bottom:15px}
 .hero .hero-quote{max-width:calc(100% - 20px);padding:10px 13px}

 /* Four service cards swipe horizontally rather than consume four full-screen rows. */
 .services-section .service-grid{display:grid;grid-auto-columns:min(79vw,308px);grid-auto-flow:column;grid-template-columns:none;gap:13px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:1px;overscroll-behavior-inline:contain;padding:5px 5px 15px 1px;scrollbar-width:thin;scrollbar-color:#c0d2bf transparent;align-items:stretch}
 .services-section .service-card{scroll-snap-align:start;min-width:0;min-height:286px;height:100%;padding:22px;gap:14px}
 .services-section .service-card h3{font-size:1.36rem}
 .services-section .service-card p{font-size:.88rem;line-height:1.55}
 .mobile-swipe-hint{display:flex;justify-content:flex-end;gap:8px;margin:6px 2px 14px;color:#6b8170;font-size:.77rem}
 .services-section .help-line{margin-top:15px;padding:20px}
 .services-section .help-line strong{font-size:1.02rem}
 .services-section .help-line p{font-size:.88rem}

 /* Two-column team preview on ordinary phones; single column on very narrow phones. */
 .team-section .people-grid-all{gap:17px 13px}
 .team-section .person-data{padding:12px 1px 5px}
 .team-section .person-role{font-size:.68rem;line-height:1.5}
 .team-section .person-data h3{font-size:1.04rem;line-height:1.18;margin:7px 0 9px}
 .team-section .person-teaser{font-size:.8rem;line-height:1.5;-webkit-line-clamp:3;min-height:0!important;flex:none;margin:0 0 6px}
 .team-section .person-bio-expanded .person-teaser{-webkit-line-clamp:unset;display:block;overflow:visible}
 .person-teaser-toggle{display:inline-flex;align-self:flex-start;cursor:pointer;background:none;border:0;color:#426f51;text-decoration:underline;text-underline-offset:3px;font-size:.76rem;padding:5px 0;margin:0 0 9px}
 .team-section .person-actions{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:auto;padding-top:7px}
 .team-section .person-actions a{font-size:.76rem;line-height:1.4;min-height:28px;display:flex;align-items:center}
 .team-section .person-photo{aspect-ratio:4/4.35}
 .team-section .team-help-card{padding:24px 20px}
 .team-section .team-help-card h3{font-size:1.77rem}
 .team-section .team-help-points li{font-size:.87rem}
 .team-section .team-help-card .phone-picker{max-width:100%}

 /* FAQ button ends the section on mobile and follows its questions in DOM. */
 .faq-home-grid{display:flex;flex-direction:column;gap:0}
 .faq-home-intro{display:block;width:100%}
 .faq-home-intro h2{margin-bottom:21px}
 .faq-home-questions{width:100%}
 .faq-more{width:100%;margin:22px 0 0!important;justify-content:stretch!important}
 .faq-more>.btn{width:100%;min-height:50px;justify-content:space-between;text-align:left}

 /* Prices show highlights then take visitor to full list. */
 .home-prices .price-list>.price-item:nth-child(n+5){display:none}
 .home-prices .section-end{margin-top:19px}
 .price-item{padding:16px;gap:8px 12px;border-radius:16px}
 .price-item .price-icon{height:46px;width:46px;flex-basis:46px;border-radius:13px}
 .price-item .price-icon svg{height:24px;width:24px}
 .price-item h3{font-size:1.04rem;line-height:1.27}
 .price-item p{font-size:.78rem}
 .price-item .price-amount{font-size:.98rem}
 .price-item .text-link{font-size:.82rem}

 /* Contact information and map maintain hierarchy on narrow screens. */
 .home-contact-copy h2{max-width:100%;font-size:clamp(2rem,8vw,2.55rem)}
 .home-contact-copy>p{font-size:.92rem;line-height:1.65}
 .home-contact-copy .home-contact-meta{max-width:none}
 .home-contact-meta .home-contact-email{min-height:70px}
 .home-contact-meta .home-contact-action,.home-contact-meta .home-contact-action .home-booking-card{min-height:108px}
 .home-map iframe{height:285px}
 .map-heading{gap:12px}
 .contact-facts{gap:12px}
 .contact-panel{padding:25px 22px}
 .map-section{margin-top:40px}

 /* Make the dark closing CTA and footer feel designed, not simply stacked. */
 .closing-cta{padding:46px 0 42px}
 .closing-grid{display:flex;flex-direction:column;align-items:stretch;gap:23px}
 .closing-grid h2{font-size:clamp(1.9rem,7.5vw,2.45rem);line-height:1.15}
 .closing-grid p{font-size:.94rem;line-height:1.6}
 .closing-actions{width:100%;max-width:none;min-width:0;gap:10px}
 .closing-actions>.btn{min-height:52px;border-radius:16px}
 .footer{padding:42px 0 calc(24px + env(safe-area-inset-bottom))}
 .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:21px 18px}
 .footer-grid>div:first-child{grid-column:1/-1;padding-bottom:19px;border-bottom:1px solid rgba(255,255,255,.14)}
 .footer-grid>div:nth-child(2){grid-column:1;min-width:0}
 .footer-grid>div:nth-child(3){grid-column:2;min-width:0}
 .footer .brand-has-logo{width:min(var(--oko-footer-logo,190px),190px);margin-bottom:13px}
 .footer-grid>div:first-child p{max-width:42ch;font-size:.85rem;line-height:1.7;margin-bottom:0}
 .footer h3{font-size:.9rem;letter-spacing:.02em;margin:0 0 12px}
 .footer-contact-list{gap:11px;margin-top:14px}
 .footer-contact-list li{grid-template-columns:17px minmax(0,1fr);gap:7px;font-size:.78rem;line-height:1.55}
 .footer-contact-list svg{width:15px;height:15px}
 .footer-grid>div:last-child a{font-size:.86rem;margin-bottom:9px;display:block}
 .footer-grid>div:last-child ul{margin:0;padding:0;list-style:none}
 .footer-grid>div:last-child li{margin:0}
 .footer-bottom{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;border-top:1px solid rgba(255,255,255,.13);margin-top:26px;padding-top:17px;font-size:.72rem}
 .mobile-contact-bar{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));gap:8px;padding:7px;border-radius:16px}
 .mobile-contact-bar a{min-height:45px;font-size:.87rem}
 body{padding-bottom:calc(83px + env(safe-area-inset-bottom))}
}
@media(min-width:375px) and (max-width:580px){
 .team-section .people-grid-all{grid-template-columns:repeat(2,minmax(0,1fr))}
 .team-section .team-help-card[class*="team-help-span-"]{grid-column:1/-1}
}
@media(max-width:374px){
 .shell{width:calc(100% - 30px)}
 .team-section .people-grid-all{grid-template-columns:1fr}
 .team-section .person-photo{aspect-ratio:4/3.75}
 .team-section .person-data h3{font-size:1.13rem}
 .team-section .person-actions{flex-direction:row;flex-wrap:wrap}
 .footer-grid{grid-template-columns:1fr}
 .footer-grid>div:first-child,.footer-grid>div:nth-child(2),.footer-grid>div:nth-child(3){grid-column:1}
 .footer-grid>div:nth-child(2){padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(min-width:581px){.mobile-swipe-hint{display:none}}
@media(max-width:580px){.mobile-swipe-hint{display:flex}}
@media(prefers-reduced-motion:reduce){.services-section .service-grid{scroll-behavior:auto}}

/* In a swipe carousel the next card must peek into view immediately;
   scroll-reveal would otherwise hide that partially visible card. */
@media(max-width:580px){
 .services-section .service-grid .service-card.reveal-up{opacity:1;transform:none;transition:background-color .2s ease,box-shadow .2s ease}
}


/* 3.7 - scoped corrections. No redesign of working desktop sections. */
/* FAQ link should follow heading rather than occupy an expanding grid row. */
.faq-section .faq-home-grid{grid-template-rows:auto!important;align-items:start}
.faq-home-grid>.faq-home-intro{grid-column:1;grid-row:1;align-self:start;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:0}
.faq-home-grid>.faq-home-questions{grid-column:2;grid-row:1;min-width:0}
.faq-home-intro>.faq-more{position:static;display:flex;align-self:flex-start;grid-column:auto!important;grid-row:auto!important;justify-content:flex-start!important;margin:18px 0 0!important;width:auto}
.faq-home-intro>.faq-more .btn{min-height:44px}

/* Visual placeholder, clearly distinguished from verified reviews. */
.reviews-row{grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center;gap:clamp(25px,4vw,64px)}
.reviews-visual{min-width:0;max-width:420px;width:100%;justify-self:end}
.reviews-art{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#f5f7ee;border:1px solid #e2e9de;box-shadow:0 18px 44px rgba(34,65,48,.09)}
.reviews-art img{display:block;width:100%;height:420px;object-fit:cover;object-position:50% 47%}
.reviews-art figcaption{position:absolute;bottom:0;left:0;right:0;background:rgba(250,250,247,.94);padding:8px 12px;color:#516b58;font-size:.72rem;line-height:1.4;text-align:center}
.reviews-verified{padding-top:14px;font-size:.9rem;color:var(--muted)}
.reviews-external{display:inline-block;margin-top:10px}

/* Individual specialist telephone CTA uses the same sage treatment as elsewhere. */
.btn-oko-soft{background:#e4ece3;border-color:#d7e4d6;color:var(--forest)}
.btn-oko-soft:hover{background:#d7e5d5;border-color:#b8ceb9;color:var(--forest)}
.profile-grid .action-row .btn{display:inline-flex;align-items:center;gap:12px}

/* Service facts: labels separate from values. Visually distinct from buttons. */
.service-meta-row .service-facts{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0}
.service-fact{display:flex;align-items:center;gap:11px;padding:10px 14px;background:#e9f0e7;border:1px solid #e0e8dd;border-radius:17px;min-width:0}
.service-fact-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;background:#fff;border-radius:11px;color:#426a52}
.service-fact-icon svg{width:19px;height:19px;stroke-width:1.8}
.service-fact-text{display:flex;flex-direction:column;min-width:0;gap:1px}
.service-fact-label{color:#60756b;font-size:.72rem;line-height:1.4}
.service-fact strong{font-size:.88rem;font-weight:750;line-height:1.4;color:var(--ink)}

/* Footer is explicitly redesigned for mobile rather than inheriting desktop columns. */
@media (max-width:850px){
 .reviews-row{grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:25px}
 .reviews-art img{height:365px}
}
@media (max-width:580px){
 /* Prevent the previously stretched FAQ button; place it after questions. */
 .faq-home-grid{display:flex!important;flex-direction:column;align-items:stretch;gap:0}
 .faq-home-grid>.faq-home-intro{display:contents}
 .faq-home-intro>.eyebrow{order:1}
 .faq-home-intro>h2{order:2;margin-bottom:22px}
 .faq-home-grid>.faq-home-questions{order:3}
 .faq-home-intro>.faq-more{order:4;width:100%;align-self:stretch;display:flex;margin:22px 0 0!important;justify-content:stretch!important}
 .faq-home-intro>.faq-more .btn{width:100%;min-height:50px;justify-content:space-between;text-align:left}

 .profile-grid .action-row{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
 .profile-grid .action-row .btn{width:100%;justify-content:space-between;min-height:52px;padding:12px 19px}

 .page-hero .service-meta-row{width:100%;display:flex;flex-direction:column;gap:14px;align-items:stretch}
 .page-hero .service-meta-row .service-facts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(95px,.65fr);gap:10px;align-items:stretch;width:100%;margin:0}
 .page-hero .service-fact{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;padding:14px 13px;border-radius:18px;background:#edf3e9}
 .page-hero .service-fact-icon{width:31px;height:31px;flex-basis:31px}
 .page-hero .service-fact-text{gap:4px;width:100%}
 .page-hero .service-fact-label{font-size:.7rem;line-height:1.25;letter-spacing:.01em}
 .page-hero .service-fact strong{font-size:.91rem;line-height:1.35;overflow-wrap:break-word}
 .page-hero .service-meta-cta{width:100%}
 .page-hero .service-meta-cta .btn{min-height:53px;width:100%;justify-content:space-between}
 .page-hero .service-meta-cta .btn span{margin-left:auto}

 /* Expand toggle appears only if JS confirms natural text exceeds 3 lines. */
 .team-section .person-teaser-toggle{margin-top:0;min-height:30px;line-height:1.3}
 .team-section .person-bio-expanded .person-teaser{display:block;-webkit-line-clamp:unset;overflow:visible}

 /* Reviews as one coherent image and section, without an extra long scroll. */
 .reviews-row{display:flex;flex-direction:column;gap:20px;align-items:stretch}
 .reviews-visual{max-width:100%;width:100%;justify-self:auto}
 .reviews-art{border-radius:21px}
 .reviews-art img{height:300px;object-position:50% 45%}
 .reviews-row h2{font-size:clamp(1.9rem,7vw,2.5rem)}
 .reviews-row p{font-size:.92rem}

 /* Proper single-column footer with visual separators and usable links. */
 .footer{padding:42px 0 calc(110px + env(safe-area-inset-bottom))!important}
 .footer .footer-grid{display:flex!important;flex-direction:column;align-items:stretch;gap:0!important}
 .footer-grid>div{width:100%;min-width:0}
 .footer-grid>div:first-child{padding:0 0 24px;margin:0 0 23px;border-bottom:1px solid rgba(255,255,255,.16)}
 .footer-grid>div:nth-child(2){grid-column:auto;padding:0 0 23px;margin:0 0 21px;border-bottom:1px solid rgba(255,255,255,.16)}
 .footer-grid>div:nth-child(3){grid-column:auto;padding:0;margin:0;border:none}
 .footer .brand-has-logo{margin:0 0 17px;width:min(var(--oko-footer-logo,190px),200px)}
 .footer-grid>div:first-child p{max-width:48ch;font-size:.88rem;line-height:1.72;color:#dce8df}
 .footer h3{font-size:.99rem;font-weight:700;margin:0 0 15px;line-height:1.3}
 .footer-contact-list{display:grid;grid-template-columns:1fr;gap:5px;margin:0}
 .footer-contact-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;align-items:center;min-height:43px;font-size:.89rem;line-height:1.5;margin:0}
 .footer-contact-list li>span:first-child{width:29px;height:29px;border:1px solid rgba(190,215,195,.2);background:rgba(255,255,255,.055);border-radius:9px;color:#c3d9c9}
 .footer-contact-list svg{width:17px;height:17px}
 .footer-contact-list li a{overflow-wrap:anywhere;padding:9px 0}
 .footer-grid>div:last-child ul,.footer-grid>div:last-child>.menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;margin:0;padding:0;list-style:none}
 .footer-grid>div:last-child li{min-width:0;margin:0}
 .footer-grid>div:last-child a{display:block;font-size:.88rem;line-height:1.45;margin:0;padding:9px 0;min-height:40px}
 .footer-bottom{margin-top:25px;padding-top:18px;gap:6px;align-items:flex-start;text-align:left;line-height:1.5;font-size:.74rem}
 /* Footer bar remains fixed, clear of content and safe area. */
 .mobile-contact-bar{z-index:49;bottom:max(10px,env(safe-area-inset-bottom))}
 body{padding-bottom:0}
}
@media(max-width:374px){
 .page-hero .service-meta-row .service-facts{grid-template-columns:minmax(0,1fr) minmax(91px,.66fr)}
 .footer-grid>div:last-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}