/*
 * Woo Fundraising — Banner Component Styles
 * @layer hoko-fb-components
 *
 * Sections:
 *  1. CSS Variables (light theme)
 *  2. Dark theme (auto + forced)
 *  3. Container layout
 *  4. Content column
 *  5. Badges
 *  6. Title
 *  7. Stats row
 *  8. Progress bar
 *  9. Milestone
 * 10. CTA button
 * 11. Media column
 * 12. Skeleton / loading state
 * 13. Ended & funded states
 * 14. Screen-reader utility
 * 15. Responsive (≤767 px)
 * 16. Reduced-motion override
 */

  /* ─────────────────────────────────────────────────────────────────────
     1. CSS Variables — light theme
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb {
    --hoko-fb-accent:        var(--wp--preset--color--primary, #4f46e5);
    --hoko-fb-accent-light:  color-mix(in srgb, var(--hoko-fb-accent) 20%, transparent);
    --hoko-fb-bg:            #ffffff;
    --hoko-fb-fg:            #111827;
    --hoko-fb-muted:         #6b7280;
    --hoko-fb-border:        #e5e7eb;
    --hoko-fb-skeleton:      #e5e7eb;
    --hoko-fb-radius:        12px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     2. Dark theme
     ───────────────────────────────────────────────────────────────────── */

  /* Auto dark — follows OS preference */
  @media (prefers-color-scheme: dark) {
    .hoko-fb[data-theme="auto"] {
      --hoko-fb-bg:       #1a1a2e;
      --hoko-fb-fg:       #f1f5f9;
      --hoko-fb-muted:    #94a3b8;
      --hoko-fb-border:   #334155;
      --hoko-fb-skeleton: #334155;
    }
  }

  /* Forced dark — explicit attribute */
  .hoko-fb[data-theme="dark"] {
    --hoko-fb-bg:       #1a1a2e;
    --hoko-fb-fg:       #f1f5f9;
    --hoko-fb-muted:    #94a3b8;
    --hoko-fb-border:   #334155;
    --hoko-fb-skeleton: #334155;
  }

  /* ─────────────────────────────────────────────────────────────────────
     3. Container layout
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb {
    display:               grid;
    grid-template-columns: 55fr 45fr;
    max-width:             1200px;
    margin-inline:         auto;
    background:            var(--hoko-fb-bg);
    color:                 var(--hoko-fb-fg);
    border-radius:         var(--hoko-fb-radius);
    border:                1px solid var(--hoko-fb-border);
    border-top-width:      3px;
    border-top-color:      var(--hoko-fb-accent);
    box-shadow:            0 4px 24px rgb(0 0 0 / 0.08),
                           0 1px 4px  rgb(0 0 0 / 0.04);
    overflow:              hidden;
    font-family:           system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                           Roboto, Helvetica, Arial, sans-serif;
    font-size:             1rem;
    line-height:           1.5;
  }

  /* ─────────────────────────────────────────────────────────────────────
     4. Content column
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb__content {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    padding:        2.5rem 3rem;
  }

  /* ─────────────────────────────────────────────────────────────────────
     5. Badges
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    padding:        0.2em 0.75em;
    border-radius:  9999px;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    width:          fit-content;
  }

  .hoko-fb__badge--funded {
    background: #dcfce7;
    color:      #166534;
  }

  .hoko-fb__badge--ended {
    background: #fef3c7;
    color:      #92400e;
  }

  /* ─────────────────────────────────────────────────────────────────────
     6. Title
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb__title {
    margin:         0;
    font-size:      clamp(1.5rem, 3vw, 2.25rem);
    font-weight:    700;
    letter-spacing: -0.025em;
    line-height:    1.2;
    color:          var(--hoko-fb-fg);
  }

  .hoko-fb__pitch:empty {
    display: none;
  }

  /* ─────────────────────────────────────────────────────────────────────
     7. Stats row
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb__stats {
    display:     flex;
    flex-wrap:   wrap;
    gap:         1.5rem;
    align-items: flex-end;
  }

  .hoko-fb__stat {
    display:        flex;
    flex-direction: column;
    gap:            0.125rem;
  }

  .hoko-fb__stat-value {
    font-size:   1.5rem;
    font-weight: 700;
    line-height: 1;
    color:       var(--hoko-fb-fg);
  }

  .hoko-fb__stat-label {
    font-size: 0.75rem;
    color:     var(--hoko-fb-muted);
  }

  /* ─────────────────────────────────────────────────────────────────────
     8. Progress bar
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb__progress-wrap {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
  }

  .hoko-fb__progress-bar {
    position:      relative;
    height:        12px;
    background:    var(--hoko-fb-border);
    border-radius: 9999px;
    overflow:      hidden;
  }

  .hoko-fb__progress-bar::after {
    content:       "";
    position:      absolute;
    inset-block:   0;
    left:          0;
    width:         var(--hoko-fb-pct, 0%);
    background:    linear-gradient(
                     90deg,
                     var(--hoko-fb-accent),
                     color-mix(in srgb, var(--hoko-fb-accent) 70%, #7c3aed)
                   );
    border-radius: inherit;
    transition:    width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hoko-fb__progress-label {
    font-size: 0.75rem;
    color:     var(--hoko-fb-muted);
  }

  /* ─────────────────────────────────────────────────────────────────────
     9. Milestone
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb__milestone {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.625rem 0.875rem;
    background:    var(--hoko-fb-accent-light);
    border-radius: 8px;
    font-size:     0.875rem;
    font-weight:   500;
    color:         var(--hoko-fb-fg);
    opacity:       0;
    transition:    opacity 0.6s ease;
  }

  .hoko-fb--visible .hoko-fb__milestone {
    opacity: 1;
  }

  /* ─────────────────────────────────────────────────────────────────────
     10. CTA button
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb .hoko-fb__cta,
  .hoko-fb a.hoko-fb__cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.875rem 2rem;
    background-color: var(--hoko-fb-accent);
    color:           #ffffff;
    border:          none;
    border-radius:   8px;
    font-size:       1rem;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    width:           fit-content;
    transition:      transform 0.18s ease, box-shadow 0.18s ease;
  }

  .hoko-fb .hoko-fb__cta:hover,
  .hoko-fb a.hoko-fb__cta:hover {
    transform:  scale(1.03);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--hoko-fb-accent) 40%, transparent);
    color:      #ffffff;
    text-decoration: none;
  }

  .hoko-fb__cta:focus-visible {
    outline:        3px solid var(--hoko-fb-accent);
    outline-offset: 3px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     11. Media column
     ───────────────────────────────────────────────────────────────────── */

  .hoko-fb__media {
    position: relative;
    overflow: hidden;
  }

  .hoko-fb__media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
  }

  /* Fallback when no image is present */
  .hoko-fb__media-fallback {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    min-height:      240px;
    background:      linear-gradient(
                       135deg,
                       color-mix(in srgb, var(--hoko-fb-accent) 30%, var(--hoko-fb-bg)),
                       color-mix(in srgb, var(--hoko-fb-accent) 60%, #7c3aed 40%)
                     );
    padding:         2rem;
    text-align:      center;
  }

  .hoko-fb__media-fallback-title {
    font-size:   clamp(1.25rem, 4vw, 2rem);
    font-weight: 700;
    color:       #ffffff;
    opacity:     0.3;
    line-height: 1.2;
  }

  /* ─────────────────────────────────────────────────────────────────────
     12. Skeleton / loading state
     ───────────────────────────────────────────────────────────────────── */

  @keyframes hoko-fb-pulse {
    0%, 100% { opacity: 1;    }
    50%       { opacity: 0.45; }
  }

  .hoko-fb__skeleton {
    background:     var(--hoko-fb-skeleton);
    border-radius:  6px;
    animation:      hoko-fb-pulse 1.5s ease-in-out infinite;
  }

  /* Hide stat values during skeleton so placeholder bars show */
  .hoko-fb__skeleton [data-stat] {
    color: transparent;
  }

  /* ─────────────────────────────────────────────────────────────────────
     13. Ended & funded states
     ───────────────────────────────────────────────────────────────────── */

  /* Ended: disable CTA */
  .hoko-fb--ended .hoko-fb__cta {
    opacity:        0.5;
    pointer-events: none;
    cursor:         not-allowed;
  }

  /* Funded: green progress bar gradient */
  .hoko-fb--funded .hoko-fb__progress-bar::after {
    background: linear-gradient(90deg, #16a34a, #4ade80);
  }

  /* ─────────────────────────────────────────────────────────────────────
     14. Screen-reader utility
     ───────────────────────────────────────────────────────────────────── */

  .sr-only {
    position:     absolute;
    width:        1px;
    height:       1px;
    padding:      0;
    margin:       -1px;
    overflow:     hidden;
    clip:         rect(0, 0, 0, 0);
    white-space:  nowrap;
    border-width: 0;
  }

  /* ─────────────────────────────────────────────────────────────────────
     15. Responsive — single-column at ≤767 px
     ───────────────────────────────────────────────────────────────────── */

  @media (max-width: 767px) {
    .hoko-fb {
      grid-template-columns: 1fr;
    }

    .hoko-fb__content {
      order:   1;
      padding: 1.5rem;
    }

    .hoko-fb__media {
      order:      2;
      max-height: 250px;
    }

    .hoko-fb__cta {
      width: 100%;
    }
  }

  /* ─────────────────────────────────────────────────────────────────────
     16. Reduced-motion — kill all animations & transitions
     ───────────────────────────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .hoko-fb *,
    .hoko-fb *::before,
    .hoko-fb *::after {
      animation-duration:        1ms !important;
      animation-iteration-count: 1  !important;
      transition-duration:       1ms !important;
      scroll-behavior:           auto !important;
    }
  }

/* end banner component styles */