/* ==========================================================================
   Long-form info pages (Cinematography Info, Album Pricing)
   ========================================================================== */

.info-hero {
  text-align: center;
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: var(--space-xl);
}

.info-hero__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-md);
}

.info-hero h1 em { font-style: italic; color: var(--accent); }

.info-hero .lede { margin-inline: auto; margin-top: var(--space-md); }

/* ---- Section dividers between service types ---- */

.info-section {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--border-subtle);
}

.info-section:first-of-type { border-top: 0; }

.info-section__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.info-section__heading {
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-lg);
  max-width: 22ch;
}

.info-section__heading em { font-style: italic; color: var(--accent); }

.info-section__body {
  max-width: var(--max-w-text);
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--ink-primary);
}

.info-section__body p + p { margin-top: var(--space-md); }

.info-section__body blockquote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-block: var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent-soft);
}

/* ---- Two-column layout (heading left, body right) ---- */

@media (min-width: 900px) {
  .info-section--split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-2xl);
    align-items: start;
  }
  .info-section--split .info-section__heading { margin-bottom: 0; }
  .info-section--split .info-section__aside { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}

/* ---- Sample video list ---- */

.sample-list {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

.sample-list__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-sm);
}

.sample-list ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
}

@media (min-width: 640px) {
  .sample-list ul { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .sample-list ul { grid-template-columns: repeat(3, 1fr); }
}

.sample-list a,
.sample-list span {
  display: block;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--ink-primary);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: color var(--dur-fast) var(--ease-out);
}

.sample-list a:hover { color: var(--accent); }

/* ---- Closing CTA ---- */

.info-cta {
  padding-block: var(--space-3xl) var(--space-2xl);
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}

.info-cta__heading {
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: 400;
  max-width: 24ch;
  margin-inline: auto;
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

.info-cta__heading em { font-style: italic; color: var(--accent); }

.info-cta__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.info-cta__link:hover { color: var(--accent-dark); }