/* CELLIANO RESPONSIVE GUARD 2026-09-25
   Shared tablet/viewport fixes for the public site.
   Goal: no horizontal page drift, comfortable tablet layouts, untouched wide desktop design. */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
@supports not (overflow:clip){
  html,
  body{overflow-x:hidden}
}
body{position:relative}
main,
.site-header,
.site-footer{max-width:100%;min-width:0}
.site-header__inner,
.site-menu,
main > *,
section,
article,
figure{min-width:0}
img,
video,
iframe{max-width:100%}
input,
select,
textarea,
button{max-width:100%}

/* Tablet navigation: give links their own row instead of squeezing the page. */
@media (min-width:681px) and (max-width:1050px){
  .site-header{position:relative}
  .site-header__inner{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:9px 14px;
    padding:11px 18px;
  }
  .site-header .brand{margin:0 auto 0 0}
  .site-header .site-social--header,
  .site-header .site-social{margin-left:0}
  .site-menu{
    order:3;
    flex:1 1 100%;
    width:100%;
    justify-content:center;
    gap:3px 12px;
    margin-top:3px;
    padding-top:4px;
  }
  .site-menu a{
    font-size:11px;
    line-height:1.35;
    padding:6px 1px;
    white-space:nowrap;
  }
}

/* O NÁS — the former 3-column opening and split hero were too wide for portrait tablets. */
@media (min-width:681px) and (max-width:1000px){
  .celliano-about{
    width:100%;
    max-width:100%;
  }
  .celliano-about .ca-hero{
    grid-template-columns:1fr!important;
    min-height:0!important;
    gap:30px!important;
    padding:48px 38px 38px!important;
  }
  .celliano-about .ca-hero__copy{
    max-width:760px;
    padding:6px 2px 0!important;
  }
  .celliano-about .ca-hero h1{
    max-width:720px!important;
    font-size:clamp(42px,6.2vw,58px)!important;
  }
  .celliano-about .ca-intro{max-width:720px!important}
  .celliano-about .ca-hero__gallery{
    width:100%;
    height:auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto!important;
    gap:10px!important;
  }
  .celliano-about .ca-hero-photo{
    min-height:0!important;
  }
  .celliano-about .ca-hero-photo--main{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    aspect-ratio:16 / 9;
  }
  .celliano-about .ca-hero-photo--event,
  .celliano-about .ca-hero-photo--stage{
    aspect-ratio:4 / 3;
  }
  .celliano-about .ca-hero-photo img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .celliano-about .ca-hero-photo--main img{
    object-position:center 48%!important;
  }
  .celliano-about .ca-hero-photo--event img{
    object-position:center 44%!important;
  }
  .celliano-about .ca-hero-photo--stage img{
    object-position:center 45%!important;
  }
  .celliano-about .ca-opening{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:22px 28px!important;
    padding:48px 10px 0!important;
    align-items:start!important;
  }
  .celliano-about .ca-opening__portrait{
    grid-column:1 / -1;
    width:100%;
    height:285px!important;
    margin-top:4px!important;
  }
  .celliano-about .ca-opening__portrait img{
    width:auto!important;
    max-width:min(360px,70vw)!important;
  }
  .celliano-about .ca-profiles{
    gap:22px!important;
  }
  .celliano-about .ca-card::before{
    left:8px!important;
    right:0!important;
  }
}

