/* ============================================================
   HOME PAGE — index.html specific styles
   Loads after impheim.css
   ============================================================ */

/* ---- Hero ---- */
/* Slightly less bottom padding than the default .page-hero (7rem 0 5rem) */
.hero-home { padding-bottom: 3rem; }

/* ---- About section ---- */
.section-about { padding-top: 3rem; }

/* Two-column grid: text left, gallery right */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-eyebrow    { margin-bottom: .9rem; }
.about-h2         { margin-bottom: 1.25rem; }
.about-btn        { margin-top: .5rem; }
.about-btn-icon   { font-size: .8rem; }

/* "Some of the art" heading — body font, no serif, small */
.about-gallery-title {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: var(--text2);
  font-family: var(--font-b);
  font-weight: 600;
  letter-spacing: 0;
}

/* Link below the gallery grid */
.about-gallery-link { margin-top: .75rem; font-size: .82rem; color: var(--muted); }

/* ---- Video clips section ---- */
/* Constrain the 2-col video grid so clips don't stretch too wide */
.clips-grid { max-width: 900px; margin: 0 auto; }
.clips-cta  { text-align: center; margin-top: 2.5rem; }

/* JS-built video card structure */
.video-card            { padding: 0; overflow: hidden; }
.video-card-wrap       { margin: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; position: relative; }
.video-card-poster     { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.video-card-info       { padding: 1.1rem 1.25rem; }
.video-card-title      { margin-bottom: .4rem; }
.video-card-desc       { font-size: .88rem; }
/* Inline error / loading messages */
.load-error            { color: var(--muted); padding: 2rem 0; }

/* ---- Tools section ---- */
.section-tools { padding-top: 2rem; padding-bottom: 3rem; }

/* Clickable tool cards on the home page */
.tool-card       { text-decoration: none; display: block; padding: 1.5rem; }
.tool-card-icon  { font-size: 2rem; margin-bottom: .75rem; }
.tool-card-title { margin-bottom: .5rem; font-size: 1rem; }
.tool-card-desc  { font-size: .88rem; color: var(--text2); margin: 0; }

/* ---- CTA section ---- */
.section-cta { padding-top: 2rem; padding-bottom: 6rem; }

/* Gold/red gradient — replaces the old purple/pink tones */
.cta-card {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(201,168,76,.06), rgba(192,34,42,.04));
  border-color: rgba(201,168,76,.20);
}
.cta-eyebrow { margin-bottom: 1rem; }
.cta-h2      { margin-bottom: 1rem; }
.cta-p       { max-width: 620px; margin: 0 auto 2rem; }

/* ---- SEO text section ---- */
.section-seo { padding-top: 1rem; padding-bottom: 4rem; }
.seo-container { max-width: 820px; }
.seo-divider { margin-bottom: 3rem; }
.seo-h2 { margin-bottom: 1.25rem; font-size: 1.15rem; color: var(--text2); }
.seo-p  { color: var(--muted); font-size: .9rem; line-height: 1.8; margin-bottom: .9rem; }

/* ---- Responsive ---- */
@media(max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; }
}