
.expert.is-kristina .expert__inner{
  grid-template-areas:"arrow photo content";
}
.expert.is-kristina .expert__arrow{
  grid-area:arrow;
  justify-self:end;
  margin-right:-10px;
  transform:translateX(-200%);
}
.expert.is-kristina .expert__photo-wrap{
  grid-area:photo;
}
.expert{
  position:relative;
  isolation:isolate;
  background:#f7f7e8;
  font-family:"Poppins",Arial,sans-serif;
  padding:clamp(10px,1.6vw,26px) clamp(28px,8.7vw,119px) clamp(34px,4.5vw,64px);
  overflow:hidden;
}

/* Senčenje je na kraju bele Ilijine sekcije, ide od ivice sekcije ka gore. */
.expert::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(95px, 8vw, 145px);
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 72% 100% at 50% 100%,
      rgba(91, 103, 70, .30) 0%,
      rgba(91, 103, 70, .20) 30%,
      rgba(91, 103, 70, .10) 58%,
      rgba(91, 103, 70, 0) 100%
    ),
    linear-gradient(to top,
      rgba(91, 103, 70, .19) 0%,
      rgba(91, 103, 70, .10) 42%,
      rgba(91, 103, 70, 0) 100%
    );
}

.expert__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto minmax(430px,540px) auto;
  grid-template-areas:"photo content arrow";
  align-items:center;
  justify-content:center;
  column-gap:clamp(12px,1.35vw,22px);
  row-gap:clamp(20px,3vw,38px);
}

.expert__photo-wrap{
  grid-area:photo;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}

.expert__photo{
  width:clamp(280px,29vw,425px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(36,48,25,.13));
  transition:transform .28s ease,filter .28s ease,opacity .2s ease;
}

/* Kristinin izvor je kvadratan, pa joj visinu vezujemo za prikazanu visinu
   Ilijine uspravne fotografije. Tako promena profila ne menja visinu sekcije. */
.expert.is-kristina .expert__photo-wrap{
  justify-content:center;
}

.expert__photo:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 30px 34px rgba(36,48,25,.17));
}

