/* Extra styles for Bloxbusters custom pages (store, blog and contact).  
 * This stylesheet defines additional classes to support the new pages.  
 * It is loaded alongside styles.css in the new pages.  
 */

/* Store hero section */
.store-hero {
  padding: 4rem 0 3rem;
  background: radial-gradient(800px 400px at 60% -100px, rgba(59, 130, 246, 0.2), transparent),
              radial-gradient(600px 300px at 0 40%, rgba(34, 197, 94, 0.12), transparent),
              var(--bg);
}
.store-hero .kicker {
  color: var(--accent);
}
.store-hero .hero__title {
  color: var(--text);
}
.store-hero .hero__subtitle {
  color: var(--muted);
}

/* Product grid and cards */
.product-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.product-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-card .placeholder-img {
  height: 200px;
  display: grid;
  place-items: center;
  background: var(--panel2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
}
.product-card h3 {
  font-size: 1.2rem;
}
.product-card p {
  color: var(--muted);
  flex-grow: 1;
}
.product-card .price {
  font-weight: 600;
}
.product-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Pledge and support sections */
.pledge, .support {
  padding: 2rem 0;
}
.pledge ul {
  list-style: disc;
  padding-left: 1.5rem;
  line-height: 1.6;
}
.support {
  text-align: center;
}
.support .btn {
  margin-top: 1rem;
}

/* Blog hero section */
.blog-hero {
  padding: 4rem 0 3rem;
  background: radial-gradient(800px 400px at 50% -100px, rgba(59, 130, 246, 0.2), transparent),
              radial-gradient(600px 300px at 0 40%, rgba(34, 197, 94, 0.12), transparent),
              var(--bg);
}

/* Blog grid and cards */
.blog-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.blog-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.blog-card .thumb {
  height: 180px;
  background: var(--panel2);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Ensure blog card thumbnails that use actual images fill their container */
.blog-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.blog-card .content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.blog-card .meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.blog-card p {
  color: var(--muted);
  flex-grow: 1;
}
.blog-card .btn {
  margin-top: 1rem;
  align-self: flex-start;
}

/* Contact hero section */
.contact-hero {
  padding: 4rem 0 3rem;
  background: radial-gradient(800px 400px at 50% -100px, rgba(59, 130, 246, 0.2), transparent),
              radial-gradient(600px 300px at 0 40%, rgba(34, 197, 94, 0.12), transparent),
              var(--bg);
}

/* Contact form and info */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 500px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}
.contact-form label {
  font-size: 0.9rem;
  color: var(--muted);
}
.contact-form input,
.contact-form textarea {
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
}
.contact-form button {
  margin-top: 1rem;
}
.contact-info {
  text-align: center;
}
.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-info li {
  margin-bottom: 0.5rem;
}