/* FIREMNÍ AKCE — stack editorial/hero earlier so text never gets a narrow clipped column. */
@media (min-width:681px) and (max-width:1050px){
  .celliano-corporate{
    width:100%;
    max-width:100%;
  }
  .celliano-corporate .cc-hero{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .celliano-corporate .cc-hero__copy{
    padding:56px 42px 45px!important;
  }
  .celliano-corporate .cc-hero h1{
    max-width:760px!important;
    font-size:clamp(43px,6vw,59px)!important;
  }
  .celliano-corporate .cc-intro{max-width:720px!important}
  .celliano-corporate .cc-hero__photo{
    min-height:0!important;
    aspect-ratio:4/3;
  }
  .celliano-corporate .cc-hero__photo img{
    object-position:center center!important;
  }
  .celliano-corporate .cc-editorial{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .celliano-corporate .cc-editorial__photo{
    min-height:0!important;
    aspect-ratio:4/3;
  }
  .celliano-corporate .cc-editorial__photo img{
    object-position:center center!important;
  }
  .celliano-corporate .cc-editorial__copy{
    padding:40px 38px 43px!important;
  }
  .celliano-corporate .cc-editorial h2{
    max-width:760px;
    font-size:clamp(34px,5vw,46px)!important;
  }
  .celliano-corporate .cc-points{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* KONTAKT — keep Diana/floral artwork inside the tablet viewport.
   It may extend vertically between cards, but never create horizontal scroll. */
@media (min-width:681px) and (max-width:1050px){
  .celliano-contact{
    width:100%;
    max-width:100%;
    padding:58px clamp(24px,5vw,46px);
  }
  .celliano-contact .ct-grid{
    grid-template-columns:1fr!important;
  }
  .celliano-contact .ct-card--phone{
    min-height:320px!important;
    padding:34px 43% 34px 34px!important;
  }
  .celliano-contact .ct-card--phone::after{
    right:14px!important;
    bottom:-84px!important;
  }
  .celliano-contact .ct-phone-portrait{
    right:0!important;
    bottom:-90px!important;
    width:55%!important;
    height:138%!important;
  }
  .celliano-contact .ct-floral-back{
    right:3%!important;
    bottom:-136px!important;
    width:61%!important;
  }
  .celliano-contact .ct-phone-copy{
    max-width:430px;
  }
  .celliano-contact .ct-form,
  .celliano-contact .ct-smart__grid{
    min-width:0;
  }
}

/* SVATBY — use an editorial stacked hero on tablet and keep the new price content airy. */
@media (min-width:681px) and (max-width:1050px){
  .celliano-wedding{
    width:100%;
    max-width:100%;
  }
  .celliano-wedding .cw-hero{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .celliano-wedding .cw-hero__copy{
    padding:56px 42px 46px!important;
  }
  .celliano-wedding .cw-hero h1{
    max-width:760px!important;
    font-size:clamp(43px,6vw,59px)!important;
  }
  .celliano-wedding .cw-hero__photo{
    min-height:320px!important;
    aspect-ratio:16/8;
  }
  .celliano-wedding .cw-availability{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .celliano-wedding .wedding-included__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Small screens: defensive width rules only; individual page mobile layouts remain in charge. */
@media (max-width:680px){
  .site-header__inner,
  main,
  .celliano-about,
  .celliano-corporate,
  .celliano-contact,
  .celliano-wedding{
    max-width:100%;
  }
  .ct-phone-number,
  .ct-whatsapp__label{
    white-space:normal;
  }
}


/* MOBILE CONFIGURATOR CTA — hard-pinned to the viewport, including iOS Safari. */
@media (max-width:680px){
  body{padding-bottom:max(86px,calc(74px + env(safe-area-inset-bottom)))!important}
  .cl-mobile-term.cl-mobile-configurator{
    position:fixed!important;
    position:-webkit-fixed!important;
    top:auto!important;
    left:max(14px,env(safe-area-inset-left))!important;
    right:max(14px,env(safe-area-inset-right))!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:360px!important;
    min-height:50px!important;
    margin:0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:none!important;
    -webkit-transform:none!important;
    z-index:1200!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    isolation:isolate;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .cl-mobile-term.cl-mobile-configurator.is-context-hidden{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  /* When the wedding basket appears, keep both controls pinned instead of overlapping. */
  body.cw-has-selection .cl-mobile-term.cl-mobile-configurator{
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
  }
  body.cw-has-selection{padding-bottom:max(150px,calc(138px + env(safe-area-inset-bottom)))!important}
}

/* MOBILE CONFIGURATOR CTA — visual viewport fallback */
@media (max-width:680px){
  .cl-mobile-term.cl-mobile-configurator{
    top:calc(100dvh - 62px - env(safe-area-inset-bottom))!important;
    bottom:auto!important;
    left:50%!important;
    right:auto!important;
    width:min(88vw,360px)!important;
    max-width:calc(100vw - 28px)!important;
    transform:translate3d(-50%,0,0)!important;
    -webkit-transform:translate3d(-50%,0,0)!important;
    z-index:2147483000!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.cw-has-selection .cl-mobile-term.cl-mobile-configurator{
    top:calc(100dvh - 132px - env(safe-area-inset-bottom))!important;
    bottom:auto!important;
  }
}

/* MOBILE CONFIGURATOR CTA — context visibility final */
@media (max-width:680px){
  .cl-mobile-term.cl-mobile-configurator.is-context-hidden{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}