/* /free-for-students/: student offers from other companies, claimed on their
   own sites. Light design; the category tones are the launch site's category
   pastels. Markup comes from lib/free-elsewhere.js. */

.fe-page {
  --fe-ink: var(--tud-color-text-primary);
  --fe-soft: var(--tud-color-text-secondary);
  --fe-muted: var(--tud-color-text-muted);
  --fe-paper: var(--tud-color-bg-surface);
  --fe-line: #E7DCD1;
  --fe-line-strong: #CFC7BD;
  --fe-tint: #FFF3EC;
  --fe-sand: #F7E1C8;
  width: min(100% - (var(--tud-space-6) * 2), var(--site-content));
  margin-inline: auto;
  padding-top: clamp(40px, 6vw, 80px);
}

.fe-tone--ai-productivity { --fe-tone: #DCE8C0; }
.fe-tone--developer-tools { --fe-tone: #D3E2F2; }
.fe-tone--design { --fe-tone: #F9D8DE; }
.fe-tone--music-video { --fe-tone: #C9E4DC; }
.fe-tone--banking { --fe-tone: #FFE6A8; }

/* ---------- Hero ---------- */

.fe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 300px);
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.fe-title {
  max-width: 11ch;
  font-size: clamp(46px, 7.4vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.fe-lead {
  max-width: 54ch;
  margin-top: clamp(20px, 2.4vw, 28px);
  color: var(--fe-soft);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
}

.fe-hero-art img { width: 100%; height: auto; }

/* ---------- Category jump links ---------- */

.fe-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fe-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px 6px 16px;
  color: var(--fe-ink);
  background: var(--fe-tone);
  border-radius: var(--tud-radius-pill);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--tud-duration-fast) var(--tud-ease-standard);
}
.fe-jump-link:hover { transform: translateY(-2px); text-decoration: none; }

.fe-count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  color: var(--fe-ink);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--tud-radius-pill);
  font-family: var(--tud-font-secondary);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- Categories ---------- */

.fe-category {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(48px, 6vw, 80px);
  scroll-margin-top: 96px;
}

.fe-category-head {
  position: sticky;
  top: 104px;
  padding: 24px 24px 26px;
  background: var(--fe-tone);
  border-radius: var(--tud-radius-lg);
}

.fe-category-head h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.fe-category-count {
  margin-top: 10px;
  color: #3D3934;
  font-family: var(--tud-font-secondary);
  font-size: 14px;
  font-weight: 600;
}

.fe-offers {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--fe-paper);
  border-radius: var(--tud-radius-lg);
  box-shadow: inset 0 0 0 1px var(--fe-line);
}

.fe-offer { scroll-margin-top: 96px; }
.fe-offer + .fe-offer .fe-offer-body { border-top: 1px solid var(--fe-line); }

.fe-offer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px;
  margin: 0 clamp(20px, 2.4vw, 32px);
  padding: clamp(22px, 2.4vw, 30px) 0;
}

.fe-offer-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fe-mark {
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.fe-offer-name {
  color: var(--fe-soft);
  font-family: var(--tud-font-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.fe-benefit {
  max-width: 56ch;
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
}

.fe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.fe-tags li {
  padding: 4px 10px;
  color: var(--fe-ink);
  background: var(--tud-color-bg-canvas);
  border: 1.5px solid var(--fe-ink);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.fe-tags li + li { background: var(--fe-tint); border-color: var(--fe-tint); box-shadow: inset 0 0 0 1px #FFC4A8; }

.fe-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 16px 0 0;
  font-family: var(--tud-font-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.fe-facts div { display: flex; gap: 6px; }
.fe-facts dt { color: var(--fe-muted); font-weight: 500; }
.fe-facts dd { margin: 0; color: var(--fe-ink); font-weight: 700; }

.fe-offer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.fe-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px 0 20px;
  color: var(--fe-ink);
  background: var(--fe-paper);
  border: 1.5px solid var(--fe-ink);
  border-radius: var(--tud-radius-pill);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--tud-duration-fast) var(--tud-ease-standard), color var(--tud-duration-fast) var(--tud-ease-standard);
}
.fe-go:hover { color: var(--tud-color-text-inverse); background: var(--fe-ink); text-decoration: none; }
.fe-go svg { flex: none; transition: transform var(--tud-duration-fast) var(--tud-ease-standard); }
.fe-go:hover svg { transform: translateX(3px); }

.fe-guide {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
}

.fe-empty {
  margin-top: 48px;
  color: var(--fe-soft);
  font-size: 17px;
}

/* ---------- Does not work in Pakistan ---------- */

.fe-nothere {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0 clamp(24px, 4vw, 48px);
  margin-top: clamp(72px, 9vw, 120px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--fe-sand);
  border-radius: var(--tud-radius-xl);
}

.fe-nothere-head h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.fe-nothere-art { display: block; width: min(200px, 100%); margin-top: 24px; }
.fe-nothere-art img { width: 100%; height: auto; }

.fe-nothere-list { margin: 0; }
.fe-nothere-list div {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-top: 1px solid rgba(20, 20, 18, 0.14);
}
.fe-nothere-list div:first-child { border-top: 0; padding-top: 0; }
.fe-nothere-list dt { font-weight: 700; line-height: 1.4; }
.fe-nothere-list dd { margin: 0; color: #3D3934; line-height: 1.5; }

.fe-report {
  grid-column: 2;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1.5px solid var(--fe-ink);
  font-weight: 600;
}
.fe-report a { color: var(--fe-ink); font-weight: 700; }

/* ---------- Narrow screens ---------- */

@media (max-width: 960px) {
  .fe-category,
  .fe-nothere { grid-template-columns: minmax(0, 1fr); }
  .fe-nothere-head { margin-bottom: 24px; }
  .fe-category-head { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 20px; }
  .fe-category-count { margin-top: 0; white-space: nowrap; }
  .fe-nothere-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .fe-nothere-art { width: 104px; margin-top: 0; flex: none; }
  .fe-report { grid-column: 1; }
}

@media (max-width: 680px) {
  .fe-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fe-hero-art { order: -1; justify-self: end; width: 128px; margin-bottom: -8px; }
  .fe-title { font-size: clamp(42px, 12.4vw, 60px); }
  .fe-offer-body { grid-template-columns: minmax(0, 1fr); }
  .fe-offer-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .fe-nothere-list div { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .fe-jump-link,
  .fe-go,
  .fe-go svg { transition: none; }
  .fe-jump-link:hover,
  .fe-go:hover svg { transform: none; }
}