/* =========================================================
   Poziv Duše — front-page styles
   Loaded only on the static front page (see functions.php)
   ========================================================= */

/* Match design's font rendering (Chrome/Safari render slightly bolder without this) */
body.pd-page,.pd-page{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

.pd-page{font-family:var(--wp--preset--font-family--open-sans);}
.pd-page h1,.pd-page h2,.pd-page h3,.pd-page h4{font-family:var(--wp--preset--font-family--eb-garamond);}
.pd-page .wp-block-group{box-sizing:border-box;}

/* ---------- Header ----------
   Design's headerMode prop defaults to "Uvek pun" (always solid) — the header
   is a constant solid cream bar with the brown logo at all times; it is NOT a
   transparent-until-scroll header (that's a non-default alternate mode this
   design never actually uses). */
.pd-header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--wp--preset--color--accent-4,#ede6d3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.pd-header .pd-header__inner{max-width:1500px;margin:0 auto;padding:20px 6vw;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;}
.pd-header__logo{position:relative;height:42px;width:316px;max-width:60vw;display:block;}
.pd-header__logo img{display:block;height:42px;width:316px;max-width:60vw;}
.pd-header-spacer{height:0;}

/* ---------- Hero (landing page) ----------
   Header is now a normal in-flow bar (not the old position:fixed overlay), so the
   hero's height must subtract the header's actual rendered height to keep the two
   together filling exactly one screen (100vh), matching the original full-screen
   design intent. This one rule replaces both the block's own inline min-height:56vw
   attribute AND the old mobile-only min-height:100vh!important override below.

   --pd-header-height used to be measured live by a script in
   patterns/header-poziv-duse.php (on load/resize, and on every mobile nav
   open/close) — removed (2026-09-23, Nikola's request): opening the mobile
   dropdown made the header temporarily much taller, so that script would
   shrink the hero to compensate, visibly squashing it (e.g. on Poziv Duše)
   every time the menu opened. --pd-header-height is now a plain static
   value set once below, matching the header's actual normal (closed)
   height at each breakpoint — desktop 82px (20px+20px padding + the 42px
   logo), mobile 72px (20px+20px padding + the 32px hamburger button, the
   taller of it/the 25px-tall 190px-wide logo) — so it no longer reacts to
   the menu at all. Update these two numbers by hand if the header's own
   padding/content height ever changes. */
:root{--pd-header-height:82px;}
@media (max-width:781px){
  :root{--pd-header-height:72px;}
}
.pd-page > .wp-block-cover:first-child{min-height:calc(100vh - var(--pd-header-height, 82px))!important;}
/* Homepage hero: bottom gradient fade into the page background (design's own
   linear-gradient(to bottom,transparent,#EDE6D3) overlay on the hero photo).
   BUG (found round-24): core WP's .wp-block-cover__inner-container actually
   computes z-index:auto, NOT 1 as previously assumed here — so this ::after
   (a pseudo-element, painted as the cover's LAST box in DOM/paint order) was
   rendering ON TOP of the H1 text, washing the brown heading out to a pale,
   "blurry" haze against the photo. Explicit z-index:1 below forces the text
   container above the gradient regardless of core's actual z-index. */
.pd-home-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to bottom,transparent,#ede6d3);pointer-events:none;z-index:0;}
.pd-home-hero .wp-block-cover__inner-container{position:relative;z-index:1;}
/* Blog listing (posts page + category archives) — round 12 */
.pd-blog-body{position:relative;z-index:2;background-color:#ede6d3;padding:40px 80px 108px;}
.pd-blog-cats{display:flex;gap:28px;flex-wrap:wrap;margin:0 0 40px;list-style:none;padding:0;}
.pd-blog-cat{font-family:'Open Sans',sans-serif;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;text-decoration:none;color:#9f691f;font-weight:500;}
.pd-blog-cat:hover{color:#774625;}
.pd-blog-cat:focus,
.pd-blog-cat:active{outline:none;box-shadow:none;}
body.blog .pd-blog-cat--sve,
body.category-poziv-duse .pd-blog-cat--poziv-duse,
body.category-intervjui .pd-blog-cat--intervjui,
body.category-duhovna-nauka .pd-blog-cat--duhovna-nauka{color:#774625;}
.pd-blog-grid .wp-block-post-template{list-style:none;margin:0;padding:0;column-count:3;column-gap:32px;}
.pd-blog-grid .wp-block-post{break-inside:avoid;margin:0 0 48px;}
.pd-blog-card{display:flex;flex-direction:column;}
.pd-blog-card-img{margin:0 0 20px;}
.pd-blog-card-img img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:4/5;}
.pd-blog-card-img a:focus,
.pd-blog-card-img a:active{outline:none;box-shadow:none;}
.wp-block-post:nth-child(3n+2) .pd-blog-card-img img{aspect-ratio:4/3;}
.wp-block-post:nth-child(3n) .pd-blog-card-img img{aspect-ratio:3/4;}
.pd-blog-card-title{font-family:'EB Garamond',serif;font-size:26px;line-height:1.2;color:#774625;font-weight:400;margin:0;letter-spacing:-0.01em;text-transform:uppercase;}
.pd-blog-card-title a{color:inherit;text-decoration:none;}
.pd-blog-card-title a:focus,
.pd-blog-card-title a:active{outline:none;box-shadow:none;}
.pd-blog-empty{font-family:'EB Garamond',serif;font-style:italic;font-size:22px;color:#774625;text-align:center;padding:40px 0;}
.pd-blog-pagination{display:flex;justify-content:center;gap:16px;margin-top:80px;font-family:'Open Sans',sans-serif;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;}
.pd-blog-pagination a,.pd-blog-pagination span{color:#774625;text-decoration:none;}
.pd-blog-pagination .wp-block-query-pagination-numbers .current{font-weight:700;}
@media (max-width:900px){.pd-blog-grid .wp-block-post-template{column-count:2;}}
@media (max-width:600px){.pd-blog-grid .wp-block-post-template{column-count:1;}.pd-blog-body{padding:40px 24px 80px;}}


/* ---------- Hero (mobile) ----------
   Hero cover is the .pd-page group's direct first child — targeted structurally
   (no className added to the block) so this stays purely a CSS change with zero
   block-validation risk. Desktop is untouched; only <=781px gets these overrides. */
/* ---------- Home page: intro paragraphs render smaller than intended (round-29, 2026-09-28) ----------
   Nikola: the "Ti si uspešna žena koju..." text (and, confirmed with him,
   its sibling "Iako si već dugo u radu na sebi...") read too small — he
   measured the live computed size in devtools at ~14.8px, not the 18px he
   expects.
   Root cause: WordPress's fluid typography (theme.json has it enabled
   sitewide) auto-converts a block's plain custom font-size into a
   clamp(min, ..., max) at save time, in the ACTUAL WordPress database
   content — NOT in this repo's static wp-theme/home-page-content.html
   reference copy, which still shows a plain "font-size:18px" (that file is
   just a snapshot of what was originally pasted into the editor; the live
   post_content has since been re-saved through Gutenberg at least once,
   picking up the fluid conversion). Confirmed live via devtools: both
   paragraphs' actual inline style is
   `font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.392), 18px)` — an
   18px MAX that's only reached at a specific wide viewport; at anything
   narrower it's genuinely smaller (~14-15px), matching what Nikola saw and
   measured. Nikola wants a flat 18px, not fluid/shrinking.
   Fix is CSS-only (no WP content edit): this exact clamp() string is NOT
   unique to these two paragraphs — it's WordPress's generic output for ANY
   paragraph anywhere on the site with an 18px fluid target (confirmed live:
   42 OTHER paragraphs on the Poziv Duše page alone share byte-identical
   clamp text), so matching on it alone would force-flatten unrelated
   Poziv Duše paragraphs too. Scoped down with three things at once: (a)
   `body.home` (WP's own body class for just this page), (b) the clamp
   substring, and (c) each paragraph's own distinct margin-bottom
   (26px / 72px) — confirmed live this combination matches exactly one
   paragraph each, only on this page. */
body.home p[style*="margin-bottom:26px"][style*="0.875rem + ((1vw - 3.2px) * 0.392), 18px)"],
body.home p[style*="margin-bottom:72px"][style*="0.875rem + ((1vw - 3.2px) * 0.392), 18px)"]{
  font-size:18px!important;
}

/* ---------- Home page — "O meni" heading vs. "Ovde učim čarobnice..." intro paragraph
   (round 37, 2026-09-30, corrected same day after Nikola's follow-up: he wants "O meni"
   to SHRINK to match, not the paragraph to grow). "Ovde učim čarobnice..." is a WP core
   paragraph block with a custom 50px font-size, which WP's fluid typography renders as
   `clamp(28.836px, 1.802rem + ((1vw - 3.2px) * 2.075), 50px)` (see the round-29 note
   above for the general mechanism). "O meni" is a plain hardcoded <div> inside a wp:html
   block (not a WP block, so immune to fluid conversion) with a flat 50px, which only
   matched the paragraph at the one specific wide viewport where the clamp maxes out.
   Fix: give "O meni" the exact same clamp() expression directly as its own font-size, so
   it tracks identically at every viewport (both are plain CSS clamp() using vw/rem units,
   not relative to any parent, so copying the formula verbatim is exact, not approximate).
   Scoped via body.home + this div's own distinct inline-style substrings — confirmed
   live this matches only this one element. */
body.home div[style*="letter-spacing:-0.04em"][style*="margin-bottom:32px"]{
  font-size:clamp(28.836px, 1.802rem + ((1vw - 3.2px) * 2.075), 50px)!important;
}

/* ---------- Kontakt page — CF7 contact form styling (matches Contact.dc.html) ---------- */
.pd-kontakt-form .wpcf7-form{display:flex;flex-direction:column;gap:24px;}
.pd-kontakt-form .wpcf7-form p,
.pd-kontakt-form .wpcf7-form .pd-captcha{display:flex;flex-direction:column;gap:8px;margin:0;}
.pd-kontakt-form .wpcf7-form .pd-field{display:flex;flex-direction:column;gap:8px;}
.pd-kontakt-form .wpcf7-form label,
.pd-kontakt-form .wpcf7-form .pd-captcha-question{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:#774625;font-weight:600;}
.pd-kontakt-form .wpcf7-form input[type="text"],
.pd-kontakt-form .wpcf7-form input[type="email"],
.pd-kontakt-form .wpcf7-form textarea,
.pd-kontakt-form .wpcf7-form .pd-captcha-input{border:none;border-bottom:1px solid #9F691F;background:transparent;padding:10px 4px;font-size:16px;color:#774625;outline:none;width:100%;box-sizing:border-box;font-family:inherit;}
.pd-kontakt-form .wpcf7-form textarea{resize:vertical;line-height:1.5;}
.pd-kontakt-form .wpcf7-form input::placeholder,
.pd-kontakt-form .wpcf7-form textarea::placeholder{color:#ab8b6c;}
.pd-kontakt-form .wpcf7-form input[type="submit"]{align-self:flex-start;margin-top:16px;padding:15px 40px;color:#774625;background:transparent;border:1px solid #774625;font-size:13px;letter-spacing:0.13em;text-transform:uppercase;font-weight:500;cursor:pointer;font-family:'Open Sans',sans-serif;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.pd-kontakt-form .wpcf7-form input[type="submit"]:hover,
.pd-kontakt-form .wpcf7-form input[type="submit"]:focus{background:#630c12;color:#ede6d3;border-color:#630c12;}
.pd-kontakt-form .wpcf7-form .wpcf7-not-valid-tip{color:#630c12;font-size:13px;margin-top:4px;}
.pd-kontakt-form .wpcf7-response-output{border:1px solid #9F691F!important;color:#774625;font-family:'EB Garamond',serif;font-style:italic;font-size:18px;text-align:center;margin:24px 0 0;padding:24px 20px;}
.pd-kontakt-social{max-width:760px;margin:0 auto;padding:0 80px 80px;display:flex;justify-content:center;gap:24px;}
.pd-kontakt-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;}

/* Hero bottom-fade gradient (Poziv Duše + Kontakt heroes — any shared
   .wp-block-cover:first-child, matching Home hero's own always-on gradient
   below). ROUND-28 FIX (2026-09-24) — Nikola: the gradient "wasn't full
   width" and "was pushed away from the bottom edge", on mobile AND desktop.
   Root cause: this used to be a ::before anchored to
   .wp-block-cover__inner-container (left:-4vw;right:-4vw;bottom:-4vw;
   top:-40vh, mobile-only) — but inner-container is NOT the full hero box.
   With contentPosition "bottom center" it only wraps its own content
   (the H1) and sits inset by the cover's own padding (e.g. Kontakt's
   56px each side) — confirmed live: on a 375px-wide Kontakt hero,
   inner-container measured only 263×64px sitting near the bottom, not the
   full 375×740 cover box. Anchoring the gradient's offsets to that small,
   off-position box is exactly why it came out narrow and short of the true
   edges, worse the narrower the padding-to-viewport ratio (so worse on
   mobile, but present on desktop too — there was no desktop rule at all
   before this fix, hence "looks bad on desktop too, only covers the
   'Kontakt' text").
   Fix: moved to ::after on the .wp-block-cover ITSELF (the real full-size
   box, already position:relative via WP core) with a plain inset:0-style
   left:0;right:0;bottom:0;height:60% — this is the exact same recipe
   already used for Home's own hero fade (.pd-home-hero::after below), just
   correctly generalized instead of duplicated with mistaken offsets, and no
   longer mobile-only (Nikola wants it fixed at every width, and there's no
   longer any risk of double-stacking with Home's own gradient since this
   selector already excludes .pd-home-hero). ::after (not ::before) so it
   paints on top of the photo/dim layer but under the text, which needs its
   own z-index:1 below since it's no longer behind by DOM order alone. */
.pd-page > .wp-block-cover:first-child:not(.pd-home-hero)::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:60%;
  background:linear-gradient(to bottom, transparent, var(--wp--preset--color--accent-4, #ede6d3));
  z-index:0;
  pointer-events:none;
}
.pd-page > .wp-block-cover:first-child:not(.pd-home-hero) .wp-block-cover__inner-container{
  position:relative;
  z-index:1;
}
/* Poziv Duše hero heading + subtitle: Nikola wants the brown (accent-1)
   already forced on mobile (via the shared h1/p rule inside the media
   query just below) on DESKTOP too. That shared rule is intentionally
   mobile-only and generic (also covers Kontakt's heading, which should
   KEEP its light/cream "base" color choice on desktop — untouched here),
   so making it unconditional site-wide isn't safe. Instead this scopes
   directly to the Poziv Duše hero, matched via its unique inline
   min-height:56vw (neither its cover block nor its heading carries a
   class of its own to target — same attribute-selector-on-inline-style
   technique used elsewhere in this file, e.g. for the O Meni mobile
   padding fix, to avoid needing a WP page-content edit). Applies at every
   width; a no-op on mobile since the shared rule below already sets the
   same color there. */
.wp-block-cover[style*="min-height:56vw"] h1,
.wp-block-cover[style*="min-height:56vw"] .wp-block-cover__inner-container p{
  color:var(--wp--preset--color--accent-1)!important;
}
@media (max-width:781px){
  .pd-kontakt-form .wpcf7-form input[type="submit"]{align-self:center;}
  .pd-page > .wp-block-cover:first-child .wp-block-cover__image-background{object-position:30% 20%!important;}
  .pd-page > .wp-block-cover:first-child h1{font-size:clamp(56px,20vw,84px)!important;letter-spacing:-0.035em!important;color:var(--wp--preset--color--accent-1)!important;}
  .pd-page > .wp-block-cover:first-child .wp-block-cover__inner-container p{color:var(--wp--preset--color--accent-1)!important;}
}

/* ---------- "Spajanje neba i zemlje" (mobile) ----------
   Heading is centered by design on desktop (kept as-is); on mobile it should read left,
   like the rest of the page. Both label/body column pairs ("Teorijski deo"/"Praktični deo")
   have a body paragraph with an inline margin-left:416px tuned for the desktop 25/75 column
   split — on a ~330px-wide stacked mobile column that pushes the paragraph off the right edge
   entirely (0px available width), forcing it to wrap one character per line for thousands of
   px of extra page height. Targeted via unique inline-style attribute selectors — no
   className/JSON change, so zero block-validation risk. */
@media (max-width:781px){
  h3[style*="margin-bottom:80px"]{text-align:left!important;}
  p[style*="margin-left:416px"]{margin-left:0!important;}
}

/* ---------- "Poziv Duše" offer box (price + feature list) (mobile) ----------
   Desktop: heading+price sit in a 2-col row (price right-aligned), features in a
   2-col checklist grid. On mobile everything should read top-to-bottom in one
   left-aligned column. The heading/price columns already stack via WP core's
   default column-stacking; only the price text-align needs flipping. The feature
   grid is raw HTML (a wp:html block, not a wp:columns), so it needs its own
   grid-template-columns override — targeted by its exact (and unique, checked via
   grep) inline style, so again no HTML/JSON change. */
@media (max-width:781px){
  .pd-offer-box .has-text-align-right{text-align:left!important;}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
  /* round-50, 2026-10-02: .pd-offer-grid ("Šta uključuje program" 12-item
     checklist) is a core/group with its 2-column grid set via its own CSS
     class (.pd-offer-grid above), not an inline style -- the rule right above
     this one only ever matched the OTHER grid-based section that still uses
     inline styles, so this one never got collapsed to 1 column on mobile.
     Collapsing it here stacks "Poziv Duše" heading -> price -> all 12
     checklist items -> the "Prijavi se" button into a single column, in
     that exact DOM order (no HTML reordering needed, the button already
     comes last as a sibling after the grid). */
  .pd-offer-grid{grid-template-columns:1fr!important;}
}


/* ---------- Global mobile spacing normalization (bugs #58-#6x) ----------
   Nikola audited the whole mobile page top-to-bottom and asked, section by
   section, for every gap to read as a flat 40px instead of the desktop's
   vw-based (and therefore viewport-dependent/inconsistent on narrow screens)
   padding. Rather than keep adding one bespoke rule per section, this applies
   the same 40px TOP/BOTTOM padding to every .pd-page section (= every direct
   child of .pd-page) at once, plus 40px on every stacked-columns gap. Side
   (left/right) padding is intentionally left untouched — Nikola only asked
   for vertical spacing fixes, not horizontal (corrected after an initial
   over-broad pass that also changed left/right to 40px). Excluded on
   purpose (each needs to stay full-bleed / edge-to-edge, not inset by 40px):
   - the hero (:first-child) — already has its own bespoke mobile treatment (#54)
   - .pd-marquee-wrap — full-bleed scrolling marquee track
   - .pd-cover-169 — the offline-meetup banner photo (#57), has no padding at all
   - the video-testimonials gallery wrapper (targeted by its own unique style
     attribute, since it shares its class list with other accent-3 sections) —
     needs 0 side padding for its edge-to-edge horizontal scroll (#51)
   Zero HTML/JSON changes; all selectors verified live via querySelector before
   shipping, zero block-validation risk. */
@media (max-width:781px){
  .pd-page > .wp-block-group:not(.pd-marquee-wrap):not(.pd-klub-closing):not(.pd-omeni-title-wrap):not(.pd-omeni-intro):not(.pd-omeni-bio):not([style*="padding-top:0;padding-right:0;padding-bottom:6vw;padding-left:0"]),
  .pd-page > .wp-block-cover:not(:first-child):not(.pd-cover-169){
    padding-top:40px!important;
    padding-bottom:40px!important;
  }
  /* The marquee's own small top padding used to add extra space on top of the
     previous section's now-40px bottom padding, double-spacing the seam —
     zeroed so the total gap between the previous section and the marquee is
     exactly the 40px the previous section's own bottom padding already gives. */
  .pd-marquee-wrap{padding-top:0!important;}

  /* Several sections' last paragraph carries its own trailing margin-bottom
     (20/26px, used for spacing BETWEEN paragraphs within that text column) —
     once the section itself also has a 40px bottom padding, that trailing
     margin stacks on top of it, doubling the visual gap before the next
     section (verified live: was 60px instead of 40px, e.g. before the
     Šta-je-Poziv-Duše marquee). Zeroed via nth-child(section index) so only
     the actual last element of each flagged section is affected — verified
     live via querySelector before shipping. */
  .pd-page > *:nth-child(7) :last-child,
  .pd-page > *:nth-child(10) :last-child,
  .pd-page > *:nth-child(12) :last-child,
  .pd-page > *:nth-child(17) :last-child{
    margin-bottom:0!important;
  }

  /* Stacked-column gap: these columns stack to one column on mobile, and the
     gap value (tuned for the wide desktop 2-col row, 130px/80px/48px) becomes
     the VERTICAL gap between the stacked items — reduce it to the same 40px
     rhythm as the section padding above. */
  .pd-cols-sticky,
  .pd-cols-1500-130,
  .pd-cols-1500-48,
  .pd-cols-omeni-top{
    gap:40px!important;
  }
}

/* "Ti znaš" section: sticky photo that scrolls with the (much taller) text column until the row ends */
.pd-sticky-photo{position:sticky;top:6vw;aspect-ratio:4/5;width:100%;overflow:hidden;margin:0;}
.pd-sticky-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* WP core forces .wp-block-columns{align-items:initial!important} which computes to stretch — override so the shorter photo column doesn't stretch to match the tall text column, leaving room for the sticky scroll effect above */
.pd-cols-sticky.wp-block-columns{align-items:flex-start!important;}
/* "O meni" row: keep the photo column at its own aspect-ratio height instead of stretching to match the (now narrower, taller-wrapping) text column */
.pd-cols-omeni-top.wp-block-columns{align-items:flex-start!important;}
.pd-cols-sticky{max-width:1500px!important;margin-left:auto!important;margin-right:auto!important;gap:130px;}
.pd-cols-omeni-top{max-width:1500px!important;margin-left:auto!important;margin-right:auto!important;gap:80px;}
/* Block-editor-safe width/gap variants for wp:columns that need a 1500px cap (no bespoke behavior otherwise) — kept as CSS classes rather than inline styles so the block's save() output matches stored markup and the editor doesn't flag "block validation failed" */
.pd-cols-1500-130{max-width:1500px!important;margin-left:auto!important;margin-right:auto!important;gap:130px;}
.pd-cols-1500-48{max-width:1500px!important;margin-left:auto!important;margin-right:auto!important;gap:48px;}
/* "O meni" body-text column width cap (was an inline max-width with no matching block attribute — broke block validation) */
.pd-cap-600{max-width:600px;}
/* "O meni" portrait crop (was an inline aspect-ratio/object-fit/width with no matching block attribute) */
.pd-portrait-omeni img{aspect-ratio:4/5;object-fit:cover;width:100%;}
/* Marquee wrapper needed overflow:hidden as an inline style with no matching block attribute — moved to CSS */
.pd-marquee-wrap{overflow:hidden;}
/* Offline-meetup cover: WP's core/cover block has no real "aspectRatio" style attribute for save() to reproduce — enforced via CSS instead of an inline style */
.pd-cover-169{aspect-ratio:16/9;min-height:0;} /* WP's default cover min-height (430px, applied because this block has no explicit minHeight attribute) fights the aspect-ratio on any viewport narrower than ~764px (430*16/9): the browser grows the box's WIDTH to 764px to satisfy both constraints at once, overflowing the page horizontally on mobile. min-height:0 removes that floor so height is purely width*9/16, with no effect on desktop (there the ratio-derived height already exceeds 430px on its own). */
/* Kontakt's hero is ALSO .pd-cover-169 (it started as a 16:9 banner matching
   Contact.dc.html literally) but Nikola asked for it to fill the screen like the
   landing page hero instead: exactly calc(100vh - header height), not a fixed
   aspect ratio. Scoped to :first-child so this does NOT affect the landing
   page's own .pd-cover-169 use (the offline-meetup banner further down that
   page, which should stay a real 16:9 photo strip). The min-height itself comes
   from the shared `.pd-page > .wp-block-cover:first-child` rule above (Round-7)
   — this just cancels the fixed ratio so that min-height can act as the actual
   height instead of being overridden by a taller aspect-ratio-derived box. */
.pd-page > .wp-block-cover:first-child.pd-cover-169{aspect-ratio:auto;}

/* ---------- Marquees ---------- */
@keyframes pdMarqueeLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pdMarqueeLeftThird{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
/* This marquee's single group (1164px) is narrower than the section viewport (1500px), so 2 copies + a -50% loop leave a visible empty gap after the last item before the loop catches up. 3 copies + a -33.3333% loop (same per-cycle shift distance, 1164px, so same scroll speed) keeps the visible window always covered. */
.pd-marquee--triple .pd-marquee__track{animation-name:pdMarqueeLeftThird;}
.pd-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);}
.pd-marquee__track{display:flex;width:max-content;animation:pdMarqueeLeft 40s linear infinite;}
.pd-marquee:hover .pd-marquee__track{animation-play-state:paused;}
.pd-marquee__group{display:flex;gap:48px;padding-right:48px;flex:none;}
.pd-marquee__group p{width:340px;flex:none;margin:0;}
.pd-marquee--words .pd-marquee__track{animation-duration:28s;}
.pd-marquee--words .pd-marquee__group{gap:0;align-items:center;}
.pd-marquee--words .pd-marquee__group span{white-space:nowrap;padding-right:56px;}

/* ---------- Accordions (core/details) ---------- */
.pd-accordion .wp-block-details{border-top:1px solid rgba(159,105,31,.3);margin:0;}
.pd-accordion .wp-block-details:last-of-type{border-bottom:1px solid rgba(159,105,31,.3);}
.pd-accordion summary{position:relative;padding:12px 32px 12px 0;cursor:pointer;list-style:none;font-family:var(--wp--preset--font-family--open-sans);font-size:20px;font-weight:500;}
.pd-accordion summary::-webkit-details-marker{display:none;}
.pd-accordion summary::after{content:"+";position:absolute;right:0;top:12px;font-size:20px;line-height:1;color:var(--wp--preset--color--accent-2);}
.pd-accordion .wp-block-details[open] summary::after{content:"\2212";}
.pd-accordion .wp-block-details p{padding-bottom:26px;margin:0;}
.pd-accordion summary:focus,.pd-accordion summary:focus-visible{outline:none;}

/* ---------- Video testimonial gallery ---------- */
.pd-gallery-scroll{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:0 6vw 0 8vw;}
.pd-gallery-scroll::-webkit-scrollbar{display:none;}
.pd-gallery-item{flex:none;width:560px;max-width:85vw;scroll-snap-align:start;}
.pd-video-tile{position:relative;aspect-ratio:16/9;border:1px solid rgba(159,105,31,.35);border-radius:16px;overflow:hidden;cursor:pointer;background:#000;}
.pd-video-tile video{width:100%;height:100%;object-fit:cover;display:block;}
.pd-video-tile__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:opacity .2s ease;}
.pd-video-tile.is-playing .pd-video-tile__play{opacity:0;pointer-events:none;}
.pd-play-circle{width:64px;height:64px;border-radius:50%;background:rgba(44,24,16,.75);display:flex;align-items:center;justify-content:center;}
.pd-play-triangle{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:17px solid #f7f2ea;margin-left:5px;}
.pd-gallery-nav{display:flex;gap:10px;justify-content:flex-end;padding:0 6vw;margin-bottom:32px;}
.pd-gallery-nav button{width:36px;height:36px;border:none;background:transparent;color:var(--wp--preset--color--accent-5);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pd-gallery-nav button:focus,.pd-gallery-nav button:focus-visible{outline:none;}

/* ---------- YouTube click-to-play ---------- */
.pd-youtube{aspect-ratio:16/9;border:1px solid rgba(159,105,31,.35);overflow:hidden;position:relative;cursor:pointer;background:#000;margin-bottom:28px;}
.pd-youtube img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-youtube iframe{width:100%;height:100%;border:none;display:block;}
.pd-youtube figure{margin:0;height:100%;}

/* ---------- Pricing / offer box ---------- */
.pd-offer-box{border:.5px solid var(--wp--preset--color--accent-2);max-width:840px;margin:0 auto;}
.pd-offer-feature{display:flex;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(247,242,234,.15);}
.pd-offer-feature .pd-check{flex:none;width:20px;height:20px;font-size:15px;line-height:20px;text-align:center;}

/* ---------- Misc content helpers ---------- */
.pd-eyebrow{font-size:18px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;margin-bottom:18px;}
.pd-quote-mark{font-family:var(--wp--preset--font-family--eb-garamond);font-size:60px;line-height:.3;margin-bottom:24px;}

@media (max-width:781px){
  .pd-gallery-item{width:85vw;}
}

/* ---------- CTA buttons (design-accurate hover states, override theme default button hover) ---------- */
.pd-cta-brown .wp-block-button__link{transition:background-color .2s ease,color .2s ease;}
.pd-cta-brown .wp-block-button__link:hover,
.pd-cta-brown .wp-block-button__link:focus{background-color:#630c12 !important;color:#ede6d3 !important;border-color:#774625 !important;}
.pd-cta-cream .wp-block-button__link{transition:background-color .2s ease,color .2s ease;}
.pd-cta-cream .wp-block-button__link:hover,
.pd-cta-cream .wp-block-button__link:focus{background-color:#ede6d3 !important;color:#630c12 !important;border-color:#ede6d3 !important;}

/* ---------- Admin-bar offset (only visible to logged-in editors previewing the front end;
   anonymous site visitors never see wp-admin's toolbar, so this has no effect for them) ---------- */
body.admin-bar .pd-header{top:32px;}

/* ---------- Shared site header (full nav) — used everywhere except Linkovi ---------- */
/* position:relative + z-index so the header (and its mobile dropdown, which
   now pushes the header's own box taller when open) always renders above
   page content — including a few pages' fixed-position decorative "parallax
   title" elements (e.g. #pd-omeni-title-wrap, #pd-blog-title-wrap) that set
   their own z-index:1 and a hardcoded top:<px> tuned for the header's normal
   (closed) height. Without this, those titles could render on top of the
   open mobile dropdown instead of staying behind the header, since they'd
   otherwise be comparing z-index:1 against the header's implicit z-index:auto. */
.pd-site-header-outer{position:relative;z-index:10;}
.pd-site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.pd-site-header__logo{display:block;}
.pd-site-header__logo:focus,.pd-site-header__logo:active{outline:none;box-shadow:none;}
.pd-nav .wp-block-navigation__container{display:flex;gap:16px;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.pd-nav .wp-block-navigation-item__content{font-size:13px;letter-spacing:0em;text-transform:uppercase;text-decoration:none;color:#774625!important;font-weight:500;padding:0;}
.pd-nav .wp-block-navigation-item__content:hover{color:#630c12!important;}
.pd-nav .wp-block-navigation-item__content:focus,
.pd-nav .wp-block-navigation-item__content:active{outline:none;box-shadow:none;}

/* Mobile hamburger toggle + dropdown panel — hidden/inert on desktop by
   default; ".pd-nav-panel{display:contents}" here means the wrapper div
   generates no box of its own on desktop, so ".pd-nav" is still a direct
   flex child of ".pd-site-header" exactly as before (space-between between
   logo and nav, unchanged desktop layout). Both get their real mobile
   behavior inside the @media(max-width:781px) block below. */
.pd-nav-toggle{display:none;}
.pd-nav-panel{display:contents;}

/* ---------- Shared site footer — "Mystery letter" + nav columns + monogram + copyright ---------- */
.pd-newsletter{max-width:1200px;margin:0 auto;padding:80px;text-align:center;}
.pd-newsletter__brand{font-family:var(--wp--preset--font-family--eb-garamond);font-style:italic;font-size:60px;line-height:1.4;color:#daa754;max-width:640px;margin:0 auto 24px;}
.pd-newsletter__title{font-family:var(--wp--preset--font-family--open-sans);font-style:normal;font-weight:400;font-size:15px;line-height:1.4;color:#ede6d3;max-width:480px;margin:0 auto 24px;}
.pd-newsletter__intro{font-size:15px;line-height:1.4;color:#ede6d3;max-width:480px;margin:0 auto 24px;font-weight:400;}
.pd-newsletter__soon{font-size:13px;color:#c99a4a;font-style:italic;margin:0;}
.pd-newsletter-form{display:flex;gap:16px;flex-wrap:wrap;max-width:1200px;margin:24px auto 0;align-items:stretch;}
.pd-newsletter-input{flex:1;min-width:140px;border:1px solid #9f691f;background:transparent;padding:18px 20px;font-size:14px;color:#ede6d3;outline:none;text-align:center;font-family:'Open Sans',sans-serif;box-sizing:border-box;}
.pd-newsletter-input::placeholder{color:#ab8b6c;}
.pd-newsletter-submit{padding:18px 28px;color:#ede6d3;background:#774625;border:none;font-size:14px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;cursor:pointer;white-space:nowrap;font-family:'Open Sans',sans-serif;transition:font-style .15s ease;}
.pd-newsletter-submit:hover,
.pd-newsletter-submit:focus{font-style:italic;}
.pd-newsletter-submit[disabled]{opacity:0.6;cursor:default;font-style:normal;}
.pd-newsletter-status{font-size:13px;color:#ede6d3;margin:16px 0 0;min-height:1.2em;}
.pd-newsletter-status--success{color:#daa754;font-style:italic;}
.pd-newsletter-status--error{color:#e8a3a3;}
.pd-footer-credit-link,
.pd-footer-credit-link:link,
.pd-footer-credit-link:visited,
.pd-footer-credit-link:hover,
.pd-footer-credit-link:active{color:inherit;text-decoration:inherit;}
.pd-footer-credit-link:hover{cursor:pointer;}
@media (max-width:600px){
  .pd-newsletter-form{flex-direction:column;}
  /* round-26: Nikola wants "Prijavi Se" the same full width as the input
     fields on mobile. The inputs already stretch to the form's full width
     here (the flex container's default align-items:stretch, unopposed on
     them) — the button was the only one overriding that with
     align-self:center, which shrink-wrapped it instead. Switching it to
     stretch matches the inputs exactly. Desktop (row layout) is untouched. */
  .pd-newsletter-submit{align-self:stretch;}
  /* round-26: the gap between the newsletter block and the footer nav-links
     row below it read as too large on mobile — .pd-newsletter's own 80px
     bottom padding (shared with desktop) was the cause. Tightened to 20px
     on mobile only; desktop keeps its 80px. */
  /* round-35: .pd-newsletter's LEFT/RIGHT padding was still the desktop
     80px on mobile too (only bottom had a mobile override) — on a 375px
     screen that leaves just ~215px of content width, so the title/intro
     text, inputs and button all read as squeezed into a narrow center
     column. Brought down to the same 24px used everywhere else on mobile
     (O Meni, blog list, blog post). Desktop untouched. */
  .pd-newsletter{padding-bottom:20px!important;padding-left:24px!important;padding-right:24px!important;}
}
.pd-footer-columns{max-width:1500px;margin:0 auto;padding:56px 80px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;}
.pd-footer-columns__nav{display:flex;gap:40px;}
.pd-footer-columns__nav--right{justify-content:flex-end;}
.pd-footer-columns__nav a{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;color:#ede6d3;}
.pd-footer-columns__nav a:hover{color:#daa754;}
.pd-footer-columns__nav a:focus,
.pd-footer-columns__nav a:active{outline:none;box-shadow:none;}
.pd-footer-columns__logo{width:160px;height:160px;display:block;margin:0 auto;}

@media (max-width:781px){
  /* Nikola asked for a hamburger + dropdown like tulabranding.studio's
     mobile header (a below-header list that pushes content down, not a
     full-screen overlay), just opening/closing a bit faster than theirs. */
  /* gap:0 here (overriding the desktop 24px) is the actual fix for a bug
     Nikola found: .pd-nav-panel force-wraps onto its own flex line
     (flex-basis:100%, below) even while CLOSED (0 height via the
     grid-template-rows:0fr trick) — but a flex container's `gap` still
     applies BETWEEN wrapped lines regardless of either line's height, so
     the closed (empty) panel line was still adding a full 24px of phantom
     space under the logo/hamburger row, inflating the header height and
     making its padding look asymmetric (extra space at the bottom only).
     Confirmed live: header height dropped from 96px to the correct 72px
     the moment gap was zeroed. The visual gap above the links themselves,
     for when the panel IS open, comes from padding-top:16px already set
     on .pd-nav .wp-block-navigation__container below (inside the
     collapsing box, so it doesn't affect the closed height at all). */
  .pd-site-header{justify-content:space-between;text-align:left;padding-left:20px!important;padding-right:20px!important;gap:0;}
  .pd-site-header__logo img{width:190px!important;height:auto!important;}

  .pd-nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:32px;height:32px;padding:0;margin:0;border:none;background:none;cursor:pointer;flex-shrink:0;}
  .pd-nav-toggle__line{display:block;width:24px;height:2px;background:#774625;transition:transform .15s ease,opacity .15s ease;}
  .pd-nav-toggle[aria-expanded="true"] .pd-nav-toggle__line:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .pd-nav-toggle[aria-expanded="true"] .pd-nav-toggle__line:nth-child(2){opacity:0;}
  .pd-nav-toggle[aria-expanded="true"] .pd-nav-toggle__line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .pd-nav-toggle:focus,
  .pd-nav-toggle:active{outline:none;box-shadow:none;}

  /* Dropdown OVERLAYS the page content instead of pushing it down (Nikola's
     follow-up: the earlier "push content down" version, matching the Tula
     Branding Studio reference literally, wasn't what he actually wanted —
     the panel should float above the hero/content instead, header height
     itself never changing). position:absolute + top:100% anchors it to the
     bottom edge of .pd-site-header-outer (the nearest positioned ancestor,
     position:relative;z-index:10 — see that rule above), so it's fully out
     of normal flow: the header's own box height stays exactly 72px whether
     the menu is open or closed, and nothing below it ever shifts. Needs its
     own opaque background (it now overlays photos/content, not just empty
     page background) and a bit of shadow so it visually reads as "floating
     above" rather than "part of" the page.
     NOTE: this used to animate open/closed via the grid-template-rows
     0fr->1fr trick, but that turned out to be unreliable here specifically
     once the panel became position:absolute — Chrome would sometimes just
     never transition the track size (computed height stuck at 0 even with
     .is-open applied and even overriding grid-template-rows directly via
     inline style), an intermittent rendering quirk, not a specificity/
     cascade bug (verified the CSS itself was correct and in the right
     cascade order both times). Since the panel is now fully out of flow,
     we don't need a height animation at all — opacity+transform (fade +
     slight slide) is the standard reliable way to animate a dropdown like
     this, always GPU-animatable, and the panel's own height is simply
     "auto" (sized to its content) the whole time, no guessed max-height
     pixel value needed. visibility (delayed on close, immediate on open)
     keeps the closed links out of the tab order without adding a layout
     jump. .15s = faster than the Tula Branding Studio reference (theirs
     reads closer to ~0.3-0.4s). */
  .pd-nav-panel{position:absolute;top:100%;left:0;right:0;display:block;background:var(--wp--preset--color--accent-4,#ede6d3);padding:0 20px;box-shadow:0 12px 24px -12px rgba(44,24,16,0.3);z-index:1;opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;}
  .pd-nav-panel.is-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;transition:opacity .15s ease,transform .15s ease,visibility 0s linear 0s;}
  .pd-nav .wp-block-navigation__container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding-top:16px;padding-bottom:20px;}
  .pd-nav .wp-block-navigation-item{width:100%;}
  .pd-nav .wp-block-navigation-item__content{display:block;width:100%;padding:12px 0;}

  /* A few pages (O Meni, Blog listing/category) have their own fixed-position
     decorative "parallax title" element (id ending in -title-wrap, e.g.
     #pd-omeni-title-wrap, #pd-blog-title-wrap) with a hardcoded top:<px>
     tuned for the header's normal (closed) height. While the mobile dropdown
     is open the header is temporarily much taller, so hide these purely
     decorative (pointer-events:none) elements rather than trying to keep a
     hardcoded pixel offset in sync with a variable-height header. */
  body.pd-nav-open [id$="-title-wrap"]{opacity:0!important;}

  /* round-35: same missing-mobile-override bug as .pd-newsletter above —
     .pd-footer-columns kept its desktop 80px side padding on mobile. */
  .pd-footer-columns{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;padding-left:24px!important;padding-right:24px!important;}
  /* round-35: the copyright-line wrapper is a plain wp:group with a
     hardcoded inline style (padding-top:24px;padding-right:80px;
     padding-bottom:24px;padding-left:80px) and, like the rule above,
     never had a mobile override — same fix, same 24px. */
  .pd-site-footer > div[style*="padding-right:80px;padding-bottom:24px;padding-left:80px"]{padding-left:24px!important;padding-right:24px!important;}
  .pd-footer-columns__nav,
  .pd-footer-columns__nav--right{flex-direction:column;align-items:center;gap:16px;justify-content:center;}
}

/* Blog single post — round 13 */
/* round-34: single blog post pages were double-padded on the sides —
   .pd-page (align:full) carries WordPress's root-padding-aware-alignments
   class (.has-global-padding), which applies its own clamp(30px,5vw,50px)
   padding-left/right as real box padding since .pd-blogpost-body is a
   plain (non-alignfull) centered column, not an escaping alignfull block
   like .pd-blog-body on the blog LIST page. So .pd-blogpost-body's own
   80px/56px+24px padding was stacking on top of the page's root padding
   (confirmed live: 30px root + 24px own = 54px total on mobile, vs the
   blog list page's clean 24px-only gutter). Because .pd-blogpost-body is
   centered via max-width+margin:auto rather than full-bleed, it can't use
   the usual alignfull "escape" margin trick (that would blow away the
   intentional narrow reading-column centering on desktop) — instead we
   zero the root padding at the .pd-page level for this template only, so
   .pd-blogpost-body's own padding becomes the sole gutter, matching the
   blog list page. Confirmed harmless on desktop: removing the page's own
   padding there just lets the auto-margin centering absorb the same
   amount, so nothing visibly shifts at wide widths — the whole effect is
   mobile-only, where it doesn't have the auto-margin to hide behind. */
body.single-post .pd-page{
  padding-left:0!important;
  padding-right:0!important;
}
.pd-blogpost-body{max-width:1040px;margin:0 auto;padding:80px;display:grid;grid-template-columns:1fr 220px;gap:48px;align-items:start;}
.pd-blogpost-article{max-width:720px;}
.pd-blogpost-date{font-family:'Open Sans',sans-serif;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:#9f691f;font-weight:500;margin-bottom:20px;display:block;}
.pd-blogpost-title{font-family:'EB Garamond',serif;font-size:60px;line-height:1.15;margin:0 0 80px;color:#774625;font-weight:400;letter-spacing:-2px;}
.pd-blogpost-content p{font-family:'Open Sans',sans-serif;font-size:18px;line-height:1.35;color:#774625;margin:0 0 24px;}
.pd-blogpost-content ul,.pd-blogpost-content ol{padding-left:18px;margin:0 0 24px;}
.pd-blogpost-content li{font-family:'Open Sans',sans-serif;font-size:18px;line-height:1.35;color:#774625;}
.pd-blogpost-content h1,.pd-blogpost-content h2,.pd-blogpost-content h3{font-family:'EB Garamond',serif;font-size:48px;line-height:1.3;color:#774625;font-weight:400;margin:80px 0 20px;letter-spacing:-0.5px;}
.pd-blogpost-content img{width:100%;height:auto;margin:80px 0 20px;display:block;}
.pd-blogpost-nav{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:28px;padding-top:32px;}
.pd-blogpost-nav a:focus,
.pd-blogpost-nav a:active{outline:none;box-shadow:none;}
.pd-blogpost-nav .wp-block-post-navigation-link{font-family:'EB Garamond',serif;font-size:32px;font-style:italic;color:#774625;display:flex;flex-direction:column;max-width:45%;}
.pd-blogpost-nav .wp-block-post-navigation-link a{color:#774625;text-decoration:none;}
.pd-blogpost-nav .wp-block-post-navigation-link__arrow-previous,
.pd-blogpost-nav .wp-block-post-navigation-link__arrow-next{order:-1;margin-bottom:12px;font-size:0;line-height:0;display:block;}
.pd-blogpost-nav .wp-block-post-navigation-link__arrow-previous::before{content:"";display:inline-block;width:56px;height:14px;background:url("data:image/svg+xml,%3Csvg width='56' height='14' viewBox='0 0 56 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55 7H1M1 7L8 1M1 7L8 13' stroke='%239f691f' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat;}
.pd-blogpost-nav .wp-block-post-navigation-link__arrow-next::before{content:"";display:inline-block;width:56px;height:14px;background:url("data:image/svg+xml,%3Csvg width='56' height='14' viewBox='0 0 56 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7H55M55 7L48 1M55 7L48 13' stroke='%239f691f' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat;}
.pd-blogpost-nav-prev{align-items:flex-start;text-align:left;}
.pd-blogpost-nav-next{align-items:flex-end;text-align:right;}
.pd-blogpost-nav-all{display:flex;flex-direction:column;align-items:flex-start;text-align:left;font-family:'EB Garamond',serif;font-size:32px;font-style:italic;color:#774625;text-decoration:none;max-width:45%;}
.pd-blogpost-nav-all-arrow{order:-1;margin-bottom:12px;font-size:0;line-height:0;display:block;}
.pd-blogpost-nav-all-arrow::before{content:"";display:inline-block;width:56px;height:14px;background:url("data:image/svg+xml,%3Csvg width='56' height='14' viewBox='0 0 56 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55 7H1M1 7L8 1M1 7L8 13' stroke='%239f691f' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat;}
.pd-blogpost-nav-all:hover{color:#9f691f;}
.pd-blogpost-nav-next.pd-blogpost-nav-all{align-items:flex-end;text-align:right;}
.pd-blogpost-nav-prev:empty,
.pd-blogpost-nav-next:empty{display:none !important;}
.pd-blogpost-sidebar{display:flex;flex-direction:column;}
.pd-blogpost-cats{display:flex;flex-direction:column;}
.pd-blogpost-cats a{display:block;font-family:'Open Sans',sans-serif;font-size:15px;color:#774625;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(119,70,37,0.2);}
.pd-blogpost-cats a:focus,
.pd-blogpost-cats a:active{outline:none;box-shadow:none;}
@media (max-width:900px){
  .pd-blogpost-body{grid-template-columns:1fr;padding:56px 24px;gap:0;}
  .pd-blogpost-sidebar{order:-1;flex-direction:row;flex-wrap:wrap;gap:0 24px;margin-bottom:24px;}
  /* round-32: on mobile the prev/next/"Sve blog objave" nav links were
     wrapping word-by-word (each a 45%-wide column at the desktop 32px
     size, far too narrow), reading as a stack of single words instead of
     one line of text, with a large gap between each wrapped word-line.
     First attempt forced each link to full row width (flex:0 0 100%),
     which fixed the word-by-word wrap but made the two links stack one
     fully below the other — Nikola clarified he wants them side by side
     in the same row (like desktop), just smaller/tighter, even if a
     longer title still wraps onto 2 natural lines within its own half of
     the row. Fix: force the row to stay single-line (flex-wrap:nowrap,
     overriding the parent's default wrap) and give each link an equal
     flexible half-share (flex:1 1 0) instead of a fixed 45% column, so
     they always sit side by side regardless of content length. Font
     dropped a bit (32px -> 22px) and line-height trimmed from the
     inherited 1.4 toward 1.2 (roughly half the extra leading above 1) —
     both already confirmed as improvements. */
  .pd-blogpost-nav{
    flex-wrap:nowrap;
    gap:16px;
  }
  .pd-blogpost-nav .wp-block-post-navigation-link,
  .pd-blogpost-nav-all{
    max-width:none;
    flex:1 1 0;
    font-size:22px;
    line-height:1.2;
  }
}

/* Klub Carobnica page */
.pd-klub-hero{position:relative;min-height:calc(100vh - var(--pd-header-height, 82px));overflow:hidden;background:#e3d8bd;display:flex;align-items:flex-end;justify-content:center;}
.pd-klub-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to bottom,transparent,#ede6d3);pointer-events:none;}
.pd-klub-hero-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ab8b6c;font-size:14px;text-transform:uppercase;letter-spacing:0.08em;font-family:'Open Sans',sans-serif;text-align:center;padding:0 24px;}
.pd-klub-hero-content{position:relative;z-index:1;padding:0 56px 56px;text-align:center;max-width:1000px;}
/* round-52, 2026-10-06: the Klub hero is now a native core/cover with a looping muted mp4 background
   (was a wp:html section with a photo placeholder). The cover's own inner container is full width,
   so the text group needs auto side margins to keep sitting centered at its 1000px max-width, exactly
   like before. The bottom fade-to-cream gradient (::after above + the generic first-child-cover rule)
   is unchanged and still sits between the video and the text, keeping the brown title readable. */
.wp-block-cover.pd-klub-hero .pd-klub-hero-content{margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box;}
.pd-klub-hero-title{font-family:'EB Garamond',serif;font-size:clamp(60px,9vw,150px);line-height:0.9;margin:0;color:#774625;font-weight:400;letter-spacing:0;}
.pd-klub-hero-sub{font-family:'Open Sans',sans-serif;font-size:clamp(13px,1.4vw,18px);letter-spacing:-0.01em;text-transform:uppercase;color:#774625;margin:12px 0 0;font-weight:600;}

/* round-54: Klub Čarobnica sections are native blocks now — WP's flow-layout block-gap (margin-block-start on every sibling) must not add space the old hand-written markup never had; specific margins below/after still win by order. */
.pd-kontakt-intro{font-size:18px;letter-spacing:-0.3px;line-height:1.5;} /* round-58: Kontakt intro paragraph (was inline style on a wp:html <p>); a class because WP clamps a custom fontSize attribute (fluid typography) */
.pd-klub-intro-inner>*,.pd-klub-benefits-inner>*,.pd-klub-benefits-list>*,.pd-klub-benefits-heading>*,.pd-klub-pricing>*,.pd-klub-pricing-grid>*,.pd-klub-price-card>*,.pd-klub-price-head>*,.pd-klub-price-body>*,.pd-klub-price-features>*,.pd-klub-price-feature>*,.pd-klub-price-amount>*,.pd-klub-closing>*,.pd-klub-closing-inner>*{margin-block-start:0;}
.pd-klub-intro{padding:80px 80px 80px;text-align:center;}
.pd-klub-intro-inner{max-width:1040px;margin:0 auto;}
.pd-klub-intro-lead{font-family:'EB Garamond',serif;font-size:44px;line-height:1.05;margin:0 auto 56px;color:#774625;max-width:1000px;font-weight:300;letter-spacing:-0.5px;}
.pd-klub-intro-body{font-family:'Open Sans',sans-serif;font-size:18px;line-height:1.7;margin:0 auto;color:#774625;max-width:640px;letter-spacing:-0.5px;}

@keyframes pd-klub-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pd-klub-gallery{padding:0 0 80px;overflow:hidden;background-color:#ede6d3;}
.pd-klub-gallery-viewport{position:relative;overflow:hidden;}
.pd-klub-gallery-track{display:flex;width:max-content;animation:pd-klub-marquee 32s linear infinite;}
.pd-klub-gallery-set{display:flex;gap:24px;padding-right:24px;}
.pd-klub-gallery-item{flex:none;width:380px;aspect-ratio:3/4;background:#e3d8bd;display:flex;align-items:center;justify-content:center;color:#ab8b6c;font-size:13px;text-transform:uppercase;letter-spacing:0.08em;font-family:'Open Sans',sans-serif;}
/* round-53, 2026-10-06: the Klub gallery is now a MarqueeX Image Marquee block (editable photos) inside
   the same .pd-klub-gallery wrapper (padding-bottom 80px + #ede6d3 bg above), instead of the hand-built
   wp:html placeholder track. The plugin's own image styles are generic "card" styles (8px rounded corners,
   hover lift + shadow, blue hover border, 12px block radius) -- this site is sharp-cornered and the original
   gallery had no hover effect at all, so neutralize all of that for this instance only. Image size (380x570),
   gap (1.5rem = 24px) and speed live in the block's own settings, not here. */
.pd-klub-gallery .marqueex-marquee-block{border-radius:0;box-shadow:none;outline:none;}
.pd-klub-gallery .marqueex-marquee-block.marqueex-image-marquee .marqueex-image-item,.pd-klub-gallery .marqueex-image-link,.pd-klub-gallery .marqueex-marquee-image{border-radius:0;} /* the item's 8px comes from the plugin's own inline stylesheet at (0,3,0) specificity -- the link/img just `inherit` it, so only the item needs the beefed-up selector */
.pd-klub-gallery .marqueex-marquee-image{border:0;box-shadow:none;}
.pd-klub-gallery .marqueex-image-item:hover,.pd-klub-gallery .marqueex-image-link:hover{transform:none;box-shadow:none;}
.pd-klub-gallery .marqueex-marquee-image:hover{border-color:transparent;box-shadow:none;}

.pd-klub-benefits{padding:0 80px 80px;}
.pd-klub-benefits-inner{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:0.5fr 1.5fr;gap:48px;align-items:start;}
.pd-klub-benefits-heading h3{font-family:'EB Garamond',serif;font-size:50px;color:#774625;margin:0;font-weight:400;letter-spacing:-1px;white-space:nowrap;}
.pd-klub-benefits-list{display:flex;flex-direction:column;gap:2px;max-width:640px;margin-left:auto;}
.pd-klub-benefit-item{padding:12px 0;border-top:1px solid rgba(159,105,31,0.3);}
.pd-klub-benefit-item--last{border-bottom:1px solid rgba(159,105,31,0.3);}
.pd-klub-benefit-item p{font-size:18px;line-height:1.4;color:#774625;margin:0;font-weight:400;font-family:'Open Sans',sans-serif;}

.pd-klub-pricing{padding:80px 80px;background-color:#774625;}
.pd-klub-pricing-title{font-family:'EB Garamond',serif;font-size:50px;color:#ede6d3;text-align:center;margin:0 0 80px;font-weight:300;}
.pd-klub-pricing-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.pd-klub-price-card{border-radius:0;overflow:hidden;background-color:transparent;border:0.5px solid #9f691f;display:flex;flex-direction:column;}
.pd-klub-price-head{padding:44px 40px 8px;text-align:center;}
.pd-klub-price-head h2{font-family:'EB Garamond',serif;font-size:40px;color:#f7f2ea;margin:0 0 16px;font-weight:400;letter-spacing:-1px;}
.pd-klub-price-num{font-family:'Open Sans',sans-serif;font-size:36px;color:#f7f2ea;font-weight:600;}
.pd-klub-price-period{font-size:14px;color:#ede6d3;margin-left:6px;font-weight:600;font-family:'Open Sans',sans-serif;}
.pd-klub-price-body{padding:80px 40px 80px;flex:1;display:flex;flex-direction:column;}
.pd-klub-price-features{display:flex;flex-direction:column;flex:1;justify-content:center;}
.pd-klub-price-feature{display:flex;gap:12px;align-items:center;padding:22px 0;border-top:1px solid rgba(247,242,234,0.15);}
.pd-klub-price-feature--last{border-bottom:1px solid rgba(247,242,234,0.15);}
.pd-klub-price-check{flex:none;width:20px;height:20px;color:#ede6d3;font-size:15px;line-height:20px;text-align:center;}
.pd-klub-price-feature p{margin:0;font-size:15px;line-height:1.5;color:#ede6d3;letter-spacing:-0.5px;font-weight:400;font-family:'Open Sans',sans-serif;}
.pd-klub-price-cta{display:block;text-align:center;margin-top:80px;padding:18px 0;color:#ede6d3;text-decoration:none;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;background-color:#9f691f;font-family:'Open Sans',sans-serif;}
.pd-klub-price-cta:hover{font-style:italic;color:#ede6d3;}
.pd-klub-pricing-note{max-width:1100px;margin:40px auto 0;text-align:center;}
.pd-klub-pricing-note p{font-family:'Open Sans',sans-serif;font-size:18px;color:#ede6d3;margin:0;}

.pd-klub-closing-inner{position:relative;background:linear-gradient(rgba(20,10,5,0.25),rgba(20,10,5,0.25)),url('../images/klub-carobnica/closing-bg.jpg') center/cover no-repeat;padding:160px 160px;}
.pd-klub-closing-quote{font-family:'EB Garamond',serif;font-weight:400;font-size:clamp(32px,5vw,50px);line-height:1.15;color:#ede6d3;margin:0 auto;letter-spacing:-0.01em;font-style:italic;max-width:840px;text-align:center;}
/* round-54 (cont.): price amount (two paragraphs in a flex row = the old two inline spans) and the CTA as a real core/button */
.pd-klub-price-amount{display:flex;justify-content:center;align-items:baseline;}
.pd-klub-price-amount p{margin:0;}
.pd-klub-price-amount .pd-klub-price-period{margin-left:6px;}
.pd-klub-price-feature .pd-klub-price-check{line-height:20px;font-weight:300;letter-spacing:-0.1px;}
.pd-klub-price-body .pd-klub-price-cta-wrap{margin-top:80px;margin-bottom:0;display:block;}
.pd-klub-price-cta-wrap .wp-block-button.pd-klub-price-btn{width:100%;display:block;}
.pd-klub-price-btn .wp-block-button__link{display:block;width:100%;box-sizing:border-box;text-align:center;margin:0;padding:18px 0;border-radius:0;border:0;color:#ede6d3;text-decoration:none;font-size:14px;line-height:1.4;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;background-color:#9f691f;font-family:'Open Sans',sans-serif;}
.pd-klub-price-btn .wp-block-button__link:hover{font-style:italic;color:#ede6d3;background-color:#9f691f;}
.pd-klub-pricing .pd-klub-pricing-note{margin:40px auto 0;}

@media (max-width:900px){
  .pd-klub-benefits-inner{grid-template-columns:1fr;}
  .pd-klub-benefits-list{margin-left:0;max-width:100%;}
  .pd-klub-pricing-grid{grid-template-columns:1fr;}
  .pd-klub-gallery-item{width:280px;}
}
@media (max-width:600px){
  .pd-klub-hero-content,.pd-klub-intro,.pd-klub-pricing,.pd-klub-closing-inner{padding-left:24px;padding-right:24px;}
  .pd-klub-benefits{padding-left:24px;padding-right:24px;}
  .pd-klub-benefits-heading h3{white-space:normal;} /* round-55: nowrap 50px heading made the whole page ~457px wide on phones */
  .pd-klub-intro-lead{font-size:28px;} /* round-57: 44px was too big on phones */
}

/* Home page — Soul Letters cards (round-24): fixed-width, fixed-height cards
   (not masonry like the blog listing — every card here must be identical size),
   image cropped to a consistent 3:4 box via the padding-top aspect-ratio trick
   (more reliable across browsers than the CSS aspect-ratio property on a
   replaced <img> that already carries width/height attributes from WordPress). */
.pd-home-blog-card{display:flex;flex-direction:column;text-decoration:none;width:calc((100% - 3*32px)/3.5);min-width:220px;flex:0 0 auto;}
.pd-home-blog-card:focus,
.pd-home-blog-card:active{outline:none;box-shadow:none;}
.pd-home-blog-card-img{position:relative;width:100%;padding-top:133.333%;margin-bottom:20px;overflow:hidden;background:#e3d8bd;flex-shrink:0;}
.pd-home-blog-card-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.pd-home-blog-card-img .pd-home-blog-card-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ab8b6c;font-size:13px;text-transform:uppercase;letter-spacing:0.08em;text-align:center;padding:0 12px;}

/* ---------- Home page native-block conversion (round-51) ----------
   round-51, 2026-10-02: the Home page's 4 non-editable wp:html sections
   (.pd-home-legacy, .pd-home-free-resource, .pd-home-omeni, .pd-home-blog)
   are being converted to native WordPress blocks, same approach as the
   Poziv Duše page conversions. Each section keeps its original class name
   on its new native-block wrapper so all the existing (and mobile) CSS
   below keeps working unchanged. */

/* .pd-home-blog: the nav row and the scroll container both lost their
   original inline max-width:1500px/margin:0 auto centering when converted
   from raw wp:html to native blocks -- restored here (round-51). The
   scroll container also lost its own overflow-x:auto/scrollbar-hiding,
   now on the block's anchor id (core/group's "anchor" attribute puts the
   real id="pd-home-blog-scroll" on the saved/rendered output, same as the
   original raw markup -- the editor's own iframe shows its own internal
   block-tracking id instead, that's an editor-only artifact, not a bug). */
.pd-home-blog-nav-row{max-width:1500px;margin-left:auto;margin-right:auto;}
#pd-home-blog-scroll{max-width:1500px;margin-left:auto;margin-right:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
#pd-home-blog-scroll::-webkit-scrollbar{display:none;}
/* core/image wraps the Soul Letters mark in a <figure> with default
   margin -- neutralize so it doesn't throw off the heading's own flex gap
   (same pattern as .pd-youtube figure / .pd-omeni-photo above). */
.pd-home-blog-heading figure{margin:0;}
.pd-home-blog-mark img{width:200px;height:auto;display:block;}

/* .pd-home-omeni: the two-column grid itself (.pd-home-omeni-grid) is a
   plain core/group with no "layout" attribute (project convention) -- its
   CSS grid display/columns/gap can't be expressed via block style supports,
   so it's defined here 1:1 from the original inline styles, including its
   own non-standard 900px collapse breakpoint (NOT the sitewide 781px used
   elsewhere -- kept exactly as it was to match the original design). */
.pd-home-omeni-grid{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:1fr 0.8fr;gap:130px;align-items:start;}
@media (max-width:900px){
	.pd-home-omeni-grid{grid-template-columns:1fr!important;gap:40px!important;}
}

/* bio photo: core/image's figure wrapper needs the usual margin/height
   neutralization (see .pd-youtube figure above), plus the original's own
   4:5 aspect-ratio/object-fit sizing. */
.pd-omeni-photo{margin:0;}
.pd-omeni-photo img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;display:block;}

/* CTA hover/focus -- ported verbatim from the original .pd-omeni-cta rules,
   re-scoped to the button block's wrapper (same pattern as pd-legacy-cta). */
.pd-home-omeni .wp-block-button.pd-omeni-cta .wp-block-button__link{transition:font-style .2s ease;}
.pd-home-omeni .wp-block-button.pd-omeni-cta .wp-block-button__link:hover{font-style:italic;}
.pd-home-omeni .wp-block-button.pd-omeni-cta .wp-block-button__link:focus,
.pd-home-omeni .wp-block-button.pd-omeni-cta .wp-block-button__link:active{outline:none;box-shadow:none;}

/* .pd-home-free-resource: reuses the existing .pd-youtube component (same
   video, same component already built for the Poziv Duše page's click-to-
   play tile) -- but the original Home design had no border on this tile
   (unlike the Poziv Duše usages, which all have the gold-ish border). Only
   difference, scoped to this one instance. */
.pd-home-free-resource .pd-youtube{border:none;}

/* .pd-home-legacy: now a core/cover block. core/cover renders its image as
   a plain <img class="wp-block-cover__image-background"> with
   object-fit:cover (no zoom) -- the original markup used a CSS
   `background:url(...) center/140% no-repeat` on the section itself for a
   zoomed-in look. Reproduced with a CSS transform instead (object-fit
   already centers/crops; scaling the img itself around its own center
   gives the same zoomed, centered result). overflow:hidden on the wrapper
   clips the scaled-up image back to the section's bounds, matching the
   original section's own `overflow:hidden`. */
.pd-home-legacy{overflow:hidden;}
.pd-home-legacy .wp-block-cover__image-background{transform:scale(1.4);}

/* The button block's hover/focus states aren't expressible via block
   supports -- ported verbatim from the original .pd-legacy-cta rules,
   re-scoped to the new button wrapper (core/button renders the class on
   the OUTER div, with the link itself carrying .wp-block-button__link). */
.pd-home-legacy .wp-block-button.pd-legacy-cta .wp-block-button__link{transition:background-color .2s ease,color .2s ease;}
.pd-home-legacy .wp-block-button.pd-legacy-cta .wp-block-button__link:hover{background:#ede6d3!important;color:#774625!important;}
.pd-home-legacy .wp-block-button.pd-legacy-cta .wp-block-button__link:focus,
.pd-home-legacy .wp-block-button.pd-legacy-cta .wp-block-button__link:active{outline:none;box-shadow:none;}

/* ---------- Home page mobile fixes (round-25) ----------
   Nikola did a full mobile pass on the Home page only (not site-wide) — all
   selectors below are scoped to Home-page-only classes (.pd-home-*), so
   nothing here touches any other page's mobile layout. */

/* 1) Hero heading ("Dobro došla u školu misterija") fixed at 55px on mobile.
   Higher specificity than the shared .pd-page > .wp-block-cover:first-child h1
   rule above (which still governs every OTHER page's first-cover heading) so
   this wins without needing to touch that shared rule. Scoped inside the same
   mobile breakpoint as everything else in this section — desktop keeps its
   existing clamp()-based size untouched. */
/* round-38, 2026-09-30: lowered 55px -> 50px after the heading text changed
   from "Dobro došla" (two words) to "Dobrodošla" (one word, per Serbian
   orthography — dobrodošao/dobrodošla/dobrodošli is written as one word
   when used as a welcome greeting). The single long word no longer had a
   natural wrap point there, so it overflowed its box at 55px (confirmed
   live: scrollWidth 357px vs a 327px-wide box after the padding fix below).
   Tested 52/50/48/46/44px live via scrollWidth vs clientWidth — 50px is the
   largest size with zero overflow (327==327), so kept as close to the
   original 55px as possible while actually fitting. */
@media (max-width:781px){
  .pd-page > .wp-block-cover.pd-home-hero:first-child h1{font-size:50px!important;}

  /* round-38, 2026-09-30: hero's own inline left/right padding (56px) was
     never reduced for mobile — unlike every other Home section (already
     normalized to 20px in round-25/26) and the rest of the site (24px
     standard — see the footer, blog, and Klub Čarobnica mobile fixes).
     Root padding itself is properly escaped here (confirmed live: hero's
     rendered box is x:0, width:375 at a 375px viewport, with WP's own
     -30px escape margin already canceling .pd-page's root padding) — the
     narrow content width was entirely this 56px own-padding, not root-
     padding stacking. Brought down to the sitewide 24px standard. */
  .pd-page > .wp-block-cover.pd-home-hero:first-child{
    padding-left:24px!important;
    padding-right:24px!important;
  }

  /* 2/3) Nikola: every Home section reads too cramped on mobile — normalize
     left/right padding across all of them (each currently has its own
     larger desktop-tuned inline padding: 80px/160px). Vertical padding is left
     untouched here — only horizontal. CORRECTED round-26: first pass used
     50px, Nikola clarified it should be 20px. */
  .pd-page > .wp-block-group[style*="padding-top:80px;padding-right:80px;padding-bottom:56px;padding-left:80px"],
  .pd-home-legacy,
  .pd-home-free-resource,
  .pd-home-omeni,
  .pd-home-blog-nav-row,
  #pd-home-blog-scroll{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  /* round-26 item 2: the big visual "gap" Nikola saw between "Spoznaj ko
     si..." and "Sofisticirana Intuicija" is not a margin between the two
     sections — it's .pd-home-legacy's own inline vertical padding (216px
     top/bottom, untouched by the horizontal-only fix above) creating a dead
     zone after the CTA button before the next section's own 80px top
     padding kicks in. Confirmed live via getBoundingClientRect() before/
     after (section height 986px -> 680px). Tightened to 100px top/bottom on
     mobile only — desktop keeps its 216px. */
  .pd-home-legacy{padding-top:100px!important;padding-bottom:100px!important;}

  /* round-26 item 4: the "Ovde učim čarobnice"/"Ti si uspešna žena" hero
     intro text sits inside a nested wp:group that is itself `alignfull` with
     WordPress's own `has-global-padding` mechanism — the same class of bug
     already documented under item 7 below, but on a DIFFERENT nested group.
     It gets a WP-generated margin-left/right:-80px which cancels out (and
     then some) the outer group's own left/right padding above, so this text
     rendered with effectively zero inset. Confirmed live: this inner
     group's rendered box was at x:-30..405 in a 375px viewport (bleeding
     past both edges) before this fix, and x:20..355 (matching the outer
     20px padding) after it. Scoped to this exact nested-group structure
     (via the same outer-group attribute selector used above) so it can't
     affect any other alignfull block on this or any other page. */
  .pd-page > .wp-block-group[style*="padding-top:80px;padding-right:80px;padding-bottom:56px;padding-left:80px"] > .wp-block-group.alignfull{
    margin-left:0!important;
    margin-right:0!important;
    width:auto!important;
  }

  /* round-26 item 1: "Sofisticirana Intuicija" at its default 50px overflowed
     its own box on mobile (confirmed live: scrollWidth 377px vs a 275px-wide
     box at the old 50px padding — the two words don't wrap and bleed past
     the right edge). Shrunk so it wraps cleanly with room to spare at the
     new 20px padding too (confirmed live: scrollWidth == clientWidth after,
     335px == 335px). */
  .pd-home-free-resource h3{font-size:32px!important;}

  /* round-26 item 6: "Upoznaj Me" is a shrink-wrapped inline-block CTA inside
     a full-width column with no text-align set, so it sat at the column's
     left edge on mobile once the "O meni" grid collapsed to one column.
     Switching it to a centered table box only changes its own box model
     (the surrounding paragraphs keep their left-aligned text), and only
     inside this mobile breakpoint — desktop keeps the left-aligned CTA. */
  .pd-omeni-cta{display:table!important;margin-left:auto!important;margin-right:auto!important;}

  /* round-27: Nikola — the actual O Meni PAGE (not the Home page's "O Meni"
     preview section above, a different element despite the similar class
     name) reads too cramped/centered-in-a-narrow-column on mobile ("sve
     prezbijeno u sredini"). Root cause: its two content sections are raw
     wp:html blocks with their own inline padding:108px 80px 80px / padding:
     0 80px 80px — 80px of horizontal padding never got the same mobile
     normalization the Home page sections got in round-25/26, because that
     fix's selector only matches wp:group blocks with one exact longhand
     padding string, which these plain <section> blocks don't use (and they
     have no class of their own to target, same as the Home page blocks
     above, hence the same attribute-selector-on-exact-inline-style
     technique rather than adding a new class — this stays a pure CSS/
     theme-file change, no WP page-content edit needed). Same target value
     as Home's own fix: 20px. Vertical padding intentionally left untouched,
     same reasoning as Home's fix above.
     ROUND-27 FOLLOW-UP (still 2026-09-24) — Nikola caught that the first
     pass above wasn't enough: .pd-page carries theme.json's
     "useRootPaddingAwareAlignments" (.has-global-padding, resolving to
     clamp(30px,5vw,50px) → 30px at mobile widths). On the Home page that
     root padding is harmless because Home's own alignfull sections have NO
     inline margin of their own, so WordPress core's normal ".is-layout-
     constrained > .alignfull" rule (margin-left/right: calc(50% - 50vw))
     applies and they escape pd-page's padding box entirely — their 20px is
     the ONLY padding. These two O Meni sections, though, carry their own
     inline `margin:0 auto` (originally there to self-center their
     max-width:820px column) — an inline style, which beats that core class
     rule, so they never actually escape; they just sit inside pd-page's
     still-live 30px padding box and add their own padding on top. Net
     result before this follow-up: 30px (root, still there) + 20px (ours) =
     50px total on mobile, exactly the doubled padding Nikola flagged, not
     the clean 20px intended. Fix: force the real alignfull escape back on
     with !important (which DOES beat an inline style, unlike a plain class
     rule) for just these two sections, at this breakpoint only — same
     mechanism Home's sections get "for free", just made to win here too.
     Once escaped, max-width:820px + the inline margin:auto still centers
     the box exactly as before whenever the viewport is wide enough to
     matter (irrelevant at mobile widths, where the box fills 100% anyway) —
     desktop is untouched since this whole block only applies under
     max-width:781px. */
  section[style*="padding:108px 80px 80px"],
  section[style*="padding:0 80px 80px"]{
    padding-left:20px!important;
    padding-right:20px!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
}

/* 4) "Soul Letters" now has a capital L (home-page-content.html text fixed
   directly — no CSS text-transform hack needed/used here). */

/* 5) Prev/next scroll arrows had the same recurring focus/click-border gap
   already fixed project-wide on many other elements — never scoped to these
   two buttons specifically until now. */
/* round-26 follow-up (correction): arrows vs "Soul Letters" alignment is a
   GLOBAL fix, not mobile-only — Nikola reported the same "arrows centered
   against the whole tall heading block" bug on DESKTOP too (round-25's
   align-items:flex-end fix was scoped only inside the mobile media query
   above). Also corrected WHERE the padding-bottom goes: a first attempt put
   it on the .pd-home-blog-nav-row container, which doesn't change the
   buttons' position relative to the text at all — both the heading column
   and the buttons are already flex-end-aligned to the same content-box
   line, so row-level padding only added space below the whole row, not
   between the arrows and the text above them. Confirmed live: with
   align-items:flex-end alone, the button boxes already bottom-align exactly
   with the "Soul Letters" text (button-box bottom == text bottom in a live
   desktop measurement). The padding Nikola actually wants — verified by his
   own inspect-element pass — shifts the arrow GLYPH itself up from that
   shared line, which only works when applied to the buttons directly. */
.pd-home-blog-nav-row{align-items:flex-end!important;}
#pd-home-blog-prev,
#pd-home-blog-next{padding-bottom:20px!important;}

#pd-home-blog-prev:focus,
#pd-home-blog-prev:active,
#pd-home-blog-next:focus,
#pd-home-blog-next:active{outline:none;box-shadow:none;}

/* 7) CONFIRMED live via computed-style testing in local Studio (round-25
   follow-up): the page-level horizontal scroll was NOT actually coming
   from the Soul Letters cards at all (those are properly contained by
   #pd-home-blog-scroll's own overflow-x:auto — confirmed independently
   scrollable). The real cause is WordPress core's own "alignfull" nested
   wp:group mechanism: the intro text block above "Spoznaj ko si..."
   (`align:full` + its own `layout:constrained`, nested inside `.pd-page`,
   which is already full-width) gets a WP-generated negative margin
   (`margin-left/right:-80px`, from `has-global-padding`) that doesn't
   fully reconcile with its own compensating padding at this viewport,
   overflowing ~30px past the viewport on each side — confirmed via
   `getBoundingClientRect()` on the live page (this block's rendered box:
   left -30, right 405 at a 375px-wide viewport). This is a real,
   pre-existing WordPress-core rendering quirk on this specific nested
   alignfull block, not something introduced by any of this round's
   changes.
   Fixed with a hard fence, scoped to the Home page only via the `home`
   body class WordPress adds on the front page (confirmed present via
   `document.body.className`; portable between local/production since it
   depends on the Reading-settings front-page choice, not a specific
   page ID) — this guarantees NOTHING on the Home page can ever expand
   html/body's own scrollable width, regardless of which element causes
   it (this one today, potentially another one from a future edit),
   while everything with its own explicit overflow-x:auto (the Soul
   Letters card scroller) keeps scrolling internally exactly as before —
   confirmed live: `#pd-home-blog-scroll.scrollWidth > .clientWidth` still
   true after applying the fence, i.e. the cards still scroll. */
body.home .pd-page{overflow-x:hidden;}
/* Kept as an extra, harmless second fence around the Soul Letters section
   specifically (redundant with the fix above, but cheap insurance). */
.pd-home-blog{overflow-x:hidden;}

/* 8) CORRECTED (round-25 follow-up, confirmed live in local Studio):
   `#pd-home-blog-scroll`'s own trailing padding-right does not extend the
   scrollable area (a known "trailing padding on a scroll container is
   dropped" quirk) — and margin-right on the last `.pd-home-blog-card` was
   ALSO confirmed live to have zero effect (tested directly: scrollWidth
   didn't change at all). The only technique confirmed to actually work is
   a real flex item after the last card — but even that silently failed to
   count toward scrollWidth until it was given real cross-axis size
   (`align-self:stretch`; a plain width-only spacer with the default 0
   height was also confirmed live to be ignored). `functions.php`'s
   shortcode now appends a `.pd-home-blog-spacer` div after the cards;
   sized here to match the container's own left/right padding value at
   each breakpoint (accounting for the row's 32px `gap`, which still
   applies before this item) so the trailing visual gap matches the
   leading one exactly — confirmed live: 50px gap after the last card at
   full scroll on mobile, as things stood before round-26.
   CORRECTED round-26: mobile padding dropped from 50px to 20px, but this
   row's own 32px `gap` alone already exceeds that, so an exact 20px
   trailing match isn't reachable this way. A spacer basis of 0 was tested
   live and collapses the trailing gap to 0 entirely (the same "trailing
   space is dropped" quirk turns out to apply to a truly zero-size item
   too, not just zero padding/margin) — kept a small nonzero basis instead
   (confirmed live to reliably produce a real trailing gap: 36px), the
   closest this 32px gap floor allows to the new 20px leading padding. */
.pd-home-blog-spacer{flex:0 0 48px;align-self:stretch;}
@media (max-width:781px){
  .pd-home-blog-spacer{flex:0 0 4px;}
}

/* 9) See functions.php — natalija_by_tula_soul_letters_shortcode() now caps
   posts_per_page at 10 so the scroller never grows unbounded as more blog
   posts get published. */

/* ---------- Poziv Duše page — narrow-column paragraph fix (round 39, 2026-10-01)
   Pre-existing content corruption on this page (see
   project_poziv-duse-nested-p-corruption-fix.md): 19 paragraph blocks had a
   redundant <p> nested inside their own RichText content, which made the
   affected section look empty/non-editable in Gutenberg (and, once this was
   pushed to production, made those 19 blocks fail WP's block-validation
   check entirely — "This block contains unexpected or invalid content").
   Fixed by stripping the nested tag down to plain text and merging each
   block's real styling into its own attributes — except max-width: 5 of the
   19 paragraphs were deliberately narrowed to a centered column narrower
   than their parent (via a literal inline max-width that only ever lived in
   the corrupted duplicate tag), and core/paragraph does not support a
   "dimensions.maxWidth" block attribute at all (confirmed via
   wp.blocks.getBlockType('core/paragraph').supports — no "dimensions" key),
   so simply carrying that value into the block's JSON attributes has zero
   effect on the rendered page. Restored the same visual width via two
   plain utility classes instead (added to each affected block's own
   className attribute, which core/paragraph DOES still serialize despite
   its "className" support flag being false for the editor's Advanced
   panel — confirmed empirically against an existing clean block on this
   same page that already relied on this). Exact same max-width values the
   corrupted markup had: 600px for 4 of the 5 paragraphs ("Ti si uspešna
   žena...", "Iako si već dugo...", "Upravo zato sam kreirala...", the
   "Offline susret čarobnica" intro "Žene koje idu duhovnim putem..."), 860px
   for 1 ("Zajedno ćemo proći kroz dva dela..."). No margin:auto added — the
   original corrupted inline style never had it either, and these sit inside
   already center-aligned columns, so plain max-width reproduces the
   original look without guessing at centering behavior that wasn't there
   to begin with. */
.pd-maxw-600{max-width:600px;}
.pd-maxw-860{max-width:860px;}

/* ---------- Poziv Duše page — flat 16px / 24px text-size pass (round 40, 2026-10-01)
   Nikola asked to replace WP's fluid-clamped body text (stored as a flat 18px
   attribute, which theme.json's fluid typography renders as
   clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.392), 18px) — i.e. it visually
   shrinks below 18px on narrower screens) with a flat, non-scaling 16px in
   ~41 specific paragraphs across the page (hero intro, Utisci, the two
   testimonial-style 3-paragraph groups, "Šta je Poziv Duše", Struktura
   programa + its Predavanja/Prakse accordions, the Bonus susret/Oracle
   training accordion, the Offline susret intro paragraph, Spajanje neba i
   zemlje, the post-program paragraph, FAQ accordions, and the O meni bio) —
   and similarly replace 4 quote-style paragraphs (currently a flat 30px,
   same fluid-shrinking behavior) with a flat 24px. Same technique as the
   `.pd-maxw-*` classes above: a plain utility class on the block's own
   `className` attribute (confirmed in that same round to reliably render
   despite `core/paragraph`'s `supports.className` being `false`), rather
   than changing the block's `style.typography.fontSize` attribute itself —
   changing that would just feed a new value back into the same automatic
   fluid-clamp conversion instead of producing a flat size. */
.pd-fs-16{font-size:16px!important;}
.pd-fs-24{font-size:24px!important;}
/* round-51: same flat-font-size reasoning as pd-fs-16/pd-fs-24 above --
   added for the Home page conversion's own text sizes (legacy quote 50,
   body copy 18, CTA buttons 13, Soul Letters heading 60), reusing the
   exact same !important-class technique instead of style.typography.fontSize
   so these stay flat (non-fluid-clamped) exactly like the original markup. */
.pd-fs-13{font-size:13px!important;}
.pd-fs-18{font-size:18px!important;}
.pd-fs-50{font-size:50px!important;}
.pd-fs-60{font-size:60px!important;}
/* a core/button's own link element (.wp-block-button__link) gets an explicit
   font-size from theme.json's elements.button default, which beats plain
   inheritance from the wrapper div carrying the pd-fs-* class -- repeat the
   flat size directly on the link too for the one class actually used on a
   button (pd-fs-13, the CTA buttons' font-size). */
.pd-fs-13 .wp-block-button__link{font-size:13px!important;}

/* round-41, 2026-10-01: "I dalje osećaš..." 5-item list converted from a raw
   wp:html block into real core/group + core/paragraph blocks (so it's
   click-to-edit in Gutenberg, no Kadence needed). Utility classes reproduce
   the exact original inline styles (title/desc font-size, line-height,
   margin, divider line) since core/paragraph's own font-size would get
   fluid-clamped (same reasoning as .pd-fs-16/.pd-fs-24 above). */
.pd-item-wrap{display:flex;flex-direction:column;gap:2px;}
.pd-item-border{padding:12px 0;border-top:1px solid rgba(159,105,31,0.3);}
.pd-item-border-last{border-bottom:1px solid rgba(159,105,31,0.3);}
.pd-item-title{font-size:20px!important;line-height:1.35!important;margin:0 0 6px!important;font-weight:500!important;}
.pd-item-desc{font-size:16px!important;line-height:1.7!important;margin:0!important;}
.pd-item-desc-tight{line-height:1.35!important;}

/* round-42, 2026-10-01: two more wp:html -> real-block conversions (single-
   line list items, divider line, no title/desc split this time — simpler
   than pd-item-*, each row is just one core/paragraph). */
.pd-line-light{margin:0!important;padding:12px 0!important;font-size:18px!important;line-height:1.4!important;color:#f0e6d8!important;border-top:1px solid rgba(247,242,234,0.2);}
.pd-line-light-last{border-bottom:1px solid rgba(247,242,234,0.2);}
.pd-line-bold{margin:0!important;padding:12px 0!important;font-size:18px!important;line-height:1.35!important;font-weight:500!important;border-top:1px solid rgba(159,105,31,0.3);}
.pd-line-bold-last{border-bottom:1px solid rgba(159,105,31,0.3);}

/* round-43, 2026-10-01: "Šta uključuje program" checklist grid, wp:html ->
   real blocks. Reuses the already-existing .pd-offer-feature/.pd-check
   classes (row layout + checkmark box) unchanged; only the grid container
   itself needed a new class since core/group has no native CSS-grid
   layout option. */
.pd-offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;color:#EDE6D3;font-size:15px;line-height:1.5;}

/* round-44, 2026-10-01: fix for the "Zajedno ćemo proći..." paragraph
   (Struktura programa intro) after unwrapping it from a redundant
   single-child wp:group (see project_poziv-duse-zajedno-paragraph-crash-fix.md
   for why that wrapper existed/had to go). Unwrapping exposed it directly to
   its "is-layout-constrained" ancestor (contentSize:1500px), whose generated
   CSS auto-centers every non-excluded child using *that child's own*
   max-width as the centering box — so our narrower .pd-maxw-860 class made
   it center within its own 860px box instead of sitting flush with the
   "Struktura programa" heading above it (which centers within the full
   1500px box, landing at the same left edge only by coincidence of the
   default/no-override case). Fix: override margin-left to the exact offset
   the 1500px box would use (calc, so it tracks viewport changes exactly
   like the heading does), clamped to 0 so it collapses cleanly to flush-left
   on narrow/mobile widths instead of going negative. */
.pd-align-like-1500{margin-left:max(0px, calc((100% - 1500px) / 2))!important;margin-right:0!important;}

/* round-45, 2026-10-01: Nikola installed the MarqueeX plugin and added a
   marqueex/text-marquee block right under the "Utisci" heading, as a
   possible editable replacement for the hand-coded .pd-marquee testimonial
   ticker there (see project_poziv-duse-html-to-blocks-conversion.md,
   category 3 — the two testimonial marquees were left as custom HTML since
   they're JS-driven). The plugin block itself registers no color/typography
   supports (checked via wp.blocks.getBlockType: only className/html/align),
   so matching the existing marquee's look needs plain CSS against its
   generated classes — same approach as every other third-party/plugin
   element on this page. Two problems: (1) plain black Open Sans instead of
   the gold italic EB Garamond quote look, (2) the plugin forces each
   item onto one line via white-space:nowrap (fine for a short news
   ticker, not full-sentence testimonials), which collapsed the whole
   block down to ~25px tall. Fix mirrors the existing "Utisci" marquee
   exactly: 340px fixed-width wrapped items (not one scrolling line) in
   its own gold (#9F691F), not the cream variant the OTHER testimonial
   marquee further down uses on its dark accent-3 background. */
.pd-page .marqueex-marquee-block{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);}
.pd-page .marqueex-marquee-track-wrapper,.pd-page .marqueex-marquee-track,.pd-page .marqueex-marquee-wrapper{align-items:flex-start!important;}
.pd-page .marqueex-news-item{width:340px;flex:none!important;white-space:normal!important;align-items:flex-start!important;height:auto!important;}
.pd-page .marqueex-news-text{white-space:normal!important;display:block!important;height:auto!important;font-family:'EB Garamond',serif!important;font-style:italic!important;font-size:24px!important;line-height:1.25!important;color:#9F691F!important;}

/* round-46, 2026-10-01: converting the second testimonial marquee too (under
   "Pogledaj šta one kažu o programu", on the dark accent-3 background) from
   the hand-coded .pd-marquee--triple to its own marqueex/text-marquee block,
   same treatment as the "Utisci" one (see round-45 above). Only difference
   is color: this section sits on the dark accent-3 background, so it needs
   the original's cream (#ede6d3) text instead of the gold (#9F691F) the
   Utisci instance uses — scoped via this block's own "pd-marqueex-cream"
   additional CSS class so the two marqueex instances on this page don't
   collide. */
.pd-page .pd-marqueex-cream .marqueex-news-text{color:#ede6d3!important;}

/* round-47, 2026-10-01: third and last marquee converted to MarqueeX — the
   "big words" marquee (no heading, between the hero CTA and "Struktura
   programa"): 5 short gold italic words/phrases (Buđenje, Mir i jasnoća,
   Smisao, Povratak sebi, Osnažujući) at a huge clamp(40px,7vw,96px) size.
   Unlike the two testimonial marquees, this one should NOT wrap to multiple
   lines or get a fixed item width — the plugin's own default
   (display:inline-flex + white-space:nowrap on .marqueex-news-item/-text) is
   already exactly what single short words need, so only typography is
   overridden here, scoped to this block's own "pd-marqueex-words" className
   so it doesn't inherit the testimonial blocks' width:340px/wrapping rules. */
/* The global .pd-page .marqueex-news-item{width:340px;...} rule from
   round-45 was written for the testimonial blocks and leaks into every
   marqueex instance since it isn't scoped to their className — it forced
   every word here into an identical 340px box regardless of actual text
   width, which visually merged wide words into their neighbor and left
   huge gaps after short ones. Reset back to natural auto width/flex for
   this instance specifically. */
.pd-page .pd-marqueex-words .marqueex-news-item{width:auto!important;flex:none!important;white-space:nowrap!important;height:auto!important;}
.pd-page .pd-marqueex-words .marqueex-news-text{font-family:'EB Garamond',serif!important;font-style:italic!important;font-size:clamp(40px,7vw,96px)!important;letter-spacing:-2.5px!important;line-height:1!important;color:#9F691F!important;}

/* round-48, 2026-10-02: video testimonial gallery ("Offline susret čarobnica")
   converted from a hand-coded wp:html block to native core/video blocks (so
   editors can replace each video through the normal Media Library UI) inside
   native core/group wrappers, keeping the same .pd-gallery-item/.pd-video-tile
   classes and the same prev/next-arrow + click-to-play JS (see poziv-duse.js).
   core/video wraps its <video> in a <figure class="wp-block-video">, which
   WP's block-library CSS gives a default margin and auto height — neutralize
   that so the figure fills the same 16:9 box the bare <video> used to. */
.pd-video-tile figure{margin:0;height:100%;}

/* ============ round-59, 2026-10-06: O Meni page — the three raw wp:html blocks
   (fixed parallax title + spacer + inline <script>, portrait/intro section,
   biography section) are native blocks now: core/group #pd-omeni-title-wrap >
   core/heading h1, core/spacer 40vh, core/group.pd-omeni-intro (core/image +
   core/paragraph.pd-omeni-lead), core/group.pd-omeni-bio (4 core/paragraph +
   core/image signature). Everything the inline styles did lives here now.
   NOTE the sitewide <=781px rule "every direct .pd-page group gets 40px
   vertical padding" excludes these three groups (:not(...) added to its
   selector) — the old raw <section>/<div> were never matched by it. ============ */
.pd-omeni-title-wrap{position:fixed;top:240px;left:0;right:0;display:flex;justify-content:center;z-index:1;pointer-events:none;padding:0;}
.pd-omeni-title-wrap .pd-omeni-title{font-family:'EB Garamond',serif;font-size:clamp(60px,8vw,120px);line-height:0.9;color:#774625;margin:0;font-weight:400;letter-spacing:-2px;font-style:italic;}
/* In the block editor a position:fixed title would float over the canvas and block clicks — show it as a normal block there. */
.editor-styles-wrapper .pd-omeni-title-wrap{position:static;pointer-events:auto;}
.pd-omeni-intro,.pd-omeni-bio{position:relative;z-index:2;background:#ede6d3;max-width:820px;}
/* .wp-block-group sets border-box at the same specificity — the old raw <section> was content-box (820px column + 2x80px padding = 980px), so win on specificity */
.pd-page .pd-omeni-intro,.pd-page .pd-omeni-bio{box-sizing:content-box;}
.pd-omeni-intro{padding:108px 80px 80px;display:flex;flex-direction:column;align-items:center;}
.pd-omeni-bio{padding:0 80px 80px;text-align:center;}
.pd-omeni-portrait{width:100%;max-width:420px;margin:0 0 80px;}
.pd-omeni-portrait img{width:100%;max-width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;display:block;}
.pd-omeni-lead{font-family:'EB Garamond',serif;font-size:40px;line-height:1.1;color:#774625;margin:0;text-align:center;font-weight:400;max-width:780px;}
.pd-omeni-bio-p{font-size:18px;line-height:1.7;color:#774625;margin:0 auto 1.7em;max-width:720px;text-align:left;}
.pd-omeni-bio .pd-omeni-bio-p:last-of-type{margin-bottom:0;}
.pd-omeni-signature{max-width:720px;margin:94px auto 0;text-align:left;}
.pd-omeni-signature img{width:260px;height:auto;display:block;}
@media (max-width:781px){
  /* same mobile treatment the old attribute-selector rule (round-27) gave the raw sections: 20px own padding and a real full-bleed escape from .pd-page's 30px root padding */
  .pd-omeni-intro,.pd-omeni-bio{padding-left:20px;padding-right:20px;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;}
  /* Nikola, 2026-10-06: "Put me je vodio od studija farmacije…" paragraph is 28px on mobile (40px on desktop) */
  .pd-omeni-lead{font-size:28px;}
}

/* ---------- Linkovi page: native blocks (round-60) ---------- */
.pd-linkovi-page .pd-linkovi-root{box-sizing:content-box;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:108px 80px 80px;background-color:#ede6d3;}
.pd-linkovi-page .pd-linkovi-root>*{margin-block-start:0;margin-block-end:0;}
.pd-linkovi-page .pd-linkovi-logo{margin:0 0 80px;}
.pd-linkovi-page .pd-linkovi-logo img{width:120px;height:120px;max-width:none;display:block;}
.pd-linkovi-page .pd-linkovi-buttons{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:16px;width:100%;max-width:440px;margin:0;}
.pd-linkovi-page .pd-linkovi-buttons>.pd-linkovi-link{width:100%;margin:0;}
.pd-linkovi-page .pd-linkovi-link .wp-block-button__link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;padding:18px 28px;color:#ede6d3;background-color:#774625;border:none;border-radius:0;font-family:'Open Sans',sans-serif;font-size:14px;line-height:1.4;letter-spacing:0.05em;text-transform:uppercase;font-weight:400;text-decoration:none;text-align:center;}
.pd-linkovi-page .pd-linkovi-link .wp-block-button__link:hover{color:#ede6d3;background-color:#774625;font-style:italic;}
.pd-linkovi-page .pd-linkovi-social{display:flex;gap:24px;margin-top:80px;}
.pd-linkovi-page .pd-linkovi-copy{margin:80px 0;font-family:'Open Sans',sans-serif;font-size:12px;line-height:1.4;color:#774625;text-align:center;}

/* ---------- Poziv Duše offer box: enrollment-deadline note (round-61, 2026-10-10) ----------
   New centered paragraph between the "Poziv Duše / 1200€" columns and the checklist grid.
   Mobile order (columns stack by default): heading, price, note, checklist. */
.pd-offer-box .pd-offer-note{margin:0;padding:0 48px;font-size:18px;line-height:1.5;text-align:center;}