@import '/assets/app/shared/styles/site/index.615452d2f7b1a18.css';

/* The Philosophy of René Girard (girardcourse.com) on the site system, data-brand="girard":
   Studio paper with a violet accent, the hero on a solid violet band, and the sections as
   alternating paper and soft bands in the wide frame. Type, controls and spacing are the
   system's; this file keeps only the page's layout (the hero's text beside the Scapegoat, the
   split sections, the columns, the reviews and the two plans). It follows the reader's light or
   dark setting. */

.girard :where(h1, h2, h3, p, ol, ul, li) {
  margin: 0;
  padding: 0;
}

.girard :where(ol, ul) {
  list-style: none;
}

/* Type roles. */
.girard-eyebrow {
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: var(--text-kicker);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.girard-title {
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
}

.girard-lede {
  color: var(--ink-soft);
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
}

.girard-heading {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  text-align: center;
}

.girard-subheading {
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
}

.girard-copy {
  color: var(--ink-soft);
}

.girard-copy p + p {
  margin-top: var(--space-4);
}

.girard-note {
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  text-align: center;
}

/* A band: a full-width section with its content in the wide frame. Bands alternate paper and
   the soft paper; the hero is the brand's band color. */
.girard-band {
  display: flex;
  justify-content: center;
  background: var(--bg);
}

.girard-band.is-textured,
.girard-band.is-deep {
  background: var(--bg-soft);
}

.girard-band-inner {
  width: 100%;
  max-width: calc(var(--band-width, var(--site-wide)) + 2 * var(--site-gutter));
  padding: var(--band-pad-top, var(--section-space)) var(--site-gutter) var(--band-pad-bottom, var(--section-space));
}

/* The hero: the title and signup on the violet band, the Scapegoat filling the right-hand
   column from edge to edge. */
.girard-hero {
  display: grid;
  grid-template-columns:
    max(var(--site-gutter), (100% - var(--site-wide)) / 2)
    minmax(0, 1fr)
    var(--space-16)
    minmax(0, 0.6fr);
  min-height: 40rem;
}

.girard-hero-text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--section-space);
}

.girard-hero-text > .girard-signup {
  margin-top: var(--space-4);
}

.girard-hero-image {
  position: relative;
  grid-column: 4;
  grid-row: 1;
}

.girard-hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The syllabus signup, used twice: an email field and a button under it. On the band the button
   is the band's ink. */
.girard-signup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 28rem;
  max-width: 100%;
}

.girard-signup.is-centered {
  align-items: center;
  margin-inline: auto;
}

.girard-honeypot {
  display: none;
}

.girard-signup input[type='email'] {
  width: 100%;
}

.girard-signup button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding-inline: var(--control-padding-x);
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.girard-signup button:hover {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}

.girard-hero .girard-signup button {
  border-color: var(--band-ink);
  background: var(--band-ink);
  color: var(--band);
}

.girard-signup button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.girard-signup button svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* While a signup is being sent, the design system's is-loading spinner stands in for the
   chevron. */
.girard-signup button.is-loading svg {
  display: none;
}

.girard-signup-status {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  line-height: var(--leading-body);
}

.girard-signup.is-centered .girard-signup-status {
  text-align: center;
}

/* Our promise. */
.girard-promise {
  --band-width: var(--site-measure);

  text-align: center;
}

.girard-promise .girard-heading {
  margin-top: var(--space-4);
}

.girard-divider {
  width: 4rem;
  margin: var(--space-6) auto 0;
  border: 0;
  border-top: 2px solid var(--accent);
}

.girard-promise-text {
  margin-top: var(--space-6);
  color: var(--ink-soft);
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
}

/* René Girard, Lecturer and the syllabus: two equal columns, centred on each other. */
.girard-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-16);
  align-items: center;
}

.girard-split .girard-copy {
  margin-top: var(--space-6);
}

.girard-portrait {
  justify-self: center;
  width: 100%;
  height: 28rem;
  overflow: hidden;
}

