/* ══════════════════════════════════════════════
   PROPAGANDA GALLERY SECTION
══════════════════════════════════════════════ */

#propaganda{
  background:#0a0806;
  padding:5rem 0 3rem;
  position:relative;
  overflow:hidden;
  border-top:2px solid #1c1410;
  min-height:100vh;
}

#propaganda::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(
    ellipse 80% 45% at 50% 0%,
    rgba(230,126,0,.07),
    transparent 65%
  );
}

.prop-header{
  text-align:center;
  padding:0 1.5rem;
  margin-bottom:2.5rem;
  position:relative;
  z-index:2;
}

.prop-label{
  font-size:.58rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:#e67e00;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.8rem;
}

.prop-label::before,
.prop-label::after{
  content:'';
  width:32px;
  height:1px;
  background:rgba(230,126,0,.35);
}

.prop-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.4rem,6vw,5rem);
  letter-spacing:.04em;
  line-height:.9;
  color:#f0ebe0;
}

.prop-title .danger{
  color:#e67e00;
}

.prop-subtitle{
  font-family:'Crimson Pro',serif;
  font-style:italic;
  font-size:clamp(.85rem,2vw,1.1rem);
  color:#6a5d4d;
  margin-top:.9rem;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.6;
}

/* ───────── CAROUSEL ───────── */

.prop-carousel-outer{
  width:100%;
  overflow:hidden;
  position:relative;

  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 5%,
    #000 95%,
    transparent 100%
  );

  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}

.prop-track{
  display:flex;
  gap:1rem;
  width:max-content;
  padding:1rem;
  animation:propScrollFwd 45s linear infinite;
  will-change:transform;
}

.prop-track:hover{
  animation-play-state:paused;
}

@keyframes propScrollFwd{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ───────── CARD ───────── */

.prop-img-card{
  flex-shrink:0;
  width:320px;

  /* FIXED HEIGHT FOR CONSISTENT CARDS */
  min-height:640px;

  background:linear-gradient(
    180deg,
    #151515 0%,
    #0d0d0d 100%
  );

  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

  cursor:pointer;

  /* IMPORTANT */
  display:flex;
  flex-direction:column;
}

.prop-img-card:hover{
  transform:translateY(-8px);
  border-color:rgba(230,126,0,.35);
  box-shadow:
    0 25px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(230,126,0,.08);
}

.prop-img-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.prop-content{
  padding:1rem;

  /* IMPORTANT */
  display:flex;
  flex-direction:column;
  flex:1;
}

.prop-img-name{
  color:#fff;
  font-size:1rem;
  font-weight:700;
  line-height:1.45;
  margin-bottom:.75rem;

  min-height:48px;
}

.prop-description{
  color:#a39182;
  font-size:.78rem;
  line-height:1.75;
  margin-bottom:1rem;

  /* FIXED DESCRIPTION SPACE */
  flex:1;

  /* OPTIONAL TEXT LIMIT */
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ───────── CREDITS ───────── */

.prop-credits{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:.85rem;

  display:flex;
  flex-direction:column;
  gap:.55rem;

  /* PUSH BUTTONS TO BOTTOM */
  margin-top:auto;
}

.prop-credit-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem;
}

.prop-credit-label{
  color:#6d5b4b;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  flex-shrink:0;
}

.prop-credit-value{
  color:#d9c6b5;
  font-size:.72rem;
  text-align:right;
  line-height:1.5;
}

.prop-source-btn{
  margin-top:.85rem;
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  background:linear-gradient(
    135deg,
    #e67e00,
    #ff922b
  );

  color:#fff;
  text-decoration:none;

  padding:.9rem 1rem;
  border-radius:10px;

  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;

  transition:.25s;

  /* FIXED BUTTON HEIGHT */
  min-height:48px;

  text-align:center;
}

.prop-source-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(230,126,0,.3);
}

/* ───────── LIGHTBOX ───────── */

#propLightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.95);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:2rem;
  backdrop-filter:blur(5px);
}

#propLightbox.open{
  display:flex;
}

#propLightbox img{
  max-width:90vw;
  max-height:90vh;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.1);
}

/* ══════════════════════════════════════════════
   MOBILE OPTIMIZATION
══════════════════════════════════════════════ */

@media(max-width:768px){

  #propaganda{
    padding:4rem 0 2rem;
  }

  .prop-header{
    margin-bottom:1.5rem;
    padding:0 1rem;
  }

  .prop-title{
    line-height:.95;
  }

  .prop-subtitle{
    font-size:.85rem;
    line-height:1.7;
  }

  .prop-track{
    gap:.85rem;
    padding:1rem .75rem 1.5rem;
  }

  .prop-img-card{
    width:270px;
    min-height:600px;
    border-radius:16px;
  }

  .prop-img-card img{
    height:180px;
  }

  .prop-content{
    padding:.9rem;
  }

  .prop-img-name{
    font-size:.95rem;
    min-height:44px;
  }

  .prop-description{
    font-size:.75rem;
    line-height:1.7;

    -webkit-line-clamp:8;
  }

  .prop-source-btn{
    padding:.85rem;
    font-size:.66rem;
    letter-spacing:.1em;
  }

  #propLightbox{
    padding:1rem;
  }

  #propLightbox img{
    max-width:95vw;
    max-height:85vh;
  }
}

/* EXTRA SMALL DEVICES */

@media(max-width:480px){

  .prop-img-card{
    width:240px;
    min-height:580px;
  }

  .prop-img-card img{
    height:160px;
  }

  .prop-description{
    font-size:.72rem;
  }

  .prop-credit-value{
    font-size:.68rem;
  }

  .prop-source-btn{
    font-size:.62rem;
  }
}