/* ==========================================================================
   HOME — sections for index.html (Figma frame 2:3)
   Desktop values are literal Figma pixels. Everything below 1200px is an
   adaptation; each invented decision is commented.
   ========================================================================== */

.page--home { --section-gap: var(--sp-12); }  /* Figma: 12px on this frame */

/* --- 1. Hero -------------------------------------------------------------- */

.hero { --section-pt: var(--sp-80); --section-pb: var(--sp-80); }

.hero__inner { display: flex; align-items: center; gap: var(--sp-58); }

.hero__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-36);
  padding: var(--sp-10);
}

.hero__subhead {
  max-width: 484px;
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-hero-sub);
}

.hero__media {
  flex: 0 0 600px;
  height: 416px;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
  .hero__inner { flex-direction: column; gap: var(--sp-40); }
  .hero__text { flex: 1 1 auto; }
  .hero__media { flex: 1 1 auto; height: auto; aspect-ratio: 600 / 416; }
}

/* --- 2. "section danas" band ---------------------------------------------- */

/* Horizontalni padding je uklonjen - .container unutar njega je racunao
   100% od vec suzene kutije, pa je tekst izlazio na 1140 umesto 1200. */
.danas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-30);
}

.danas__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-10);
  color: var(--c-ink-soft);
  font-family: var(--ff-display);
  text-align: center;
}

.danas__lead { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }

.danas__punch {
  font-size: var(--fs-danas);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-42);
}

.danas__punch em {
  font-style: normal;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--c-ink);
}

/* --- 3. Programi intro ---------------------------------------------------- */

.programs-intro { --section-pt: var(--sp-80); --section-pb: var(--sp-80); }

.programs-intro__inner { display: flex; align-items: center; gap: var(--sp-58); }

.programs-intro__media {
  flex: 0 0 600px;
  align-self: stretch;
  min-height: 354px;
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* Figma uses object-contain here and cover everywhere else - reproduced. */
.programs-intro__media img { width: 100%; height: 100%; object-fit: contain; }

.programs-intro__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-10);
}

.programs-intro__title { max-width: 440px; padding-inline: var(--sp-10); }
.programs-intro__body { max-width: 498px; padding: var(--sp-10); }

@media (max-width: 1023px) {
  .programs-intro__inner { flex-direction: column; gap: var(--sp-40); }
  .programs-intro__media { flex: 1 1 auto; width: 100%; min-height: 0; aspect-ratio: 600 / 354; }
  .programs-intro__title, .programs-intro__body { max-width: none; }
}

/* --- 4. Statistics -------------------------------------------------------- */

.stats {
  position: relative;
  overflow: hidden;
  --section-pt: var(--sp-80);
  --section-pb: var(--sp-80);
}

.stats__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  pointer-events: none;
}

.stats__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-64);
}

.stats__heading {
  max-width: 800px;
  padding-inline: var(--sp-64);
  color: var(--c-ink-soft);
  font-family: var(--ff-display);
  font-size: var(--fs-stat-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-42);
  text-align: center;
}

/* Bilo: repeat(4, auto) + justify-content center = sirina po sadrzaju (~1176).
   Sada pune 1200: 4 x 252 + 3 x 64. */
.stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-64);
  width: 100%;
}

.stat {
  display: flex;
  flex-direction: column-reverse;   /* dt precedes dd in markup; value shows on top */
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  min-width: 0;
  padding: var(--sp-32);
  border: var(--bw-stat) solid var(--c-mint);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: center;
}

.stat__value {
  font-family: var(--ff-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
}

.stat__label {
  max-width: 140px;
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

@media (max-width: 1023px) {
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32); }
  .stats__heading { padding-inline: 0; }
}

@media (max-width: 479px) { .stats__list { grid-template-columns: 1fr; } }

/* --- 5. Funkcionalni treninzi (tier cards) -------------------------------- */

.tiers-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-10);
  --section-pt: 0;
  --section-pb: 0;
}

.tiers-section__heading {
  padding-block: var(--sp-48);
  text-align: center;
}

/* Figma ima 3 x 390 sa razmakom 10 = 1190, pa je blok bio 5px uzi sa svake
   strane. Sada je pravi kontejner od 1200 sa tri jednake kolone. */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-10);
  width: min(100% - (var(--gutter) * 2), var(--container));
  padding-block-end: var(--sp-36);
}

.tier {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-48) var(--sp-36);
  border-radius: var(--r-lg);
  color: var(--c-ink-soft);
}

.tier__header { display: flex; flex-direction: column; gap: var(--sp-15); }

.tier__name {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--c-ink);
  padding-block-start: var(--sp-10);
}

.tier__tagline {
  font-family: var(--ff-body);
  font-size: var(--fs-tagline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--c-ink);
}

@media (min-width: 600px) and (max-width: 1023px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
}

@media (max-width: 599px) {
  .tiers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
}

/* --- 6. Individualni pristup (program rows) ------------------------------- */

.programs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  --section-pt: var(--sp-40);
  --section-pb: var(--sp-40);
}

.programs__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding-block-start: var(--sp-48);
  text-align: center;
}

.programs__lead { color: var(--c-ink-soft); }

/* NE dodavati width ovde - ovaj element u HTML-u nosi i klasu .container,
   a .container ima istu specificnost. Posto se home.css ucitava posle
   base.css, svaki width ovde gazi kontejner i blok bezi preko celog ekrana. */
.programs__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

