/* ╔══════════════════════════════════════════════════════╗
   ║   style.css – специфично за index.html              ║
   ║   Споделените стилове са в shared.css               ║
   ╚══════════════════════════════════════════════════════╝ */

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.hero {
  display:     flex;
  padding:     60px var(--page-pad);
  gap:         60px;
  align-items: center;
  max-width:   var(--page-max);
  margin:      calc(var(--nav-height) + 20px) auto 0;
}

.hero-left { width: 40%; }

.hero-left h1 {
  font-size:     60px;
  margin-bottom: 30px;
}

.hero-left p {
  font-family:   'Libre Bodoni', serif;
  font-size:     24px;
  line-height:   1.6;
  margin-bottom: 32px;
}

/* ── Hero stats ── */
.hero-stats {
  display:     flex;
  align-items: center;
  gap:         0;
  margin-top:  0;
}

.hero-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        0 24px;
}

.hero-stat:first-child { padding-left: 0; }

.hero-stat-num {
  font-family:    'Libre Bodoni', serif;
  font-size:      42px;
  font-weight:    700;
  color:          var(--brand-teal);
  line-height:    1;
  letter-spacing: -1px;
}

.hero-stat-slash {
  margin:      0 4px;
  color:       var(--edge-solid);
  font-weight: 400;
}

.hero-stat-label {
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          rgba(11,42,47,0.5);
  margin-top:     4px;
  text-align:     center;
}

.hero-stat-sep {
  width:        1px;
  height:       40px;
  background:   var(--edge-strong);
  flex-shrink:  0;
}

@media (max-width: 600px) {
  .hero-stat-num   { font-size: 28px; }
  .hero-stat       { padding: 0 14px; }
  .hero-stat:first-child { padding-left: 0; }
}

.hero-right {
  width:          60%;
  display:        flex;
  flex-direction: column;
  gap:            35px;
  overflow:       hidden;
}

/* ════════════════════════════════
   CAROUSELS
════════════════════════════════ */
/* Лентата носи шестте снимки два пъти. -50% я премества точно с едното
   копие, при което седмата снимка застава на мястото на първата и
   обикалянето е безшевно. Това важи само ако двете условия долу са
   изпълнени — иначе лентата подскача. */
@keyframes carousel-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes carousel-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.carousel { overflow: hidden; width: 100%; }

.carousel .track {
  display:    flex;
  will-change: transform;
  /* Условие 1: ширината на лентата трябва да е тази на съдържанието ѝ.
     Без това flex я свива до контейнера (на телефон ~335px вместо
     ~1600px) и -50% означава 167px вместо половин лента: снимките
     мръдваха малко и се връщаха с видим скок, вместо да обикалят. */
  width: max-content;
}

.carousel.top    .track { animation: carousel-left  18s linear infinite; }
.carousel.bottom .track { animation: carousel-right 22s linear infinite; }

/* Хората, които са заявили по-малко движение в системата си, не бива да
   гледат въртележка. */
@media (prefers-reduced-motion: reduce) {
  .carousel .track { animation: none; }
}

.track img {
  width:         240px;
  height:        170px;
  border-radius: 25px;
  object-fit:    cover;
  flex-shrink:   0;
  pointer-events: none;
  user-select:   none;
  /* Условие 2: разстоянието е margin, а не gap на лентата. При gap
     дванайсет снимки имат единайсет междини, тоест половината лента не
     е равна на шест цели стъпки и остава половин междина разминаване.
     С margin всяка снимка е „снимка + разстояние“ и половината е точно
     шест такива. */
  margin-right:  25px;
}

/* ════════════════════════════════
   ISSUES SECTION
════════════════════════════════ */
.issues {
  display:         flex;
  gap:             60px;
  padding:         80px var(--page-pad);
  justify-content: flex-start;
  align-items:     flex-start;
  flex-wrap:       wrap;
  max-width:       var(--page-max);
  margin:          0 auto;
}

.issues-image {
  position:      relative;
  width:         420px;
  height:        310px;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  flex-shrink:   0;
  margin-top:    0;         /* наравно с текста */
  align-self:    flex-start;
  /* Текстът е над два пъти по-висок от снимката, откакто обясненията
     стоят постоянно. Без sticky под снимката зее празно, а смяната ѝ
     при посочване на карта се случва извън екрана. */
  position:      sticky;
  top:           calc(var(--nav-height) + 24px);
}

.issues-image .img {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  opacity:       0;
  transform:     scale(1.05);
  transition:    opacity 0.5s ease, transform 0.5s ease;
}

.issues-image .elder {
  opacity:   1;
  transform: scale(1);
}

.issues-text {
  display:        flex;
  flex-direction: column;
  gap:            20px;
  /* flex-basis 320px държи текста достатъчно широк до снимката, но
     min-width: 0 му позволява да се свие под това на тесен екран.
     Фиксиран min-width изкарваше страницата хоризонтално под 360px. */
  flex:           1 1 320px;
  min-width:      0;
}

.issues-text h2 {
  font-size:     48px;
  margin-bottom: 30px;
  margin-top:    0;
  text-align:    left;
}

/* Карти с проблеми */
.issue {
  border:        none;
  padding:       20px;
  border-radius: var(--radius-md);
  background:    var(--muted-bg);
  transition:    background var(--transition);
}

/* Подсказка, че картата сменя снимката вляво. Без scale: текстът вече
   стои постоянно и уголемяването го преливаше. */
