/* --- Base Modal Styles --- */
.split-view {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  visibility: hidden; 
  pointer-events: none;
  background: #000; 
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s step-end;
}

.split-view.show {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s step-start;
}

.split-panel {
  position: relative;
  overflow: hidden; 
}

/* --- Navigation & UI Elements --- */
.right-panel {
  background: #111;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 35px 35px 70px 35px;
}

.close-split, .nav-btn-fixed {
  position: fixed;
  z-index: 1300;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: 0.3s;
}

.close-split {
  top: 21px;
  right: 29px;
  font-size: 30px;
  line-height: 1;
}

.close-split:hover, .nav-btn-fixed:hover {
  color: #8fb4b5;
}

.nav-btn-fixed {
  bottom: 25px!important;
  font-size: 30px;
}

.nav-btn-fixed.prev { left: 35px; }
.nav-btn-fixed.next { right: 35px; }

/* --- Image & Content Styling --- */
#modal-img, .img-clone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.modal-text {
  width: 100%;
  will-change: transform, opacity;
}

.modal-text h2 {
  font-size: 200%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.category-label {
  color: #8fb4b5;
  font-size: 100%;
  letter-spacing: 0.5px;
  font-weight: 300;
}

.divider {
  width: 40px;
  height: 1px;
  background: #8fb4b5;
  margin: 25px 0;
}

.description {
  line-height: 1.5;
  color: #ffffff;
  font-size: 85%;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.description a {
  color: #8fb4b5;
  text-decoration: none;
  display: block;
  margin-top: 10px;
}

@media (max-width: 768px) {

.description {
  font-size: 75%;
}

.modal-text h2 {
  font-size: 120%;
  margin-bottom: 3px;
}

.divider {
    margin: 15px 0;
}

.category-label {
    font-size: 85%;
}
}

@media (orientation: landscape) {
.split-view {
  flex-direction: row;
}

.left-panel {
  flex: 0 0 60%;
  height: 100%;
}

.right-panel {
  flex: 0 0 40%;
  height: 100%;
  padding: 70px 25px;
}
}

@media (orientation: portrait) {
.split-view {
  flex-direction: column;
}

.left-panel {
  flex: 0 0 60%;
  width: 100%;
}

.right-panel {
  flex: 0 0 40%;
  width: 100%;
  overflow-y: auto;
  padding: 20px 20px 70px 25px;
}

.description {
    letter-spacing: 0;
}

.nav-btn-fixed {
  bottom: 32%;
}
}