/* ECM Page Styles */
@import url('./home.css');

.info-hero {
  padding: 5rem 0 4rem;
  background: rgba(45, 45, 45, 0.8);
  backdrop-filter: blur(20px);
  margin-bottom: 3rem;
  border-radius: 24px;
  margin-top: 1rem;
  border: 1px solid rgba(138, 43, 226, 0.4);
  /* border: 1px solid #ff9f80; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.info-text h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  /* color: #8a2be2; */
  color: #ff9f80;
  line-height: 1.1;
  text-align: center;
}

.info-details {
  /* padding: 4rem 0; */
  background: rgba(35, 35, 35, 0.9);
  border-radius: 24px;
  margin: 3rem 0;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(138, 43, 226, 0.3);
  backdrop-filter: blur(20px);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.info-tile-wrapper { position: relative; }

.info-tile {
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #0f0f0f 100%);
  height: 300px;
  border-radius: 20px;
  /* border: 1px solid rgba(138, 43, 226, 0.6); */
  border: 1px solid green;
  transition: all 0.4s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #ff9f80;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  z-index: 1;
}

.info-tile:hover::before { transform: scaleX(1); }
.info-tile:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(255,159,128,0.3); border-color: rgba(255,159,128,0.8); }

.tile-content { padding: 2rem; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.tile-title { font-size: 1.4rem; font-weight: 700; color: #fff; transition: opacity 0.3s ease; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.tile-description { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; color: #e0e0e0; font-size: 0.9rem; line-height: 1.5; transition: opacity 0.3s ease; max-height: 90%; overflow-y: auto; text-align: left; }
.info-tile:hover .tile-title { opacity: 0; }
.info-tile:hover .tile-description { opacity: 1; }
.tile-description p { color: #f5f5f5; margin-bottom: 1rem; }

/* Mobile buttons - hidden by default */
.mobile-buttons { position: absolute; bottom: 15px; right: 15px; display: none; gap: 10px; z-index: 10; }
.mobile-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 159, 128, 0.9); color: white; font-size: 18px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(255, 159, 128, 0.4); }
.mobile-btn:hover { background: rgba(255, 159, 128, 1); transform: scale(1.1); }
.mobile-btn:active { transform: scale(0.95); }

/* Info overlay for mobile */
.info-overlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.8); z-index: 1001; display: none; align-items: center; justify-content: center; padding: 20px; }
.info-modal { background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #0f0f0f 100%); border-radius: 20px; padding: 30px; max-width: 500px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative; border: 2px solid rgba(255,159,128,0.6); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.info-modal h3 { color:#8a2be2; font-size:1.5rem; margin-bottom:20px; }
.info-modal p { color:#e0e0e0; line-height:1.6; margin-bottom:15px; }
.close-modal { position:absolute; top:15px; right:20px; background:none; border:none; color:#ff9f80; font-size:24px; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition: all 0.3s ease; }
.close-modal:hover { background: rgba(255,159,128,0.2); transform: scale(1.1); }

/* Responsive */
@media (max-width: 768px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .mobile-buttons { display: flex; }
  .info-tile:hover .tile-title { opacity: 1; }
  .info-tile:hover .tile-description { opacity: 0; }
  .info-tile:hover { transform: none; }
}

@media (max-width: 480px) {
  .info-grid { grid-template-columns: 1fr; }
  .container { padding: 0 15px; }
  .info-hero { padding: 3rem 0; }
  .info-text h1 { font-size: 2rem; }
  .info-tile { height: 250px; }
  .info-modal { padding: 25px; margin: 10px; }
  .info-modal h3 { font-size: 1.3rem; }
}