/*
Theme Name: GeneratePress Child
Description: A GeneratePress child theme
Template: generatepress
Version: 1.0.0
*/




/* ===== HERO FINAL (single source of truth) ===== */

:root{

  /* sizing */
  --mp-hero-h: 640px;
  --mp-square: calc(var(--mp-hero-h) / 3);

  /* layout controls */
  --mp-left: 72%;           /* left image column width */
  --mp-right: 28%;          /* right side width */
  --mp-grid-overlap: 320px; /* how much right grid overlaps left image */

  /* teal + label */
  --mp-svetska: "SVETSKA";
  --mp-sv-x: 28px;
  --mp-sv-y: 56px;          /* distance from TOP of teal */
}

/* 0) Full width breakout (desktop) */
@media (min-width: 981px){
  .entry-content > .wp-block-columns:has(.hero-column-main):has(.hero-column-services){
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* 1) Outer frame: no gaps, fixed height */
.wp-block-columns:has(.hero-column-main):has(.hero-column-services){
  gap: 0 !important;
  column-gap: 0 !important;
  align-items: stretch !important;
}

.hero-column-main,
.wp-block-columns:has(.hero-column-main) > .wp-block-column:not(.hero-column-main){
  height: var(--mp-hero-h) !important;
}

/* 2) Column widths */
.hero-column-main{
  flex: 0 0 var(--mp-left) !important;
  min-width: 0 !important;
}
.wp-block-columns:has(.hero-column-main) > .wp-block-column:not(.hero-column-main){
  flex: 0 0 var(--mp-right) !important;
  min-width: 0 !important;
}

/* 3) Left cover */
.hero-main-cover{
/*  height: 100% !important; */
  min-height: 100% !important;
  border-radius: 10 !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.hero-main-cover > .wp-block-cover__background{
  opacity: 0 !important;
  background: transparent !important;
}

/* 4) Teal block: height = 1 square, width ends exactly at the overlap line */
.hero-main-cover::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  height: var(--mp-square) !important;
  width: calc(100% - var(--mp-grid-overlap)) !important;
  background: var(--mp-brand) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* 5) SVETSKA (works even if <p> is removed) */
/* 1) Kill the thin teal strip (if you used ::after before) */
.hero-main-cover::after{
  content: none !important;
}

/* 2) Make the inner container a real positioning box */
.hero-main-cover .wp-block-cover__inner-container{
  position: relative !important;
  height: 100% !important;
  z-index: 10 !important;
}

/* 3) Style the EXISTING <p> label and pin it inside the teal */
.hero-main-cover .wp-block-cover__inner-container > p.hero-main-cover{
  position: absolute !important;
  left: 32px;
  bottom: 28px !important;

  top: auto !important;
  right: auto !important;

  display: inline-block !important;
  width: auto !important;
  max-width: calc(100% - 64px) !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  color: #fff !important;

  font-size: 22px !important;      /* overrides has-large-font-size */
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;


  text-align: left !important;     /* overrides has-text-align-center */
  white-space: nowrap !important;  /* remove if you want wrap */
  z-index: 20 !important;
}


/* 6) Right side grid (3x3 squares) + overlap onto left image */
.hero-column-services{
  position: relative !important;
  height: 100% !important;

  display: grid !important;
  grid-template-columns: var(--mp-square) var(--mp-square) var(--mp-square) !important;
  grid-template-rows: var(--mp-square) var(--mp-square) var(--mp-square) !important;
  gap: 0 !important;

  margin-left: calc(-1 * var(--mp-grid-overlap)) !important;
  z-index: 10 !important;
}

/* Flatten Gutenberg wrappers so covers become grid items */
.hero-column-services > .wp-block-column.services-grid-container{ display: contents !important; }

/* Tiles reset */
.hero-column-services .wp-block-cover{
  border-radius: 10 !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Backgrounds */
.hero-column-services .wp-block-cover:not(.middle-image):not(.empty-cover) > .wp-block-cover__background{
  background: #f6f7f8 !important;
  opacity: 1 !important;
}
.hero-column-services .middle-image > .wp-block-cover__background{
  opacity: 0 !important;
  background: transparent !important;
}
.hero-column-services .middle-image .wp-block-cover__image-background{
  object-fit: cover !important;
}

/* Content centered */
.hero-column-services .wp-block-cover__inner-container{
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}

/* Titles */
.hero-column-services h3{
  margin: 0 !important;
  color: #111 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  max-width: 80% !important;
  word-break: keep-all !important;
  hyphens: none !important;
  overflow-wrap: normal !important;
}

/* Placement */
.hero-column-services .service-card-ginekologija{ grid-column: 2; grid-row: 1; }
.hero-column-services .middle-image{ grid-column: 2; grid-row: 2; }
.hero-column-services .service-card-gastroenterologija{ grid-column: 2; grid-row: 3; }
.hero-column-services .service-card-kardiologija{ grid-column: 3; grid-row: 2; }
.hero-column-services .service-card-vodjenje-trudnoce{ grid-column: 1; grid-row: 2; }

/* Hide empty covers but keep grid cells */
.hero-column-services .empty-cover > .wp-block-cover__background{ opacity: 0 !important; }
.hero-column-services .empty-cover .wp-block-cover__inner-container{ display:none !important; }
.hero-column-services .empty-cover:nth-of-type(1){ grid-column: 3; grid-row: 1 !important; }
.hero-column-services .empty-cover:nth-of-type(2){ grid-column: 3; grid-row: 3 !important; }

/* Icons (simple + consistent) */
.hero-column-services .wp-block-cover:not(.middle-image):not(.empty-cover){
  position: relative !important;
}
.hero-column-services .wp-block-cover:not(.middle-image):not(.empty-cover)::after{
  content:"⚙︎" !important;
  position:absolute !important;
  top: 16px !important;
  left: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size: 16px !important;
  color: #0b3e46 !important;
  z-index: 20 !important;
}

.wp-block-cover.hero-main-cover {
	align-items: end;
}

/* Responsive */
@media (max-width: 1100px){
  .hero-column-services{ margin-left: 0 !important; }
}
@media (max-width: 980px){
  .hero-column-main,
  .wp-block-columns:has(.hero-column-main) > .wp-block-column:not(.hero-column-main){
    height: auto !important;
  }
  .hero-column-services{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
}



/* ===== FIX: clean the HERO <p> label (remove theme pseudo + keep text visible) ===== */

/* 1) Remove any theme decoration pseudo-elements on that <p> */
.hero-main-cover .wp-block-cover__inner-container > p.hero-main-cover::before,
.hero-main-cover .wp-block-cover__inner-container > p.hero-main-cover::after{
  content: none !important;
  display: none !important;
}

/* 2) Make sure the label sits above everything and doesn't get clipped */
.hero-main-cover .wp-block-cover__inner-container{
  overflow: visible !important;
}

/* 3) Pin + style the existing <p> safely */
.hero-main-cover .wp-block-cover__inner-container > p.hero-main-cover{
  position: absolute !important;
  left: 32px !important;
  bottom: 28px !important;
  z-index: 999 !important;

  margin: 0 !important;

  /* IMPORTANT: allow wrap so it doesn't clip */
  white-space: normal !important;

  /* Keep it inside the teal width (teal ends at overlap line) */
  max-width: calc(100% - var(--mp-grid-overlap) - 64px) !important;

  background: transparent !important;
  color: #fff !important;

  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;

  text-align: left !important;
}


/* ===== HERO MOBILE FIX (stack + 2-col grid + no overlap + label on teal) ===== */
/* ===== MOBILE HERO GRID (2 cols x 4 rows, ALL SQUARES) ===== */
@media (max-width: 980px){

  /* 1) Stack the two columns (main image on top, grid below) */
  .wp-block-columns:has(.hero-column-main):has(.hero-column-services){
    flex-wrap: wrap !important;
  }
  .hero-column-main,
  .wp-block-columns:has(.hero-column-main) > .wp-block-column:not(.hero-column-main){
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2) Left cover on mobile (keep label on teal, don’t float to top) */
  .hero-main-cover{
    height: 62vh !important;
    min-height: 480px !important;
  }
  .hero-main-cover::before{
    height: 32% !important;     /* teal height on mobile */
    width: 78% !important;      /* teal width on mobile */
  }
  .hero-main-cover .wp-block-cover__inner-container{
    position: relative !important;
    height: 100% !important;
  }
  .hero-main-cover .wp-block-cover__inner-container > p.hero-main-cover{
    position: absolute !important;
    left: 14px !important;
	bottom: -85% !important;
    top: auto !important;
    right: 14px !important;
    margin: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: normal !important;
    max-width: calc(100% - 58px) !important;
    z-index: 20 !important;
  }

  /* 3) SERVICES GRID: 2 columns, 4 rows, ALL SQUARES */
  :root{
    /* square size based on viewport width (adjust 32px if your page padding differs) */
    --mp-m-square: calc((100vw - 32px) / 2);
  }

  .hero-column-services{
    margin-left: 0 !important;          /* cancel desktop overlap */
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: var(--mp-m-square) var(--mp-m-square) !important;
    grid-template-rows: repeat(4, var(--mp-m-square)) !important;
    gap: 0 !important;

    justify-content: center !important; /* center the 2-col grid */
    align-content: start !important;
  }

  /* flatten wrapper so covers are direct grid items */
  .hero-column-services > .wp-block-column.services-grid-container{
    display: contents !important;
  }

  /* each tile fills its grid cell perfectly */
  .hero-column-services .wp-block-cover{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 10 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* hide any “empty covers” on mobile (we’ll create blanks by leaving cells empty) */
  .hero-column-services .empty-cover{
    display: none !important;
  }

  /* 4) EXACT PLACEMENT YOU ASKED:
     Row1: col1 Ginekologija | col2 blank
     Row2: col1 image       | col2 Vodjenje
     Row3: col1 Kardiologija| col2 blank
     Row4: col1 blank       | col2 Gastroenterologija
  */
  .hero-column-services .service-card-ginekologija{ grid-column: 1 !important; grid-row: 1 !important; }
  .hero-column-services .middle-image{              grid-column: 1 !important; grid-row: 2 !important; }
  .hero-column-services .service-card-vodjenje-trudnoce{ grid-column: 2 !important; grid-row: 2 !important; }
  .hero-column-services .service-card-kardiologija{ grid-column: 1 !important; grid-row: 3 !important; }
  .hero-column-services .service-card-gastroenterologija{ grid-column: 2 !important; grid-row: 4 !important; }

  /* 5) Make the middle image behave like a real square tile */
  .hero-column-services .middle-image > .wp-block-cover__background{
    opacity: 0 !important;
    background: transparent !important;
  }
  .hero-column-services .middle-image .wp-block-cover__image-background{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 6) Keep titles centered nicely */
  .hero-column-services .wp-block-cover__inner-container{
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
  }
  .hero-column-services h3{
    font-size: 20px !important;
    line-height: 1.15 !important;
    max-width: 82% !important;
    margin: 0 !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  /* Optional: icons position stays OK in squares */
  .hero-column-services .wp-block-cover:not(.middle-image):not(.empty-cover) .wp-block-cover__inner-container::after{
    right: 18px !important;
    bottom: 18px !important;
    top: auto !important;
  }
	
	.hero-main-cover p.hero-main-cover{
  position: absolute !important;

  left: 24px !important;
  bottom: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  color: #ffffff !important;

  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  text-align: left !important;
  white-space: normal !important;

  z-index: 10 !important;
}

	.hero-main-cover::before{
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  bottom: 0 !important;

  width: 78% !important;
  height: 32% !important;

  background: rgb(0,120,139) !important;
  z-index: 5 !important;
}


}

/* =========================
   LEKAR layout: 2 columns
   Left = image + dark bar
   Right = header meta
   Bio = full width
========================= */

:root{
  --mp-brand: rgb(0,120,139);
  --mp-left-col: 416px;         /* image/bar width on desktop */
  --mp-gap: 48px;
  --mp-bar-overlap: 34px;       /* how much bar overlaps image */
 --mp-brand-soft: rgba(0,120,139,.10);
}



/* Make inside-article a grid layout on single lekar pages */
.single-lekar .inside-article{
  display: grid !important;
  grid-template-columns: minmax(320px, var(--mp-left-col)) minmax(0, 1fr) !important;
  column-gap: var(--mp-gap) !important;
  align-items: start !important;
}

/* Let children of entry-content participate in the grid */
.single-lekar .inside-article .entry-content{
  display: contents !important;
}

/* Left: featured image */
.single-lekar .inside-article > .featured-image{
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
}

/* Ensure the image is nicely cropped / not insanely tall */
.single-lekar .inside-article > .featured-image img{
  width: 100% !important;
  height: 420px !important;          /* adjust if you want */
  object-fit: cover !important;
  display: block !important;
}

/* Right: header (name + title + short bio) */
.single-lekar .inside-article > .entry-header{
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;   /* covers image + bar rows */
  margin: 0 !important;
  align-self: start !important;
}



/* Remove any extra spacing between image and bar */
.single-lekar .inside-article section.lekar-hero + p{
  margin-top: 0 !important;
}

/* Inside the dark bar */
.single-lekar .lekar-hero__name{
  margin: 0 0 6px 0 !important;
  color: #fff !important;
}
.single-lekar .lekar-hero__spec{
  margin: 0 !important;
  color: rgba(255,255,255,.9) !important;
  font-weight: 600 !important;
}

/* You said: NO short description inside the dark bar */
.single-lekar .lekar-hero__bio{
  display: none !important;
}

/* Full width content (biography / long text) */
.single-lekar .inside-article .entry-content > p,
.single-lekar .inside-article .entry-content > h2,
.single-lekar .inside-article .entry-content > h3,
.single-lekar .inside-article .entry-content > ul,
.single-lekar .inside-article .entry-content > ol{
  grid-column: 1 / -1 !important;
}

/* Give BIOGRAFIJA title more breathing room */
.single-lekar .entry-content > p:first-of-type{
  padding-top: 64px !important;
}

/* =========================
   Mobile: stack everything
========================= */
@media (max-width: 980px){
  .single-lekar .inside-article{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .single-lekar .inside-article > .featured-image{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .single-lekar .inside-article > .entry-header{
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 18px !important;
  }

  .single-lekar .inside-article section.lekar-hero{
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top: 0 !important; /* no overlap on mobile */
  }

  .single-lekar .inside-article .entry-content > *{
    grid-column: 1 !important;
  }
}



/* Right column spacing */
.single-lekar .entry-header h1.entry-title{
  margin-bottom: 32px;
}

.single-lekar .lekar-header-meta__title{
  margin-bottom: 34px;
  font-weight: 600;
}

.single-lekar .lekar-header-meta__bio{
  margin-top: 32px;
}

/* Light green short description (right column) */
.single-lekar .lekar-header-meta__bio{
  background: var(--mp-brand-soft);
  padding: 18px 20px;
  border-radius: 6px;
  line-height: 1.6;
}


/* BIOGRAFIJA title improvements */
.single-lekar .entry-content > p:first-of-type::before{
  font-size: 16px;        /* was 14px */
  letter-spacing: .18em;
}

/* More breathing room above biography section */
.single-lekar .entry-content > p:first-of-type{
  padding-top: 64px;      /* was 56px */
}

 /* Specializations list (pills) */
.lekar-spec-list{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lekar-spec-list__item{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.15); /* looks good on dark green */
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}


/* Make the page header area a 2-column grid: image left, text right */
.single-lekar .inside-article{
  display: grid;
  grid-template-columns: 520px 1fr;
  column-gap: 48px;
  align-items: start;
}

/* Left column: featured image + green bar */
.single-lekar .featured-image.page-header-image-single{
  grid-column: 1;
}
.single-lekar .lekar-hero{
  grid-column: 1;
}

/* Right column: entry header meta + chips */
.single-lekar .entry-header{
  grid-column: 2;
}

/* Chips block under the right short bio */
.single-lekar .lekar-spec-right{
  grid-column: 2;
  margin-top: 14px;
	 margin-bottom: 14px;
}

/* Specialty line in green bar */
.lekar-hero__spec--single{
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  opacity: .95;
}

/* Chips styling (keep your existing if you already added it) */
.lekar-spec-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lekar-spec-list__item{
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);   /* for right column on white */
  color: #111;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

/* Mobile: stack */
@media (max-width: 980px){
  .single-lekar .inside-article{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .single-lekar .featured-image.page-header-image-single,
  .single-lekar .lekar-hero,
  .single-lekar .entry-header,
  .single-lekar .lekar-spec-right{
    grid-column: 1;
  }
}



.single-lekar .lekar-spec-right{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.single-lekar .lekar-chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2f3;
  font-size: 14px;
  line-height: 1;
}

.single-lekar .inside-article > .featured-image{
  margin-top: 8px;
}



/* =========================
   MOBILE FIXES (<=980px)
   - Green bar overlaps image like desktop
   - Remove duplicate top title (keep green bar title)
========================= */
@media (max-width: 980px){

  /* Stack order: image -> overlapped green bar -> header meta -> chips -> content */
  .single-lekar .inside-article{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .single-lekar .inside-article > .featured-image{
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
  }

  /* Make green bar overlap image bottom */
  .single-lekar .inside-article section.lekar-hero{
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: calc(-1 * var(--mp-bar-overlap)) !important; /* overlap like desktop */
    z-index: 5 !important;
    width: 100% !important;
  }

  /* Put the right "meta" block under the overlapped bar */
  .single-lekar .inside-article > .entry-header{
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top: 18px !important;
  }

  .single-lekar .inside-article .lekar-spec-right{
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin-top: 12px !important;
  }

  /* Content follows */
  .single-lekar .inside-article .entry-content > *{
    grid-column: 1 !important;
  }

  /* IMPORTANT:
     Hide the duplicate big title on mobile (keep the green bar name) */
  .single-lekar .entry-header h1.entry-title{
    display: none !important;
  }
}



.mp-lekar-card{
  display:block;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  height:100%;
}
.mp-lekar-card__media img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.mp-lekar-card__ph{
  width:100%;
  height:220px;
  background:#eef2f3;
}
.mp-lekar-card__body{ padding:14px 14px 16px; }
.mp-lekar-card__name{ font-weight:700; color:#111; line-height:1.25; }
.mp-lekar-card__spec{ margin-top:6px; color:rgb(0,120,139); font-weight:600; font-size:14px; }


/* Allow peek outside the track */
.mp-lekari,
.mp-lekari .splide__track,
.mp-lekari .splide__list{
  overflow: visible !important;
}

/* Give space so the next card can be seen */
@media (max-width: 980px){
  .mp-lekari .splide__track{
    padding-right: 16px !important; /* makes the "peek" obvious */
  }
}


/* =========================
   CTA SECTION – Moja Poliklinika
========================= */

:root{
  --mp-brand: rgb(0,120,139);
  --mp-brand-soft: rgba(0,120,139,.08);
}

/* Whole CTA section wrapper */
.entry-content > p:has(+ .wp-block-buttons){
  background: var(--mp-brand-soft);
  padding: 60px 30px 50px;
  border-radius: 18px;
  max-width: 900px;
  margin: 80px auto 30px;
  font-size: 18px;
  line-height: 1.8;
  color: #2b2b2b;
}

/* First emphasized sentence */
.entry-content > p em{
  font-style: normal;
  font-weight: 700;
  color: var(--mp-brand);
  display: inline-block;
  margin-bottom: 14px;
  font-size: 20px;
}

/* Strong text */
.entry-content > p strong{
  font-weight: 600;
}

/* Button wrapper */
.wp-block-buttons{
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

/* CTA button */
.wp-block-button__link{
  background: var(--mp-brand) !important;
  color: #fff !important;
  padding: 22px 46px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex !important;
  flex-direction: column !important;   /* 2 rows */
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: all .25s ease;
}

/* First row (POZOVITE NAS) */
.wp-block-button__link{
  text-align: center;
}

/* Make phone number smaller */
.wp-block-button__link br{
  display: block;
}

.wp-block-button__link{
  font-size: 18px;
}

.wp-block-button__link::first-line{
  font-size: 17px;
  letter-spacing: .12em;
}

/* Hover effect */
.wp-block-button__link:hover{
  background: rgb(0,105,122) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0,0,0,.12);
}



/* =========================
   FEATURED SERVICES CARDS
========================= */

:root{
  --mp-brand: rgb(0,120,139);
  --mp-brand-soft: rgba(0,120,139,.08);
}

/* Whole services row spacing */
.wp-block-columns:has(.wp-block-media-text){
  margin: 80px 0;
}

/* Each service column */
.wp-block-columns .wp-block-column{
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Card styling */
.wp-block-media-text{
  background: #fff;
  padding: 28px 26px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: all .25s ease;
  cursor: pointer;
}

/* Light soft green hover */
.wp-block-media-text:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
  background: var(--mp-brand-soft);
}

/* Icon styling */
.wp-block-media-text__media img{
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  transition: transform .25s ease;
}

/* Slight icon animation */
.wp-block-media-text:hover img{
  transform: scale(1.08);
}

/* Service title */
.wp-block-media-text__content p{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--mp-brand);
  transition: color .2s ease;
}

/* Slight darker on hover */
.wp-block-media-text:hover .wp-block-media-text__content p{
  color: rgb(0,95,110);
}

/* Remove inline grid-template override issues */
.wp-block-media-text{
  grid-template-columns: 70px auto !important;
  align-items: center;
}



.single-usluga .usluga-header__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}





/* CTA card right */
.single-usluga .usluga-cta{
  background: var(--mp-brand);
  color: #fff;
  border-radius: 999px;
  padding: 18px 18px 16px;
  text-align: center;
}

.single-usluga .usluga-cta__title{
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.single-usluga .usluga-cta__phone{
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 12px;
}

.single-usluga .usluga-cta__btn{
  display: inline-block;
  background: rgba(255,255,255,.14);
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
}

/* Featured image BELOW header, smaller, not too high */
.single-usluga .usluga-featured{
  padding: 10px 0 18px;
}

.single-usluga .usluga-featured__inner img{
  width: 100%;
  max-width: 780px;      /* makes it “smaller” */
  height: auto;
  display: block;
  margin: 0;             /* left aligned; change to auto if centered */
  border-radius: 14px;
}

/* BODY grid + TOC more right */
.single-usluga .usluga-grid{
  display:grid;
  grid-template-columns: minmax(0, 760px) 340px;
  gap: 56px;
  justify-content: center; /* centriraj celu kompoziciju */
  align-items: start;
}
.single-usluga .usluga-sidebar{
  position: sticky;
  top: 120px;
}


/* Related grid */
.single-usluga .usluga-related-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}

/* Mobile */
@media (max-width: 980px){
  .single-usluga .usluga-header__inner{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .single-usluga .usluga-cta{
    border-radius: 18px;
  }

  .single-usluga .usluga-featured__inner img{
    max-width: 100%;
  }

  .single-usluga .usluga-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .single-usluga .usluga-sidebar{
    position: static;
  }

  .single-usluga .usluga-related-grid{
    grid-template-columns: 1fr;
  }
}


.usluga-related{
  margin-top: 56px;
}
.usluga-related-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.usluga-related-card{
  text-decoration:none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.usluga-related-card__media img{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
}
.usluga-related-card__title{
  padding: 14px 14px 16px;
  font-weight: 700;
  color: #111;
}
.usluga-related-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

@media (max-width: 900px){
  .usluga-related-grid{ grid-template-columns: 1fr; }
}



/* HEADER */

.usluga-header__inner{
  width: min(1100px, 92%);
  margin: 0 auto;
}
.usluga-breadcrumb a{
  text-decoration: none;
  color: var(--mp-brand);
  font-weight: 600;
}


/* TABS */
.usluga-tabs{
  margin-top: 10px;
}
.usluga-tabs__inner{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.usluga-tabpanel{ display: none; }
.usluga-tabpanel.is-active{ display: block; }

/* MAIN GRID */
.single-usluga .usluga-grid{
  width: min(1100px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  padding: 34px 0 60px;
}
.single-usluga .usluga-sidebar{
  position: sticky;
  top: 120px;
}

/* AUTHOR CARD (desno) */
.usluga-authorcard{
  margin-bottom: 18px;
}
.usluga-authorcard__label{
  font-size: 13px;
  color: #555;
  margin-bottom: 10px;
}
.usluga-authorcard__item{
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
}
.usluga-authorcard__img{
  width: 74px;
  height: 74px;
  border-radius: 10px;
  object-fit: cover;
}
.usluga-authorcard__name{
  font-weight: 700;
  color: #111;
}
.usluga-authorcard__role{
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* TOC box */
.usluga-toc{
  background: #f7f7f7;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #eee;
}
.usluga-toc h3{
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mp-brand);
}
.usluga-toc-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.usluga-toc-link{
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #111;
  font-size: 14px;
}
.usluga-toc-link.active{
  color: var(--mp-brand);
  font-weight: 700;
}

/* mobile */
@media (max-width: 900px){
  .single-usluga .usluga-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .single-usluga .usluga-sidebar{
    position: static;
    top: auto;
    order: 2;
  }
}




@media (max-width: 768px) {
    body.mega-menu-primary button.menu-toggle {
        display: block !important;
    }

    body.mega-menu-primary #mobile-menu-control-wrapper {
        display: flex !important;
    }

    #site-navigation .main-nav {
        display: block !important;
    }


    #site-navigation.toggled .main-nav > ul {
        display: block !important;
    }
}

@media (max-width: 768px) {

  /* Koristimo GP hamburger */
  body.mega-menu-primary button.menu-toggle {
    display: block !important;
  }

  /* Sakrij Max Mega Menu toggle bar */
  #mega-menu-wrap-primary .mega-menu-toggle {
    display: none !important;
  }

  /* Prikaži wrapper menija */
  #mega-menu-wrap-primary {
    display: block !important;
    width: 100% !important;
  }

  /* Po defaultu sakrij samu listu */
  #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary,
  #mega-menu-wrap-primary #mega-menu-primary {
    display: none !important;
  }

  /* Kada GP doda .toggled, prikaži MMM listu */
  #site-navigation.toggled #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary,
  #site-navigation.toggled #mega-menu-wrap-primary #mega-menu-primary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Top-level stavke jedna ispod druge */
  #mega-menu-wrap-primary #mega-menu-primary {
    width: 100% !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li {
    display: block !important;
    width: 100% !important;
  }

  /* Submenu neka ostane zatvoren dok se ne klikne */
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu {
    display: none;
  }

  #mega-menu-wrap-primary #mega-menu-primary .mega-toggle-on > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item--open > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item.mega-toggle-on > .mega-sub-menu {
    display: block !important;
  }
}




@media (max-width: 768px) {
.inside-navigation.grid-container button.menu-toggle {
        display: none !important;
    }
}

 @media (max-width: 768px) {

  /* ===== GP toggle + MMM content ===== */

  /* Prikaži GP hamburger */
  body.mega-menu-primary button.menu-toggle {
    display: block !important;
  }

  /* Sakrij Max Mega Menu toggle bar */
  #mega-menu-wrap-primary .mega-menu-toggle {
    display: none !important;
  }

  /* Wrapper menija */
  #mega-menu-wrap-primary {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  /* Lista je zatvorena dok GP nav nije toggled */
  #mega-menu-wrap-primary #mega-menu-primary {
    display: none !important;
  }

  /* Kada je GP otvoren, prikaži listu */
  #site-navigation.toggled #mega-menu-wrap-primary #mega-menu-primary {
    display: block !important;
  }

  /* ===== MOBILE LOOK kao GP ===== */

  /* Glavna lista */
  #mega-menu-wrap-primary #mega-menu-primary {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
    padding: 8px 0 !important;
    width: 100% !important;
  }

  /* Top-level stavke jedna ispod druge */
  #mega-menu-wrap-primary #mega-menu-primary > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Top-level linkovi */
  #mega-menu-wrap-primary #mega-menu-primary > li > a.mega-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    color: rgb(0, 120, 139) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
  }

  /* Hover / active */
  #mega-menu-wrap-primary #mega-menu-primary > li:hover > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-current_page_item > a.mega-menu-link {
    color: rgb(0, 100, 116) !important;
    background: var(--mp-brand-soft) !important;
  }

  /* Razdvajanje stavki */
  #mega-menu-wrap-primary #mega-menu-primary > li + li {
    border-top: 1px solid rgba(0,0,0,.05) !important;
  }

  /* Strelica / indikator */
  #mega-menu-wrap-primary .mega-indicator {
    margin-left: 10px !important;
  }

  /* ===== SUBMENU ===== */

  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu {
    background: #fff !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li {
    width: 100% !important;
    margin: 0 !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu a.mega-menu-link {
    display: block !important;
    padding: 10px 16px 10px 28px !important;
    color: rgb(0, 120, 139) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-decoration: none !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li:hover > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li:focus-within > a.mega-menu-link {
    background: var(--mp-brand-soft) !important;
    color: var(--mp-brand) !important;
  }

  /* Otvaranje podmenija na klik */
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu {
    display: none !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary .mega-toggle-on > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item--open > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item.mega-toggle-on > .mega-sub-menu {
    display: block !important;
  }

  /* Isključi desktop mega-layout na mobile */
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-megamenu > .mega-sub-menu {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    display: none;
  }

  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-column,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-columns-1-of-3,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-columns-1-of-4,
  #mega-menu-wrap-primary #mega-menu-primary [style*="--columns"] {
    width: 100% !important;
    display: block !important;
  }

  /* Sakrij unutrašnji GP toggle da ne bude dupli */
  #site-navigation > .inside-navigation > button.menu-toggle {
    display: none !important;
  }
}




