/* reset page gutters (in case the browser adds default margins) */
html, body {
  margin: 0;
  padding: 0;
}

.collection{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    width: 80%;
    min-height: 400px; /* Add a minimum height to ensure the container has a defined size */

    margin-top: 15px;
    margin-bottom: 15px;

    background-color: rgb(34, 35, 37);
    box-sizing: border-box;

    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.35);
}

.collection .display{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex-grow: 1;
}

/* Model Canvas */
.collection .model-canvas{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    border-radius: 5px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);

    background-color: rgb(0, 0, 0, 0.1);

    margin: 10px;
}

.collection model-viewer{
    height: 400px;
    width: 100%; /* Account for left and right margins */
}

.collection model-viewer::part(default-progress-bar) {
    background-color: rgb(255, 255, 255, 0.5); /* Change to any color */
    height: 4px;
    border-radius: 10px;
}

/* Model Title */
.collection h3 {
    font-family: "Nunito-Light", sans-serif;
    font-weight: normal;
    font-size: 26px; /* Adjust as needed */

    padding-left: 16px;
    padding-bottom: 8px;
    width: 100%; /* Account for left and right margins */

    color: rgba(255, 255, 255, 0.5); /* Semi-transparent text */

    user-select: none; /* Prevent text from being highlighted. */
    pointer-events: none; /* Prevent logo from being dragged. */
}

.animate-title {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Context */
.collection .context{
    width: auto;

    margin: 10px;
}

.collection h2 {
    font-size: 30px;
    font-weight: normal;
    color: rgb(255, 255, 255);

    margin-bottom: 10px;

    background-color: rgb(34, 35, 37);
}

.collection p{
    font-size: 22px;
    color: rgba(255, 255, 255, 0.6);

    background-color: rgb(34, 35, 37);

    line-height: 1.8;
}

.collection .selector{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;

    margin: 10px;

    gap: 10px;

    cursor: pointer;

    user-select: none; /* Prevent text from being highlighted. */
}

.collection .selector img{
    background-color: rgb(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 20px;
    margin: 10px;

    border: 2px solid transparent; /* Add a transparent border to reserve space */
}

.collection .selector .active{
    border: 2px solid white;
}

.collection .selector .big{
    height: 256px;
    width: auto;
}

.collection .selector .small{
    height: 128px;
    width: auto;
}

/* Download Button */
.collection .download{
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the icon */
    gap: 6px; /* Optional: Add some space between the text and the icon */

    font-size: 22px;
    color: white;

    margin-top: 13px;

    padding: 5px 20px;
    padding-right: 15px;

    border-radius: 10px;

    text-decoration: none;
    background-color: rgb(87, 114, 172);

    user-select: none; /* Prevent text from being highlighted. */

    white-space: nowrap;
    overflow: hidden;

    transition: background-color 0.3s ease; /* Smooth transition */
}

.collection .download:hover{
    background-color: rgb(87, 114, 172, 0.65);
}

/* ===== gallery controls (after your vertical layout) ===== */

/* make room for absolute buttons */
.collection .model-canvas {
  position: relative;
}

/* common styling & hover animation */
.control-btn {
  touch-action: manipulation;
  position: absolute;
  top: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* prevent any selection/highlight on the buttons or their contents */
.control-btn,
.control-btn * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* remove the focus outline when buttons are clicked or receive focus */
.control-btn:focus,
.control-btn:active {
  outline: none;
}

/* remove the mobile tap highlight on WebKit browsers */
.control-btn {
    -webkit-tap-highlight-color: transparent;
}

/* Make minimize larger than maximize */
.maximize-btn img {
  filter: opacity(70%);
  width: 86px !important;
  height: 86px !important;
}

.minimize-btn img {
  filter: opacity(70%);
  width: 100px !important;
  height: 100px !important;
}

/* Disable hover animations on touch devices */
@media (hover: none) and (pointer: coarse) {
  .control-btn:hover {
    transform: none !important;
  }
  
  /* Optional: Add a quick tap feedback instead */
  .control-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
}

/* Keep hover animation only on devices that actually support hover */
@media (hover: hover) and (pointer: fine) {
  .control-btn:hover {
    transform: scale(1.2);
  }
}

/* button placement */
.maximize-btn {
  right: 10px;
}
.minimize-btn {
  right: 40px;
}

/* hide minimize by default */
.model-canvas:not(.maximized) .minimize-btn {
  display: none !important;
}

/* toggle in maximized state */
.model-canvas.maximized .maximize-btn {
  display: none !important;
}
.model-canvas.maximized .minimize-btn {
  display: block !important;
}

/* full‑screen styling */
.model-canvas.maximized {
  position: fixed;

  display:    flex;
  justify-content: center;
  align-items: center;
  z-index:    1000;

/* kill any margins inherited from .collection .model-canvas */
  margin: 0 !important;
  padding: 0 !important;

  /* remove rounded corners & shadows */
  border-radius: 0 !important;
  box-shadow: none !important;

  /* ensure full‑bleed background */
  top:    0 !important;
  left:   0 !important;
  width:  100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.9) !important;
}

/* scale the <model-viewer> to fill most of the viewport */
.model-canvas.maximized model-viewer {
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none   !important;
}

/* disable scrolling when applied to <body> */
body.no-scroll {
  overflow: hidden;
}

.model-canvas.maximized h3 {
  /* bump up the title size centrally over the model */
  position: absolute;
  top: 20px;           /* or wherever you like */
  left: 50%;
  transform: translateX(calc(-50% + 20px)); /* shift 20px to the right */
  font-size: 70px;        /* adjust as needed */
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 0;       /* keep it square */
}

.model-canvas.maximized .minimize-btn {
  /* remove any bottom override */
  bottom: auto !important;
  /* original top is 10px; add 60px more = 70px */
  top: 35px !important;
}

/* Model viewer maximized controls */
model-viewer.maximized-controls {
    /* Ensure zoom and pan work in maximized mode */
    pointer-events: auto;
}

/* Cursor feedback for interactive state */
.model-canvas.maximized model-viewer {
    cursor: grab;
}

.model-canvas.maximized model-viewer:active {
    cursor: grabbing;
}

/* Media Query for Larger Screens */
@media ((min-width: 768px) and (min-aspect-ratio: 7/10)) {
    .collection {
        width: 60%;
        max-width: 1000px;
    }

      /* Make minimize larger than maximize */
  .maximize-btn img {
    width: 32px !important;
    height: 32px !important;
}

  .minimize-btn img {
    width: 48px !important;
    height: 48px !important;
  }

  .model-canvas.maximized h3 {
    font-size: 3rem;        /* adjust as needed */
  }
}

/* Vertical Layout */
@media ((min-width: 1300px)) {
    .collection .display{
        flex-direction: row;
    }

    .collection .model-canvas{
        height: 400px;
        width: 400px;
    }
}