/* ===== VARIJABLE ===== */
:root {
  --primary-accent: #eba14c;
  --primary-accent-hover: #e64a19;
  --text-font: "montserrat", sans-serif;
  --section-padding: 20px;
  --image-width-lg: 43%;
  --text-width-lg: 40%;
  --mobile-bp: 768px;
  --transition-speed: 0.3s;
  --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ===== OSNOVNI STILOVI ===== */
.container {
  width: min(100%, 1500px); /* Moderniji način ograničavanja širine */
  margin-inline: auto; /* Bolje za RTL jezike */
  padding: var(--section-padding);
  text-align: center;
}

.about_title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  margin-block: 1.25rem 2.5rem;
  font-family: "Forum", serif; /* Logički svojstva za margin */
}

/* ===== LAYOUT ===== */
.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  margin-bottom: 1.875rem;
}

.reverse {
  flex-direction: row-reverse;
}

/* ===== SLIKE ===== */
.row img {
  width: var(--image-width-lg);
  height: auto;
  border-radius: 10px;
  /* Uklonjen aspect-ratio i object-fit prema zahtjevu */
}

/* ===== TEKST ===== */
.text {
  width: var(--text-width-lg);
  font-family: var(--text-font);
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.6;
  text-align: justify;
  padding-inline-end: 3.125rem;
}

.text.right {
  padding-inline: 3.125rem 0; /* Logička svojstva */
}

/* ===== CTA GUMB ===== */
.cta-button {
  display: inline-flex; /* Bolje za centriranje sadržaja */
  align-items: center;
  justify-content: center;
  background-color: var(--primary-accent);
  color: white;
  padding: 0.9375rem 1.875rem;
  font-size: 1.25rem;
  text-decoration: none;
  border-radius: 5px;
  margin-block: 3.125rem;
  font-weight: 700;
  transition: background-color var(--transition-speed) ease,
    transform var(--transition-speed) ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  background-color: var(--primary-accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  outline: none;
}

/* ===== RESPONZIVNOST ===== */
@media (max-width: 768px) {
  .row {
    flex-direction: column;
    gap: 1.25rem;
    margin-block: 1.25rem;
  }

  .row img,
  .text {
    width: 100%;
    padding-inline: 0;
  }

  .text {
    text-align: center;
  }
}