/* ==========================================================================
   COSMOPOLIS: GRAVITY CHRONICLES — OFFICIAL MOVIE SITE
   STYLE ENGINE FOR PROMO.PHP (ISOLATED COMPONENT)
   ========================================================================== */

.promo-grid {
 display: grid;
 grid-template-columns: 320px 1fr;
 gap: 30px;
 margin-top: 20px;
 width: 100%;
 box-sizing: border-box;
}

.promo-sidebar {
 background: var(--panel-dark);
 border: 1px solid var(--border-color);
 padding: 20px;
 border-radius: 4px;
 backdrop-filter: blur(5px);
 max-height: 80vh;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 box-sizing: border-box;
}

.promo-sidebar-label {
 font-size: 11px;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 1px;
 display: block;
 margin-bottom: 15px;
 font-family: sans-serif;
}

.promo-tab {
 display: block;
 width: 100%;
 padding: 12px 15px;
 background: transparent;
 border: none;
 border-left: 3px solid transparent;
 color: var(--text-muted);
 text-align: left;
 font-size: 13px;
 cursor: pointer;
 text-transform: uppercase;
 letter-spacing: 1px;
 transition: all 0.3s ease;
 box-sizing: border-box;
 margin-bottom: 6px;
 font-family: sans-serif;
}

.promo-tab span {
 font-size: 10px;
 display: block;
 margin-bottom: 3px;
 color: var(--accent-blue);
 transition: color 0.3s ease;
}

.promo-tab:hover {
 background: rgba(202, 166, 132, 0.05);
 color: var(--text-light);
}

.promo-tab.active {
 background: rgba(202, 166, 132, 0.1) !important;
 color: var(--text-light) !important;
 border-left-color: var(--accent-blue) !important;
 font-weight: bold;
}

.promo-tab.active span {
 color: #2ed573 !important;
 text-shadow: 0 0 8px rgba(46, 213, 115, 0.4);
}

.promo-content {
 background: var(--panel-dark);
 border: 1px solid var(--border-color);
 padding: 30px;
 border-radius: 4px;
 backdrop-filter: blur(5px);
 min-height: 400px;
 box-sizing: border-box;
}

.promo-preview-container {
 margin: 20px 0;
 text-align: center;
 background: rgba(5, 5, 13, 0.4);
 padding: 20px;
 border: 1px solid var(--border-color);
 border-radius: 4px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.promo-preview-container img {
 max-width: 100%;
 max-height: 400px;
 object-fit: contain;
 display: inline-block;
 vertical-align: middle;
}

/* Медиа-запрос для планшетов и мобильных устройств (iPad, iPhone, Android) */
@media (max-width: 992px) {
 .promo-grid {
  grid-template-columns: 1fr !important;
  gap: 25px !important;
 }
 
 .promo-sidebar {
  max-height: none !important;
  overflow: visible !important;
  padding: 15px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
 }
 
 .promo-sidebar-label {
  grid-column: span 2 !important;
  margin-bottom: 5px !important;
  text-align: center;
 }
 
 .promo-tab {
  margin-bottom: 0 !important;
  font-size: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  text-align: center !important;
 }
 
 .promo-tab.active {
  border: 1px solid var(--accent-blue) !important;
  border-left: 1px solid var(--accent-blue) !important;
 }
 
 .promo-content {
  padding: 20px 15px !important;
 }
}

/* Коррекция под узкие экраны телефонов (iPhone SE и аналогичные) */
@media (max-width: 480px) {
 .promo-sidebar {
  grid-template-columns: 1fr !important;
 }
 .promo-sidebar-label {
  grid-column: span 1 !important;
 }
 .promo-tab span {
  display: inline !important;
  margin-right: 5px !important;
 }
}