/* ETAP21. Phone gutters stay physical as text grows; content keeps its own scale. */
@media(max-width:760px){
 body.vibrant.rc8 .container{width:calc(100% - 32px);margin-inline:auto}
 body.vibrant.rc8 .facebook-feed-fallback{padding:16px;gap:12px;grid-template-columns:minmax(0,1fr)}
 body.vibrant.rc8 .facebook-feed-fallback>div:first-child{display:none}
 body.vibrant.rc8 .facebook-feed-fallback .btn{display:block;width:100%;padding:12px;overflow-wrap:normal;word-break:normal}
 body.vibrant.rc8 .facebook-feed-fallback .btn>span{display:inline}
 body.vibrant.rc8 .rc8-parent-grid{gap:24px}
 /* A resized text panel must keep its natural height, including during disclosure. */
 body.vibrant.rc8 .package-panels{height:auto!important}
 body.vibrant.rc8 .rc8-parent-copy{padding-inline:0}
 body.vibrant.rc8 .rc8-parent :is(p,figcaption){font-size:1rem;line-height:1.6}
 body.vibrant.rc8 .rc8-tea{transform:none}
 body.vibrant.rc8 .site-header .nav-shell{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
}
/* No gesture cancellation: native pan and pinch remain available in the gallery. */
body.vibrant.rc8 :is(.viewer-stage,#viewer-image,.gallery-item){touch-action:auto}
body.vibrant.rc8 :is(input,select,textarea){font-size:max(16px,1rem)}
body.vibrant.rc8 .rc9-consent-banner{bottom:max(8px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));scroll-padding-block:16px;overscroll-behavior:contain}
body.vibrant.rc8 .rc9-consent-banner :is(p,.btn){font-size:.875rem;line-height:1.5}
body.vibrant.rc8 .rc9-consent-banner h2{font-size:1.375rem}
body.vibrant.rc8 .rc9-consent-banner .eyebrow{font-size:.75rem}
body.vibrant.rc8 #privacy-dialog{padding-bottom:max(24px,env(safe-area-inset-bottom));scroll-padding-block:24px}
body.vibrant.rc8 #privacy-dialog :is(p,small){font-size:.9375rem}
/* A tall zoomed header or an editing viewport must scroll out of the way. */
html[data-etap21-flow-header] body.vibrant.rc8 .site-header{position:relative}
html[data-etap21-flow-header]{--rc9-header-height:0px!important;scroll-padding-top:20px}
html[data-etap21-editing] body.vibrant.rc8 .calc-result{position:static}
@media(max-height:500px){
 body.vibrant.rc8 .rc9-consent-banner{max-height:55dvh}
 body.vibrant.rc8 .mobile-nav:not([hidden]){position:relative!important;top:auto;max-height:none}
}

/* Expanded galleries need rows, not one flex row for every archived photo. */
body.vibrant.rc8 .editorial-gallery.is-expanded:not(.is-filtered) .gallery-tail{
 display:grid;grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:24px 16px;
}
body.vibrant.rc8 .editorial-gallery .gallery-tail>.gallery-item{
 grid-column:auto!important;grid-row:auto!important;min-width:0;width:100%;
}
body.vibrant.rc8 .editorial-gallery .gallery-caption{font-size:.875rem!important;line-height:1.5}
body.vibrant.rc8 .editorial-gallery .gallery-caption>span:first-child{min-width:0;overflow-wrap:anywhere}
/* The flex text column must yield to its labelled checkbox at text200%. */
body.vibrant.rc8 #privacy-dialog fieldset{min-width:0;padding-inline:12px}
body.vibrant.rc8 #privacy-dialog label{min-width:0}
body.vibrant.rc8 #privacy-dialog label>span{min-width:0;flex:1;overflow-wrap:anywhere}
body.vibrant.rc8 #privacy-dialog label>input{flex:0 0 44px}
/* Captions are content with their own height, outside the image crop. */
@media(max-width:1024px){
 body.vibrant.rc8 .page-hero-photo:has(>.hero-photo-caption){height:auto;display:flex;flex-direction:column}
 body.vibrant.rc8 .page-hero-photo:has(>.hero-photo-caption)>picture{display:block;width:100%;height:clamp(170px,36vw,380px)}
 body.vibrant.rc8 .page-hero-photo:has(>.hero-photo-caption)>picture>img{width:100%;height:100%;object-fit:cover}
 body.vibrant.rc8 .page-hero-photo>.hero-photo-caption{position:static;inset:auto;max-width:100%;width:100%;box-sizing:border-box;margin:0;padding:12px 16px;font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}
}

/* Final visual review: avoid UA dialog max-width and dark-footer small text. */
body.vibrant.rc8 .full-footer #privacy-dialog{width:min(640px,calc(100% - 24px));max-width:calc(100% - 24px);padding:16px}
body.vibrant.rc8 .full-footer #privacy-dialog :is(p,label,legend,small,strong,span,h2){color:#173955;opacity:1;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
body.vibrant.rc8 .full-footer #privacy-dialog label{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;width:100%;font-size:1rem;line-height:1.5}
body.vibrant.rc8 .full-footer #privacy-dialog label>span{display:block;min-width:0}
body.vibrant.rc8 .full-footer #privacy-dialog small{font-size:.875rem;line-height:1.5}
body.vibrant.rc8 .full-footer #privacy-dialog fieldset{width:100%;min-inline-size:0;box-sizing:border-box}
body.vibrant.rc8 .full-footer #privacy-dialog>form{display:flex;justify-content:flex-end}
body.vibrant.rc8 .full-footer #privacy-dialog .privacy-close{float:none}

/* LEAN 31_5: geometric disclosure icon, independent of font baseline/zoom. */
body.vibrant.rc8 .offer-accordion-list .offer-summary>.offer-toggle{line-height:0;flex-shrink:0}
body.vibrant.rc8 .offer-toggle>svg{display:block;width:20px;height:20px;margin:auto;overflow:visible}
/* The full summary is the touch target; its decorative icon is not a button. */
body.vibrant.rc8 .offer-accordion-list .offer-summary{min-height:44px}
/* viewport-fit=cover must have matching gutters in landscape and modal top layer. */
/* Preserve the approved desktop content width (1200px) while respecting mobile safe-area gutters. */
body.vibrant.rc8 .container{max-width:min(1200px,calc(100% - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right))))}
body.vibrant.rc8 .site-header{padding-top:env(safe-area-inset-top)}
body.vibrant.rc8 .full-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
body.vibrant.rc8 .mobile-nav:not([hidden]){padding-bottom:max(16px,env(safe-area-inset-bottom));overscroll-behavior:contain;scroll-padding-block:16px}
body.vibrant.rc8 dialog{
 max-width:calc(100% - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)));
 max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));
 overflow:auto;overscroll-behavior:contain;scroll-padding-block:16px;
}
body.vibrant.rc8:has(dialog[open]){overflow:hidden}
body.vibrant.rc8 dialog :is(h2,h3,p){overflow-wrap:anywhere}
body.vibrant.rc8 .full-footer #privacy-dialog :is(a,button,input):focus-visible{outline-color:#173955}
/* Native text may grow, but the close glyph stays in the middle of its target. */
body.vibrant.rc8 :is(.privacy-close,#viewer-close){display:inline-grid;place-items:center;line-height:1;padding:0;min-width:44px;min-height:44px}
body.vibrant.rc8 #main:focus-visible{outline:3px solid #173955;outline-offset:-3px}
body.vibrant.rc8 .full-footer #privacy-dialog{max-width:calc(100% - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)))}

/* Ultra-narrow reflow only. The approved 100/125% matrix starts at 256 CSS px.
   Keep every control/content item; give intrinsic tracks and text room to wrap. */
@media(max-width:239px){
 body.vibrant.rc8 #photo-viewer .viewer-toolbar{display:grid;grid-template-columns:repeat(2,minmax(44px,1fr));gap:8px}
 body.vibrant.rc8 #photo-viewer .viewer-navigation{display:contents}
 body.vibrant.rc8 #viewer-prev{grid-area:1/1;justify-self:center}
 body.vibrant.rc8 #viewer-next{grid-area:1/2;justify-self:center}
 body.vibrant.rc8 #viewer-counter{grid-area:2/1;min-width:0;white-space:normal;overflow-wrap:anywhere}
 body.vibrant.rc8 #viewer-close{grid-area:2/2;justify-self:center;margin:0}
 body.vibrant.rc8 #photo-viewer :is(#viewer-prev,#viewer-next,#viewer-close){min-width:44px;min-height:44px}
 body.vibrant.rc8 .mobile-bottom{flex-direction:column}
 body.vibrant.rc8 .visit-grid{grid-template-columns:minmax(0,1fr)}
 body.vibrant.rc8 .hours-row{flex-wrap:wrap}
 body.vibrant.rc8 .hours-row>*{min-width:0;overflow-wrap:anywhere}
 body.vibrant.rc8 .feature-list{grid-template-columns:minmax(0,1fr)}
 body.vibrant.rc8 .feature-list>li{min-width:0;overflow-wrap:anywhere}
 body.vibrant.rc8 .story-placeholder .placeholder-controls{min-width:0;max-width:100%;flex-wrap:wrap}
 body.vibrant.rc8 .facebook-feed-fallback .btn{overflow-wrap:anywhere}
 body.vibrant.rc8 .workshop-card .quiet-link{display:block}
 body.vibrant.rc8 .offer-accordion-list .offer-summary>.offer-summary-meta{padding-left:0}
 body.vibrant.rc8 .rc8-exclusive{grid-template-columns:minmax(0,1fr)}
 body.vibrant.rc8 .rc8-exclusive>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
 body.vibrant.rc8 .full-footer #privacy-dialog label{grid-template-columns:minmax(0,1fr)}
}

/* Owner night polish: a useful news invitation in place of an inactive form. */
body.vibrant.rc8 .planet-news{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(22px,4vw,40px);margin:24px 0 40px;background:#d9f1eb;border:1px solid #b2d9d0;border-radius:26px;color:#173955}
body.vibrant.rc8 .planet-news>div{min-width:0}
body.vibrant.rc8 .planet-news h2{font-size:clamp(26px,3vw,36px);line-height:1.2;margin:12px 0}
body.vibrant.rc8 .planet-news p{margin:0;line-height:1.65}
body.vibrant.rc8 .planet-news .btn{flex-shrink:0;white-space:normal;text-align:center}
@media(max-width:760px){body.vibrant.rc8 .planet-news{flex-direction:column;align-items:stretch}body.vibrant.rc8 .planet-news .btn{width:100%}}

/* Keep the whole shelf and speaker; this owner photo is a portrait. */
body.vibrant.rc8 .rc8-audio .owner-photo{aspect-ratio:3/4;border-radius:28px;background:#e1eee8}
body.vibrant.rc8 .rc8-audio .owner-photo :is(picture,img){width:100%;height:100%;display:block}
body.vibrant.rc8 .rc8-audio .owner-photo img{object-fit:contain;object-position:center}
body.vibrant.rc8 .home-moments-grid img[data-owner-photo="robotyka-kubeczki"]{object-position:50% 0%;aspect-ratio:3/4}
body.vibrant.rc8 .rc8-birthday-overlay .owner-photo img{object-position:50% 25%}
body.vibrant.rc8 .story-home .visual-frame figcaption{position:relative;inset:auto;margin:0 auto;transform:none;justify-content:center;text-align:center;width:100%;box-sizing:border-box}

/* One compact mobile birthday collage, with both faces kept above the overlap. */
@media(min-width:240px) and (max-width:760px){
 body.vibrant.rc8 #urodziny .birthday-photos{display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;align-items:start;height:auto!important;min-height:0!important;padding:0 0 12px;overflow:visible}
 body.vibrant.rc8 #urodziny .birthday-photos .birthday-main{position:relative!important;inset:auto!important;grid-column:1/10;grid-row:1;width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;object-position:50% 35%;margin:0;transform:rotate(-2deg)!important}
 body.vibrant.rc8 #urodziny .birthday-photos .birthday-small{position:relative!important;inset:auto!important;grid-column:5/-1;grid-row:2;width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;object-position:50% 25%;margin:-28px 0 0;transform:rotate(3deg)!important;z-index:1}
 body.vibrant.rc8 #urodziny .birthday-photos .photo-sticker{position:relative!important;inset:auto!important;grid-column:1/-1;grid-row:3;width:100%;max-width:100%;margin:22px 0 0;transform:none!important;box-sizing:border-box;text-align:center;white-space:normal}
}