@media (max-width: 768px) {

  /* Prikaži indikator i na dubljim nivoima */
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item-has-children > a.mega-menu-link {
    position: relative !important;
    padding-right: 42px !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item-has-children > a.mega-menu-link .mega-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  /* Svi podmeniji su zatvoreni po defaultu */
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .mega-sub-menu {
    display: none !important;
  }

  /* Prvi nivo otvaranja */
  #mega-menu-wrap-primary #mega-menu-primary .mega-toggle-on > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item--open > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item.mega-toggle-on > .mega-sub-menu {
    display: block !important;
  }

  /* Drugi nivo otvaranja (npr. Tim lekara > Ginekologija > lekari) */
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .mega-toggle-on > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .mega-menu-item--open > .mega-sub-menu,
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .mega-menu-item.mega-toggle-on > .mega-sub-menu {
    display: block !important;
  }

  /* Linkovi u prvom submenu nivou */
  #mega-menu-wrap-primary #mega-menu-primary > li > .mega-sub-menu > li > a.mega-menu-link {
    padding-left: 28px !important;
    font-size: 14px !important;
  }

  /* Linkovi u drugom submenu nivou - dodatno uvlačenje */
  #mega-menu-wrap-primary #mega-menu-primary > li > .mega-sub-menu > li > .mega-sub-menu > li > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .mega-sub-menu a.mega-menu-link {
    padding-left: 42px !important;
    font-size: 13px !important;
  }

  /* Po želji: malo svetlija pozadina za dublji nivo */
  #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .mega-sub-menu {
    background: #f8fbfc !important;
  }
	
	
	.site-main .wp-block-group__inner-container, .site-main .wp-block-group__inner-container p {
		padding: 10px !important;
	}
}