/* ===== Clean Image Viewer Modal ===== */
#case-modal[aria-hidden="true"] { display:none; }
#case-modal[aria-hidden="false"] { display:block; }

/* Backdrop */
#case-modal .cm__backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
}

/* Centered modal panel */
#case-modal .cm__panel{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(90vw, 1200px);
  height:min(90vh, 1000px);
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Scrollable body with hidden scrollbar */
.cm__body{
  overflow:auto;
  padding:0;
  margin:0;
  width:100%;
  height:100%;
  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.cm__body::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* Images - zoomed out, no borders, continuous */
.cm__body img{
  width:100%; /* Change this value to zoom in/out */
  height:auto;
  display:block;
  margin:0 auto; /* Centers the images */
  padding:0;
  border:none;
  outline:none;
}

/* Optional: smooth scrolling */
.cm__body{
  scroll-behavior:smooth;
}

/* Add this to crop the CoCart introduction image */

/* Mobile responsiveness */
@media (max-width: 768px) {
  #case-modal .cm__panel {
    width: 95vw;
    height: 95vh;
    border-radius: 8px;
  }
}
/* Figma block */

.cm__figma-header { margin-bottom:8px; }
.cm__figma-title { margin:0; font-size:16px; }
.cm__figma-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.cm__figma-proto {
  padding: 0 60px;  /* adjust left/right space */
}



.cm__figma-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* YouTube block */
.cm__youtube { margin: 16px 0 24px; }
.cm__youtube-header { margin-bottom:8px; }
.cm__youtube-title { margin:0; font-size:16px; }
.cm__youtube {
  padding: 0 60px; 
}
.cm__figma-header { display: none; }


.cm__youtube-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.cm__youtube-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cm__youtube-header { display: none; }

/* Ensure body content is centered */
.cm__body {
  padding: 0;              /* reset default */
  margin: 0 auto;          /* center */
  width: 100%;
  height: 100%;
  display: block;
  text-align: left;
}

/* Images centered properly */
.cm__body img {
  display: block;
  margin: 0 auto;
  width: 100%;             /* shrink to fit modal */
  height: auto;
  border-radius: 8px;
}

/* On mobile: remove heavy side padding from embeds */
@media (max-width: 768px) {
  .cm__figma-proto,
  .cm__youtube {
    padding: 0 12px;        /* light gutter instead of 60px */
  }
}
/* ---- Case Study: mobile shrink + center fix ---- */
@media (max-width: 768px){
  /* smaller panel so there's clear backdrop around it */
  #case-modal .cm__panel{
    width: 88vw;
    height: 80vh;
    border-radius: 14px;
  }

  /* center the content column and give it equal gutters */
  .cm__body{
    padding: 12px;                  /* equal L/R padding */
  }
  .cm__body > *{
    box-sizing: border-box;
    max-width: 640px;               /* keeps a tidy readable column */
    width: 100%;
    margin-left: auto;              /* CENTER */
    margin-right: auto;             /* CENTER */
  }

  /* kill the heavy 60px side padding on embeds on phones */
  .cm__figma-proto,
  .cm__youtube{
    padding: 0 12px;
  }

  /* make sure images can't overflow the column */
  .cm__body img{
    max-width: 100%;
    height: auto;
    display: block;
  }
}