/* ==========================================================================
   EXOSAT projektoldal — a projectpage.css-re épül.
   Egyedi rész: az adatlapos hero, a jobb oldali fejezetsín és a lakhatósági
   mércék.
   ========================================================================== */

/* --- hero ----------------------------------------------------------------- */
/* A base.html <main class="main"> eleme flex-oszlop align-items:center-rel, így
   a benne ülő lapunk szélesség nélkül a TARTALMÁHOZ igazodna. Mobilon ez 448 px
   lett (a .pp-table min-width: 28rem miatt), és az egész lap vízszintesen
   túlcsordult egy 430 px-es kijelzőn. */
.xs-page {
  width: 100%;
}

.xs-page .pp-col--wide,
.xs-page .pp-prose {
  max-width: none;
}

.xs-page .pp-prose,
.xs-page .pp-table-block {
  min-width: 0;
}

.xs-page .pp-chapter-head {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 2rem;
}

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

.xs-page .pp-chapter-head .pp-num {
  display: none;
}

.xs-page .pp-chapter-head h2 {
  text-align: center;
  white-space: nowrap;
}

/* --- fejléc ---------------------------------------------------------------
   Ugyanaz a felépítés, mint a SunSat oldalán (.ss-hero): a banner tölti ki a
   sávot, egy balról sötétedő fátyol teszi olvashatóvá a rajta ülő szöveget,
   a ::after pedig a lap színébe úsztatja az alját.
   Korábban itt csillagmezős, fotó nélküli fejléc volt, a banner pedig
   stílus nélküli <img>-ként lógott a lap tetején — natív 1920 px-en, ami
   vízszintesen kilógott a nézetből.
   ------------------------------------------------------------------------- */
