/* ==========================================================================
   SUNSAT projektoldal — a projectpage.css-re épül.
   Csak az itt egyedi rész: a teljes szélességű hero, a középgerinces idővonal
   és a mögötte gördülő parallax égbolt.
   ========================================================================== */

/* --- hero ----------------------------------------------------------------- */
.ss-hero { position: relative; width: 100%; aspect-ratio: 2560 / 1080; overflow: hidden; display: flex; align-items: center; }
.ss-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 14rem; pointer-events: none; background: linear-gradient(to bottom, rgba(4, 21, 32, 0) 0%, var(--pp-page) 82%, var(--pp-page) 100%); }
.ss-hero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,.95) 80%); }
.ss-hero__inner { position: relative; z-index: 3; width: 80%; margin: 0 auto; padding-top: var(--pp-nav-h); display: flex; align-items: center; height: 100%; }
.ss-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 46rem; }
.ss-hero__team { display: flex; align-items: center; gap: .8rem; }
.ss-hero__team img { width: 3rem; height: 3rem; border-radius: 50%; }
.ss-hero__team span { font-size: 1rem; font-weight: 300; opacity: .9; }
.ss-hero h1 { margin: 0; font-size: 4rem; font-weight: 650; line-height: 4.3rem; }
.ss-hero__lede { margin: 0; max-width: 38rem; font-size: 1.2rem; font-weight: 300; line-height: 1.5; }
.ss-hero__meta { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.ss-hero__meta span { font-size: .9rem; font-weight: 300; opacity: .85; }

.ss-mission-figures img { height: 18rem; object-fit: contain; }
.ss-mission-figures figure:first-child img { object-fit: cover; }

/* --- idővonal ------------------------------------------------------------- */
.ss-timeline { position: relative; }
.ss-ladder { position: relative; width: 80%; max-width: 72rem; margin: 0 auto; z-index: 1; }
.ss-ladder::before { content: ""; position: absolute; left: 50%; margin-left: -1px; top: .5rem; bottom: 1rem; width: 2px; background: var(--pp-hair); }

.ss-month { position: relative; z-index: 1; display: flex; justify-content: center; padding: 1rem 0 1.6rem; }
.ss-month > span { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 1.1rem; border-radius: var(--pp-pill); background: var(--pp-surface); border: 1px solid var(--pp-hair); box-shadow: var(--pp-shadow); }
.ss-month b { font-size: 1.2rem; font-weight: 600; }
.ss-month i { font-style: normal; font-size: .9rem; font-weight: 300; color: var(--pp-muted); }

.ss-rung { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 4.5rem; padding-bottom: 2rem; }
.ss-rung::before { content: ""; position: absolute; top: 1.1rem; left: 50%; margin-left: -.45rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--pp-accent); box-shadow: 0 0 0 4px var(--pp-page); z-index: 2; }
.ss-rung::after { content: ""; position: absolute; top: 1.5rem; width: 2.25rem; height: 2px; background: var(--pp-hair); }
.ss-rung--left::after { left: calc(50% - 2.25rem); }
.ss-rung--right::after { left: 50%; }
.ss-rung--miss::before, .ss-rung--end::before { background: var(--pp-red); }

