/* Basic Wrapper & Navigation Styles */
.device-portfolio-wrapper {
  position: relative;
  text-align: center;
  padding: 0; /* Removed padding for no background */
  background-color: transparent; /* Removed background */
  border-radius: 0; /* Removed border-radius */
  box-shadow: none; /* Removed box-shadow */
  margin: 30px auto; /* Keep margin for overall spacing on the page */
}

/* Portfolio Display Area - controls max width of the entire shortcode output */
.portfolio-display-area {
    position: relative;
    width: 100%; /* Will take full width up to its max-width set by PHP */
    height: auto; /* Height will be determined by the scaled combined-device-container */
    margin: 0 auto; /* Center the display area */
    display: flex; /* To center the device-set inside */
    flex-direction: column; /* Stack multiple device-sets vertically */
    align-items: center;
    justify-content: center;
    min-height: 600px; /* Fallback min-height to prevent collapse before JS runs */
}

/* Individual Device Set (for each portfolio item) */
.device-set {
  position: relative; /* Allows content inside to be positioned */
  width: 100%;
  height: auto;
  margin-bottom: 50px; /* Space between different portfolio items */
}

.device-set h3 {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Combined Device Container (holds the single background image) */
.combined-device-container {
  position: relative; /* Crucial for positioning screens inside */
  background-size: contain; /* Ensures the whole combined image is visible */
  background-repeat: no-repeat;
  background-position: center; /* Centers the combined image within its div */
  width: 100%; /* Will scale to 100% of its parent .device-set */
  height: auto; /* Height will be set by JS to maintain aspect ratio */
  aspect-ratio: var(--combined-image-aspect-ratio, 16 / 9); /* Default 16:9, JS will set dynamically */
}

/* Device Screen (The actual scrolling window for monitor and phone) */
.device-screen {
  position: absolute; /* Positioned absolutely within .combined-device-container */
  overflow: hidden; /* This is essential for the scrolling effect */
  background-color: #FFFFFF; /* White background as requested */
  /* top, left, width, height, and border-radius are dynamically set by script.js */

  /* Fade-in effect to hide initial render flicker */
  opacity: 0; /* Start hidden */
  transition: opacity 0.5s ease-in-out; /* Smooth transition for fade-in */
}

/*
  Border-radius rules removed from here, as they are now applied dynamically by script.js
  to ensure correct scaling and prevent initial render issues.
*/


/* The container for the multiple scrolling images */
.scrolling-image-strip {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    width: 100%;
    /* height will be dynamic based on sum of images, set by JS for animation */
    /* Animation properties are dynamically set by script.js */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* CSS variable for scroll end position, set by JS */
    --scroll-end-position: 0px; /* Default, will be overridden by JS */
}

.scrolling-image-strip img {
  display: block;
  width: 100%; /* Each image fills the width of the strip */
  height: auto; /* Maintain aspect ratio */
}

/* Keyframe for the vertical scrolling animation */
@keyframes scrollVertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(var(--scroll-end-position)); }
}

/* Responsive Adjustments (Less needed here as JS handles scaling) */
@media (max-width: 768px) {
  .device-portfolio-wrapper {
    padding: 10px;
    margin: 20px auto;
  }
  .device-set h3 {
      font-size: 1.5em;
  }
}