/* Cementare Colours mobile parity v1
   Scope: renk.html + en/colours.html only. Desktop >=1200px unchanged. */

@media (max-width:1199px){
  .ct-color-page,
  .ct-color-wrap,
  .ct-color-section-head,
  .ct-color-grid,
  .ct-color-grid > *,
  .ct-swatch-card,
  .ct-swatch-media,
  .ct-color-cta-grid,
  .ct-color-modal-panel,
  .ct-color-modal-image,
  .ct-color-modal-info{
    min-width:0!important;
    box-sizing:border-box;
  }

  .ct-color-wrap{max-width:100%!important;}
  .ct-swatch-media img{display:block;width:100%!important;max-width:100%!important;}

  .ct-color-modal{
    box-sizing:border-box!important;
    overscroll-behavior:none!important;
  }
  .ct-color-modal-panel{
    max-width:100%!important;
    overflow:hidden!important;
  }
  .ct-color-modal-image{overflow:hidden!important;}
  .ct-color-modal-image img{
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
  }
}

@media (min-width:701px) and (max-width:991px){
  .ct-color-wrap{
    width:min(calc(100% - 48px),1280px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .ct-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .ct-color-modal{
    padding:max(18px,var(--cementare-safe-top,0px)) max(18px,var(--cementare-safe-right,0px)) max(18px,var(--cementare-safe-bottom,0px)) max(18px,var(--cementare-safe-left,0px))!important;
  }
  .ct-color-modal-panel{
    width:min(860px,100%)!important;
    height:auto!important;
    max-height:calc(var(--ct-mobile-vh-px,100dvh) - 36px - var(--cementare-safe-top,0px) - var(--cementare-safe-bottom,0px))!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }
  .ct-color-modal-image{max-height:54dvh!important;}
  .ct-color-modal-image img{height:100%!important;max-height:54dvh!important;object-fit:contain!important;}
  .ct-color-modal-info{padding:24px 30px 28px!important;}
}

@media (max-width:700px){
  .ct-color-wrap{
    width:auto!important;
    margin-left:max(18px,var(--cementare-safe-left,0px))!important;
    margin-right:max(18px,var(--cementare-safe-right,0px))!important;
  }
  .ct-color-section-head,
  .ct-color-cta-grid{grid-template-columns:minmax(0,1fr)!important;}
  .ct-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 12px!important;}
  .ct-swatch-meta{min-width:0!important;}

  .ct-color-modal{
    padding:max(8px,var(--cementare-safe-top,0px)) max(8px,var(--cementare-safe-right,0px)) max(8px,var(--cementare-safe-bottom,0px)) max(8px,var(--cementare-safe-left,0px))!important;
  }
  .ct-color-modal-panel{
    width:100%!important;
    height:auto!important;
    max-height:calc(var(--ct-mobile-vh-px,100dvh) - max(16px,var(--cementare-safe-top,0px)) - max(16px,var(--cementare-safe-bottom,0px)))!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  .ct-color-modal-image{height:auto!important;max-height:52dvh!important;}
  .ct-color-modal-image img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    max-height:52dvh!important;
    object-fit:contain!important;
  }
  .ct-color-modal-info{padding:18px 20px max(20px,var(--cementare-safe-bottom,0px))!important;}
  .ct-color-modal-close{top:max(10px,var(--cementare-safe-top,0px))!important;right:max(10px,var(--cementare-safe-right,0px))!important;}
  .ct-color-modal-prev{left:max(10px,var(--cementare-safe-left,0px))!important;}
  .ct-color-modal-next{right:max(10px,var(--cementare-safe-right,0px))!important;}
}

@media (max-width:360px){
  .ct-color-grid{grid-template-columns:minmax(0,1fr)!important;}
}

@media (max-width:991px) and (orientation:landscape) and (max-height:560px){
  .ct-color-modal{padding:8px!important;}
  .ct-color-modal-panel{
    width:min(1040px,100%)!important;
    height:calc(var(--ct-mobile-vh-px,100dvh) - 16px)!important;
    max-height:calc(var(--ct-mobile-vh-px,100dvh) - 16px)!important;
    grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  .ct-color-modal-image{height:100%!important;max-height:none!important;}
  .ct-color-modal-image img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  .ct-color-modal-info{padding:28px 18px 16px!important;overflow:auto!important;}
  .ct-color-modal-info h2{font-size:26px!important;margin-bottom:8px!important;}
  .ct-color-modal-info>p:not(.ct-color-kicker){font-size:12px!important;line-height:1.4!important;margin-bottom:8px!important;}
}

/* Restore intrinsic image height in the auto-height portrait/tablet viewer.
   The short landscape layout keeps its existing fixed-height, side-by-side grid. */
@media (min-width:701px) and (max-width:991px) and (min-height:561px){
  .ct-color-modal-panel{grid-template-rows:auto auto!important;overflow:auto!important;}
  .ct-color-modal-image{height:auto!important;}
  .ct-color-modal-image img{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
  }
}
html body #ct-color-modal .ct-color-modal-nav,
html body #ct-color-modal .ct-color-modal-close{
  z-index:2!important;
}