/* =========================================
   BLOG CONTENT / GUTENBERG TECH FIXES ONLY
   ========================================= */

/* Base safety */
.blog-post-content,
.editor-styles-wrapper {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Lists safety - sprečava izlazak lista iz okvira */
.blog-post-content ul,
.blog-post-content ol,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
  padding-left: 1.5em;
  margin-left: 0;
  list-style-position: outside;
}

/* Separator width only - boja i spacing ostaju iz theme.json / Gutenberg */
.blog-post-content .wp-block-separator,
.editor-styles-wrapper .wp-block-separator {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

/* Caption fine tuning */
.blog-post-content figcaption,
.blog-post-content .wp-caption-text,
.editor-styles-wrapper figcaption,
.editor-styles-wrapper .wp-caption-text {
  text-align: center;
}

/* Images safety */
.blog-post-content img,
.editor-styles-wrapper img {
  max-width: 100%;
  height: auto;
}

/* Responsive YouTube / embeds */
.blog-post-content .wp-block-embed,
.editor-styles-wrapper .wp-block-embed {
  margin-left: auto;
  margin-right: auto;
}

.blog-post-content .wp-block-embed__wrapper,
.editor-styles-wrapper .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.blog-post-content .wp-block-embed iframe,
.editor-styles-wrapper .wp-block-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Optional video width helpers */
.blog-post-content .embed-width-560,
.editor-styles-wrapper .embed-width-560 {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.blog-post-content .embed-width-720,
.editor-styles-wrapper .embed-width-720 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Columns centering helper */
.blog-post-content .wp-block-columns,
.editor-styles-wrapper .wp-block-columns {
  justify-content: center;
}

/* Code safety */
.blog-post-content pre,
.editor-styles-wrapper pre {
  overflow-x: auto;
}

/* Mobile align fixes */
@media (max-width: 767px) {
  .blog-post-content .alignleft,
  .blog-post-content .alignright,
  .editor-styles-wrapper .alignleft,
  .editor-styles-wrapper .alignright {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}



/* =========================================
   BLOG CONTENT / GUTENBERG PATTERNS
   ========================================= */


.pickbox-columns-60-40 {
  display: flex;
  align-items: center;
  gap: 40px;
}

.pickbox-columns-60-40 > .wp-block-column:first-child {
  flex-basis: 60% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pickbox-columns-60-40 > .wp-block-column:last-child {
  flex-basis: 40% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pickbox-columns-60-40 img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .pickbox-columns-60-40 {
    flex-direction: column;
  }

  .pickbox-columns-60-40 > .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }
}


.blog-post-content .pickbox-three-columns-text,
.editor-styles-wrapper .pickbox-three-columns-text {
  align-items: flex-start;
  gap: 48px;
}

.blog-post-content .pickbox-three-columns-text .wp-block-separator,
.editor-styles-wrapper .pickbox-three-columns-text .wp-block-separator {
  max-width: 180px;
  margin: 0 auto 8px;
}

.blog-post-content .pickbox-three-columns-text h3,
.editor-styles-wrapper .pickbox-three-columns-text h3 {
  margin-top: 0;
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  .blog-post-content .pickbox-three-columns-text,
  .editor-styles-wrapper .pickbox-three-columns-text {
    gap: 32px;
  }

  .blog-post-content .pickbox-three-columns-text h3,
  .editor-styles-wrapper .pickbox-three-columns-text h3 {
    margin-bottom: 24px;
  }
}



.blog-post-content .pickbox-linked-heading a,
.editor-styles-wrapper .pickbox-linked-heading a {
  color: #0099CC;
  text-decoration: none;
}

.blog-post-content .pickbox-linked-heading a:hover,
.editor-styles-wrapper .pickbox-linked-heading a:hover {
  color: #00c0e4;
  text-decoration: underline;
}




/* 560px centered video wrapper */
.blog-post-content .pickbox-video-560,
.editor-styles-wrapper .pickbox-video-560 {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* responsive video */
.blog-post-content .pickbox-video-560 .wp-block-embed__wrapper,
.editor-styles-wrapper .pickbox-video-560 .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.blog-post-content .pickbox-video-560 iframe,
.editor-styles-wrapper .pickbox-video-560 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


.blog-post-content .pickbox-centered-image,
.editor-styles-wrapper .pickbox-centered-image {
  text-align: center;
}

.blog-post-content .pickbox-centered-image img,
.editor-styles-wrapper .pickbox-centered-image img {
  max-width: 100%;
  height: auto;
}

.blog-post-content .pickbox-video-560 .wp-block-embed,
.editor-styles-wrapper .pickbox-video-560 .wp-block-embed {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}