/* =========================================================
   brand.css — IGCE Brand Identity & Color System
   Indra Ganesan College of Engineering
   ========================================================= */

/* ── Brand Color Palette ────────────────────────────────── */
:root {
  /* Primary blue (IGCE brand) */
  --igce-primary:         #0d6efd;
  --igce-primary-dark:    #0b5ed7;
  --igce-primary-darker:  #0048ba;
  --igce-primary-light:   #e8f2ff;
  --igce-primary-pale:    #f0f7ff;

  /* Brand gradient */
  --igce-gradient:        linear-gradient(135deg, #1a5f9e 0%, #0d6efd 60%, #0048ba 100%);
  --igce-gradient-h:      linear-gradient(90deg,  #2f80ed 0%, #56ccf2 100%);

  /* Accent */
  --igce-accent:          #0dcaf0;
  --igce-accent-dark:     #09a8c8;
  --igce-accent-gold:     #f59e0b;

  /* Neutrals */
  --igce-dark:            #1a2530;
  --igce-text:            #212529;
  --igce-text-muted:      #6c757d;
  --igce-border:          rgba(13, 110, 253, 0.12);
  --igce-bg-light:        #f8f9fa;
  --igce-bg-pale:         #fbfcfd;

  /* Success / Info */
  --igce-success:         #198754;
  --igce-info:            #0d6efd;
  --igce-warning:         #f59e0b;
  --igce-danger:          #dc3545;

  /* Shadows */
  --igce-shadow-xs:       0 1px 4px rgba(0,0,0,0.04);
  --igce-shadow-sm:       0 2px 8px rgba(0,0,0,0.06);
  --igce-shadow-md:       0 6px 20px rgba(0,0,0,0.10);
  --igce-shadow-lg:       0 12px 35px rgba(0,0,0,0.14);
  --igce-shadow-brand:    0 8px 24px rgba(13, 110, 253, 0.28);

  /* Border radius */
  --igce-radius-sm:       8px;
  --igce-radius:          12px;
  --igce-radius-lg:       16px;
  --igce-radius-xl:       24px;
  --igce-radius-pill:     50rem;

  /* Transition */
  --igce-transition:      all 0.25s ease;
  --igce-transition-fast: all 0.15s ease;
}

/* ── Brand Typography Overrides ─────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Roboto", -apple-system, sans-serif;
  font-weight: 700;
  line-height: 1.25;
}

.brand-heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.brand-subheading {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: var(--igce-text-muted);
}

/* ── Brand Buttons ──────────────────────────────────────── */
.btn-brand {
  background: var(--igce-gradient);
  color: #ffffff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: var(--igce-radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  box-shadow: var(--igce-shadow-brand);
  transition: var(--igce-transition);
}

.btn-brand:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, #0048ba 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(13, 110, 253, 0.38);
}

.btn-brand-outline {
  background: transparent;
  color: var(--igce-primary);
  border: 2px solid var(--igce-primary);
  padding: 0.55rem 1.4rem;
  border-radius: var(--igce-radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--igce-transition);
}

.btn-brand-outline:hover {
  background: var(--igce-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ── Brand Badges ───────────────────────────────────────── */
.badge-brand {
  background: var(--igce-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: var(--igce-radius-pill);
  letter-spacing: 0.03em;
}

.badge-brand-gold {
  background: var(--igce-accent-gold);
  color: #ffffff;
}

.badge-brand-outline {
  background: transparent;
  color: var(--igce-primary);
  border: 1.5px solid var(--igce-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: var(--igce-radius-pill);
}

/* ── Brand Section Titles ───────────────────────────────── */
.brand-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--igce-primary-light);
  color: var(--igce-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.85rem;
  border-radius: var(--igce-radius-pill);
  margin-bottom: 0.75rem;
}

/* ── Brand Cards ────────────────────────────────────────── */
.brand-card {
  background: #ffffff;
  border: 1px solid var(--igce-border);
  border-radius: var(--igce-radius);
  box-shadow: var(--igce-shadow-sm);
  overflow: hidden;
  transition: var(--igce-transition);
}

.brand-card:hover {
  box-shadow: var(--igce-shadow-brand);
  border-color: rgba(13, 110, 253, 0.3);
  transform: translateY(-4px);
}

.brand-card-header {
  background: var(--igce-gradient);
  color: #ffffff;
  padding: 1.1rem 1.5rem;
}

.brand-card-body {
  padding: 1.5rem;
}

/* ── Gradient Text ──────────────────────────────────────── */
.text-brand-gradient {
  background: var(--igce-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Brand Icon Circle ──────────────────────────────────── */
.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--igce-primary-light);
  color: var(--igce-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: var(--igce-transition);
}

.icon-circle-filled {
  background: var(--igce-gradient);
  color: #ffffff;
  box-shadow: var(--igce-shadow-brand);
}

/* ── Brand Divider ──────────────────────────────────────── */
.brand-divider {
  width: 60px;
  height: 4px;
  background: var(--igce-gradient);
  border-radius: 4px;
  margin: 0.75rem 0 1.5rem;
}

.brand-divider.center {
  margin-left: auto;
  margin-right: auto;
}

/* ── Utility Color Classes ──────────────────────────────── */
.text-brand   { color: var(--igce-primary) !important; }
.bg-brand     { background-color: var(--igce-primary) !important; }
.bg-brand-light { background-color: var(--igce-primary-light) !important; }
.bg-brand-pale  { background-color: var(--igce-primary-pale) !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .brand-card-header {
    padding: 0.85rem 1rem;
  }

  .brand-card-body {
    padding: 1rem;
  }

  .icon-circle {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
  }
}