.issue:hover {
  background: var(--surface-edge);
}

.issue-title {
  font-size:   16px;
  font-weight: 600;
  line-height: 1.35;
  margin:      0;
  color:       var(--brand-dark);
}

/* Текстът стои постоянно.
   Преди беше max-height: 0 / opacity: 0 и се показваше само на
   `.issue:hover`. На телефон и таблет hover не съществува, тоест трите
   карти бяха три празни кутии със заглавие — никой с телефон не е
   прочел нито едно от обясненията. С клавиатура също, защото картите
   не са фокусируеми. */
.issue p {
  font-size:   14px;
  line-height: 1.55;
  color:       var(--brand-dark);
  margin:      8px 0 0;
}

.issue-source {
  display:         block;
  margin-top:      8px;
  font-size:       12px;
  color:           var(--teal-deep);
  text-decoration: none;
}

.issue-source:hover { text-decoration: underline; }

.issues-more {
  align-self:      flex-start;
  margin-top:      4px;
  font-size:       15px;
  color:           var(--brand-dark);
  text-decoration: none;
  border-bottom:   1px solid var(--edge-active);
  padding-bottom:  2px;
  transition:      border-color var(--transition);
}

.issues-more:hover { border-bottom-color: var(--brand-dark); }

/* ════════════════════════════════
   MISSION SECTION
════════════════════════════════ */
.mission-cards {
  padding:    50px var(--page-pad);
  text-align: center;
  max-width:  var(--page-max);
  margin:     0 auto;
}

.mission-cards h2 {
  font-size:     48px;
  font-weight:   700;
  margin-bottom: 24px;
  line-height:   1.05;
}

.mission-grid {
  display:         flex;
  gap:             20px;
  justify-content: center;
  align-items:     stretch;
  flex-wrap:       wrap;
  max-width:       100%;
  margin:          0 auto;
}

.mission-card {
  background:      var(--muted-bg);
  border-radius:   var(--radius-md);
  padding:         22px;
  width:           320px;
  min-height:      140px;
  box-shadow:      var(--shadow-md);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;
  gap:             10px;
  cursor:          default;
}

.mission-card:hover {
  transform:  translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.mission-card h3 {
  font-size:   20px;
  margin:      0;
  font-weight: 700;
  color:       #063336;
}

.mission-card p {
  font-size:   17px;
  margin:      0;
  color:       #073033;
  line-height: 1.45;
}

/* ════════════════════════════════
   RESPONSIVENESS
════════════════════════════════ */

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .hero         { padding: 50px 50px; gap: 40px; }
  .hero-left h1 { font-size: 48px; }
  .hero-left p  { font-size: 20px; }
}

/* Tablets */
@media (max-width: 980px) {
  .hero {
    flex-direction: column;
    padding:        40px 30px;
    gap:            30px;
    margin-top:     calc(var(--nav-height) + 20px);
  }

  .hero-left,
  .hero-right     { width: 100%; }

  /* Заглавието остава 48px до 680px: оттук надолу hero-то вече е в една
     колона на цялата ширина, затова няма нужда от отделна стъпка. */

  .track img      { width: 180px; height: 128px; }

  .mission-grid   { gap: 16px; padding: 0 12px; }
  .mission-card   { width: 100%; max-width: 520px; }

  .issues         { padding: 40px 20px; gap: 22px; }
  /* Тук колоните се сливат в една — снимката застава над текста,
     тоест sticky само би я залепило върху картите.
     relative, НЕ static: трите снимки вътре са position:absolute и без
     позициониран родител се връзват за екрана, тоест всяка от тях
     покрива цялата страница. */
  .issues-image   { width: 100%; max-width: 420px; height: 260px; align-self: center;
                    position: relative; }
}

/* Large phones */
@media (max-width: 680px) {
  .hero           { padding: 30px 20px; }
  .hero-left h1   { font-size: 34px; }
  .hero-left p    { font-size: 17px; }

  .track img      { width: 150px; height: 108px; }

  .issues-image   { height: 220px; }
  .issues-text h2 { font-size: 36px; }
}

/* Small phones */
@media (max-width: 520px) {
  /* 34px/17px се наследяват от ≤680 — повтарянето им тук беше излишно */
  .mission-cards h2 { font-size: 32px; }
  .mission-card     { padding: 16px; min-height: 120px; }

  .track img        { width: 130px; height: 94px; }
  .issues-image     { height: 200px; }
  .issues-text h2   { font-size: 28px; }
}

/* Extra small phones */
@media (max-width: 380px) {
  .hero-left h1   { font-size: 28px; }
  .hero-left p    { font-size: 15px; }
  .track img      { width: 110px; height: 80px; }

  /* Трите числа не се побират на един ред под 380px и изкарваха
     страницата хоризонтално. Пренасят се, а разделителните чертички
     отпадат, защото при пренасяне стоят накриво. */
  .hero-stats     { flex-wrap: wrap; row-gap: 16px; }
  .hero-stat      { padding: 0 12px 0 0; }
  .hero-stat-sep  { display: none; }
}

/* ════════════════════════════════
   НОЩЕН РЕЖИМ

   Почти всичко тук се оправя само, защото цветовете идват от
   променливи, които shared.css презаписва. Долните две не идват —
   `--surface-edge` и `--teal-deep` са светли в двата режима.
════════════════════════════════ */
[data-theme="dark"] .issue:hover { background: var(--night-field-on); }

[data-theme="dark"] .issue-source { color: var(--brand-teal); }