/* Winners Page Styles - LottoBestNZ */

/* Layout Sections */
.section { padding: var(--space-16) 0; }
.section-alt { background: var(--color-bg-secondary); padding: var(--space-16) 0; }
.section-accent { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%); color: var(--color-white); }
.section-accent a { color: var(--color-primary-light); }
.section .section-header { margin-bottom: var(--space-8); }

/* Hero */
.hero { background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, rgba(0,179,134,0.08) 100%); padding: var(--space-16) 0; }
.hero-inner { display: grid; align-items: center; gap: var(--space-8); grid-template-columns: 1fr; }
.hero-copy h1 { margin-bottom: var(--space-4); }
.hero-subtitle { color: var(--color-text-secondary); max-width: 60ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); margin-top: var(--space-8); }
.stat { text-align: center; }
.stat-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); color: var(--color-secondary); }
.stat-label { margin-top: var(--space-2); color: var(--color-text-secondary); }
.hero-media { display: none; }

@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
  .hero-media { display: block; }
}

/* Filters */
.filter-controls { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.filter-controls .btn.is-active { background: var(--color-primary); color: var(--color-secondary); border-color: var(--color-primary); }

/* Winners Grid */
.winners-grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: var(--space-6); }
@media (min-width: 768px) { .winners-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .winners-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.winner-card-header { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.winner-name { font-size: var(--font-size-xl); }
.winner-meta { color: var(--color-text-light); font-size: var(--font-size-sm); }
.winner-amount { color: var(--color-accent); font-weight: var(--font-weight-bold); }

/* Jackpot */
.jackpot-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.jackpot-title { margin-bottom: var(--space-2); }
.jackpot-meta { color: var(--color-text-light); font-size: var(--font-size-sm); }
.jackpot-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-base); }
@media (min-width: 1024px) { .jackpot-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Testimonials */
.testimonials { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.testimonial footer { margin-top: var(--space-3); color: var(--color-text-secondary); }

/* Strategies */
.strategies-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .strategies-grid { grid-template-columns: 1.1fr 0.9fr; } }
.strategy-list { display: grid; gap: var(--space-3); }
.strategy-list li { position: relative; padding-left: 1.25rem; }
.strategy-list li::before { content: "✔"; position: absolute; left: 0; color: var(--color-accent); font-weight: var(--font-weight-bold); }

/* Hall of Fame */
.table-wrapper { overflow-x: auto; background: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-base); }
.hof-table { width: 100%; min-width: 640px; }
.hof-table th, .hof-table td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--color-gray-200); }
.hof-table thead th { background: var(--color-bg-secondary); font-weight: var(--font-weight-semibold); }

/* Winner's Circle */
.winners-circle { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: center; }
.winners-circle .cta-row { display: flex; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 1024px) { .winners-circle { grid-template-columns: 1.1fr 0.9fr; } }
.winners-circle-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-base); }

/* Claiming Steps */
.claim-steps { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .claim-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.claim-step h3 { margin-bottom: var(--space-2); }

/* FAQ */
.faq { display: grid; gap: var(--space-4); }
.faq-item { background: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-base); padding: var(--space-4) var(--space-6); }
.faq-item[open] { box-shadow: var(--shadow-lg); }
.faq-item summary { cursor: pointer; font-weight: var(--font-weight-semibold); outline: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; font-weight: var(--font-weight-bold); }
.faq-item[open] summary::after { content: "–"; }
.faq-body { margin-top: var(--space-3); color: var(--color-text-secondary); }

/* Resources */
.resources-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
.resources-grid .resource-actions { margin-top: var(--space-3); }
@media (min-width: 1024px) { .resources-grid { grid-template-columns: 1fr 1fr 1fr; }
  .resources-grid .resource-media { grid-column: span 3; } }
.resource-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-base); }

/* Celebrating Success */
.media-split { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .media-split { grid-template-columns: 1fr 1fr; } }
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-base); background: var(--color-black); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.celebration-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-base); }

/* Utilities */
.small { font-size: var(--font-size-sm); }
.text-light { color: var(--color-text-light); }

/* Accessibility tweaks */
.filter-controls .btn:focus-visible,
.cta-row .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-base); }