/* ============================================================
   Herodeals – Component Library (components.css)
   All reusable UI primitives. Load AFTER tokens.css.

   TABLE OF CONTENTS
   1.  Button System
   2.  Card System
   3.  Badge System
   4.  Section System
   5.  Icon Box
   6.  Grid & Layout Utilities
   7.  Stack & Cluster
   8.  Feature List
   9.  Stat Group
   10. Row Utility
   11. Text Utilities
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. BUTTON SYSTEM
   Base:     .btn
   Variants: .btn--primary  .btn--secondary  .btn--ghost
             .btn--ebay     .btn--amazon
   Sizes:    .btn--sm       .btn--lg
   Mods:     .btn--full
   ══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  padding: 0.85rem 2rem;
  white-space: nowrap;
  transition:
    background   var(--t-base),
    color        var(--t-base),
    border-color var(--t-base),
    transform    var(--t-fast),
    opacity      var(--t-base);
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ─── Variants ────────────────────────────────────────────── */

.btn--primary {
  background:   var(--color-accent);
  color:        var(--color-bg);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background:   var(--color-accent-h);
  border-color: var(--color-accent-h);
  color:        var(--color-bg);
}

.btn--secondary {
  background:   transparent;
  color:        var(--color-muted);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  color:        var(--color-text);
  border-color: rgba(255, 255, 255, 0.20);
}

.btn--ghost {
  background:   transparent;
  color:        var(--color-accent);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--color-accent-subtle);
  color:      var(--color-accent-h);
}

.btn--ebay {
  background:   var(--color-ebay-subtle);
  color:        var(--color-ebay);
  border-color: var(--color-ebay-border);
}
.btn--ebay:hover {
  background: rgba(229, 50, 56, 0.20);
  color:      var(--color-ebay);
}

.btn--amazon {
  background:   var(--color-amazon-subtle);
  color:        var(--color-amazon);
  border-color: var(--color-amazon-border);
}
.btn--amazon:hover {
  background: rgba(255, 153, 0, 0.20);
  color:      var(--color-amazon);
}

/* ─── Sizes ───────────────────────────────────────────────── */

.btn--sm {
  font-size:     var(--text-sm);
  padding:       0.55rem 1.1rem;
  border-radius: var(--radius-md);
}

.btn--lg {
  font-size:     var(--text-lg);
  padding:       1rem 2.25rem;
  border-radius: var(--radius-lg);
}

/* ─── Modifiers ───────────────────────────────────────────── */

.btn--full {
  width:         100%;
  border-radius: var(--radius-lg);
}


/* ══════════════════════════════════════════════════════════════
   2. CARD SYSTEM
   Base:     .card
   Surface:  .card--surface-2
   Interact: .card--interactive
   Hover:    .card--hover-accent  .card--hover-ebay  .card--hover-amazon
   ══════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  /* Frosted glass base + top-corner sheen */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    var(--color-glass);
  backdrop-filter:          blur(20px) saturate(1.4);
  -webkit-backdrop-filter:  blur(20px) saturate(1.4);
  border:        1px solid var(--color-glass-edge);
  border-radius: var(--radius-lg);
  box-shadow:
    /* ─── Stacked glass layer 2 (offset 5 px) */
    5px 5px 0 rgba(255, 255, 255, 0.03),
    5px 5px 0 1px rgba(255, 255, 255, 0.065),
    /* ─── Stacked glass layer 3 (offset 10 px) */
    10px 10px 0 rgba(255, 255, 255, 0.015),
    10px 10px 0 1px rgba(255, 255, 255, 0.04),
    /* ─── Real depth shadow */
    0 24px 60px rgba(0, 0, 0, 0.55),
    0  8px 20px rgba(0, 0, 0, 0.35),
    /* ─── Inset glass highlights */
    inset 0  1px 0 var(--color-glass-sheen),
    inset 1px 0  0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.card--surface-2 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, transparent 50%),
    var(--color-glass-2);
}

.card--interactive {
  transition: border-color var(--t-base), transform var(--t-base);
}
.card--interactive:hover {
  transform: translateY(-3px);
}

.card--hover-accent:hover { border-color: var(--color-accent-hover-border); }
.card--hover-ebay:hover   { border-color: var(--color-ebay-hover); }
.card--hover-amazon:hover { border-color: var(--color-amazon-hover); }


/* ══════════════════════════════════════════════════════════════
   3. BADGE SYSTEM
   Base:     .badge
   Variants: .badge--accent  .badge--ebay  .badge--amazon
   Sizes:    .badge--sm      .badge--lg
   ══════════════════════════════════════════════════════════════ */

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--sp-2);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  padding:        0.25rem 0.65rem;
  border-radius:  var(--radius-full);
  border:         1px solid transparent;
  letter-spacing: 0.5px;
  line-height:    1;
}

.badge--accent {
  background:   var(--color-accent-subtle);
  border-color: var(--color-accent-border);
  color:        var(--color-accent);
}

.badge--ebay {
  background: rgba(229, 50, 56, 0.15);
  color:      var(--color-ebay);
}

.badge--amazon {
  background: rgba(255, 153, 0, 0.15);
  color:      var(--color-amazon);
}

.badge--sm {
  font-size: 0.65rem;
  padding:   0.2rem 0.5rem;
}

.badge--lg {
  font-size:      var(--text-xs);
  padding:        0.35rem 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ══════════════════════════════════════════════════════════════
   4. SECTION SYSTEM
   Base:    .section
   Surface: .section--surface
   Header:  .section-header  .section-eyebrow  .section-title  .section-lead
   ══════════════════════════════════════════════════════════════ */

.section {
  padding: var(--section-pad-v) var(--page-gutter);
}

.section--surface {
  background: rgba(255, 255, 255, 0.025);
}

.section--bg {
  background: transparent;
}

/* Section header block */
.section-header {
  margin-bottom: var(--sp-12);
}

/* .section-eyebrow is the canonical name; .section-label is kept as alias */
.section-eyebrow,
.section-label {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--fw-black);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--sp-3);
}