.girard .girard-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Curriculum: the numbered weeks, the number in the accent. */
.girard-weeks {
  max-width: var(--site-measure);
  margin-top: var(--space-6);
  counter-reset: week;
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
}

.girard-weeks li {
  display: flex;
  gap: var(--space-3);
  counter-increment: week;
}

.girard-weeks li + li {
  margin-top: var(--space-3);
}

.girard-weeks li::before {
  flex-shrink: 0;
  min-width: 1.25rem;
  color: var(--accent);
  content: counter(week) '.';
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
}

/* The two full-width paintings between sections. */
.girard .girard-gallery img {
  display: block;
  width: 100%;
  height: 20rem;
  object-fit: cover;
  object-position: center;
}

/* The Course Experience. */
.girard-experience-intro {
  --band-width: var(--site-measure);
  --band-pad-bottom: var(--space-8);
}

.girard-experience-intro .girard-note {
  margin-top: var(--space-3);
}

.girard-experience {
  --band-pad-top: var(--space-8);
  --band-pad-bottom: var(--space-8);
}

.girard-experience.is-last {
  --band-pad-bottom: var(--section-space);
}

.girard-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-12);
  align-items: start;
}

.girard-columns .girard-copy {
  margin-top: var(--space-4);
}

/* Reviews of Past Courses: three portraits a row, each with its name and quote. */
.girard-reviews-intro {
  --band-pad-bottom: var(--space-8);
}

.girard-reviews {
  --band-width: 48rem;
  --band-pad-top: 0rem;
}

.girard-review-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-10);
  align-items: start;
}

.girard-review-row + .girard-review-row {
  margin-top: var(--space-12);
}

.girard .girard-review img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}

.girard-review p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* Enroll and the two prices: hairline plan cards on paper. */
.girard-enroll {
  --band-width: var(--site-measure);
  --band-pad-bottom: var(--space-8);
}

.girard-plans-band {
  --band-width: 56rem;
  --band-pad-top: 0rem;
}

.girard-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-8);
  align-items: stretch;
}

.girard-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--rule);
  background: var(--bg-elevated);
}

.girard-plan-name {
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-kicker);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.girard-plan-price {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
}

.girard-plan-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--ink-soft);
}

.girard-plan-features li {
  display: flex;
  gap: var(--space-3);
}

.girard-plan-features li::before {
  flex-shrink: 0;
  color: var(--accent);
  content: '✓';
  font-family: var(--font-ui);
}

.girard-plan.is-featured {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* The list takes the card's spare height, so both Enroll buttons sit on one line at the bottom. */
.girard-plan-features {
  flex-grow: 1;
}

.girard-plan-features strong {
  color: var(--ink);
}

.girard-plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--space-2);
  height: var(--control-height);
  padding-inline: var(--control-padding-x);
  border-radius: var(--radius-control);
  background: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-ui-lg);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.girard .girard-plan-button,
.girard .girard-plan-button:hover {
  color: var(--accent-ink);
}

.girard-plan-button:hover {
  background: var(--accent-deep);
}

.girard-plan-button svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* The syllabus: the study guide's cover beside the second signup. */
.girard-syllabus .girard-cover {
  justify-self: center;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.girard-syllabus-signup {
  text-align: center;
}

.girard-syllabus-signup .girard-subheading {
  text-align: center;
}

.girard-syllabus-signup .girard-signup {
  margin-top: var(--stack-md);
}

/* Tablets: the hero stacks, the Scapegoat across the top and the title under it. */
@media (max-width: 980px) {
  .girard-hero {
    grid-template-columns: var(--site-gutter) minmax(0, 1fr) var(--site-gutter);
  }

  .girard-hero-image {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 24rem;
  }

  .girard-hero-text {
    grid-column: 2;
    grid-row: 2;
  }

  .girard-split,
  .girard-columns,
  .girard-plans {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--stack-lg);
  }
}

@media (max-width: 640px) {
  .girard-review-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--stack-lg);
  }

  .girard .girard-gallery img {
    height: 14rem;
  }

  .girard-signup button {
    width: 100%;
  }
}