/* ==========================================================================
   COMPONENTS — shared by every page of the site
   ========================================================================== */

/* --- Button ---------------------------------------------------------------
   One shape in Figma: radius 12, padding 24, Raleway Bold 24.
   The revised design uses only two fills: solid black for every page CTA,
   and yellow for the nav phone pill. The coral/mint/yellow body-button
   variants from the previous revision are gone from both frames, so they are
   not carried here as dead CSS. Hover/active are an interaction floor -
   Figma specifies no states.                                               */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  padding: var(--sp-24);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--t-fast), transform var(--t-fast);
}

.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }

.btn--black { background: var(--c-ink); color: var(--c-surface); }
.btn--black:focus-visible { outline-color: var(--c-yellow); }

.btn--yellow { background: var(--c-yellow); color: var(--c-ink); }
.btn--yellow:hover { filter: brightness(0.94); }

.btn--w258 { width: 258px; }
.btn--w266 { width: 266px; }

.btn--nav {
  padding: var(--sp-12) var(--sp-12);
  font-size: var(--fs-small);
}

.btn__icon { width: 24px; height: 24px; flex: none; object-fit: contain; }

.btn-row {
  display: flex;
  justify-content: var(--btn-row-align, center);
  width: 100%;
}

@media (max-width: 599px) {
  .btn--w258,
  .btn--w266 { width: 100%; }
  .btn-row { --btn-row-align: stretch; }
}

/* --- CTA send (email / Viber) ----------------------------------------------
   The final "Pošalji prijavu" CTA is two separate links swapped by the
   viewport with plain CSS - no JS involved, so it can't silently stop
   working. Phones get the Viber deep link, everything above the mobile
   cutoff gets a mailto:. Breakpoint matches .btn--w258/.btn--w266 above.   */

.cta-send--phone { display: none; }

@media (max-width: 599px) {
  .cta-send--desktop { display: none; }
  .cta-send--phone { display: inline-flex; }
}

/* --- Split row ------------------------------------------------------------
   The single most reused layout on the site: media on one side, a stacked
   text column on the other, alternating direction down the page. Covers the
   three program rows and both gimnastika/mama blocks on Home, and both bio
   cards on O nama. Text always comes first in the DOM so reading order holds;
   --media-start flips the visual order only.                               */

.split {
  display: flex;
  align-items: var(--split-align, center);
  gap: var(--split-gap, var(--sp-24));
}

.split--media-start { flex-direction: row-reverse; }

/* --split-media-h: auto zajedno sa --split-align: stretch znaci da se slika
   rasteze na visinu teksta (donje ivice se poklapaju).
   --split-media-min-h je pod iz Figme da se ne skupi kad je tekst kratak. */
.split__media {
  flex: var(--split-media-flex, none);
  width: var(--split-media-w, 561px);
  min-width: 0;
  height: var(--split-media-h, 398px);
  min-height: var(--split-media-min-h, 0);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--split-media-pos, center);
}

.split__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--split-body-gap, var(--sp-24));
  min-width: 0;
}

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

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

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

@media (max-width: 899px) {
  .split,
  .split--media-start { flex-direction: column; }
  .split__media {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;                 /* pod vazi samo dok su kolone jedna pored druge */
    aspect-ratio: var(--split-media-ratio, 561 / 398);
  }
}

/* --- Card shell ----------------------------------------------------------- */

.card { border-radius: var(--r-lg); }
.card--coral  { background: var(--c-coral-25); }
.card--yellow { background: var(--c-yellow-25); }
.card--mint   { background: var(--c-mint-25); }

/* --- Icon pill ------------------------------------------------------------
   80px circle behind a 40px or 48px glyph. Glyph sizes differ per card and
   are set on the element, never globally.                                  */

.icon-pill {
  display: grid;
  place-items: center;
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: var(--r-pill);
}

.icon-pill--coral  { background: var(--c-coral); }
.icon-pill--yellow { background: var(--c-yellow); }
.icon-pill--mint   { background: var(--c-mint); }

.icon-40 { width: 40px; height: 40px; }
.icon-48 { width: 48px; height: 48px; }

