/* Cementare — beton-gorunumlu-zemin-duvar.html
   Responsive parity with Concretta concretta.html (V426 inner-page behavior).
   Desktop >1180px intentionally untouched. */

body.cc-page{
  overflow-x:hidden;
}
body.cc-page *{
  box-sizing:border-box;
}
body.cc-page img,
body.cc-page video,
body.cc-page iframe,
body.cc-page svg{
  max-width:100%;
}
body.cc-page :where(.row,[class*="grid"],[class*="shell"],[class*="wrap"],[class*="copy"],[class*="content"],[class*="panel"]){
  min-width:0;
}

/* Tablet portrait / compact tablets — Concretta inner-page rhythm. */
@media (min-width:701px) and (max-width:991px){
  body.cc-page{overflow-x:clip;}

  body.cc-page .cb119-hero{
    min-height:78svh!important;
    height:auto!important;
    padding-top:122px!important;
    padding-bottom:64px!important;
  }
  body.cc-page .cb119-hero-layout{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  body.cc-page .cb119-hero-rail{display:none!important;}
  body.cc-page .cb119-hero h1{
    font-size:clamp(48px,6.4vw,58px)!important;
  }
  body.cc-page .cb119-hero-copy{max-width:560px!important;font-size:14px!important;line-height:1.65!important;}

  /* Calm Concretta-style content gutters. */
  body.cc-page .cc-shell{
    width:calc(100% - 56px)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.cc-page .cc-grid2,
  body.cc-page .cc-tech-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:clamp(28px,4vw,48px)!important;
  }
  body.cc-page .cc-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }
}