.expert__arrow{
  grid-area:arrow;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  align-self:center;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.expert__arrow img{
  width:clamp(24px,2.25vw,36px);
  height:auto;
  object-fit:contain;
  transition:transform .22s ease,opacity .22s ease;
}
.expert.is-kristina .expert__arrow img{
  transform:rotate(180deg);
}
.expert.is-kristina .expert__arrow:hover img{
  transform:rotate(180deg) translateX(4px);
}

.expert__arrow:hover img{
  transform:translateX(4px);
  opacity:.82;
}

.expert__content{
  grid-area:content;
  color:#213014;
  max-width:540px;
  min-width:0;
  justify-self:start;
  align-self:center;
}

.expert__profile[hidden]{display:none!important}
.expert__profile.is-active{display:block}

.expert__title{
  margin:0 0 clamp(9px,.8vw,12px);
  font-size:clamp(34px,3.05vw,47px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.04em;
  color:#213014;
}

.expert__subtitle{
  margin:0 0 clamp(18px,1.7vw,28px);
  font-size:clamp(15px,1.08vw,18px);
  line-height:1.2;
  font-weight:700;
  color:#536646;
  letter-spacing:-.015em;
}

.expert__text{
  font-size:clamp(12.5px,.92vw,15px);
  line-height:1.23;
  letter-spacing:-.008em;
  color:#536046;
}

.expert__text p{
  margin:0 0 clamp(12px,1vw,16px);
}

.expert__text p:last-child{
  margin-bottom:0;
}

@media (max-width:1080px){
  .expert{
    padding-top:clamp(12px,2vw,28px);
  }

  .expert__inner{
    grid-template-columns:auto minmax(350px,520px) auto;
    justify-content:center;
    column-gap:clamp(10px,1.6vw,18px);
  }

  .expert__photo{
    width:clamp(220px,26vw,305px);
  }

  .expert__title{
    font-size:clamp(30px,3vw,38px);
  }

  .expert__text{
    font-size:clamp(12px,1.12vw,13.4px);
    line-height:1.25;
  }
}

/* Proporcije horizontalnog prikaza prema referentnoj fotografiji. */
@media (min-width:821px) and (max-width:1080px){
  .expert{
    padding-left:clamp(8px,1.4vw,16px);
    padding-right:clamp(8px,1.4vw,16px);
  }

  .expert__inner{
    grid-template-columns:clamp(350px,43vw,425px) minmax(350px,355px) 24px;
    column-gap:clamp(30px,4.7vw,40px);
  }

  .expert.is-kristina .expert__inner{
    grid-template-columns:24px clamp(350px,43vw,425px) minmax(350px,355px);
    column-gap:30px;
  }

  .expert__photo{
    width:clamp(350px,43vw,425px);
  }

  .expert.is-kristina .expert__photo-wrap{
    justify-content:center;
  }

  .expert__content{
    max-width:355px;
    transform:translateY(12px);
  }

  .expert__title{
    font-size:30px;
  }

  .expert__subtitle{
    font-size:12px;
    line-height:1.2;
    margin-bottom:16px;
  }

  .expert__text{
    font-size:11.5px;
    line-height:1.22;
  }

  .expert__text p{
    margin-bottom:12px;
  }

  .expert__arrow{
    justify-self:start;
  }

  .expert:not(.is-kristina) .expert__arrow{
    transform:translateX(-72px);
  }

  .expert.is-kristina .expert__arrow{
    margin-right:0;
    transform:translateX(-200%);
  }

  .expert__arrow img{
    width:24px;
  }
}

@media (max-width:820px){
  .expert{
    padding:38px 30px 44px;
  }

  .expert__inner{
    grid-template-columns:auto clamp(22px,6vw,32px) minmax(260px,1fr);
    grid-template-areas:"photo arrow content";
    align-items:center;
    column-gap:clamp(8px,2vw,16px);
    text-align:left;
  }

  .expert__photo{
    width:min(33vw,230px);
  }

  .expert__arrow{
    justify-self:center;
  }

  .expert__arrow img{
    width:clamp(24px,5vw,32px);
  }

  .expert__content{
    max-width:520px;
    margin:0;
    justify-self:start;
  }

  .expert__title{
    font-size:clamp(25px,4vw,32px);
  }

  .expert__subtitle{
    font-size:clamp(13px,2vw,15px);
    margin-bottom:16px;
  }

  .expert__text{
    font-size:clamp(11.4px,1.75vw,12.4px);
    line-height:1.28;
  }

  .expert__text p{
    margin-bottom:10px;
  }
}

@media (max-width:640px){
  .expert__reference-break{
    display:none;
  }

  .expert{
    padding:32px 22px 42px;
  }

  .expert__inner{
    grid-template-columns:minmax(150px,.82fr) clamp(24px,9vw,34px);
    grid-template-areas:
      "photo arrow"
      "content content";
    justify-content:center;
    row-gap:22px;
    column-gap:12px;
    text-align:center;
  }

  .expert__photo-wrap{
    justify-content:end;
  }

  .expert__photo{
    width:min(50vw,220px);
  }

  .expert__arrow{
    justify-self:start;
  }

  .expert__arrow:hover img{
    transform:translateX(3px);
  }

  .expert__content{
    justify-self:center;
    max-width:460px;
  }

  .expert__title{
    font-size:clamp(28px,8vw,34px);
  }

  .expert__subtitle{
    font-size:15px;
    margin-bottom:20px;
  }

  .expert__text{
    font-size:12.2px;
    line-height:1.36;
  }
}

@media (max-width:420px){
  .expert__photo{
    width:min(56vw,200px);
  }

  .expert__inner{
    column-gap:10px;
  }
}


/* Safety spacing: keeps the nutritionist text above the services block on every viewport. */
.expert__content{
  align-self:center;
}

@media (max-width:1080px){
  .expert{
    padding-bottom:clamp(40px,5vw,62px);
  }
}

@media (max-width:640px){
  .expert{
    padding-bottom:42px;
  }
}

/* Final image alignment: keep text safely above services, but let Ilija's coat visually finish on the green edge. */
@media (min-width: 641px){
  .expert{
    --expert-bottom-space: clamp(36px, 4.8vw, 66px);
    padding-bottom: var(--expert-bottom-space);
  }

  .expert__photo-wrap{
    align-self: end;
  }

  .expert__photo{
    transform: translateY(var(--expert-bottom-space));
  }

  .expert__photo:hover{
    transform: translateY(calc(var(--expert-bottom-space) - 4px));
  }
}

@media (min-width: 641px) and (max-width:1080px){
  .expert{
    --expert-bottom-space: clamp(42px, 5vw, 62px);
  }
}

@media (min-width:821px) and (max-width:1080px){
  .expert{
    --expert-bottom-space:0px;
    padding-top:24px;
    padding-bottom:0;
  }

  .expert__content{
    transform:translateY(8px);
  }

  .expert:not(.is-kristina) .expert__content{
    align-self:start;
    transform:none;
  }
}

@media (min-width:1081px){
  .expert:not(.is-kristina) .expert__inner{
    grid-template-columns:auto minmax(460px,470px) auto;
  }

  .expert:not(.is-kristina) .expert__content{
    max-width:470px;
    align-self:start;
    transform:translateY(var(--expert-bottom-space));
  }

  .expert:not(.is-kristina) .expert__title{
    font-size:30px;
  }

  .expert:not(.is-kristina) .expert__subtitle{
    font-size:12px;
    line-height:1.2;
    margin-bottom:16px;
  }

  .expert:not(.is-kristina) .expert__text{
    font-size:11.5px;
    line-height:1.22;
  }

  .expert:not(.is-kristina) .expert__text p{
    margin-bottom:12px;
  }
}

@media (min-width:821px){
  .expert:not(.is-kristina) .expert__title{
    font-size:38px;
  }

  .expert:not(.is-kristina) .expert__subtitle{
    font-size:15px;
  }

  .expert:not(.is-kristina) .expert__text{
    font-size:13.25px;
  }
}

@media (min-width:821px) and (max-width:1080px){
  .expert:not(.is-kristina) .expert__content{
    transform:translateY(38px);
  }
}

@media (min-width:1081px){
  .expert:not(.is-kristina) .expert__content{
    transform:translateY(calc(var(--expert-bottom-space) + 38px));
  }
}

@media (min-width:821px){
  .expert.is-kristina .expert__title{
    font-size:38px;
  }

  .expert.is-kristina .expert__subtitle{
    font-size:15px;
    line-height:1.2;
  }

  .expert.is-kristina .expert__text{
    font-size:13.25px;
    line-height:1.22;
  }
}

@media (min-width:821px) and (max-width:1080px){
  .expert.is-kristina .expert__content{
    max-width:310px;
    width:310px;
    transform:translateY(16px);
  }
}

@media (min-width:1081px){
  .expert.is-kristina .expert__inner{
    grid-template-columns:24px clamp(280px,29vw,425px) minmax(460px,470px);
    column-gap:22px;
  }

  .expert.is-kristina .expert__content{
    max-width:400px;
    width:400px;
    transform:translateY(-4px);
  }
}

@media (max-width:820px){
  .expert.is-kristina .expert__inner{
    grid-template-columns:clamp(24px,9vw,34px) minmax(150px,.82fr);
    grid-template-areas:
      "arrow photo"
      "content content";
    justify-content:center;
    align-items:center;
    row-gap:22px;
    column-gap:12px;
    text-align:center;
  }

  .expert.is-kristina .expert__photo-wrap{
    justify-content:flex-start;
    transform:translateX(clamp(-90px,-20vw,-70px));
  }

  .expert.is-kristina .expert__arrow{
    justify-self:end;
    margin-right:0;
    transform:translateX(calc(-200% - 12px));
  }

  .expert.is-kristina .expert__arrow img{
    width:clamp(24px,5vw,32px);
  }

  .expert.is-kristina .expert__content{
    justify-self:center;
    width:100%;
    max-width:360px;
    margin:0;
    transform:translateY(-42px);
  }
}

@media (max-width:640px){
  .expert.is-kristina .expert__content{
    transform:translateY(-18px);
  }
}

input, textarea, select{
  font-weight:400 !important;
}
input::placeholder, textarea::placeholder{
  font-weight:400 !important;
}
