/* ==========================================================================
   PROJEKTOLDALAK — közös alap (SunSat, ExoSat)
   A színek a webhely saját :root változóiból jönnek (static/styles/styles.css).
   A --pp-* nevek csak aliasok, tartalék értékkel, hogy a fájl önmagában is
   használható legyen.
   ========================================================================== */
:root {
  --pp-accent: var(--sarga, #EE9C35);
  --pp-page: var(--bodybackground, #041520);
  --pp-surface: var(--kek5, #061F30);
  --pp-nav: var(--kek1, #092E49);
  --pp-line: var(--kek6, #2C6C9A);
  --pp-red: var(--new, #B83218);
  --pp-green: #419948;
  --pp-green-fill: #41994888;
  --pp-white: #fff;
  --pp-body: #D9E6F2;
  --pp-muted: #B3B3B3;
  --pp-hair: rgba(255, 255, 255, .15);
  --pp-hair-soft: rgba(255, 255, 255, .08);
  --pp-ghost: rgba(0, 0, 0, .2);
  --pp-radius: .5rem;
  --pp-radius-md: .75rem;
  --pp-radius-lg: 1rem;
  --pp-pill: 999px;
  --pp-shadow: 0 10px 20px rgba(0, 0, 0, .25);
  --pp-gap: 1.5rem;
  --pp-gap-sm: 1rem;
  --pp-nav-h: 4.5rem;
  --pp-dur: .3s;
}

.pp *,
.pp *::before,
.pp *::after {
  box-sizing: border-box;
}

.pp {
  font-family: Poppins, Algerian, sans-serif;
  color: var(--pp-white);
}

/* --- szerkezet ------------------------------------------------------------ */
.pp-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 3rem 0;
}

.pp-col {
  width: 80%;
}

.pp-col--narrow {
  max-width: 56rem;
}

.pp-col--wide {
  max-width: 78rem;
}

.pp-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--pp-hair);
}

.pp > .pp-rule {
  width: 80%;
  margin: 0 auto;
}

.pp-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-stack--tight {
  gap: .6rem;
}

/* Horgonyra ugráskor (fejezetsín, „ugrás a tartalomra" típusú linkek) a
   böngésző a célelem tetejét viszi a nézet tetejére — ott viszont a FIX
   navbar (--pp-nav-h) ül, és eltakarná a fejezetcímet. A scroll-margin csak
   a görgetés végállását tolja lejjebb, a lap elrendezését nem érinti. */
.pp [id] {
  scroll-margin-top: calc(var(--pp-nav-h) + 1.5rem);
}

/* --- fejezetsín ----------------------------------------------------------- */
.xs-rail { position: fixed; top: 50%; right: 1.6rem; transform: translateY(-50%); z-index: 9; display: flex; flex-direction: column; gap: .55rem; align-items: flex-end; }
.xs-rail a { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; text-decoration: none; transition: all var(--pp-dur); }
.xs-rail .xs-rail__band { display: none; font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--pp-muted); }
.xs-rail .xs-rail__num { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pp-muted); width: 1.4rem; text-align: right; }
.xs-rail .xs-rail__dash { width: .7rem; height: 2px; border-radius: 1px; background: var(--pp-hair); transition: all var(--pp-dur); }
/* A sín alapállapotban csak a sorszámot mutatja. Az aktív fejezetnél (és a
   kurzor alatt) a szám helyét átveszi a cím. A csere display-jel történik, nem
   opacityvel: a rejtett elem így helyet sem foglal, és a flex gap sem hagy
   utána léket — a sor jobb széle (a vonalka) mindig egy helyben marad. */
.xs-rail a:hover .xs-rail__band, .xs-rail a.is-active .xs-rail__band { display: block; animation: xs-rail-swap .25s ease; }
.xs-rail a:hover .xs-rail__num, .xs-rail a.is-active .xs-rail__num { display: none; }
.xs-rail a:hover .xs-rail__band { color: var(--pp-white); }
.xs-rail a.is-active .xs-rail__band { color: var(--pp-accent); }

@keyframes xs-rail-swap {
  from { opacity: 0; transform: translateX(.4rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xs-rail a:hover .xs-rail__band, .xs-rail a.is-active .xs-rail__band { animation: none; }
}
.xs-rail a.is-active .xs-rail__dash { width: 1.4rem; background: var(--pp-accent); }
@media (max-width: 1279px) { .xs-rail { display: none; } }

/* --- tipográfia ----------------------------------------------------------- */
.pp-heading {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding-bottom: 2rem;
}

.pp-heading::before,
.pp-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pp-hair);
}

.pp-heading h2 {
  margin: 0;
  white-space: nowrap;
  font-size: 3rem;
  font-weight: 600;
  text-align: center;
}

.pp-chapter-head {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
  padding-bottom: 1.2rem;
}

.pp-chapter-head .pp-num {
  font-size: 2.6rem;
  font-weight: 650;
  color: var(--pp-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pp-chapter-head h2 {
  margin: 0;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

.pp-chapter-head .pp-rule {
  margin-top: .4rem;
}

.pp-body {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
  color: #fff;
}

.pp-body--center {
  text-align: center;
}

.pp-body--left {
  text-align: left;
}

.pp-lead {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: #fff;
}

.pp-note {
  margin: 0;
  font-size: .85rem;
  font-weight: 300;
  color: var(--pp-muted);
  line-height: 1.5;
}

.pp-em {
  color: var(--pp-accent);
  font-weight: 600;
}

.pp-prose {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
}

/* --- hasábok -------------------------------------------------------------- */
.pp-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: 3rem;
  align-items: start;
  width: 100%;
}

.pp-col.pp-two {
  width: 80%;
}

.pp-grid {
  display: grid;
  gap: var(--pp-gap);
}

.pp-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pp-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pp-grid--team {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.pp-grid--quotes {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* --- kiemelt számok ------------------------------------------------------- */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--pp-gap);
  width: 100%;
}

.pp-stat {
  background: var(--pp-surface);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pp-stat dt {
  font-size: .85rem;
  font-weight: 300;
  color: var(--pp-muted);
}

.pp-stat dd {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pp-stat dd span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--pp-accent);
}

/* --- küldetéskártya ------------------------------------------------------- */
.pp-brief {
  background: var(--pp-surface);
  border-radius: var(--pp-radius-md);
  box-shadow: var(--pp-shadow);
  overflow: hidden;
}

.pp-brief>h3 {
  margin: 0;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--pp-hair-soft);
  font-size: 1.3rem;
  font-weight: 600;
}

.pp-brief dl {
  margin: 0;
}

.pp-brief dt {
  font-size: .85rem;
  font-weight: 600;
  color: var(--pp-accent);
  padding: .9rem 1.1rem 0;
}

.pp-brief dd {
  margin: 0;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.5;
  padding: .25rem 1.1rem .9rem;
  border-bottom: 1px solid var(--pp-hair-soft);
}

.pp-brief dd:last-child {
  border-bottom: 0;
}

/* --- képek ---------------------------------------------------------------- */
.pp-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pp-figure img {
  width: 100%;
  display: block;
  border-radius: var(--pp-radius);
}

.pp-figure figcaption {
  font-size: .85rem;
  font-weight: 300;
  color: var(--pp-muted);
  line-height: 1.5;
}

.pp-figure--16x9 img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* A CDR műszaki ábrái fekete háttérrel exportáltak. A keret a lap színére ülteti
   őket, a lighten keverés pedig a fekete hátteret engedi a keret színének. */
.pp-plate {
  background: var(--pp-surface);
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-radius);
  padding: .7rem;
  overflow: hidden;
}

.pp-plate img {
  border-radius: 0;
  mix-blend-mode: lighten;
}

.pp-frame {
  background: var(--pp-surface);
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-radius);
  padding: .7rem;
  overflow: hidden;
}

