/* ==========================================================================
   Mame (postnatal): header, five steps on a filling line, flexible options,
   what we check, principles, scars
   ========================================================================== */

/* ---------- Header ---------- */
.mame-hero__tags { margin-top: 1.6rem; }
.mame-hero__media { width: min(100%, 38rem); }
.mame-hero__photo { aspect-ratio: 16 / 11; border-radius: 36px; box-shadow: var(--shadow); }
.mame-hero__photo img { object-position: 60% 40%; }

/* ---------- Five steps ---------- */
.koraci { border-radius: 48px; margin-inline: clamp(0px, 1.5vw, 1.5rem); }
.koraci__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-l); align-items: start; }
.koraci__head { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1rem; justify-items: start; }
.koraci__photo { width: min(100%, 20rem); aspect-ratio: 4 / 5; margin-top: 1rem; box-shadow: var(--shadow); }
.koraci__photo img { object-position: 55% 50%; }
.koraci__list { --p: 0; position: relative; display: grid; gap: 1rem; padding-left: 3.6rem; }
.koraci__list::before, .koraci__list::after { content: ''; position: absolute; left: 1.35rem; top: 1.5rem; bottom: 1.5rem; width: 2px; border-radius: 2px; }
.koraci__list::before { background: var(--puder-2); }
.koraci__list::after { background: var(--ruza); transform-origin: top; transform: scaleY(var(--p)); }
.step { position: relative; display: grid; gap: 0.4rem; padding: 1.5rem 1.6rem 1.6rem; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-sm); transition: transform 700ms var(--ease-out), box-shadow 700ms; }
.step.is-on { transform: translateX(6px); box-shadow: var(--shadow); }
.step__dot {
  position: absolute; left: -3.6rem; top: 1.25rem; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: var(--puder); color: var(--ruza-deep); font-family: var(--f-serif); font-size: 1.1rem; box-shadow: 0 0 0 5px var(--puder);
  transition: background-color 500ms, color 500ms, transform 700ms cubic-bezier(0.34, 1.45, 0.5, 1);
}
.step.is-on .step__dot { background: var(--ruza); color: var(--white); transform: scale(1.08); }
.step__title { font-family: var(--f-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.25; }
.step__text { color: var(--muted); }
html:not(.js) .step__dot { background: var(--ruza); color: var(--white); }
@media (max-width: 860px) {
  .koraci { border-radius: 32px; }
  .koraci__grid { grid-template-columns: 1fr; }
  .koraci__head { position: static; }
  .koraci__photo { display: none; }
  .koraci__list { padding-left: 3rem; }
  .koraci__list::before, .koraci__list::after { left: 1.05rem; }
  .step__dot { left: -3rem; width: 2.3rem; height: 2.3rem; font-size: 0.95rem; }
}

/* ---------- Options ---------- */
.opcije__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-l); align-items: center; }
.opcije__hook { margin: 1rem 0 0.4rem; font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; color: var(--ruza-deep); }
.opcije .h2 { margin-top: 0.4rem; }
.opcije__list { display: grid; gap: 0.7rem; margin-top: var(--space-m); }
.opcije__list li { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.2rem 0.85rem 0.85rem; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.05rem; }
.opcije__list li span { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--puder); color: var(--ruza-deep); font-family: var(--f-serif); }
.opcije__note { margin-top: 1.4rem; font-family: var(--f-serif); font-size: 1.5rem; }
.opcije__photo { aspect-ratio: 1440 / 1040; box-shadow: var(--shadow); }
.opcije__photo img { object-position: 50% 50%; }
@media (max-width: 860px) {
  .opcije__grid { grid-template-columns: 1fr; }
  .opcije__photo { max-width: 22rem; aspect-ratio: 4 / 3; }
}

/* ---------- What we check ---------- */
.mere { padding-top: 0; }
.mere__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-l); align-items: center; }
.mere__photo { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.mere__photo img { object-position: 50% 30%; }
.mere__lead { margin: 1.3rem 0 1.8rem; font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 46ch; }
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.check { display: grid; gap: 0.25rem; padding: 1.2rem 1.3rem; border-radius: var(--r-sm); background: var(--white); box-shadow: var(--shadow-sm); border-top: 3px solid var(--roza); }
.check__name { font-family: var(--f-serif); font-weight: 500; font-size: 1.2rem; }
.check__text { color: var(--muted); font-size: 0.97rem; }
@media (max-width: 860px) {
  .mere__grid { grid-template-columns: 1fr; }
  .mere__photo { max-width: 20rem; }
}
@media (max-width: 520px) { .checks { grid-template-columns: 1fr; } }

/* ---------- Principles ---------- */
.principi { border-radius: 48px; margin-inline: clamp(0px, 1.5vw, 1.5rem); }
.principi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
.princip { display: grid; align-content: start; gap: 0.8rem; padding: 2rem 1.8rem; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-sm); }
.princip__title { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.25; color: var(--ruza-deep); }
.princip__text { color: var(--muted); }
@media (max-width: 860px) {
  .principi { border-radius: 32px; }
  .principi__grid { grid-template-columns: 1fr; }
}

/* ---------- Scars ---------- */
.oziljci__card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-m) var(--space-l); align-items: center;
  padding: clamp(1.8rem, 1rem + 3vw, 3.5rem); border-radius: 40px; background: var(--white); box-shadow: var(--shadow);
}
.oziljci__lead { margin-top: 1.2rem; font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); }
.oziljci__side { display: grid; gap: 1.6rem; justify-items: start; }
.oziljci__side .tags li { background: var(--puder); box-shadow: none; }
@media (max-width: 860px) { .oziljci__card { grid-template-columns: 1fr; border-radius: 28px; } }