/* BBQ University navigation and curriculum components. */
:root {
  --pd-ember: #e64a19;
  --pd-ember-deep: #b93813;
  --pd-coal: #171717;
  --pd-smoke: #6b7280;
  --pd-cream: #fbf7f1;
  --pd-border: #e7e2dc;
}

.university-pathways {
  margin-bottom: 3.5rem;
}

.university-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.university-section-heading h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.1;
  font-weight: 800;
}

.university-section-heading p {
  margin: .45rem 0 0;
  max-width: 44rem;
  color: #5d6470;
}

.track-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .track-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.track-card {
  --track-accent: var(--pd-ember);
  position: relative;
  display: flex;
  min-height: 14rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pd-border);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, #fff 0%, #fff 72%, color-mix(in srgb, var(--track-accent) 8%, white) 100%);
  color: var(--pd-coal);
  padding: 1.35rem;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(20, 20, 20, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.track-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: .35rem;
  background: var(--track-accent);
}

.track-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--track-accent) 35%, var(--pd-border));
  box-shadow: 0 16px 36px rgba(20, 20, 20, .11);
}

.track-card--cooks-recipes { --track-accent: #c83d16; }
.track-card--fire-technique { --track-accent: #e47a13; }
.track-card--sauces-sides-extras { --track-accent: #8a3f20; }
.track-card--bbq-knowledge { --track-accent: #414b55; }

.track-card__eyebrow {
  color: var(--track-accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.track-card__title {
  margin: .65rem 0 .55rem;
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 850;
}

.track-card__description {
  margin: 0;
  color: #59606b;
  line-height: 1.55;
}

.track-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.1rem;
  color: #444b55;
  font-size: .82rem;
  font-weight: 700;
}

.track-card__arrow {
  color: var(--track-accent);
  font-size: 1.15rem;
}

.track-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  border-radius: 999px;
  background: #f5ede8;
  color: #8f3217;
  padding: .35rem .7rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.track-badge:hover {
  background: #efe0d7;
  color: #70250f;
}

.track-badge--fire-technique { background: #fff0dc; color: #8b4700; }
.track-badge--sauces-sides-extras { background: #f4e7df; color: #743318; }
.track-badge--bbq-knowledge { background: #e9edf0; color: #34404a; }

.track-context {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .85rem;
  align-items: center;
  margin: 0 0 2rem;
  border: 1px solid var(--pd-border);
  border-left: .35rem solid var(--pd-ember);
  border-radius: .9rem;
  background: var(--pd-cream);
  padding: 1rem 1.15rem;
  color: inherit;
  text-decoration: none;
}

.track-context:hover { border-color: #d7c8bc; }
.track-context__label {
  grid-column: 1 / -1;
  color: #7b6556;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.track-context__name { font-size: 1.05rem; font-weight: 850; }
.track-context__description { color: #626873; font-size: .92rem; }

.start-here-panel {
  margin: 1.75rem 0 3rem;
  border: 1px solid #eadfd5;
  border-radius: 1.15rem;
  background: #fcf8f3;
  padding: clamp(1.1rem, 3vw, 1.75rem);
}

.start-here-panel__label {
  color: #9a3c1d;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.start-here-panel h2 {
  margin: .35rem 0 .3rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  font-weight: 850;
}

.start-here-panel > p {
  margin: 0 0 1.2rem;
  color: #606771;
}

.related-reading {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

.related-reading h2 {
  margin: 0 0 .4rem;
  font-size: 1.65rem;
  font-weight: 850;
}

.related-reading__intro {
  margin: 0 0 1.25rem;
  color: #646b75;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 720px) {
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.related-card {
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .055);
}

.related-card img {
  display: block;
  width: 100%;
  height: 9.5rem;
  object-fit: cover;
}

.related-card__body { padding: 1rem; }
.related-card__title {
  margin: .45rem 0 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 800;
}
.related-card__title a { color: inherit; text-decoration: none; }
.related-card__title a:hover { color: var(--pd-ember); }

.track-archive-hero {
  background: linear-gradient(140deg, #f7f4f0 0%, #fff 70%);
  border-bottom: 1px solid #ece6df;
}

.track-archive-hero__inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: 4.5rem 1rem 3.5rem;
}

.track-archive-hero__back {
  color: #8b3c22;
  font-weight: 750;
  text-decoration: none;
}

.track-archive-hero h1 {
  margin: 1rem 0 .65rem;
  max-width: 50rem;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  line-height: 1.02;
  font-weight: 900;
}

.track-archive-hero p {
  max-width: 48rem;
  margin: 0;
  color: #5e6670;
  font-size: 1.08rem;
  line-height: 1.65;
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
  .track-card { background: #fff; }
  .track-card:hover { border-color: #d7c8bc; }
}