/* --- Site header / nav ----------------------------------------------------
   Identical on both frames apart from which link is active and what colour
   its underline is (mint on Home, coral on O nama - left as designed).
   Figma has no mobile nav. Below 900px the link row becomes a disclosure
   panel; that button, its icon and the panel are INVENTED.                 */

/* Sticky on every breakpoint per your call - stays visible while scrolling.
   Needs its own background + z-index since content scrolls underneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surface);
  padding-block: var(--sp-8);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-width: 0;
}

.site-header__logo { width: 243px; height: 41px; object-fit: contain; }

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

.nav__link {
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link[aria-current="page"],
.nav__link:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--nav-accent, var(--c-mint));
  text-decoration-thickness: var(--underline-w);
  text-underline-position: from-font;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav__toggle-bar,
.nav__toggle-bar::before,
.nav__toggle-bar::after {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--c-ink);
}

.nav__toggle-bar::before,
.nav__toggle-bar::after { content: ""; position: relative; }
.nav__toggle-bar::before { top: -8px; }
.nav__toggle-bar::after { top: 6px; }

/* 899px was fine with 3 nav links; with PROGRAMI/RASPORED added, 5 links +
   logo + CTA no longer fit in a single row until ~930px (verified by
   rendering the page) - the toggle breakpoint moved up to 991px to keep a
   safe margin above that and stop the CTA button from getting squeezed. */
@media (max-width: 991px) {
  .nav__toggle { display: block; }
  .site-header__inner { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; }

  .nav__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-12);
    padding-block: var(--sp-12);
  }

  .nav[data-open="true"] .nav__list { display: flex; }
  .site-header__cta { margin-inline-start: auto; }
}

@media (max-width: 479px) {
  .site-header__logo { width: 180px; height: auto; }
  .site-header__cta .btn__label { display: none; }
  .site-header__cta {
    padding-inline: var(--sp-15);
    justify-content: center;
  }
  /* Icon-only pill on small screens - sized up since the label is gone and
     .phone-call.svg's wide, short viewBox (23x13) needs object-fit: contain
     (set above) to avoid stretching when it's this much bigger. */
  .site-header__cta .btn__icon { width: 30px; height: 30px; }
}

/* --- Contact section ------------------------------------------------------
   Byte-identical on both frames: mint 25% band, 304px tall, two phone
   numbers, 48px social icons.                                             */

.contact {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 304px;
  padding-block: 27px;          /* Figma: container y=27 u sekciji od 304 */
  background: var(--c-mint-25);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  padding-inline: var(--sp-10);
  text-align: center;
}

/* Figma ima 932 centrirano u 1200; razvuceno na pune 1200 po zahtevu.
   Za povratak na Figmu: dodati max-width: 932px. */
.contact__info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-10);
  width: 100%;
  font-style: normal;
}

.contact__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  padding-block: var(--sp-10);
}

.contact__text {
  font-family: var(--ff-body);
  font-size: var(--fs-contact);
  font-weight: var(--fw-bold);
  line-height: var(--lh-contact);
  text-decoration: none;
}

a.contact__text:hover { text-decoration: underline; }
.contact__text a { text-decoration: none; }
.contact__text a:hover { text-decoration: underline; }

/* Figma sets the address to 80% opacity but not the other two items. */
.contact__text--muted { opacity: 0.8; }

/* Per-icon dimensions, straight from Figma. They are not uniform. */
.contact__icon--pin   { width: 32.67px; height: 44.33px; }
.contact__icon--phone { width: 46.7px;  height: 46.69px; }
.contact__icon--mail  { width: 56px;    height: 56px; }

.contact__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  width: 100%;
  min-height: 160px;
}

.contact__social-title {
  font-family: var(--ff-display);
  font-size: var(--fs-contact);
  font-weight: var(--fw-bold);
  line-height: 20px;
}

.contact__social-links { display: flex; align-items: center; gap: var(--sp-10); }
.contact__social-links img { width: 48px; height: 48px; }

@media (max-width: 767px) {
  .contact__info { grid-template-columns: 1fr; }
  .contact { min-height: 0; }
}

/* --- Footer --------------------------------------------------------------- */

.site-footer { text-align: center; }

.site-footer__text {
  font-family: var(--ff-display);
  font-size: var(--fs-contact);
  font-weight: var(--fw-bold);
  line-height: 20px;
}