.xs-hero { position: relative; width: 100%; aspect-ratio: 2560 / 1080; overflow: hidden; display: flex; align-items: center; }
.xs-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%); }
.xs-hero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.xs-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%); }
.xs-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%; }
.xs-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 46rem; }
.xs-hero__kicker { margin: 0; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-muted); }
.xs-hero h1 { margin: 0; font-size: 4rem; font-weight: 650; line-height: 4.3rem; }
.xs-hero__lede { margin: 0; max-width: 34rem; font-size: 1.2rem; font-weight: 300; line-height: 1.5; }
.xs-hero__lede b { font-weight: 600; }
.xs-hero__note { margin: 0; max-width: 34rem; font-size: .9rem; font-weight: 300; line-height: 1.6; color: var(--pp-body); }
.xs-hero__meta { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.xs-hero__meta span { font-size: .9rem; font-weight: 300; opacity: .85; }

/* --- lakhatósági mércék --------------------------------------------------- */
.xs-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 2rem 3rem; background: var(--pp-surface); border-radius: var(--pp-radius-md); box-shadow: var(--pp-shadow); padding: 1.6rem 1.8rem; }
.xs-gauge { display: flex; flex-direction: column; gap: .55rem; width: 100%; }
.xs-gauge__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.xs-gauge__head b { font-size: 1rem; font-weight: 600; }
.xs-gauge__head span { font-size: .9rem; font-weight: 500; color: var(--pp-accent); font-variant-numeric: tabular-nums; }
.xs-gauge__scale { position: relative; padding-top: 1.15rem; }
.xs-gauge__bands { display: flex; width: 100%; height: .7rem; border-radius: var(--pp-pill); overflow: hidden; }
.xs-gauge__bands i { display: block; }
.xs-gauge__bands .is-safe { background: var(--pp-green); }
.xs-gauge__bands .is-critical { background: var(--pp-amber-dark, #9C6100); }
.xs-gauge__bands .is-danger { background: var(--pp-red); }
.xs-gauge__marker { position: absolute; bottom: -.25rem; margin-left: -1px; width: 2px; height: 1.2rem; background: #fff; border-radius: 1px; box-shadow: 0 0 0 2px rgba(4, 21, 32, .85); }
.xs-gauge__earth { position: absolute; top: 0; transform: translateX(-50%); font-size: .8rem; font-weight: 500; white-space: nowrap; }
.xs-gauge__ticks { position: relative; height: 1.1rem; }
.xs-gauge__ticks.is-two-row { height: 2rem; }
.xs-gauge__ticks span { position: absolute; transform: translateX(-50%); font-size: .8rem; font-weight: 300; color: var(--pp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xs-gauge__ticks span.is-first { transform: none; }
.xs-gauge__ticks span.is-last { transform: translateX(-100%); }
.xs-gauge__ticks span.is-row2 { top: .95rem; }
.xs-legend { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.xs-legend span { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 300; color: var(--pp-body); }
.xs-legend i { width: .8rem; height: .8rem; border-radius: 50%; }

/* --- üzemmódok ------------------------------------------------------------ */
.xs-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--pp-gap); }
.xs-mode { background: var(--pp-surface); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); border-top: 2px solid var(--pp-accent); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.xs-mode i { font-style: normal; font-size: .85rem; font-weight: 600; color: var(--pp-accent); font-variant-numeric: tabular-nums; }
.xs-mode b { font-size: 1.2rem; font-weight: 600; }
.xs-mode span { font-size: .9rem; font-weight: 300; color: var(--pp-body); line-height: 1.5; }

.xs-components dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px 0;
  background: var(--pp-hair-soft);
}

.xs-component {
  flex: 0 1 20%;
  background: var(--pp-surface);
}

.xs-components dt,
.xs-components dd {
  border-bottom: 0;
}

.xs-components dt {
  padding-bottom: .2rem;
}

/* --- megjegyzésdoboz ------------------------------------------------------ */
.xs-callout { background: var(--pp-ghost); border: 2px solid var(--pp-accent); border-radius: var(--pp-radius); padding: 1rem 1.1rem; }
.xs-callout p { margin: 0; font-size: .9rem; font-weight: 400; line-height: 1.6; }

/* --- zöld pipa a megfelelési táblázatban ---------------------------------- */
.xs-tick { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: var(--pp-pill); background: var(--pp-green-fill); border: 1px solid var(--pp-green); font-size: .8rem; font-weight: 500; color: #fff; }

.xs-table-fit,
.xs-page #ch-05 + .pp-stack .pp-table,
.xs-page #ch-12 + .pp-stack .pp-table {
  min-width: 0;
  table-layout: fixed;
}

.xs-table-fit th,
.xs-table-fit td,
.xs-page #ch-05 + .pp-stack .pp-table th,
.xs-page #ch-05 + .pp-stack .pp-table td,
.xs-page #ch-12 + .pp-stack .pp-table th,
.xs-page #ch-12 + .pp-stack .pp-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.xs-table-fit--radiation th:first-child,
.xs-table-fit--radiation td:first-child,
.xs-page #ch-05 + .pp-stack .pp-table th:first-child,
.xs-page #ch-05 + .pp-stack .pp-table td:first-child {
  width: 9rem;
}

.xs-table-fit--cost th:last-child,
.xs-table-fit--cost td:last-child,
.xs-page #ch-12 + .pp-stack .pp-table th:last-child,
.xs-page #ch-12 + .pp-stack .pp-table td:last-child {
  width: 7rem;
}

@media (max-width: 1100px) {
  /* Mobilon a 2560/1080 arany ~180 px magas savva zsugorodna, amibe a cim
     sem fer bele — ezért itt magassagra valtunk, es a fatyol felulrol lefele
     sotetedik, mint a SunSat oldalan. */
  .xs-hero { aspect-ratio: auto; min-height: 34rem; }
  .xs-hero__inner { width: 95%; padding: var(--pp-nav-h) 0 2rem; }
  .xs-hero__scrim { background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, .2) 100%); }
  .xs-hero h1 { font-size: 2.5rem; line-height: 2.8rem; }
  .xs-gauges { grid-template-columns: 1fr; padding: 1.2rem; }

  .xs-component {
    flex-basis: 33.333%;
  }

  .xs-page .pp-chapter-head h2 {
    white-space: normal;
  }

  .xs-table-fit--radiation th:first-child,
  .xs-table-fit--radiation td:first-child,
  .xs-page #ch-05 + .pp-stack .pp-table th:first-child,
  .xs-page #ch-05 + .pp-stack .pp-table td:first-child {
    width: 7.5rem;
  }

  .xs-table-fit--cost th:last-child,
  .xs-table-fit--cost td:last-child,
  .xs-page #ch-12 + .pp-stack .pp-table th:last-child,
  .xs-page #ch-12 + .pp-stack .pp-table td:last-child {
    width: 5.5rem;
  }
}

@media (max-width: 640px) {
  .xs-component {
    flex-basis: 50%;
  }
}

@media (max-width: 420px) {
  .xs-component {
    flex-basis: 100%;
  }
}

/* Egyetlen ábra a sáv közepén: a .pp-figure img szélessége 100%, ezért a
   társ nélkül maradt render a teljes 78rem-es hasábra nőne. */
.xs-page .pp-figure--center {
  max-width: 36rem;
  margin-inline: auto;
  width: 100%;
}