/* ============================================================
 * BANNA Components — Reusable .banna-* patterns
 * Phase 2 task #6
 * ============================================================ */

/* === Container === */
.banna-container {
  width: 100%;
  max-width: var(--banna-container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--banna-container-padding, 1.5rem);
}

/* === Buttons === */
.banna-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--banna-space-2, 0.5rem);
  padding: 0.75rem 1.5rem;
  font-family: var(--banna-font-sans, 'Quicksand'), system-ui, sans-serif;
  font-weight: var(--banna-w-semibold, 600);
  font-size: var(--banna-size-base, 1rem);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--banna-radius-md, 6px);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--banna-duration-fast, 150ms) var(--banna-ease-out),
              background var(--banna-duration-fast, 150ms),
              color var(--banna-duration-fast, 150ms);
}
.banna-btn:hover { transform: translateY(-1px); }
.banna-btn:active { transform: translateY(0); }

.banna-btn-primary {
  background: var(--banna-black, #0A0A0A);
  color: var(--banna-bone, #FAFAF7);
  border-color: var(--banna-black, #0A0A0A);
}
.banna-btn-primary:hover {
  background: var(--banna-navy, #102A4C);
  border-color: var(--banna-navy, #102A4C);
}

.banna-btn-secondary {
  background: transparent;
  color: var(--banna-black, #0A0A0A);
  border-color: var(--banna-black, #0A0A0A);
}
.banna-btn-secondary:hover {
  background: var(--banna-black, #0A0A0A);
  color: var(--banna-bone, #FAFAF7);
}

.banna-btn-ghost {
  background: transparent;
  color: var(--banna-navy, #102A4C);
  border-color: transparent;
}
.banna-btn-ghost:hover { background: var(--banna-bg-soft, #F5F1E9); }

/* === Cards === */
.banna-card {
  background: var(--banna-bone, #FAFAF7);
  border: 1px solid var(--banna-border, #E5E2DA);
  border-radius: var(--banna-radius-lg, 8px);
  padding: var(--banna-space-6, 1.5rem);
  transition: box-shadow var(--banna-duration-normal, 250ms);
}
.banna-card:hover { box-shadow: var(--banna-shadow-md, 0 4px 12px rgba(10,10,10,0.08)); }

/* === Hero === */
.banna-hero {
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: var(--banna-container-padding, 1.5rem);
  text-align: left;
}
.banna-hero h1 {
  font-family: var(--banna-font-sans, 'Quicksand'), sans-serif;
  font-weight: var(--banna-w-bold, 700);
  font-size: clamp(2rem, 5vw, 3.33rem);
  line-height: var(--banna-leading-tight, 1.2);
  color: var(--banna-black, #0A0A0A);
  margin: 0 0 var(--banna-space-4, 1rem);
}
.banna-hero p {
  font-size: clamp(1rem, 2vw, 1.27rem);
  line-height: var(--banna-leading-relaxed, 1.65);
  color: var(--banna-text-secondary, #444);
  max-width: 60ch;
}

/* === Sections === */
.banna-section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.banna-section h2 {
  font-family: var(--banna-font-sans, 'Quicksand'), sans-serif;
  font-weight: var(--banna-w-bold, 700);
  font-size: clamp(1.5rem, 4vw, 2.62rem);
  color: var(--banna-black, #0A0A0A);
  margin: 0 0 var(--banna-space-6, 1.5rem);
}

/* === Wordmark (logo BANNA) === */
.banna-wordmark {
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--banna-black, #0A0A0A);
}

/* === Utility === */
.banna-divider {
  width: 60px;
  height: 3px;
  background: var(--banna-navy, #102A4C);
  border-radius: 9999px;
  margin: var(--banna-space-6, 1.5rem) 0;
}

/* === Mobile === */
@media (max-width: 768px) {
  .banna-hero { padding-block: 2.5rem; }
}