/* =========================================================
   ПРОЕКТСТРОЙ — Нашата история
   Design reference: Figma "History page" (1440 × 3449)
   ========================================================= */

/* Червената лента под хедъра (Figma: Rectangle 11, #f11112) */
.hist {
  padding-top: var(--header-h);
  background: var(--c-red);
}

/* Кремавият панел ляга върху нея със заоблени горни ъгли
   (Figma: Rectangle 10 — y 109, radius 22) */
.hist__panel {
  margin-top: 45px;
  background: var(--c-cream);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}

/* Вътрешността повтаря кадъра 1:1 и се смалява пропорционално.
   --u е един дизайн пиксел (1vw / 14.4 при ширина 1440). */
.hist__inner {
  --u: min(0.0694444vw, 1px);   /* над 1440 не се разтяга — снимките остават с размера от дизайна */
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(2805 * var(--u));
  margin: 0 auto;
}

.hist__title,
.hist__shot,
.hist__text,
.hist__line {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}

.hist__title {
  width: calc(var(--w) * var(--u));
  font-family: var(--f-cond);
  font-weight: 800;
  font-size: calc(76 * var(--u));
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* --- нишката --- */
.hist__line {
  width: 1px;
  height: calc(var(--h) * var(--u));
  background: var(--c-red);
}
.hist__line--tail { background: rgba(0, 0, 0, 0.22); }

/* --- снимките --- */
.hist__shot {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
}
.hist__shot img { width: 100%; height: 100%; object-fit: cover; }

/* --- текстът --- */
.hist__text {
  width: calc(var(--w) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(18 * var(--u));
}

.hist__kicker {
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--c-ink);
}

.hist__year {
  font-weight: 700;
  font-size: calc(76 * var(--u));
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;   /* в дизайна годината излиза извън блока, не се пренася */
}

.hist__body {
  font-size: calc(19 * var(--u));
  line-height: calc(27 * var(--u));
  color: #000;
}
.hist__body--next { margin-top: calc(9 * var(--u)); }

/* =========================================================
   ПО-ТЕСНИ ЕКРАНИ
   Под 1200px колажът се разгъва в четим стълб — същите
   снимки и текстове, само подредбата се променя.
   ========================================================= */
@media (max-width: 1200px) {
  .hist__panel { margin-top: 36px; }

  .hist__inner {
    width: auto;
    height: auto;
    max-width: 660px;
    margin: 0 auto;
    padding: 56px 24px 96px;
  }

  .hist__title,
  .hist__shot,
  .hist__text {
    position: static;
    width: auto;
  }

  .hist__line { display: none; }

  .hist__title {
    font-size: clamp(38px, 6.2vw, 68px);
    margin-bottom: 48px;
    text-align: center;
  }

  .hist__entry {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .hist__entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

  /* снимките са с оригинален размер от дизайна — не ги разтягаме
     повече от 1.45×, за да останат резки */
  .hist__shot {
    width: 100%;
    max-width: calc(var(--w) * 1.45px);
    height: auto;
    aspect-ratio: var(--w) / var(--h);
    margin-inline: auto;
  }

  .hist__text { gap: 14px; }
  .hist__kicker { font-size: 15px; letter-spacing: 0.4px; }
  .hist__year { font-size: clamp(36px, 7vw, 64px); white-space: normal; }
  .hist__body { font-size: 17px; line-height: 1.6; }
  .hist__body--next { margin-top: 14px; }
}

/* На таблет и малък лаптоп редът се разгъва настрани — снимка до текста,
   както е в дизайна, само че в две колони вместо в свободен колаж. */
@media (min-width: 860px) and (max-width: 1200px) {
  .hist__inner { max-width: 920px; }

  .hist__entry {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .hist__entry:nth-of-type(even) { flex-direction: row-reverse; }

  .hist__shot { flex: 0 0 44%; margin-inline: 0; }
  .hist__text { flex: 1 1 0; min-width: 0; }
  .hist__year { font-size: 56px; }
}

@media (max-width: 640px) {
  .hist__inner { padding: 40px 20px 72px; }
  .hist__title { margin-bottom: 34px; }
  .hist__entry { gap: 18px; padding-bottom: 40px; margin-bottom: 40px; }
  .hist__body { font-size: 16px; }
}