/*
 * home.css — Styles for the OSI landing page (overrides/home.html).
 *
 * Layout is handled by Bootstrap 5 grid, card, and utility classes.
 * This file contains ONLY section-specific visuals that Bootstrap
 * cannot express: backgrounds, gradients, hover effects, accent
 * borders, and custom component details.
 *
 * Global design tokens and Bootstrap overrides live in global.css.
 */


/* ==========================================================================
   Hero Section
   ========================================================================== */

.osi-hero {
  background: linear-gradient(135deg, var(--osi-primary-green) 0%, var(--osi-accent-blue) 100%);
  color: var(--osi-white);
}

.osi-hero__subtitle {
  opacity: 0.95;
  line-height: 1.4;
}

.osi-btn-icon {
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

.osi-hero .btn-outline-light {
  --bs-btn-color: var(--osi-white);
  --bs-btn-bg: var(--osi-accent-blue);
  --bs-btn-border-color: var(--osi-accent-blue);
  --bs-btn-hover-color: var(--osi-white);
  --bs-btn-hover-bg: #059669;
  --bs-btn-hover-border-color: #059669;
  --bs-btn-active-bg: #047857;
  --bs-btn-active-border-color: #047857;
  font-weight: 600;
}

.osi-hero .btn-outline-light:hover {
  color: var(--osi-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(7, 167, 127, 0.35);
}


/* ==========================================================================
   About Section
   ========================================================================== */

.osi-feature-card {
  background-color: var(--osi-light-green) !important;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.osi-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}



/* ==========================================================================
   Members Section (Logo Wall)
   ========================================================================== */

.osi-member-card {
  border: 2px solid var(--osi-white) !important;
  border-radius: 8px;
  transition: all 0.3s ease;
  min-height: 120px;
}

.osi-member-card__logo {
  max-width: 120px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

.osi-member-card:hover {
  border-color: var(--osi-primary-green) !important;
  background-color: var(--osi-light-green) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(7, 167, 127, 0.15);
}

.osi-member-card:hover .osi-member-card__logo {
  transform: scale(1.1);
}

.osi-member-card__name {
  font-size: var(--osi-font-caption);
}



/* ==========================================================================
   Updates Section
   ========================================================================== */

.osi-update-card {
  background-color: var(--osi-light-green) !important;
  border-radius: 12px;
  border-left: 4px solid var(--osi-primary-green) !important;
  transition: all 0.3s ease;
}

.osi-update-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-left-color: var(--osi-primary-green) !important;
}

.osi-update-card p {
  line-height: 1.6;
  font-size: var(--osi-font-caption);
}

.osi-update-card__title {
  color: var(--osi-dark-blue);
  transition: color 0.15s ease;
}

.osi-update-card__title:hover {
  color: var(--osi-primary-green);
}

.osi-update-card__link {
  color: var(--osi-primary-green);
  font-weight: 600;
  font-size: var(--osi-font-caption);
  transition: all 0.3s ease;
  display: inline-block;
}

.osi-update-card__link:hover {
  color: var(--osi-primary-green);
  transform: translateX(4px);
}

.osi-update-card--all {
  background-color: var(--osi-light-green) !important;
  border-left: 4px solid var(--osi-primary-green) !important;
}

.osi-update-card--all:hover {
  background-color: var(--osi-light-green) !important;
  border-left-color: var(--osi-primary-green) !important;
}

.osi-update-card__all-label {
  color: var(--osi-primary-green);
  font-family: Arial, sans-serif;
  font-size: var(--osi-font-lead);
  font-weight: 600;
  transition: color 0.15s ease;
}

.osi-update-card--all:hover .osi-update-card__all-label {
  color: var(--osi-primary-green);
}


/* ==========================================================================
   Get Involved Section
   ========================================================================== */

.osi-get-involved {
  background-color: var(--osi-dark-blue);
  color: var(--osi-white);
}

.osi-involvement-card {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-radius: 12px;
}

.osi-involvement-card p {
  font-size: var(--osi-font-caption);
}

.osi-get-involved a {
  color: var(--osi-white);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.15s ease;
}

.osi-get-involved a:hover {
  color: var(--osi-white);
  border-bottom-color: var(--osi-white);
}

.osi-get-involved .osi-involvement-card a {
  color: var(--osi-accent-blue);
  font-weight: 600;
  border-bottom: none;
}

.osi-get-involved .osi-involvement-card a:hover {
  color: #059669;
}