/* Phones / large phones — iPhone + Samsung/Android portrait parity. */
@media (max-width:700px){
  body.cc-page{overflow-x:hidden!important;}

  body.cc-page .cb119-wrap{
    width:auto!important;
    max-width:none!important;
    margin-left:20px!important;
    margin-right:20px!important;
  }
  body.cc-page .cb119-hero{
    min-height:100svh!important;
    min-height:100dvh!important;
    height:auto!important;
    padding-top:max(112px,calc(88px + env(safe-area-inset-top)))!important;
    padding-bottom:max(52px,calc(38px + env(safe-area-inset-bottom)))!important;
  }
  body.cc-page .cb119-hero-layout{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  body.cc-page .cb119-hero h1{
    max-width:100%!important;
    font-size:clamp(38px,10.8vw,44px)!important;
    line-height:.98!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  body.cc-page .cb119-hero-copy{max-width:340px!important;margin-top:0!important;font-size:13.5px!important;line-height:1.58!important;overflow-wrap:anywhere!important;}
  body.cc-page .cb119-hero-actions{
    align-items:flex-start!important;
    gap:18px!important;
    margin-top:26px!important;
  }
  body.cc-page .cb119-hero-rail{display:none!important;}

  /* Lower sections use the same 20px visual gutter as Concretta inner pages. */
  body.cc-page .cc-shell{
    width:auto!important;
    max-width:none!important;
    margin-left:20px!important;
    margin-right:20px!important;
  }
  body.cc-page .cc-grid2,
  body.cc-page .cc-tech-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  body.cc-page .cc-facts{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  body.cc-page .cc-gallery{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.cc-page .cc-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  body.cc-page .cc-link{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    text-align:center!important;
  }
  body.cc-page .cc-section{
    padding-block:clamp(48px,12vw,72px)!important;
  }
  body.cc-page .cc-title{
    font-size:clamp(29px,7.8vw,34px)!important;
    line-height:1.05!important;
  }

  /* Lightbox safety for iPhone/Samsung browser bars and notches. */
  body.cc-page .cc-lightbox{
    padding:max(14px,env(safe-area-inset-top))
            max(14px,env(safe-area-inset-right))
            max(14px,env(safe-area-inset-bottom))
            max(14px,env(safe-area-inset-left))!important;
  }
  body.cc-page .cc-lightbox-stage{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 96px)!important;
  }
  body.cc-page .cc-lightbox-stage img{
    max-width:100%!important;
    max-height:calc(100dvh - 130px)!important;
    object-fit:contain!important;
  }
  body.cc-page .cc-lightbox-close{
    top:max(10px,env(safe-area-inset-top))!important;
    right:max(10px,env(safe-area-inset-right))!important;
  }
}

@media (max-width:420px){
  body.cc-page .cc-facts{grid-template-columns:1fr!important;}
}

/* iPhone Safari browser bars — prefer stable small viewport height. */
@supports (-webkit-touch-callout:none){
  @media (max-width:700px){
    body.cc-page .cb119-hero{min-height:100svh!important;}
    body.cc-page .cb119-hero-layout{
      -webkit-transform:none!important;
      transform:none!important;
    }
  }
}

/* Phone landscape / short viewport — never force portrait-height hero. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  body.cc-page .cb119-hero{
    min-height:0!important;
    height:auto!important;
    padding-top:max(84px,calc(66px + env(safe-area-inset-top)))!important;
    padding-bottom:max(30px,calc(22px + env(safe-area-inset-bottom)))!important;
  }
  body.cc-page .cb119-hero h1{
    font-size:clamp(34px,6vw,42px)!important;
  }
  body.cc-page .cb119-hero-copy{
    margin-top:14px!important;
    font-size:12.5px!important;line-height:1.5!important;
  }
  body.cc-page .cb119-hero-actions{
    margin-top:18px!important;
  }
  body.cc-page .cc-lightbox-stage img{
    max-height:calc(100dvh - 80px)!important;
  }
}

/* Touch landscape tablets — Concretta safe-gutter behavior. */
@media (min-width:992px) and (max-width:1180px) and (hover:none) and (pointer:coarse){
  body.cc-page{overflow-x:clip;}
  body.cc-page .cb119-wrap{
    width:calc(100% - 64px)!important;
  }
  body.cc-page .cc-shell{
    width:calc(100% - 64px)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* Concretta V453 typography parity */
@media (min-width:701px) and (max-width:991px){
  body.cc-page .cc-title{font-size:clamp(31px,4.2vw,36px)!important;line-height:1.12!important;}
  body.cc-page .cc-copy,
  body.cc-page .cc-tech-copy{font-size:15px!important;line-height:1.72!important;}
  body.cc-page .cc-side-note p,
  body.cc-page .cc-gallery-head p{font-size:14px!important;}
}

@media (max-width:700px){
  body.cc-page .cb119-hero h1{
    max-width:340px!important;
    font-size:clamp(38px,10.8vw,44px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  body.cc-page .cb119-hero-copy{
    max-width:340px!important;
    font-size:13.5px!important;
    line-height:1.58!important;
  }
  body.cc-page .cc-title{
    font-size:clamp(29px,7.8vw,34px)!important;
    line-height:1.12!important;
  }
  body.cc-page .cc-copy,
  body.cc-page .cc-tech-copy{
    font-size:15px!important;
    line-height:1.72!important;
  }
  body.cc-page .cc-side-note p,
  body.cc-page .cc-gallery-head p{
    font-size:14px!important;
    line-height:1.7!important;
  }
  body.cc-page .cc-link{
    font-size:14px!important;
  }
  body.cc-page .cc-eyebrow,
  body.cc-page .cc-kicker,
  body.cc-page .cc-sub,
  body.cc-page .cc-tech-card h3{
    font-size:12px!important;
  }
  body.cc-page .cc-tech-card p{
    font-size:15px!important;
    line-height:1.7!important;
  }
}

@media (max-width:390px){
  body.cc-page .cb119-hero h1{font-size:37px!important;}
  body.cc-page .cb119-hero-copy{font-size:13px!important;}
}

@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  body.cc-page .cb119-hero h1{font-size:clamp(34px,6vw,42px)!important;}
  body.cc-page .cb119-hero-copy{font-size:12.5px!important;line-height:1.5!important;}
}