/* =========================================================
   Prilej Olej – Subpage Hero 1.1.13
   3 režimy:
   image   = full background
   soft    = jemná tónovaná plocha
   minimal = čistá biela
   ========================================================= */

.po-subhero{
  position:relative;
  min-height:var(--po-subhero-height,300px);
  overflow:hidden;
  border-top:1px solid rgba(0,166,81,.18);
}

.po-subhero__inner{
  position:relative;
  z-index:3;
  min-height:var(--po-subhero-height,300px);
  display:flex;
  align-items:center;
}

.po-subhero__copy{
  width:min(670px,58vw);
  padding:42px 0;
}

.po-subhero__copy .eyebrow,
.po-subhero__copy .po-subhero__eyebrow{
  position:relative !important;
  display:inline-block !important;
  width:auto !important;
  margin:0 0 16px !important;
  padding:8px 14px !important;
  background:#EDD200 !important;
  background-color:#EDD200 !important;
  color:#111111 !important;
  border-radius:2px 14px 2px 2px !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}

/* Žlté pretiahnutie je vložené priamo v HTML modulu, aby ho neprepísalo CSS šablóny. */

.po-subhero__copy h1{
  margin:0;
  color:var(--ink,#15191f);
  font-size:clamp(2.35rem,4.4vw,4.5rem);
  line-height:.96;
  letter-spacing:-.055em;
}

.po-subhero__copy p{
  max-width:560px;
  margin:16px 0 0;
  color:var(--muted,#687078);
  font-size:1rem;
  line-height:1.55;
}


/* =========================================================
   IMAGE – obrázok cez CELÝ banner
   ========================================================= */

.po-subhero--image{
  background:#f4f1e9;
}

.po-subhero--image .po-subhero__bg{
  position:absolute;
  inset:0;
  z-index:0;

  background-image:var(--po-subhero-desktop);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;

  transform:scale(1.002);
}

.po-subhero--focus-left .po-subhero__bg{
  background-position:left center;
}

.po-subhero--focus-center .po-subhero__bg{
  background-position:center center;
}

.po-subhero--focus-right .po-subhero__bg{
  background-position:right center;
}

/*
 * Overlay už nie je "ľavá biela polovica".
 * Je to jedna vrstva cez celý banner:
 * vľavo silná kvôli textu, ale obraz jemne presvitá,
 * doprava sa postupne otvorí.
 */
.po-subhero--image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,var(--po-subhero-overlay-desktop,.92)) 0%,
      rgba(255,255,255,calc(var(--po-subhero-overlay-desktop,.92) * .86)) 24%,
      rgba(255,255,255,calc(var(--po-subhero-overlay-desktop,.92) * .66)) 42%,
      rgba(255,255,255,calc(var(--po-subhero-overlay-desktop,.92) * .34)) 60%,
      rgba(255,255,255,calc(var(--po-subhero-overlay-desktop,.92) * .10)) 78%,
      rgba(255,255,255,0) 100%
    );
}

/* jemné uzatvorenie spodku banneru */
.po-subhero--image::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  height:1px;
  background:rgba(0,122,61,.10);
}


/* =========================================================
   SOFT – jemná farebná plocha bez lacných dekorácií
   ========================================================= */

.po-subhero--soft{
  background:
    linear-gradient(
      110deg,
      #ffffff 0%,
      #f8fcf9 36%,
      #edf8f1 72%,
      #e7f5ec 100%
    );
}

.po-subhero--soft::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(
    90deg,
    var(--green,#00A651) 0%,
    var(--green,#00A651) 74%,
    var(--yellow,#EDD200) 74%,
    var(--yellow,#EDD200) 100%
  );
  opacity:.85;
}


/* =========================================================
   MINIMAL – čistá biela, kompaktná hlavička bez deliacej čiary
   ========================================================= */

.po-subhero--minimal{
  background:#fff;
  min-height:0;
  border-top:0;
  margin-bottom:-24px;
}

.po-subhero--minimal .po-subhero__inner{
  min-height:0;
}

.po-subhero--minimal .po-subhero__copy{
  padding:82px 0 8px;
}

/* Minimal variant nemá žiadnu spodnú deliacu čiaru. */
.po-subhero--minimal::before,
.po-subhero--minimal::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   MOBIL
   ========================================================= */

@media(max-width:780px){

  .po-subhero{
    min-height:var(--po-subhero-mobile-height,280px);
  }

  .po-subhero__inner{
    min-height:var(--po-subhero-mobile-height,280px);
    align-items:flex-end;
  }

  .po-subhero__copy{
    width:100%;
    padding:78px 0 30px;
  }

  .po-subhero__copy h1{
    font-size:clamp(2rem,10vw,3rem);
    line-height:.96;
  }

  .po-subhero__copy p{
    max-width:94%;
    margin-top:12px;
    font-size:.93rem;
  }

  /* Image na mobile stále zostáva full background */
  .po-subhero--image .po-subhero__bg{
    background-image:var(--po-subhero-mobile);
    background-size:cover;
    background-repeat:no-repeat;
  }

  /*
   * Mobilný overlay je vertikálny:
   * hore ostane obraz,
   * dole sa vytvorí čitateľná plocha pre text.
   */
  .po-subhero--image::after{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.00) 0%,
        rgba(255,255,255,.06) 24%,
        rgba(255,255,255,.24) 46%,
        rgba(255,255,255,.62) 68%,
        rgba(255,255,255,var(--po-subhero-overlay-mobile,.96)) 84%,
        #fff 100%
      );
  }

  .po-subhero--soft .po-subhero__copy{
    padding-top:48px;
  }

  .po-subhero--minimal{
    min-height:0;
    margin-bottom:-12px;
  }

  .po-subhero--minimal .po-subhero__inner{
    min-height:0;
    align-items:center;
  }

  .po-subhero--minimal .po-subhero__copy{
    padding:52px 0 8px;
  }
}