.pp-frame img {
  border-radius: 0;
}

/* --- csapat --------------------------------------------------------------- */
.pp-member {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pp-member img,
.pp-member .pp-initials {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--pp-radius);
  display: block;
}

.pp-member img {
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(.92);
}

.pp-member .pp-initials {
  background: var(--pp-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--pp-line);
}

.pp-member b {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
}

.pp-member .pp-role {
  font-size: .85rem;
  font-weight: 500;
  color: var(--pp-accent);
}

.pp-member .pp-task {
  font-size: .9rem;
  font-weight: 300;
  color: var(--pp-body);
  line-height: 1.45;
}

/* --- idézet -------------------------url(../../../django-projektoldalak/AssdsBlog/static/sunsat)-------------------------------------- */
.pp-quote {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--pp-accent);
  background: rgba(255, 255, 255, .05);
  border-radius: 0 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.pp-quote p {
  margin: 0;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--pp-body);
  line-height: 1.6;
}

.pp-quote footer {
  font-size: .85rem;
  font-weight: 500;
  color: var(--pp-muted);
}

/* --- támogatók ------------------------------------------------------------ */
.pp-sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--pp-gap-sm);
}

.pp-sponsor {
  background: var(--pp-surface);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.pp-sponsor b {
  font-size: 1rem;
  font-weight: 600;
}

.pp-sponsor span {
  font-size: .85rem;
  font-weight: 300;
  color: var(--pp-muted);
}

/* --- táblázat ------------------------------------------------------------- */
.pp-table-block {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.pp-table-block>h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.pp-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--pp-radius-md);
  box-shadow: var(--pp-shadow);
}

.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: var(--pp-surface);
  min-width: 28rem;
}

.pp-table th {
  background: var(--pp-nav);
  padding: .7rem .9rem;
  text-align: right;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pp-table th:first-child,
.pp-table td:first-child {
  text-align: left;
}

.pp-table td {
  padding: .7rem .9rem;
  text-align: right;
  font-weight: 300;
  color: var(--pp-body);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.pp-table td:first-child {
  color: var(--pp-white);
  font-weight: 500;
}

.pp-table tbody tr {
  border-top: 1px solid var(--pp-hair-soft);
}

.pp-table tbody tr.is-total {
  background: rgba(255, 255, 255, .06);
}

.pp-table tbody tr.is-total td {
  font-weight: 600;
  color: var(--pp-white);
}

.pp-table--text td,
.pp-table--text th {
  text-align: left;
}

/* --- gomb ----------------------------------------------------------------- */
.pp-cta {
  display: inline-block;
  padding: .5rem .8rem;
  border: 2px solid var(--pp-accent);
  border-radius: var(--pp-radius);
  background: var(--pp-ghost);
  color: var(--pp-white);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--pp-dur), color var(--pp-dur), margin var(--pp-dur);
}

.pp-cta:hover {
  background: var(--pp-accent);
  color: var(--pp-surface);
  margin-left: .5rem;
}

.pp-cta:active {
  opacity: .7;
}

@media (max-width: 1100px) {
  .pp-col {
    width: 95%;
  }

  .pp > .pp-rule {
    width: 95%;
  }

  .pp-two,
  .pp-grid--2,
  .pp-grid--3 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pp-col.pp-two {
    width: 95%;
  }

  .pp-heading h2,
  .pp-chapter-head h2 {
    font-size: 2.1rem;
    white-space: normal;
  }

  .pp-body {
    text-align: left;
  }
}