/**
 * F1GMAT APU Theme · mba-essay-questions.css
 * Content-type-specific components for MBA essay questions pages.
 *
 * Loaded site-wide via libraries.yml (theme attaches all three CSS
 * files globally so Full HTML can use any class on any content type).
 * Editor surfaces this via the Styles dropdown entry:
 *   - Block · Essay · Prompt (verbatim)
 *
 * Everything else used on essay pages (wordcount chips, do/don't grids,
 * structure breakdowns, failure modes, callouts, pullquotes) lives in
 * style.css as shared editorial primitives.
 *
 * Depends on the :root palette in style.css.
 */

/* =====================================================================
   1. ESSAY PROMPT — verbatim school prompt with teal bar + meta row
   HTML:
     <blockquote class="fg-essay-prompt">
       <p>What are your career goals over the next three to five years...</p>
       <footer class="fg-essay-prompt__meta">
         <cite class="fg-essay-prompt__cite">Columbia MBA Essay 1</cite>
         <span class="fg-wordcount">500 words</span>
       </footer>
     </blockquote>
   ===================================================================== */

.node__content .fg-essay-prompt {
  background: var(--fg-paper-aged);
  /* Explicit per-side borders override the global blockquote's
   * border-left: 3px gold without touching the global rule. The
   * 5px teal left border + 0.5px hairline on the other three sides
   * is the intended frame; no shorthand reset needed. */
  border-top: 0.5px solid var(--fg-hairline);
  border-right: 0.5px solid var(--fg-hairline);
  border-bottom: 0.5px solid var(--fg-hairline);
  border-left: 5px solid var(--fg-teal);
  padding: 22px 28px 18px 26px;
  margin: 28px 0;
  position: relative;
  /* The global blockquote sets font-style: italic on the wrapper.
   * The wrapper itself should be upright; italic comes from the
   * inner <p> rule which sets it explicitly. */
  font-style: normal;
}

.node__content .fg-essay-prompt::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 14px;
  font-family: Georgia, serif;
  font-size: 38px;
  line-height: 1;
  color: var(--fg-teal);
}

.node__content .fg-essay-prompt p {
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1.55;
  font-style: italic;
  color: var(--fg-ink);
  margin: 0 0 12px;
  padding-left: 18px;
}

.node__content .fg-essay-prompt p:last-of-type {
  margin-bottom: 14px;
}

.node__content .fg-essay-prompt__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-top: 12px;
  padding-left: 18px;
  border-top: 0.5px solid var(--fg-hairline);
}

.node__content .fg-essay-prompt__cite {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-style: normal;
  color: var(--fg-ink-muted);
}