.section-title {
  font-size:     clamp(1.8rem, 3vw, 2.6rem);
  font-weight:   var(--fw-black);
  letter-spacing: -0.5px;
  line-height:   1.2;
  margin-bottom: var(--sp-4);
}

/* .section-lead is the canonical name; .section-sub is the alias */
.section-lead,
.section-sub {
  color:         var(--color-muted);
  font-size:     var(--text-base);
  max-width:     520px;
  line-height:   1.7;
  margin-bottom: var(--sp-12);
}


/* ══════════════════════════════════════════════════════════════
   5. ICON BOX
   Base:   .icon-box
   Sizes:  .icon-box--sm   .icon-box--md   .icon-box--lg
   Colors: .icon-box--accent  .icon-box--ebay  .icon-box--amazon
   ══════════════════════════════════════════════════════════════ */

.icon-box {
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  border-radius: var(--radius-md);
}

.icon-box--sm {
  width:     42px;
  height:    42px;
  font-size: 1.1rem;
}

.icon-box--md {
  width:     48px;
  height:    48px;
  font-size: 1.2rem;
}

.icon-box--lg {
  width:         56px;
  height:        56px;
  font-size:     2rem;
  border-radius: var(--radius-lg);
}

.icon-box--accent { background: var(--color-accent-subtle); }
.icon-box--ebay   { background: var(--color-ebay-subtle); }
.icon-box--amazon { background: var(--color-amazon-subtle); }


/* ══════════════════════════════════════════════════════════════
   6. GRID & LAYOUT UTILITIES
   Base:      .grid
   Columns:   .grid--2  .grid--3  .grid--4  .grid--auto
   Special:   .grid--halves (wide gap, content layout)
   Alignment: .grid--valign-center
   ══════════════════════════════════════════════════════════════ */

.grid {
  display: grid;
  gap:     var(--sp-5);
}

.grid--2    { grid-template-columns: 1fr 1fr; }
.grid--3    { grid-template-columns: repeat(3, 1fr); }
.grid--4    { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Wide two-column layout for rich content blocks (About, Contact) */
.grid--halves {
  grid-template-columns: 1fr 1fr;
  gap:         5rem;
  align-items: start;
}

.grid--valign-center { align-items: center; }


/* ══════════════════════════════════════════════════════════════
   7. STACK & CLUSTER
   Stack:   .stack  .stack--gap-*
   Cluster: .cluster  .cluster--gap-*
   ══════════════════════════════════════════════════════════════ */

.stack {
  display:        flex;
  flex-direction: column;
}

.stack--gap-sm { gap: var(--sp-4); }
.stack--gap-md { gap: var(--sp-5); }
.stack--gap-lg { gap: var(--sp-6); }

.cluster {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
}

.cluster--gap-sm { gap: var(--sp-4); }
.cluster--gap-md { gap: var(--sp-6); }
.cluster--gap-lg { gap: var(--sp-8); }
.cluster--center { justify-content: center; }


/* ══════════════════════════════════════════════════════════════
   8. FEATURE LIST
   Base:   .feature-list
   Colors: .feature-list--accent  .feature-list--ebay  .feature-list--amazon
   ══════════════════════════════════════════════════════════════ */

.feature-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
}

.feature-list li {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-size:   var(--text-sm);
  color:       var(--color-muted);
  line-height: 1.5;
}

.feature-list li::before {
  content:         '✓';
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  min-width:       18px;
  border-radius:   50%;
  font-size:       0.65rem;
  font-weight:     var(--fw-black);
  flex-shrink:     0;
}

.feature-list--accent li::before {
  background: rgba(232, 160, 32, 0.15);
  color:      var(--color-accent);
}

.feature-list--ebay li::before {
  background: rgba(229, 50, 56, 0.15);
  color:      var(--color-ebay);
}

.feature-list--amazon li::before {
  background: rgba(255, 153, 0, 0.15);
  color:      var(--color-amazon);
}


/* ══════════════════════════════════════════════════════════════
   9. STAT GROUP
   Usage: <div class="stat-group"><div class="stat">
            <span class="stat__value">700+</span>
            <span class="stat__label">Bewertungen</span>
          </div></div>
   ══════════════════════════════════════════════════════════════ */

.stat-group {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--sp-12);
  margin-top:      var(--sp-16);
}

.stat {
  text-align: center;
}

.stat__value {
  display:     block;
  font-size:   2rem;
  font-weight: var(--fw-black);
  color:       var(--color-accent);
  line-height: 1;
}

.stat__label {
  display:    block;
  font-size:  var(--text-sm);
  color:      var(--color-muted);
  margin-top: var(--sp-2);
}


/* ══════════════════════════════════════════════════════════════
   10. ROW UTILITY
   Usage: <div class="row row--[align]">
   ══════════════════════════════════════════════════════════════ */

.row {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
}

.row--start  { align-items: flex-start; }
.row--top    { align-items: flex-start; }
.row--center { justify-content: center; }


/* ══════════════════════════════════════════════════════════════
   11. TEXT UTILITIES
   ══════════════════════════════════════════════════════════════ */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-muted   { color: var(--color-muted); }
.text-accent  { color: var(--color-accent); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.text-lg      { font-size: var(--text-lg); }

.font-bold    { font-weight: var(--fw-bold); }
.font-black   { font-weight: var(--fw-black); }
.font-semi    { font-weight: var(--fw-semi); }