/**
 * File: C:\xampp\htdocs\charapp\assets\css\group.css
 * 
 * Purpose:
 * - Group Hero (Banner + Logo layout)
 * - Group Hero Actions (Gear button)
 * - Timeline (events with left border)
 * - Hero Content (Title + Meta)
 * 
 * Dependencies:
 * - app.css (CSS variables)
 * 
 * Load Order: 6
 */

/* =========================
   Group Hero (Banner + Logo)
   ========================= */
.group-hero{
  position:relative;
  border-radius:1.25rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.group-hero .banner{
  width:100%;
  height:240px;
  object-fit:cover;
}
.group-hero .banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.65));
}
.group-hero .hero-content{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:1rem;
  display:flex;
  gap:1rem;
}
.group-hero .logo{
  width:88px;
  height:88px;
  border-radius:1.25rem;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.55);
}

/* =========================
   Group Hero – Actions (Gear Button)
   ========================= */
.group-hero .hero-actions{
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: flex;
  gap: .5rem;
  z-index: 5;
}

.group-hero .hero-actions .btn,
.group-hero .hero-actions .ghost{
  padding: .5rem .6rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.35);
}

.group-hero .hero-actions i{
  font-size: 1rem;
}

/* =========================
   Timeline
   ========================= */
.timeline{
  border-left:2px solid rgba(255,255,255,.18);
  margin-left:.5rem;
  padding-left:1rem;
}
.timeline .event{
  position:relative;
  padding:.75rem 0;
}
.timeline .event:before{
  content:"";
  position:absolute;
  left:-1.35rem;
  top:1.05rem;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
}

/* Timeline Event Details */
.timeline .when{
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}
.timeline .what{
  font-weight: 700;
  font-size: 1rem;
}