/* ============================================================
   Astea Solutions — position.css
   Page-specific styles for fellowship position detail pages.
   Depends on base.css and sections.css variables.
   ============================================================ */

/* ---- Hero: split — solid black text zone left, illustration right.
   Mirrors the fellowship-hero pattern: hard black on the left half,
   fading to semi-transparent so the illustration bleeds in from the right.
   Layer 1: gradient mask. Layer 2: illustration pinned to the right at 55% width. */
.position-hero {
  background-color: var(--color-black);
  background-image:
    linear-gradient(to right, var(--color-black) 45%, rgba(0, 0, 0, 0.55) 45%),
    url("/assets/images/positions-inner.png");
  background-size:
    100% 100%,
    40% auto;
  background-position:
    0 0,
    right center;
  background-repeat: no-repeat;
  min-height: 300px;
}

@media (max-width: 900px) {
  /* Below 900px the illustration would overlap the title — drop it */
  .position-hero {
    background-image: none;
    min-height: 220px;
  }
}

/* ---- Section spacing: tighter than the site default (5rem) -- */
.position-content {
  padding: var(--section-pad-sm);
}

/* ---- Back-to-Fellowship link ------------------------------ */
.position-back-bar {
  padding: var(--space-md) 0 0;
}

.position-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.position-back:hover {
  color: var(--color-accent);
  gap: 0.5rem;
}

/* ---- Position body: long-form prose ----------------------- */
.position-body p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  max-width: 72ch;
}

.section--dark .position-body p {
  color: var(--color-text-light);
}

.position-body p + p {
  margin-top: var(--space-sm);
}

/* Bullet lists in position body */
.position-body ul,
.position-body ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  max-width: 72ch;
}

.position-body ul li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
  padding-left: 1.25rem;
  position: relative;
}

.section--dark .position-body ul li,
.section--dark .position-body ol li {
  color: var(--color-text-light);
}

.position-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.575em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.position-body ol {
  counter-reset: pos-ol;
  list-style: none;
}

.position-body ol li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
  padding-left: 1.75rem;
  position: relative;
  counter-increment: pos-ol;
}

.position-body ol li::before {
  content: counter(pos-ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.875rem;
}

/* Nested lists */
.position-body ul ul,
.position-body ol ul {
  margin-top: 0.375rem;
  margin-left: 0.5rem;
}

/* Notes / Bonus labels */
.position-note {
  margin-top: var(--space-md);
  max-width: 72ch;
}

.position-note__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* Technology keyword chips */
.position-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  list-style: none;
  padding: 0;
  max-width: none;
}

.position-tech-list li {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-black);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  padding-left: 0.75rem;
  position: static;
}

.position-tech-list li::before {
  display: none;
}

/* service-detail overrides for position pages */
.position-content .service-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.position-content .service-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.position-content .service-detail__header h2 {
  margin: 0;
}

.position-content .service-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Subsection headings nested inside a service-detail body (e.g. the two
   parts of the Software Engineer program: lectures and team project). */
.position-subsection-heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.section--dark .position-subsection-heading {
  color: var(--color-text-light);
}

/* Inline fellowship link inside prose */
.position-fellowship-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.position-fellowship-link:hover {
  color: var(--color-accent);
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 768px) {
  .position-body p,
  .position-body ul,
  .position-body ol {
    max-width: none;
  }
}

/* Tighter clamp so long role titles ("Associate Software Engineer")
   don't wrap to 3+ lines inside the shorter mobile hero. */
.position-hero .hero__headline {
  font-size: clamp(1.5rem, 6.5vw, 3rem);
}

/* Slightly larger number inside section-marker circles on mobile
   so "01", "02" etc. are comfortable to read at 360px. */
@media (max-width: 480px) {
  .position-content .section-marker {
    font-size: 0.875rem;
    width: 2.25rem;
    height: 2.25rem;
  }
}