/* =========================================================
   MOBILE LAYOUT POLICY
   - Header/Hero/Footer FULL-BLEED (no side gaps)
   - Content gets consistent padding
   ========================================================= */
@media (max-width: 781px) {

  :root { --vl-mobile-gutter: 16px; }

  /* 0) Prevent horizontal scroll glitches */
  html, body { overflow-x: hidden !important; }

  /* 1) REMOVE theme/global side padding that creates empty gutters */
  .wp-site-blocks,
  .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Alignfull must be allowed to go full width (do NOT clamp it) */
  .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) ADD padding back ONLY to content areas */
  main,
  .entry-content,
  .wp-block-post-content,
  .wp-block-query,
  .wp-block-post-template {
    padding-left: var(--vl-mobile-gutter) !important;
    padding-right: var(--vl-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  /* 3) But keep true full-width blocks full-bleed inside content */
  main .alignfull,
  .entry-content .alignfull,
  .wp-block-post-content .alignfull,
  .wp-block-query .alignfull {
    margin-left: calc(var(--vl-mobile-gutter) * -1) !important;
    margin-right: calc(var(--vl-mobile-gutter) * -1) !important;
    width: calc(100% + (var(--vl-mobile-gutter) * 2)) !important;
    max-width: none !important;
  }

  /* 4) Images never overflow */
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* =========================================================
   MOBILE: inset TEXT inside header & footer
   (keep sections full-bleed)
   ========================================================= */
@media (max-width: 781px) {

  :root { --vl-mobile-gutter: 16px; }

  /* HEADER: move text/logo/nav inward, not the header itself */
  header .wp-block-group,
  header .wp-block-columns,
  header .wp-block-site-title,
  header nav.wp-block-navigation {
    padding-left: var(--vl-mobile-gutter) !important;
    padding-right: var(--vl-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  /* FOOTER: move text inward, keep background full width */
  footer .wp-block-group,
  footer .wp-block-columns,
  footer .wp-block-site-title,
  footer .wp-block-list,
  footer p,
  footer h1,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6 {
    padding-left: var(--vl-mobile-gutter) !important;
    padding-right: var(--vl-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

}

/* =========================================================
   MOBILE: inset page & post titles (without moving layout)
   ========================================================= */
@media (max-width: 781px) {

  :root { --vl-mobile-gutter: 16px; }

  /* Page titles (e.g. "Objave") */
  h1.wp-block-post-title,
  .wp-block-query-title,
  .wp-block-post-title {
    padding-left: var(--vl-mobile-gutter) !important;
    padding-right: var(--vl-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

}

/* =========================================================
   MOBILE: inset ALL TEXT content consistently
   (text only – no layout shift)
   ========================================================= */
@media (max-width: 781px) {

  :root { --vl-mobile-gutter: 16px; }

  /* All common text elements */
  p,
  a,
  span,
  strong,
  em,
  small,
  blockquote,
  ul,
  ol,
  li,
  dt,
  dd,
  figcaption {
    padding-left: var(--vl-mobile-gutter) !important;
    padding-right: var(--vl-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    padding-left: var(--vl-mobile-gutter) !important;
    padding-right: var(--vl-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Gutenberg-specific text blocks */
  .wp-block-heading,
  .wp-block-paragraph,
  .wp-block-list,
  .wp-block-quote,
  .wp-block-post-title,
  .wp-block-query-title,
  .wp-block-post-excerpt,
  .wp-block-post-date,
  .wp-block-read-more {
    padding-left: var(--vl-mobile-gutter) !important;
    padding-right: var(--vl-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  /* DO NOT inset media or structural blocks */
  img,
  figure,
  video,
  iframe,
  .wp-block-image,
  .wp-block-cover,
  .alignfull,
  .wp-block-group.alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

/* Mobile: skratiti karticu, smanjiti naslov, a sliku držati većom i "cropati" rubove */
@media (max-width: 781px) {

  /* 1) Ako je layout Columns: prebaci u 1 stupac (stack) i smanji "predugačak" blok */
  .post-card.wp-block-columns {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .post-card.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* 2) Naslov: smanji font i line-height */
  .post-card .wp-block-post-title,
  .post-card .wp-block-post-title a {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.15 !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  /* 3) Slika: neka ostane vizualno veća; crop preko object-fit: cover */
  .post-card .wp-block-post-featured-image img,
  .post-card .wp-block-image img {
    width: 100% !important;
    height: 220px !important;   /* povećaj/smanji po želji */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* 4) Excerpt: skrati prikaz (da kartica ne bude preduga) */
  .post-card .wp-block-post-excerpt__excerpt,
  .post-card .wp-block-post-excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* 2 ili 3 linije je tipično */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 5) Padding unutar kartice (ako je previše "zračno") */
  .post-card {
    padding: 12px !important;
  }
	
	/* =========================================================
   MOBILE: Query Loop "post card" fix
   - veća featured slika s crop (cover)
   - manji naslov
   - kraći excerpt
   - reset paddinga koji ti je globalno dodan na p/a/h*
   ========================================================= */
@media (max-width: 781px) {

  /* Target: većina tema rendera post item kao <li> u .wp-block-post-template */
  .wp-block-post-template > li {
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  /* PONIŠTI globalni padding koji si dodao na sve tekst elemente,
     ali samo unutar kartice posta (da ne razbije layout) */
  .wp-block-post-template > li p,
  .wp-block-post-template > li a,
  .wp-block-post-template > li h1,
  .wp-block-post-template > li h2,
  .wp-block-post-template > li h3,
  .wp-block-post-template > li h4,
  .wp-block-post-template > li h5,
  .wp-block-post-template > li h6,
  .wp-block-post-template > li .wp-block-heading,
  .wp-block-post-template > li .wp-block-paragraph,
  .wp-block-post-template > li .wp-block-post-title,
  .wp-block-post-template > li .wp-block-post-excerpt {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* NASLOV manji na mobitelu */
  .wp-block-post-template > li .wp-block-post-title,
  .wp-block-post-template > li .wp-block-post-title a {
    font-size: clamp(20px, 5.6vw, 26px) !important;
    line-height: 1.15 !important;
    margin: 6px 0 !important;
  }

  /* FEATURED SLIKA: neka bude vizualno veća i cropana */
  .wp-block-post-template > li figure.wp-block-post-featured-image {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important; /* opcionalno */
  }

  /* Najstabilnije: kontroliraj omjer preko aspect-ratio */
  .wp-block-post-template > li figure.wp-block-post-featured-image img {
    width: 100% !important;
    height: 240px !important;           /* promijeni npr. 220/260 */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* EXCERPT: skratiti */
  .wp-block-post-template > li .wp-block-post-excerpt__excerpt,
  .wp-block-post-template > li .wp-block-post-excerpt p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

	@media (max-width: 781px) {
  .wp-block-post-template > li h2.wp-block-post-title,
  .wp-block-post-template > li h2.wp-block-post-title a {
    font-size: 20px !important;
    line-height: 1 !important;
  }
}
	



}