/* general section layout - padding wrapper, titles, feature grid, shared card look */

.section {
  padding: 4rem 0;
}

.section-title {
  text-align: center;
  margin-bottom: 2.25rem;
}

.section-title p {
  color: var(--color-text-muted);
  max-width: 560px;
  margin-inline: auto;
}

/* slightly diff bg + top/bottom borders to separate it from sections
   above/below, e.g. Featured Products on home page */
.section-alt {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* narrower column so text isn't full width - About, Help, Contact, Login, Register */
.page-narrow-sm { max-width: 480px; margin-inline: auto; }
.page-narrow-md { max-width: 600px; margin-inline: auto; }
.page-narrow-lg { max-width: 800px; margin-inline: auto; }

/* shared "raised card" look - feature boxes, product cards, dash tiles,
   charts and the filter bar all use this. each file just adds whatever
   makes it different */
.feature-box,
.product-card,
.dash-card,
.chart-card,
.filter-bar,
.video-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* video gallery on the About page */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .video-gallery {
    grid-template-columns: 1fr;
  }
}

.video-card {
  overflow: hidden;
}

.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-card .video-card-body {
  padding: 1.1rem 1.3rem;
}

.video-card h3 {
  margin: 0 0 .35rem;
}

.video-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
}

.feature-box,
.product-card,
.theme-card {
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.feature-box:hover,
.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

/* 4 boxes per row, 2 on tablet, 1 on phone */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-box {
  padding: 1.8rem 1.6rem;
}

.feature-box:hover {
  transform: translateY(-6px);
}

.feature-box .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: .9rem;
  border-radius: 50%;
  font-size: 1.5rem;
  background: rgba(0, 0, 0, .06);
}

/* centers the Our Values cards on About page only (.page-narrow-lg wraps
   that section) -- home's grid and the help article list also use
   .feature-box so had to scope this or it'd affect those too */
.page-narrow-lg .feature-box {
  text-align: center;
}

.page-narrow-lg .feature-box .icon {
  margin-inline: auto;
}

/* photo dropped into page body text - About page, help articles */
.content-image {
  border-radius: var(--radius);
  margin: 1.5rem 0;
  box-shadow: var(--shadow-md);
}

/* roastery video on the home page */
.section-video {
  width: 100%;
  max-width: 720px;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}