/* Each row: padding 36/48, radius 24, no fill. */
.program-row {
  --split-gap: var(--sp-24);
  --split-media-flex: 1 1 0;
  --split-media-w: auto;
  --split-align: stretch;        /* slika prati visinu teksta */
  --split-media-h: auto;
  --split-media-min-h: 398px;    /* Figma */
  padding-block: var(--sp-48);
  border-radius: var(--r-lg);
}

/* Row 1's image is flex-sized in Figma while rows 2 and 3 are fixed at 561px,
   which makes row 1 a different width from its siblings. Normalised to 561
   across all three - flagged. */

/* --- 7. Gimnastika / Mama blocks ------------------------------------------ */

/* Isto kao gore: ovaj element nosi i .container, pa width ovde ne sme. */
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding-block: var(--sp-48);
  border-radius: var(--r-lg);
}

.feature__title { text-align: center; }

.feature__subtitle {
  max-width: 490px;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
}

/* Figma 135:198 / 136:209: slika 580.5, telo 560.5, razmak 58.
   Oba flex-basis 0, a odnos se postize preko flex-grow - tako se slobodan
   prostor deli u odnosu 580:560 i kolone padaju tacno na Figma sirine. */
.feature__row {
  --split-gap: var(--sp-58);
  --split-align: stretch;        /* slika prati visinu teksta */
  --split-media-flex: 580 1 0;
  --split-media-w: auto;
  --split-media-h: auto;
  --split-media-min-h: 512px;    /* Figma */
  --split-media-ratio: 580 / 512;
  padding-block: var(--sp-48);
}

.feature__row .split__body { min-width: 0; }

/* flex-basis mora ostati 0. Sa flex-basis: 500px tekst prvo uzme 500,
   pa se tek ostatak deli - slika ostane na ~320 umesto na 580. */
@media (min-width: 900px) {
  .feature__row .split__body { flex: 560 1 0; min-width: 0; }
}

/* --- 8. Raspored ---------------------------------------------------------- */

.schedule { --section-pt: 0; --section-pb: var(--sp-48); }

.schedule__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-10);
  padding-block-start: var(--sp-48);
  text-align: center;
}

.schedule__heading { padding-block: var(--sp-10); }

.schedule__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-10);
  width: 100%;
  padding-block: var(--sp-24);
}

/* Figma 30:296 etc: min-h 236, p 10, border 3, radius 24, gap 10.
   Grid stretch keeps all five equal - Utorak/Cetvrtak have fewer rows but
   the same box. */
.day {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-height: 236px;
  padding: var(--sp-10);
  border: var(--bw-schedule) solid;
  border-radius: var(--r-lg);
  text-align: start;
}

.day--coral  { border-color: var(--c-coral); }
.day--yellow { border-color: var(--c-yellow); }

.day__name {
  padding-block: var(--sp-10);
  margin-block-end: var(--sp-10);   /* Figma: 10px between header and Satnica */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
  caption-side: top;
}

.day--coral .day__name  { background: var(--c-coral-25); }
.day--yellow .day__name { background: var(--c-yellow-25); }

.day__table { width: 100%; }
.day__table tr { display: contents; }

.day__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--sp-10);
  row-gap: 0;
  padding: var(--sp-10);
  border-top: 1px solid;
}

.day--coral .day__rows  { border-top-color: var(--c-coral); }
.day--yellow .day__rows { border-top-color: var(--c-yellow); }

.day__table th,
.day__table td {
  padding: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: normal;
  text-align: justify;
}

@media (max-width: 1023px) { .schedule__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .schedule__grid { grid-template-columns: 1fr; } }

/* --- 9. CTA --------------------------------------------------------------- */

.cta { --section-pt: var(--sp-96); --section-pb: var(--sp-96); }

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-25);
}

.cta__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  padding-block-end: var(--sp-25);
  text-align: center;
}

.cta__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-42);
}

.cta__body { max-width: 1028px; }

/* Figma has these four absolutely positioned at mixed widths (290/290/290/279)
   with card 1 filled rgba(0,0,0,.1). Per your standing instruction they are an
   even grid with brand tints instead. */
.cta__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-20);
  width: 100%;
}

.cta-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-24);
  min-height: 255px;
  padding: var(--sp-10);
  border-radius: var(--r-lg);
  text-align: center;
}

.cta-step__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* Each glyph keeps its own Figma dimensions - they are not uniform. */
.cta-step__icon--mail   { width: 53.33px; height: 50.67px; }
.cta-step__icon--call   { width: 54.19px; height: 54.18px; }
.cta-step__icon--gym    { width: 58.67px; height: 26.67px; }
.cta-step__icon--choose { width: 61.33px; height: 61.33px; }

@media (max-width: 1023px) { .cta__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .cta__steps { grid-template-columns: 1fr; } }

/* --- 10. Mobile section spacing -------------------------------------------
   Section paddings (80/96/48) are Figma desktop values and never scaled
   down - on narrow screens the gap between sections read as oversized
   relative to the content. Halved (roughly) below 767px, with extra
   attention to the two worst offenders: the run-up to "Raspored treninga"
   and to "Zakaži DANAS trening", which stacked section-pb + page gap +
   section-pt into ~100-150px of empty space.                              */
@media (max-width: 767px) {
  .hero,
  .programs-intro,
  .stats { --section-pt: var(--sp-40); --section-pb: var(--sp-40); }

  .tiers-section__heading { padding-block: var(--sp-24); }

  .programs { --section-pt: var(--sp-24); --section-pb: var(--sp-24); }
  .programs__heading { padding-block-start: var(--sp-24); }

  .schedule { --section-pb: var(--sp-24); }
  .schedule__inner { padding-block-start: var(--sp-24); }

  .cta { --section-pt: var(--sp-48); --section-pb: var(--sp-48); }
}