/* =========================================================
   INGREDIENT SECTION – Gemini style (clean CSS)
   Template: ingredient_section.php
   ========================================================= */

.ingredient-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0; /* py-24 */
  background-color: #391B26;
  color: #FAF7F4;
}

/* Blur / glow background (Gemini blob) */
.ingredient-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background-color: #7A3451;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;

  /* ako dodaš bg image iz ACF-a */
  background-size: cover;
  background-position: center;
}

/* CONTENT GRID */
.ingredient-content {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr;
  gap: 80px; /* gap-20 */
  align-items: center;
}

/* Desktop: 2 kolone */
@media (min-width: 1024px) {
  .ingredient-content {
    grid-template-columns: 1fr 1fr;
  }
}

/* TEXT BLOCK */
.ingredient-text {
  order: 2;
}

@media (min-width: 1024px) {
  .ingredient-text {
    order: 1;
  }
}

/* LABEL */
.ingredient-label {
  display: block;
  margin-bottom: 24px; /* mb-6 */

  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #B39BA8;
}

/* TITLE */
.ingredient-title {
  margin-bottom: 32px; /* mb-8 */

  font-family: Satoshi, sans-serif;
  font-weight: 700;
  font-size: 48px; /* text-5xl */
  line-height: 1.25; /* leading-tight */
  color: #FAF7F4;
}

@media (min-width: 1024px) {
  .ingredient-title {
    font-size: 60px; /* lg:text-6xl */
  }
}

.ingredient-title-italic {
  color: #B39BA8;
  font-style: normal;
}

/* DESCRIPTION TEXT */
.ingredient-description {
  margin-bottom: 24px; /* space-y-6 */
  max-width: 560px;

  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 18px; /* text-lg */
  line-height: 1.625; /* leading-relaxed */
  color: #D6C8D0;
}

/* CTA */
.ingredient-cta {
  display: inline-block;
  margin-top: 48px; /* mt-12 */
}

/* Button styling (Gemini-like) */
.ingredient-cta.btn.btn-white {
  padding: 12px 32px; /* px-8 py-3 */

  background-color: #FFFFFF;
  color: #391B26;

  font-family: Satoshi, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;

  transition: background-color 0.3s ease;
}

.ingredient-cta.btn.btn-white:hover {
  background-color: #FAF7F4;
}

/* VISUAL BLOCK */
.ingredient-visual {
  order: 1;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .ingredient-visual {
    order: 2;
  }
}

/* IMAGE CONTAINER – rounded-t-full */
.product-circle {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 600px;

  border-radius: 9999px 9999px 0 0;
  overflow: hidden;

  border: 1px solid rgba(122, 52, 81, 0.3);
}

/* IMAGE */
.circle-product {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 2s ease;
}

/* Hover zoom (group-hover equivalent) */
.product-circle:hover .circle-product {
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 1023px) {
  .ingredient-section {
    padding: 72px 20px;

  }

  .ingredient-title {
    font-size: 40px;
  }

  .product-circle {
    height: 420px;
  }
}

@media (max-width: 480px) {
  .ingredient-title {
    font-size: 32px;
  }

  .ingredient-description {
    font-size: 16px;
  }

  .product-circle {
    height: 320px;
  }
}