/* ===============================================
   DEATHLAB COMPONENTS
   Buttons, Forms, Cards, and UI Elements
   =============================================== */

/* ======================
   BUTTONS
   ====================== */

/* Base Button Styles */
.btn,
button,
.button,
.gh-btn,
.c-btn,
.deathlab-btn,
[class*="btn-"] {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base),
              filter var(--transition-base);
  white-space: nowrap;
}

/* Primary Button - Cyan Accent */
.btn-primary,
.gh-btn-primary,
.deathlab-btn-primary,
.button-primary {
  background: var(--dl-cyan);
  color: #001015;
  box-shadow: var(--dl-shadow-sm);
}

.btn-primary:hover,
.gh-btn-primary:hover,
.deathlab-btn-primary:hover,
.button-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: var(--dl-shadow-md);
}

.btn-primary:active,
.gh-btn-primary:active,
.deathlab-btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button - Outlined Cyan */
.btn-secondary,
.gh-btn-secondary,
.deathlab-btn-secondary,
.button-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(111, 228, 255, 0.35);
  box-shadow: none;
  text-decoration: none !important;
}

.btn-secondary:hover,
.gh-btn-secondary:hover,
.deathlab-btn-secondary:hover,
.button-secondary:hover {
  background: var(--dl-cyan);
  color: #000000;
  border-color: var(--dl-cyan);
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Ghost Button - Minimal */
.btn-ghost,
.gh-btn-ghost,
.button-ghost {
  background: transparent;
  color: var(--dl-white);
  border: none;
  box-shadow: none;
  text-decoration: none !important;
}

.btn-ghost:hover,
.gh-btn-ghost:hover,
.button-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none !important;
}

/* Danger Button */
.btn-danger,
.button-danger {
  background: var(--dl-danger);
  color: var(--dl-white);
}

.btn-danger:hover,
.button-danger:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Success Button */
.btn-success,
.button-success {
  background: var(--dl-success);
  color: #001015;
}

.btn-success:hover,
.button-success:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Button Sizes */
.btn-sm {
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 1.1rem 1.5rem;
  font-size: 1.0625rem;
}

/* ======================
   FORMS & INPUTS
   ====================== */

/* Input Fields */
input[type="email"],
input[type="text"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: var(--font-primary);
  background: #0F1213;
  color: var(--dl-white);
  border: var(--dl-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: 0.9375rem;
  width: 100%;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base);
}

input::placeholder,
textarea::placeholder {
  color: var(--dl-steel);
  opacity: 0.6;
}

/* Input Focus State */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--dl-outline);
  outline-offset: 0;
  border-color: var(--dl-cyan);
  box-shadow: 0 0 0 4px rgba(111, 228, 255, 0.15);
  background: #141617;
}

/* Input Hover */
input:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
  border-color: rgba(191, 239, 252, 0.25);
}

/* Disabled State */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
}

/* Form Labels */
label {
  color: var(--dl-white);
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Form Groups */
.form-group,
.kg-form-group {
  margin-bottom: 1.25rem;
}

/* Subscribe Forms */
.subscribe-form,
.kg-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.subscribe-form input,
.kg-form input[type="email"] {
  flex: 1;
}

.subscribe-form button,
.kg-form button,
.subscribe-button {
  flex-shrink: 0;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--dl-cyan);
}

/* ======================
   CARDS
   ====================== */

/* Base Card Styles */
.card,
.post-card,
.kg-card,
.tag-card,
.c-card,
.article-card,
.featured-card,
.deathlab-card {
  background: var(--dl-gunmetal);
  border: var(--dl-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--dl-shadow-sm);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

/* Card Hover */
.card:hover,
.post-card:hover,
.article-card:hover,
.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dl-shadow-md);
  border-color: rgba(111, 228, 255, 0.25);
}

/* Card Image */
.card-image,
.post-card-image,
.article-image,
.featured-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.card-image::after,
.post-card-image::after,
.article-image::after,
.featured-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 18, 22, 0) 40%, rgba(7, 18, 22, 0.85) 100%);
  pointer-events: none;
}

/* Card Content */
.card-content,
.post-card-content,
.article-content,
.featured-content {
  padding: 1.5rem;
}

/* Card Title */
.card-title,
.post-card-title,
.article-card h3,
.featured-card h3 {
  color: var(--dl-white) !important;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

/* Card Excerpt/Description */
.card-excerpt,
.post-card-excerpt,
.article-content p,
.featured-content p {
  color: var(--dl-steel) !important;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Card Meta */
.card-meta,
.post-card-meta,
.article-meta,
.featured-meta,
.byline,
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--dl-steel) !important;
  margin-bottom: 0.75rem;
}

.category,
.tag-badge {
  color: var(--dl-cyan);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Card Divider */
.card-divider {
  height: 1px;
  background: var(--dl-border);
  margin: 1.25rem 0;
}

/* ======================
   BADGES & LABELS
   ====================== */

.badge,
.label,
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(111, 228, 255, 0.1);
  color: var(--dl-cyan);
  border: 1px solid rgba(111, 228, 255, 0.2);
}

.badge-success {
  background: rgba(125, 255, 207, 0.1);
  color: var(--dl-success);
  border-color: rgba(125, 255, 207, 0.2);
}

.badge-warning {
  background: rgba(255, 227, 138, 0.1);
  color: var(--dl-warning);
  border-color: rgba(255, 227, 138, 0.2);
}

.badge-danger {
  background: rgba(255, 107, 107, 0.1);
  color: var(--dl-danger);
  border-color: rgba(255, 107, 107, 0.2);
}

/* ======================
   FOCUS & ACCESSIBILITY
   ====================== */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--dl-outline);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(111, 228, 255, 0.15);
}

/* ======================
   REDUCED MOTION
   ====================== */

@media (prefers-reduced-motion: reduce) {
  .btn,
  button,
  .card,
  .post-card,
  input,
  textarea,
  select {
    transition: none !important;
  }
}