.ss-card { grid-column: 1; background: var(--pp-surface); border: 1px solid var(--pp-hair-soft); border-radius: var(--pp-radius-md); box-shadow: var(--pp-shadow); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.ss-rung--right .ss-card { grid-column: 2; }
.ss-card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ss-card__date { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-card__tag { font-size: .85rem; padding: .2rem .6rem; border-radius: var(--pp-pill); background: var(--pp-accent); color: var(--pp-surface); font-weight: 500; }
.ss-rung--miss .ss-card__tag, .ss-rung--end .ss-card__tag { background: var(--pp-red); color: #fff; }
.ss-card__note { font-size: .85rem; padding: .2rem .6rem; border-radius: var(--pp-pill); border: 1px solid var(--pp-red); color: var(--pp-red); font-weight: 500; }
.ss-card h3 { margin: 0; font-size: 1.3rem; font-weight: 600; line-height: 1.6rem; }
.ss-card__body { display: flex; flex-direction: column; gap: .6rem; font-size: 1rem; font-weight: 300; color: var(--pp-body); line-height: 1.6; }
.ss-card__body p { margin: 0; }
.ss-card__specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.ss-card__specs dt { font-size: .8rem; font-weight: 600; color: var(--pp-accent); border-top: 1px solid var(--pp-hair-soft); padding-top: .5rem; }
.ss-card__specs dd { margin: 0; font-size: .85rem; font-weight: 300; line-height: 1.5; }
.ss-card__media { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--pp-gap-sm); margin-top: .2rem; }

/* --- parallax égbolt ------------------------------------------------------ */
.ss-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); }
.ss-sky__grad { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--pp-page) 0%, #061F30 45%, #092E49 100%); }
.ss-sky__glow { position: absolute; inset: 0; background: radial-gradient(120% 46% at 50% 0%, rgba(80, 170, 235, .10), transparent 70%); }
.ss-sky__layers { position: absolute; inset: 0; overflow: hidden; }
.ss-stars { position: absolute; inset: -120px 0; opacity: .8; background-repeat: repeat-y; background-size: 100% 720px;
  background-image:
    radial-gradient(2px 2px at 12% 5%, rgba(206,220,244,.85), transparent),
    radial-gradient(1.5px 1.5px at 78% 10%, rgba(206,220,244,.6), transparent),
    radial-gradient(1.5px 1.5px at 34% 17%, rgba(206,220,244,.5), transparent),
    radial-gradient(2px 2px at 91% 24%, rgba(206,220,244,.7), transparent),
    radial-gradient(1.5px 1.5px at 6% 31%, rgba(206,220,244,.5), transparent),
    radial-gradient(1.5px 1.5px at 57% 37%, rgba(206,220,244,.6), transparent),
    radial-gradient(2px 2px at 25% 46%, rgba(206,220,244,.75), transparent),
    radial-gradient(1.5px 1.5px at 84% 52%, rgba(206,220,244,.45), transparent),
    radial-gradient(1.5px 1.5px at 45% 60%, rgba(206,220,244,.6), transparent),
    radial-gradient(2px 2px at 69% 68%, rgba(206,220,244,.7), transparent),
    radial-gradient(1.5px 1.5px at 17% 75%, rgba(206,220,244,.5), transparent),
    radial-gradient(1.5px 1.5px at 95% 82%, rgba(206,220,244,.45), transparent),
    radial-gradient(1.5px 1.5px at 40% 88%, rgba(206,220,244,.55), transparent),
    radial-gradient(2px 2px at 63% 95%, rgba(206,220,244,.65), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 82%); }
.ss-clouds { position: absolute; inset: 0; }
.ss-clouds--far { opacity: .22; }
.ss-clouds--near { opacity: .34; }
.ss-clouds svg { position: absolute; display: block; height: auto; color: var(--pp-line); }
.ss-clouds path { stroke: currentColor; stroke-width: 1.35; fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ss-craft { display: block; position: sticky; top: 22vh; width: clamp(96px, 11vw, 150px); height: auto; margin: 0 auto; color: var(--kek2, #21577D); opacity: .55; }
.ss-craft .ln { stroke: currentColor; stroke-width: 1.3; fill: none; }
.ss-craft .ln-thin { stroke: currentColor; stroke-width: .8; fill: none; opacity: .7; }
.ss-craft .can { stroke: var(--pp-accent); stroke-width: 1.3; fill: rgba(238, 156, 53, .06); opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .ss-stars, .ss-clouds, .ss-craft { transform: none !important; }
}

@media (max-width: 1100px) {
  .ss-hero { aspect-ratio: auto; min-height: 34rem; }
  .ss-hero__inner { width: 95%; padding: var(--pp-nav-h) 0 2rem; }
  .ss-hero__scrim { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.2) 100%); }
  .ss-hero h1 { font-size: 2.5rem; line-height: 2.8rem; }
  /* Mobilon a gerinc balra kerül, minden kártya mellé. */
  .ss-ladder { width: 95%; max-width: none; }
  .ss-ladder::before { left: .45rem; margin-left: 0; }
  .ss-rung { grid-template-columns: 1fr; padding-left: 2.4rem; }
  .ss-rung::before { left: .45rem; }
  .ss-rung::after { left: .9rem !important; width: 1.5rem; }
  .ss-card, .ss-rung--right .ss-card { grid-column: 1; }
  .ss-month { justify-content: flex-start; padding-left: 2.4rem; }
}