/* ===============
   TazzexGame HOMEPAGE STYLES
   Builds on base.css
=================== */

/* HERO section */
.hero-section {
  background: linear-gradient(115deg, #13234a 30%, transparent 110%), url('assets/media/space-bg.svg') center/cover no-repeat;
  min-height: 520px;
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
  box-shadow: var(--shadow);
}
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.hero-text {
  flex: 1;
  min-width: 300px;
}
.hero-text h1 {
  margin-bottom: var(--space-4);
  color: #fff;
}
.hero-text p {
  color: var(--color-gray-200);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  max-width: 38ch;
}
.hero-image {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 375px;
  background: var(--color-surface);
  aspect-ratio: 4/3;
}
@media (max-width: 900px) {
  .hero-content {
    flex-direction: column;
    gap: var(--space-6);
    text-align: center;
  }
  .hero-image {
    margin: auto;
  }
}
@media (max-width: 600px) {
  .hero-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-4);
  }
}

/* About Section */
.about-section {
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
  text-align: center;
}
.about-section h2 {
  margin-bottom: var(--space-3);
}
.about-values {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.about-values li {
  font-size: var(--font-size-md);
  color: var(--color-primary-accent);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
@media (max-width: 900px) {
  .about-values {
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
  }
}

/* Steps/Process Section */
.steps-section {
  margin-bottom: var(--space-8);
  text-align: center;
}
.shopping-steps {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.shopping-steps li {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6) var(--space-4);
  min-width: 160px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--font-size-md);
  color: var(--color-gray-100);
  transition: box-shadow var(--transition-fast);
}
.shopping-steps li:hover {
  box-shadow: var(--shadow-lg);
}
.step-icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  color: var(--color-primary-accent);
}
@media (max-width: 780px) {
  .shopping-steps {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* Featured Products Section */
.featured-section {
  margin-bottom: var(--space-12);
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  min-width: 0;
  background: linear-gradient(100deg, var(--color-surface) 70%, var(--color-background) 120%);
  position: relative;
}
.product-card img {
  width: 100%;
  min-width: 160px;
  max-width: 190px;
  border-radius: var(--radius-sm);
  margin: 0 auto var(--space-2);
  box-shadow: var(--shadow-xs);
  aspect-ratio: 16/11;
  background: var(--color-background);
}
.product-variant {
  display: block;
  color: var(--color-primary-accent);
  font-weight: 400;
  font-size: var(--font-size-sm);
  margin-top: 2px;
}
.price {
  color: var(--color-success);
  font-size: var(--font-size-lg);
  font-weight: 700;
}
.product-rating {
  color: var(--color-warning);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
}
.button.small {
  font-size: var(--font-size-base);
  padding: var(--space-1) var(--space-4);
}
@media (max-width: 950px) {
  .products-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}
@media (max-width: 700px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Benefits Section */
.benefits-section {
  text-align: center;
  margin-bottom: var(--space-12);
}
.benefits-list {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.benefits-list li {
  background: var(--color-surface);
  color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-md);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
@media (max-width: 640px) {
  .benefits-list {
    flex-direction: column;
    gap: var(--space-3);
  }
}
/* Categories Section */
.categories-section {
  margin-bottom: var(--space-12);
}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.category-card img {
  width: 100%;
  max-width: 140px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  aspect-ratio: 3/2;
}
.category-card {
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.button.tiny {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-3);
}
@media (max-width: 950px) {
  .categories-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}
@media (max-width: 700px) {
  .categories-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
/* Testimonials Section */
.testimonials-section {
  margin-bottom: var(--space-12);
  text-align: center;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.testimonial-card blockquote {
  font-style: italic;
  color: var(--color-primary-accent);
  margin-bottom: var(--space-2);
}
.testimonial-card figcaption {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}
@media (max-width: 840px) {
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}
@media (max-width: 540px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* CTA Section */
.cta-section {
  background: linear-gradient(100deg, var(--color-primary) 70%, var(--color-primary-accent) 120%);
  color: #fff;
  text-align: center;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-16);
  padding: var(--space-12) var(--space-4);
  box-shadow: var(--shadow-lg);
}
.cta-section h2 {
  color: #fff;
  margin-bottom: var(--space-4);
  letter-spacing: -1px;
}
.button.big {
  font-size: var(--font-size-lg);
  padding: var(--space-2) var(--space-8);
}

/* Footer */
.site-footer {
  background: var(--color-surface);
  color: var(--color-gray-200);
  padding: var(--space-8) 0 calc(var(--space-8) + 62px) 0;
  margin-top: auto;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.footer-brand { max-width: 320px; }
.footer-logo {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary-accent);
  margin-bottom: var(--space-2);
}
.footer-desc {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}
.footer-nav ul,
.footer-legal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav li, .footer-legal li {
  margin-bottom: var(--space-2);
}
.footer-nav a, .footer-legal a {
  color: var(--color-gray-100);
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}
.footer-nav a:hover, .footer-legal a:hover {
  color: var(--color-primary-accent);
}
.footer-legal {
  min-width: 180px;
  font-size: var(--font-size-xs);
}
.copy {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-top: var(--space-3);
}
@media (max-width: 850px) {
  .footer-main {
    flex-direction: column;
    gap: var(--space-8);
  }
  .footer-brand, .footer-legal, .footer-nav {
    max-width: 100%;
  }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-background);
  box-shadow: 0 -6px 24px rgba(10, 17, 36, 0.30);
  z-index: 9999;
  color: var(--color-gray-200);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform .3s, opacity .2s;
}
.cookie-banner.show {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.cookie-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-3) var(--space-4);
}
.cookie-container p {
  font-size: var(--font-size-sm);
  margin: 0;
  color: var(--color-gray-100);
}
.cookie-container a { color: var(--color-primary); text-decoration: underline; }
.cookie-actions {
  display: flex;
  gap: var(--space-2);
}
.button.secondary {
  background: var(--color-muted);
  color: var(--color-gray-300);
}
.button.secondary:hover {
  background: var(--color-gray-700);
  color: #fff;
}
@media (max-width: 700px) {
  .cookie-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
  }
  .cookie-actions { justify-content: flex-end; }
}