/*
Theme Name:  Andrea Kovač Photography
Theme URI:   https://andreakovac.hr
Author:      Andrea Kovač
Author URI:  https://andreakovac.hr
Description: Fotografski portfolio za novorođenčad, obitelji i poslovne portrete. Topao, osoban dizajn s punom podrškom za Customizer i block patterne.
Version:     1.2.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.1
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: akp
Tags:        photography, portfolio, one-page, responsive-layout, block-patterns
*/

/* ════════════════════════════════════════════════════════════════════
   BRAND TOKENS  —  all overridable via Customizer CSS at wp_head:99
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Raw palette ─────────────────────────────────────────────── */
    --clr-sage:        #7f957c;
    --clr-sage-light:  #afc7a4;
    --clr-sage-dark:   #5d7259;
    --clr-gold:        #fbb34c;
    --clr-gold-dark:   #d9920a;
    --clr-rose:        #f79c83;
    --clr-dark:        #414042;
    --clr-muted:       #7a7a7c;
    --clr-border:      #dce5db;     /* sage-tinted solid divider */
    --clr-bg:          #f8f9f7;
    --clr-surface:     #ffffff;
    --clr-overlay:     rgba(65,64,66,.55);

    /* ── Spacing & shape ─────────────────────────────────────────── */
    --radius-lg:  20px;
    --radius:     10px;
    --radius-sm:  4px;

    /* ── Semantic aliases (patterns reference these) ─────────────── */
    --clr-accent:      var(--clr-sage);
    --clr-accent-lt:   var(--clr-sage-light);
    --clr-accent-dk:   var(--clr-sage-dark);
    --clr-cta:         var(--clr-gold);
    --clr-cta-dk:      var(--clr-gold-dark);
    --clr-hi:          var(--clr-rose);
    --clr-text:        var(--clr-dark);

    /* ── Typography — swappable via Customizer ───────────────────── */
    --ff-heading: 'Cormorant Garamond', Georgia, serif;
    --ff-body:    'Segoe UI', system-ui, -apple-system, sans-serif;
    --ff-script:  'Malisia Script', 'Dancing Script', cursive;

    /* ── Layout ──────────────────────────────────────────────────── */
    --nav-h:   100px;
    --logo-h:   72px;
    --max-w:  1200px;
    --ease:   cubic-bezier(.4,0,.2,1);
    --dur:      .35s;
}

/* ════════════════════════════════════════════════════════════════════
   RESET / BASE
   ════════════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body  {
    font-family:              var(--ff-body);
    font-weight:              300;
    line-height:              1.8;
    color:                    var(--clr-text);
    background:               var(--clr-bg);
    overflow-x:               hidden;
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
    letter-spacing:           .01em;
}
img, video { max-width: 100%; display: block; }
a   { color: var(--clr-accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--clr-accent-dk); }
ul  { list-style: none; }

.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 2rem;
}
.section-pad { padding: 110px 0; }
.text-center { text-align: center; }

/* ────── Typography helpers ────── */
.eyebrow {
    display:        inline-block;
    font-family:    var(--ff-script);
    font-size:      1.4rem;
    color:          var(--clr-accent);
    letter-spacing: .5px;
    margin-bottom:  .5rem;
}
.section-title {
    font-family:   var(--ff-heading);
    font-size:     clamp(2rem, 4.5vw, 3.2rem);
    font-weight:   600;
    line-height:   1.2;
    color:         var(--clr-dark);
    margin-bottom: 1rem;
}
.section-lead {
    font-size:     1.05rem;
    font-weight:   300;
    color:         var(--clr-muted);
    max-width:     580px;
    line-height:   1.9;
    letter-spacing: .025em;
    margin-bottom: 1.5rem;
}
.text-center .section-lead { margin-left: auto; margin-right: auto; }
.divider {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin: 0;
}

/* ────── Buttons ────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .5rem;
    padding:         14px 38px;
    border-radius:   50px;
    font-family:     var(--ff-body);
    font-size:       .9rem;
    font-weight:     600;
    letter-spacing:  .8px;
    text-transform:  uppercase;
    text-decoration: none;
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      background var(--dur) var(--ease),
                     color var(--dur) var(--ease),
                     border-color var(--dur) var(--ease),
                     transform var(--dur) var(--ease),
                     box-shadow var(--dur) var(--ease);
    white-space:     nowrap;
    line-height:     1;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.btn-primary  { background: var(--clr-cta); color: #fff; border-color: var(--clr-cta); }
.btn-primary:hover { background: var(--clr-cta-dk); border-color: var(--clr-cta-dk); color: #fff; }
.btn-sage   { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); }
.btn-sage:hover { background: var(--clr-accent-dk); border-color: var(--clr-accent-dk); color: #fff; }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-ghost  { background: transparent; border-color: var(--clr-accent); color: var(--clr-accent); }
.btn-ghost:hover { background: var(--clr-accent); color: #fff; }
.btn-ghost-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--clr-dark); }

/* ────── Scroll reveal ────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════════
   NAVIGATION  —  3-col CSS Grid (left | logo | right)  +  mobile
   ════════════════════════════════════════════════════════════════════ */
#site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background: #fff;
    box-shadow: 0 1px 18px rgba(65,64,66,.10);
    transition: box-shadow var(--dur) var(--ease);
}
#site-header .container { padding: 0 1.5rem; }

.nav-wrap {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    height:                var(--nav-h);
    gap:                   clamp(1rem, 2.5vw, 2.5rem);
}

/* Stronger shadow on scroll */
#site-header.scrolled { box-shadow: 0 2px 28px rgba(65,64,66,.18); }

/* ── Left / Right menus ── */
.nav-left, .nav-right { display: flex; align-items: center; }
.nav-left  { justify-content: flex-end; }
.nav-right { justify-content: flex-start; gap: 1rem; }

.nav-left ul, .nav-right ul {
    display: flex;
    align-items: center;
    gap: clamp(.25rem, 1vw, .5rem);
    list-style: none;
}
.nav-left a, .nav-right a:not(.nav-book):not(.btn) {
    font-size:      .78rem;
    font-weight:    400;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color:          var(--clr-dark);
    text-decoration: none;
    padding:        6px 10px;
    border-radius:  4px;
    transition:     color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-left a:hover, .nav-right a:not(.nav-book):not(.btn):hover,
.nav-left a.active, .nav-right a.active:not(.nav-book) {
    color:      var(--clr-sage);
    background: rgba(127,149,124,.07);
}

/* ── Logo ── */
.nav-logo { text-align: center; }
.nav-logo a, .nav-logo .custom-logo-link { display: inline-block; }
.nav-logo img, .nav-logo .custom-logo {
    max-height:  var(--logo-h);
    max-width:   280px;
    width:       auto;
    height:      auto;
    object-fit:  contain;
    display:     block;
    transition:  max-height var(--dur) var(--ease);
}

/* ── "Rezerviraj" button in nav ── */
.nav-book {
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background:     var(--clr-gold);
    color:          var(--clr-dark);
    padding:        .55rem 1.2rem;
    border:         none;
    border-radius:  50px;
    transition:     background var(--dur);
    text-decoration: none;
    white-space:    nowrap;
}
.nav-book:hover { background: var(--clr-gold-dark); color: var(--clr-dark); }

/* ── Hamburger ── */
.nav-toggle {
    display:         none;
    flex-direction:  column;
    gap:             5px;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         6px;
}
.nav-toggle span {
    display:    block;
    width:      24px;
    height:     2px;
    background: var(--clr-dark);
    transition: transform var(--dur), opacity var(--dur);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Active / current page state ── */
.nav-left .current-menu-item > a,
.nav-left .current-menu-ancestor > a,
.nav-left .current_page_item > a,
.nav-right .current-menu-item > a:not(.nav-book),
.nav-right .current-menu-ancestor > a:not(.nav-book),
.nav-right .current_page_item > a:not(.nav-book) {
    color: var(--clr-sage);
    background: rgba(127,149,124,.07);
}

/* ── Logo shrink on scroll ── */
#site-header.scrolled .nav-logo img,
#site-header.scrolled .nav-logo .custom-logo {
    max-height: calc(var(--logo-h) * 0.7);
}
#site-header.scrolled .nav-wrap {
    height: calc(var(--nav-h) * 0.8);
}

/* ── Dropdown submenus ── */
.nav-left li,
.nav-right li {
    position: relative;
}
/* Hide sub-menu by default */
.nav-left .sub-menu,
.nav-right .sub-menu {
    position:   absolute;
    top:        calc(100% + 8px);
    left:       50%;
    transform:  translateX(-50%) translateY(-6px);
    min-width:  180px;
    background: #fff;
    border-top: 2px solid var(--clr-sage);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(65,64,66,.12);
    padding:    .5rem 0;
    list-style: none;
    opacity:    0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index:    1000;
    white-space: nowrap;
}
/* Arrow pointer */
.nav-left .sub-menu::before,
.nav-right .sub-menu::before {
    content:    '';
    position:   absolute;
    top:        -7px;
    left:       50%;
    transform:  translateX(-50%);
    border:     5px solid transparent;
    border-top: 0;
    border-bottom-color: var(--clr-sage);
}
/* Show on hover / focus-within */
.nav-left li:hover > .sub-menu,
.nav-left li:focus-within > .sub-menu,
.nav-right li:hover > .sub-menu,
.nav-right li:focus-within > .sub-menu {
    opacity:        1;
    pointer-events: all;
    visibility:     visible;
    transform:      translateX(-50%) translateY(0);
}
.nav-left .sub-menu a,
.nav-right .sub-menu a {
    display:        block;
    padding:        .55rem 1.2rem;
    font-size:      .75rem;
    letter-spacing: .1em;
    color:          var(--clr-dark);
    border-bottom:  none;
    transition:     color var(--dur), padding-left var(--dur);
}
.nav-left .sub-menu a:hover,
.nav-right .sub-menu a:hover {
    color:        var(--clr-sage);
    padding-left: 1.6rem;
    background:   none;
}
.nav-left .sub-menu .current-menu-item > a,
.nav-right .sub-menu .current-menu-item > a { color: var(--clr-sage); }

/* ── Indicate items with sub-menu ── */
.nav-left li.menu-item-has-children > a,
.nav-right li.menu-item-has-children > a:not(.nav-book) {
    padding-right: 1.1em;
}
.nav-left li.menu-item-has-children > a::before,
.nav-right li.menu-item-has-children > a:not(.nav-book)::before {
    content:    '▾';
    position:   absolute;
    right:      0;
    font-size:  .6rem;
    top:        50%;
    transform:  translateY(-50%);
    color:      inherit;
    line-height: 1;
}

/* ── Mobile menu ── */
#mobile-menu {
    position:   fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--clr-border);
    padding:    1.5rem 2rem 2rem;
    transform:  translateY(-8px);
    opacity:    0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index:    899;
    display:    flex;
    flex-direction: column;
    gap:        .25rem;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(65,64,66,.12);
}
#mobile-menu.open { opacity: 1; transform: none; pointer-events: all; }
#mobile-menu a {
    display: block;
    color:   var(--clr-dark);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .7rem .5rem;
    border-radius: 4px;
    border-bottom: 1px solid var(--clr-border);
    transition: color var(--dur), background var(--dur);
}
#mobile-menu a:hover { color: var(--clr-sage); background: rgba(127,149,124,.07); }
#mobile-menu .current-menu-item > a,
#mobile-menu .current_page_item > a { color: var(--clr-sage); background: rgba(127,149,124,.07); }
#mobile-menu .nav-book {
    margin-top: 1rem;
    text-align: center;
    border-bottom: none;
    background: var(--clr-gold);
    color: var(--clr-dark);
    padding: .7rem 1.2rem;
    border-radius: 50px;
}
#mobile-menu .nav-book:hover { background: var(--clr-gold-dark); color: var(--clr-dark); }
#mobile-menu ul { display: block; }
#mobile-menu ul li { display: block; }
/* Mobile sub-menu — indented */
#mobile-menu .sub-menu {
    position:   static;
    transform:  none;
    opacity:    1;
    visibility: visible;
    pointer-events: all;
    background: transparent;
    border-top: none;
    padding:    0 0 0 1.2rem;
    min-width:  0;
}
#mobile-menu .sub-menu::before { display: none; }
#mobile-menu .sub-menu a {
    font-size:      .78rem;
    color:          var(--clr-muted);
    padding:        .45rem 0;
    border-bottom:  1px solid var(--clr-border);
    letter-spacing: .08em;
}
#mobile-menu .sub-menu a:hover { color: var(--clr-sage); }
#mobile-menu li.menu-item-has-children > a::before { display: none; }

@media (max-width: 900px) {
    .nav-toggle  { display: flex; }
    .nav-left ul, .nav-right ul { display: none; }
    .nav-book:not(#mobile-menu .nav-book) { display: none; }
    .nav-wrap { grid-template-columns: auto 1fr auto; }
    .nav-left  { order: 3; }
    .nav-logo  { order: 2; text-align: left; }
    .nav-right { order: 1; justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO  —  full viewport, transparent→solid nav, scroll indicator
   ════════════════════════════════════════════════════════════════════ */
#hero {
    position:   relative;
    min-height: 100dvh;
    display:    flex;
    align-items: center;
    overflow:   hidden;
    background: var(--clr-dark);
}
/* ── Film grain overlay ── */
#hero::after {
    content:    '';
    position:   absolute;
    inset:      -50%;
    width:      200%;
    height:     200%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size:   220px 220px;
    mix-blend-mode:    overlay;
    opacity:           0.12;
    z-index:           3;
    pointer-events:    none;
    animation:         grain-move 3s steps(6) infinite;
}
@keyframes grain-move {
    0%   { transform: translate(0,    0); }
    16%  { transform: translate(-3%,  -5%); }
    33%  { transform: translate( 5%,   2%); }
    50%  { transform: translate(-4%,   6%); }
    66%  { transform: translate( 3%,  -3%); }
    83%  { transform: translate(-6%,   4%); }
    100% { transform: translate(0,    0); }
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.hero-bg-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--clr-sage-dark) 0%, var(--clr-dark) 100%);
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(65,64,66,.80) 0%,
        rgba(65,64,66,.58) 45%,
        rgba(65,64,66,.18) 100%
    );
}
.hero-content {
    position:   relative;
    z-index:    4;
    padding-top: var(--nav-h);
    max-width:  900px;
}
.hero-eyebrow {
    display:       block;
    font-family:   var(--ff-script);
    font-size:     1.7rem;
    color:         rgba(255,255,255,.9);
    text-shadow:   0 1px 8px rgba(0,0,0,.4);
    margin-bottom: .75rem;
    opacity:       0;
    animation:     fadeUp .8s .2s var(--ease) forwards;
}
.hero-title {
    font-family:  var(--ff-heading);
    font-size:    clamp(2.8rem, 6.5vw, 5.2rem);
    font-weight:  500;
    line-height:  1.1;
    color:        #fff;
    margin-bottom: 1.5rem;
    opacity:      0;
    animation:    fadeUp .8s .38s var(--ease) forwards;
}
.hero-title em { font-style: italic; color: var(--clr-gold); }
.hero-desc {
    font-size:    1.1rem;
    color:        rgba(255,255,255,.93);
    text-shadow:  0 1px 4px rgba(0,0,0,.3);
    line-height:  1.8;
    margin-bottom: 2rem;
    max-width:    520px;
    opacity:      0;
    animation:    fadeUp .8s .52s var(--ease) forwards;
}
.hero-actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
    opacity:   0;
    animation: fadeUp .8s .66s var(--ease) forwards;
}
.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: rgba(255,255,255,.55);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    z-index: 2;
    animation: fadeIn 1s 1.2s both;
}
.hero-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
    animation: scrollLine 1.8s 1.5s ease-in-out infinite;
}
@keyframes fadeUp  { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: none; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes scrollLine { 0%,100%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} }

/* ════════════════════════════════════════════════════════════════════
   INTRO STRIP  —  scrolling tagline band
   ════════════════════════════════════════════════════════════════════ */
#intro-strip {
    background: var(--clr-accent);
    padding:    .85rem 0;
    overflow:   hidden;
}
.intro-strip-inner {
    display:    flex;
    align-items: center;
    gap:        1.5rem;
    white-space: nowrap;
    font-size:  .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:      #fff;
    animation:  marquee 28s linear infinite;
}
.intro-strip-inner:hover { animation-play-state: paused; }
.strip-dot { opacity: .55; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ════════════════════════════════════════════════════════════════════
   QUICK LINKS  —  clickable service nav (sticky below intro strip)
   ════════════════════════════════════════════════════════════════════ */
.a3-quicklinks {
    position:   sticky;
    top:        var(--nav-h);
    z-index:    800;
    background: var(--clr-surface);
    border-bottom: 2px solid var(--clr-accent);
    display:    flex;
    justify-content: center;
    flex-wrap:  wrap;
    gap:        0;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.a3-quicklinks a {
    padding:        .75rem 1.6rem;
    font-size:      .72rem;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--clr-muted);
    text-decoration: none;
    border-bottom:  2px solid transparent;
    transition:     color var(--dur), border-color var(--dur), background var(--dur);
    margin-bottom:  -2px;
}
.a3-quicklinks a:hover,
.a3-quicklinks a.is-active { color: var(--clr-accent-dk); border-bottom-color: var(--clr-accent); background: rgba(127,149,124,.05); }

/* ════════════════════════════════════════════════════════════════════
   ABOUT  —  portrait + badge + signature grid
   ════════════════════════════════════════════════════════════════════ */
#o-meni.section-pad { background: var(--clr-bg); }
.about-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   6rem;
    align-items:           center;
}
.about-img-wrap { position: relative; }
.about-img-frame {
    border-radius: var(--radius-lg);
    overflow:      hidden;
    aspect-ratio:  4/5;
    background:    var(--clr-border);
}
.about-img-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease);
}
.about-img-frame:hover img { transform: scale(1.03); }
.about-badge {
    position:   absolute;
    bottom: -1.5rem;
    right:  -1.5rem;
    width:    130px;
    height:   130px;
    border-radius: 50%;
    background: var(--clr-sage);
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    border: 4px solid var(--clr-surface);
}
.about-badge-num {
    font-family:  var(--ff-heading);
    font-size:    2rem;
    font-weight:  700;
    line-height:  1;
}
.about-badge-label {
    font-size:     .65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .9;
    margin-top: .2rem;
    padding: 0 .5rem;
}
.about-text { padding-right: 1rem; }
.about-text .section-lead { margin-bottom: 1.75rem; }
.about-signature {
    display:      block;
    font-family:  var(--ff-script);
    font-size:    2rem;
    color:        var(--clr-accent);
    line-height:  1.2;
    margin-top:   2rem;
}
@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; gap: 3rem; }
    .about-badge { right: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════
   SESSIONS  —  kartice (lagani stil: slika gore, tijelo dolje)
   ════════════════════════════════════════════════════════════════════ */
#sesije { background: var(--clr-bg); }

.sessions-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin-top:            3rem;
}

/* ── Kartica: bijela, zaobljena, lagana sjena ───────────────────── */
.session-card {
    background:     var(--clr-surface);
    border-radius:  var(--radius-lg);
    overflow:       hidden;
    box-shadow:     0 4px 24px rgba(44, 36, 22, .06);
    display:        flex;
    flex-direction: column;
    cursor:         pointer;
    transition:     transform .4s var(--ease), box-shadow .4s var(--ease);
}
.session-card:hover {
    transform:  translateY(-8px);
    box-shadow: 0 16px 48px rgba(44, 36, 22, .12);
}

/* ── Slika: aspect-ratio kontejner na vrhu kartice ──────────────── */
.session-img {
    aspect-ratio: 3 / 4;
    overflow:     hidden;
    position:     relative;
    background:   var(--clr-border);
    flex-shrink:  0;
}
.session-img img,
.session-img svg {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.session-card:hover .session-img img { transform: scale(1.05); }

/* Pill badge */
.session-tag {
    position:       absolute;
    top:            1rem;
    left:           1rem;
    z-index:        3;
    background:     var(--clr-gold);
    color:          #fff;
    font-size:      .63rem;
    font-weight:    700;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding:        .3rem .85rem;
    border-radius:  50px;
}

/* ── Tijelo kartice ──────────────────────────────────────────────── */
.session-body {
    padding:        1.5rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

/* Session icon — circular sage container */
.session-icon {
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          48px;
    height:         48px;
    background:     rgba(127,149,124,.12);
    border-radius:  50%;
    margin-bottom:  .75rem;
    color:          var(--clr-sage);
    flex-shrink:    0;
    font-size:      1.3rem;
    line-height:    1;
}
.session-icon svg { width: 22px; height: 22px; }

/* Eyebrow (script iznad naslova) */
.session-eyebrow {
    display:       block;
    font-family:   var(--ff-script);
    font-size:     .95rem;
    color:         var(--clr-sage);
    margin-bottom: .15rem;
}

/* Naslov */
.session-body h3 {
    font-family:   var(--ff-heading);
    font-size:     1.5rem;
    font-weight:   600;
    color:         var(--clr-dark);
    line-height:   1.25;
    margin-bottom: .75rem;
}

/* Opis */
.session-body p {
    font-size:  .9rem;
    color:      var(--clr-muted);
    line-height: 1.65;
    flex:       1;
    margin:     0;
}

/* Lista uključenog */
.session-includes {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
    list-style:     none;
    padding-left:   0;
    margin-top:     1.1rem;
    padding-top:    1.1rem;
    border-top:     1px solid var(--clr-border);
}
.session-includes li {
    display:     flex;
    align-items: center;
    gap:         .65rem;
    font-size:   .82rem;
    color:       var(--clr-muted);
}
.session-includes li::before {
    content:       '';
    flex-shrink:   0;
    width:         6px;
    height:        6px;
    background:    var(--clr-sage);
    border-radius: 50%;
}

/* CTA */
.session-cta { margin-top: 1.5rem; }

@media (max-width: 860px) {
    .sessions-grid { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 1100px) and (min-width: 861px) {
    .sessions-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   SPLIT SEKCIJE  —  usluge (alternating even/odd)
   ════════════════════════════════════════════════════════════════════ */
.a3-split {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    min-height:            640px;
}
.a3-split--even { direction: rtl; }
.a3-split--even > * { direction: ltr; }
.a3-split__media { overflow: hidden; }
.a3-split__photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.a3-split:hover .a3-split__photo { transform: scale(1.03); }
.a3-split__body {
    padding:         5rem clamp(2.5rem, 5vw, 5rem);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    background:      var(--clr-bg);
}
.a3-split__body .section-title { font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin-bottom: .8rem; }
.a3-split__body p { color: var(--clr-muted); margin-bottom: 1.4rem; }
.a3-split__meta {
    display:         flex;
    flex-direction:  column;
    gap:             .5rem;
    margin-bottom:   1.8rem;
}
.a3-split__meta li {
    display:     flex;
    gap:         .6rem;
    font-size:   .82rem;
    color:       var(--clr-muted);
    font-weight: 600;
    letter-spacing: .05em;
}
.a3-split__meta-icon { font-size: 1rem; }
@media (max-width: 860px) {
    .a3-split { grid-template-columns: 1fr; min-height: auto; }
    .a3-split--even { direction: ltr; }
    .a3-split__media { aspect-ratio: 4/3; }
    .a3-split__body  { padding: 2.5rem 1.5rem; }
}

/* ── Split Sections — Usluge page ──────────────────────────────── */
.a3-split-section {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    min-height:            560px;
}
.a3-split-section--reverse { direction: rtl; }
.a3-split-section--reverse > * { direction: ltr; }

.a3-split__img { overflow: hidden; }
.a3-split__img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .8s var(--ease);
}
.a3-split-section:hover .a3-split__img img { transform: scale(1.03); }

.a3-split__content {
    padding:        4rem clamp(2rem, 5vw, 5rem);
    display:        flex;
    flex-direction: column;
    justify-content: center;
    background:     var(--clr-bg);
}
.a3-split__tag {
    display:        inline-block;
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--clr-accent);
    background:     var(--clr-accent-lt);
    padding:        .3rem .85rem;
    border-radius:  50px;
    margin-bottom:  .6rem;
    align-self:     flex-start;
}
.a3-split__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.a3-split__list li {
    display:     flex;
    gap:         .6rem;
    align-items: flex-start;
    font-size:   .9rem;
    color:       var(--clr-muted);
    padding:     .4rem 0;
    border-bottom: 1px solid var(--clr-border);
}
.a3-split__list li::before {
    content:     '✓';
    color:       var(--clr-accent);
    font-weight: 700;
    flex-shrink: 0;
}
.a3-split__ctas {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    flex-wrap:   wrap;
    margin-top:  .5rem;
}
.a3-split__price {
    font-family: var(--ff-heading);
    font-size:   clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color:       var(--clr-dark);
}

/* Benefits grid */
.a3-benefiti-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2rem;
}
.a3-benefit { text-align: center; }
.a3-benefit__icon {
    display:     block;
    font-size:   2rem;
    color:       var(--clr-accent);
    margin-bottom: .75rem;
}
.a3-benefit h3 {
    font-size:   1rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.a3-benefit p { font-size: .9rem; color: var(--clr-muted); }

/* FAQ */
.a3-usluge-faq { background: var(--clr-bg); padding: 5rem 0; }
.a3-usluge-faq__container { max-width: 760px; }
.a3-faq-list { display: flex; flex-direction: column; gap: .5rem; }
.a3-faq-item {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}
.a3-faq-item summary {
    padding:     1.1rem 1.5rem;
    font-weight: 600;
    font-size:   1rem;
    cursor:      pointer;
    list-style:  none;
    display:     flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.a3-faq-item summary::-webkit-details-marker { display: none; }
.a3-faq-item summary::after {
    content:    '+';
    font-size:  1.4rem;
    font-weight: 300;
    color:      var(--clr-accent);
    flex-shrink: 0;
    transition: transform .25s;
}
.a3-faq-item[open] summary::after { transform: rotate(45deg); }
.a3-faq-item p {
    padding:    0 1.5rem 1.25rem;
    font-size:  .95rem;
    color:      var(--clr-muted);
    line-height: 1.7;
    margin: 0;
}

/* Benefits & usluge section spacing */
.a3-usluge-benefiti { padding: 5rem 0; }

@media (max-width: 860px) {
    .a3-split-section { grid-template-columns: 1fr; min-height: auto; }
    .a3-split-section--reverse { direction: ltr; }
    .a3-split__img { aspect-ratio: 4/3; }
    .a3-split__content { padding: 2.5rem 1.5rem; }
    .a3-benefiti-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .a3-benefiti-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   TESTIMONIALS CAROUSEL  —  3 visible at a time, slide by 1
   ════════════════════════════════════════════════════════════════════ */
#iskustva { background: var(--clr-bg); overflow: hidden; }
.a3-testi-head { text-align: center; margin-bottom: 3rem; }
.a3-testi-wrap { position: relative; }
.a3-testi-viewport { overflow: hidden; }
.a3-testi-track {
    display:    flex;
    gap:        1.5rem;
    transition: transform .6s var(--ease);
    will-change: transform;
}
.a3-testi-card {
    flex:         0 0 calc((100% - 3rem) / 3);
    background:   var(--clr-surface);
    border-top:   3px solid var(--clr-hi);
    border-radius: var(--radius-lg);
    padding:      2rem;
    display:      flex;
    flex-direction: column;
    gap:          1.2rem;
    box-shadow:   0 2px 14px rgba(0,0,0,.05);
    transition:   box-shadow var(--dur);
}
.a3-testi-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.09); }
.a3-testi-quote { font-size: 3rem; color: var(--clr-hi); line-height: 1; font-family: Georgia, serif; }
.a3-testi-text {
    font-size:   .97rem;
    color:       var(--clr-muted);
    line-height: 1.85;
    flex:        1;
    font-style:  italic;
}
.a3-testi-author { display: flex; align-items: center; gap: 1rem; }
.a3-testi-avatar {
    width:          48px;
    height:         48px;
    border-radius:  50%;
    background:     var(--clr-border);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1rem;
    font-weight:    700;
    color:          var(--clr-accent);
    flex-shrink:    0;
    overflow:       hidden;
}
.a3-testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.a3-testi-name { font-weight: 700; font-size: .9rem; color: var(--clr-dark); }
.a3-testi-role { font-size: .78rem; color: var(--clr-muted); letter-spacing: .05em; }
.a3-testi-stars { color: var(--clr-gold); font-size: .85rem; margin-top: .15rem; }
.a3-testi-controls {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    margin-top:      2.5rem;
}
.a3-testi-btn {
    width:     44px;
    height:    44px;
    border-radius: 50%;
    border:    2px solid var(--clr-border);
    background: var(--clr-surface);
    color:     var(--clr-accent);
    font-size: 1.1rem;
    cursor:    pointer;
    display:   flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.a3-testi-btn:hover  { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; }
.a3-testi-btn:disabled { opacity: .35; pointer-events: none; }
.a3-testi-dots { display: flex; gap: .5rem; }
.a3-testi-dot {
    width:     10px;
    height:    10px;
    border-radius: 50%;
    border:    2px solid var(--clr-accent);
    background: transparent;
    cursor:    pointer;
    transition: background var(--dur);
    padding:   0;
}
.a3-testi-dot.is-active { background: var(--clr-accent); }
@media (max-width: 900px) {
    .a3-testi-card { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 600px) {
    .a3-testi-card { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   PROCESS  —  4-step how-it-works (stil prvog templatea)
   ════════════════════════════════════════════════════════════════════ */
/* Front-page grid layout for process steps */
.a3-process-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2rem;
    position:              relative;
}
.a3-process-grid::before {
    content:    '';
    position:   absolute;
    top:        26px;
    left:       calc(12.5% + 1rem);
    right:      calc(12.5% + 1rem);
    height:     1px;
    background: rgba(255,255,255,.3);
    z-index:    0;
}
.a3-process-step {
    text-align: center;
    position:   relative;
    z-index:    1;
}
.a3-process-step h3 {
    font-family:   var(--ff-heading);
    font-size:     1.1rem;
    font-weight:   600;
    color:         #fff;
    margin-bottom: .5rem;
}
.a3-process-step p:not(.a3-step-num) {
    font-size:  .9rem;
    color:      rgba(255,255,255,.75);
    line-height: 1.7;
}
@media (max-width: 860px) {
    .a3-process-grid { grid-template-columns: repeat(2, 1fr); }
    .a3-process-grid::before { display: none; }
}
@media (max-width: 500px) {
    .a3-process-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   CONTACT / REZERVIRAJ
   ════════════════════════════════════════════════════════════════════ */
#kontakt { background: var(--clr-bg); }
.contact-wrap {
    display:               grid;
    grid-template-columns: 380px 1fr;
    gap:                   5rem;
    align-items:           start;
}
.contact-info-col .section-title { font-size: 2rem; }
.contact-detail {
    display:     flex;
    gap:         1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}
.contact-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           48px;
    height:          48px;
    background:      rgba(127,149,124,.12);
    border-radius:   50%;
    color:           var(--clr-sage);
    flex-shrink:     0;
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-detail-text strong { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-dark); }
.contact-detail-text span   { font-size: .9rem; color: var(--clr-muted); }
.social-links { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           42px;
    height:          42px;
    border-radius:   50%;
    border:          1.5px solid var(--clr-border);
    color:           var(--clr-sage);
    text-decoration: none;
    transition:      border-color var(--dur), color var(--dur), background var(--dur);
}
.social-link:hover { border-color: var(--clr-sage); color: var(--clr-sage-dark); background: rgba(127,149,124,.08); }
.booking-form {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-dark); }
.form-group input,
.form-group select,
.form-group textarea {
    padding:      13px 16px;
    border:       1.5px solid var(--clr-border);
    background:   var(--clr-bg);
    border-radius: var(--radius-sm);
    font-family: var(--ff-body);
    font-size:   .95rem;
    color:       var(--clr-dark);
    transition:  border-color var(--dur), box-shadow var(--dur);
    outline:     none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--clr-accent);
    box-shadow:   0 0 0 3px rgba(127,149,124,.15);
    outline:      none;
}
.form-group select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a7c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-response {
    padding:      1rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size:    .9rem;
    font-weight:  500;
    display:      none;
}
.form-response.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; display: block; }
.form-response.error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; display: block; }
.form-response.success { background: rgba(127,149,124,.12); color: var(--clr-sage-dark); border: 1px solid var(--clr-sage-light); }
.form-response.error   { background: rgba(247,156,131,.12); color: #b84040; border: 1px solid rgba(247,156,131,.5); }
@media (max-width: 900px) {
    .contact-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   INSTAGRAM STRIP
   ════════════════════════════════════════════════════════════════════ */
.a3-instagram {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
.a3-instagram__item {
    aspect-ratio: 1;
    overflow:     hidden;
    position:     relative;
    display:      block;
}
.a3-instagram__item img {
    width: 100%; height: 100%;
    object-fit:  cover;
    transition:  transform .55s var(--ease), filter .3s;
}
.a3-instagram__item:hover img { transform: scale(1.07); filter: brightness(.82); }
.a3-instagram__overlay {
    position:    absolute;
    inset:       0;
    background:  rgba(127,149,124,.7);
    display:     flex;
    align-items: center;
    justify-content: center;
    opacity:     0;
    transition:  opacity .3s var(--ease);
    font-size:   1.8rem;
}
.a3-instagram__item:hover .a3-instagram__overlay { opacity: 1; }
.a3-instagram__head {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 2rem 2rem;
    background: var(--clr-bg);
}
@media (max-width: 640px) {
    .a3-instagram { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════════════════ */
#lightbox {
    position:    fixed;
    inset:       0;
    background:  rgba(0,0,0,.94);
    z-index:     9999;
    display:     none;
    align-items: center;
    justify-content: center;
}
#lightbox.open { display: flex; }
#lb-img {
    max-width:  90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 0 60px rgba(0,0,0,.5);
}
#lb-close, #lb-prev, #lb-next {
    position:   absolute;
    background: none;
    border:     none;
    color:      rgba(255,255,255,.8);
    font-size:  1.5rem;
    cursor:     pointer;
    transition: color var(--dur);
    padding:    1rem;
    line-height: 1;
}
#lb-close:hover, #lb-prev:hover, #lb-next:hover { color: var(--clr-gold); }
#lb-close { top: 1rem; right: 1rem; font-size: 2rem; }
#lb-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
#lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ════════════════════════════════════════════════════════════════════
   MASONRY GALLERY
   ════════════════════════════════════════════════════════════════════ */
.a3-masonry {
    columns: 4 220px;
    column-gap: .8rem;
}
.a3-masonry-item {
    break-inside:  avoid;
    margin-bottom: .8rem;
    position:      relative;
    overflow:      hidden;
    cursor:        pointer;
    opacity:       0;
    transform:     translateY(16px);
    transition:    opacity .5s var(--ease), transform .5s var(--ease), box-shadow .3s;
}
.a3-masonry-item.visible { opacity: 1; transform: none; }
.a3-masonry-item img { display: block; width: 100%; height: auto; }
.a3-masonry-item:hover { box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.a3-masonry-overlay {
    position:    absolute;
    inset:       0;
    background:  rgba(127,149,124,.7);
    display:     flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity:     0;
    transition:  opacity .3s var(--ease);
    color:       #fff;
    gap:         .4rem;
    text-align:  center;
    padding:     1rem;
}
.a3-masonry-item:hover .a3-masonry-overlay { opacity: 1; }
.a3-masonry-overlay-icon  { font-size: 1.5rem; }
.a3-masonry-overlay-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ════════════════════════════════════════════════════════════════════
   REZERVIRAJ CTA STRIP
   ════════════════════════════════════════════════════════════════════ */
.a3-rezerviraj {
    background:  var(--clr-sage-dark);
    padding:     5rem 0;
    text-align:  center;
}
.a3-rezerviraj__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 0 2rem; }
.a3-rezerviraj .eyebrow { color: rgba(255,255,255,.65); }
.a3-rezerviraj .section-title { color: #fff; }
.a3-rezerviraj p { color: rgba(255,255,255,.8); max-width: 520px; }
.a3-rezerviraj .btn-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ════════════════════════════════════════════════════════════════════
   INSTAGRAM FEED SECTION
   ════════════════════════════════════════════════════════════════════ */
.a3-instagram-section {
    background: #fff;
    text-align:  center;
}
.a3-instagram-section h2 {
    font-family:   var(--ff-heading);
    font-size:     clamp(1.75rem, 3vw, 2.25rem);
    color:         var(--clr-dark);
    margin-bottom: 0;
}
.a3-insta-lead {
    color:     var(--clr-dark);
    opacity:   .65;
    font-size: .95rem;
}

/* Smash Balloon feed overrides — clean grid, no header/footer chrome */
.a3-instagram-section .sbi_feed_container { max-width: 100% !important; }
.a3-instagram-section #sbi                { padding: 0 !important; }
.a3-instagram-section .sbi_item           { border-radius: 4px; overflow: hidden; }

/* Hover overlay on each photo */
.a3-instagram-section .sbi_item a {
    display:  block;
    position: relative;
    overflow: hidden;
}
.a3-instagram-section .sbi_item a::after {
    content:          '';
    position:         absolute;
    inset:            0;
    background:       rgba(127,149,124,.45);
    opacity:          0;
    transition:       opacity .3s ease;
    pointer-events:   none;
}
.a3-instagram-section .sbi_item a:hover::after { opacity: 1; }

/* Follow button */
.a3-btn-outline-dark .wp-block-button__link {
    border-color: var(--clr-dark) !important;
    color:        var(--clr-dark) !important;
    font-size:    .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding:      .65rem 1.75rem;
    transition:   background .25s, color .25s;
}
.a3-btn-outline-dark .wp-block-button__link:hover {
    background:   var(--clr-dark) !important;
    color:        #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.a3-footer {
    background: var(--clr-dark);
    color:      rgba(255,255,255,.75);
}
.a3-footer__top {
    display:         grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:     center;
    padding:         3rem 0 2rem;
    border-bottom:   1px solid rgba(255,255,255,.08);
    gap:             2rem;
}
.a3-footer__social { display: flex; gap: .8rem; }
.a3-footer__social a {
    width:    40px; height: 40px;
    border:   1px solid rgba(255,255,255,.2);
    display:  flex; align-items: center; justify-content: center;
    color:    rgba(255,255,255,.7);
    font-size:.8rem; font-weight: 700; letter-spacing: .08em;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.a3-footer__social a:hover { background: var(--clr-gold); border-color: var(--clr-gold); color: var(--clr-dark); }
.a3-footer__logo { text-align: center; }
.a3-footer__logo a { display: inline-block; }
.a3-footer__logo img,
.a3-footer__logo .custom-logo {
    max-height:  60px;
    max-width:   200px;
    width:       auto;
    height:      auto;
    object-fit:  contain;
    filter:      brightness(0) invert(1);
    opacity:     .85;
    display:     block;
}
.a3-footer__logo-text {
    font-family:    var(--ff-heading);
    font-style:     italic;
    font-size:      1.4rem;
    color:          rgba(255,255,255,.85);
    display:        inline-block;
}
.a3-footer__tagline {
    font-family:    var(--ff-script);
    font-size:      1rem;
    color:          var(--clr-sage-light);
    margin-top:     .5rem;
    letter-spacing: .04em;
}
.a3-footer__social a svg { width: 16px; height: 16px; fill: currentColor; }
.a3-footer__nav { display: flex; justify-content: flex-end; }
.a3-footer__nav ul { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }
.a3-footer__nav a { color: rgba(255,255,255,.6); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; transition: color var(--dur); }
.a3-footer__nav a:hover { color: var(--clr-gold); }
.a3-footer__divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 0; }
.a3-footer__copy { text-align: center; padding: 1.5rem 0; font-size: .78rem; color: rgba(255,255,255,.35); letter-spacing: .06em; }
.a3-footer__copy a { color: rgba(255,255,255,.5); transition: color var(--dur); }
.a3-footer__copy a:hover { color: var(--clr-gold); }
@media (max-width: 640px) {
    .a3-footer__top { grid-template-columns: 1fr; justify-items: center; gap: 1.5rem; }
    .a3-footer__social { justify-content: center; }
    .a3-footer__nav { justify-content: center; }
    .a3-footer__nav ul { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   BLOG  —  archive grid + single post
   ════════════════════════════════════════════════════════════════════ */

/* ── Blog Hero ──────────────────────────────────────────────── */
.a3-blog-hero {
    background:  var(--clr-accent);
    padding:     calc(var(--nav-h) + 3.5rem) 0 3.5rem;
    text-align:  center;
}
.a3-blog-hero .eyebrow      { color: rgba(255,255,255,.65); margin-bottom: .5rem; }
.a3-blog-hero .section-title { color: #fff; margin-bottom: .75rem; }
.a3-blog-hero__desc         { color: rgba(255,255,255,.75); max-width: 480px; margin: 0 auto; font-size: 1rem; line-height: 1.7; }

/* ── Category Filter Pills ──────────────────────────────────── */
.a3-blog-filter {
    background:     #fff;
    border-bottom:  1px solid var(--clr-border);
    position:       sticky;
    top:            var(--nav-h);
    z-index:        90;
}
.a3-blog-filter__wrap {
    display:         flex;
    align-items:     center;
    gap:             .4rem;
    padding:         .9rem 0;
    overflow-x:      auto;
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none;
}
.a3-blog-filter__wrap::-webkit-scrollbar { display: none; }
.a3-filter-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            .35rem;
    padding:        .4rem 1rem;
    border-radius:  50px;
    border:         1px solid var(--clr-border);
    font-size:      .75rem;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--clr-muted);
    white-space:    nowrap;
    transition:     background var(--dur), color var(--dur), border-color var(--dur);
    flex-shrink:    0;
}
.a3-filter-pill:hover {
    background:    var(--clr-sage-light);
    border-color:  var(--clr-sage-light);
    color:         #fff;
}
.a3-filter-pill.is-active {
    background:    var(--clr-accent);
    border-color:  var(--clr-accent);
    color:         #fff;
}
.a3-filter-pill__count {
    background:     rgba(0,0,0,.08);
    border-radius:  50px;
    padding:        0 .45rem;
    font-size:      .68rem;
    line-height:    1.6;
    font-weight:    700;
}
.a3-filter-pill.is-active .a3-filter-pill__count,
.a3-filter-pill:hover .a3-filter-pill__count { background: rgba(255,255,255,.22); }

/* ── Blog main wrapper ──────────────────────────────────────── */
.a3-blog-main { padding: 3.5rem 0 5rem; }

/* ── Featured post (first post — full width card) ───────────── */
.a3-post-featured {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    min-height:    440px;
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    0 4px 32px rgba(0,0,0,.09);
    margin-bottom: 3rem;
    background:    var(--clr-surface);
}
.a3-post-featured__img-wrap {
    position:  relative;
    display:   block;
    overflow:  hidden;
}
.a3-post-featured__img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .8s var(--ease);
}
.a3-post-featured:hover .a3-post-featured__img-wrap img { transform: scale(1.04); }
.a3-post-featured__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to right, transparent 70%, rgba(0,0,0,.06));
    pointer-events: none;
}
.a3-post-featured__body {
    padding:        3rem 2.5rem;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            .8rem;
}
.a3-post-featured__title {
    font-family:  var(--ff-heading);
    font-size:    clamp(1.6rem, 3vw, 2.4rem);
    font-weight:  600;
    line-height:  1.2;
    margin:       .2rem 0 .4rem;
}
.a3-post-featured__title a { color: var(--clr-dark); }
.a3-post-featured__title a:hover { color: var(--clr-accent-dk); }
.a3-post-featured__excerpt {
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--clr-muted);
    flex-grow:   1;
}

/* ── Posts Grid (2-col for archive) ────────────────────────── */
.a3-posts-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
}
.a3-posts-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* ── Post Card ──────────────────────────────────────────────── */
.a3-post-card {
    background:     var(--clr-surface);
    border-radius:  var(--radius-lg);
    overflow:       hidden;
    box-shadow:     0 2px 14px rgba(0,0,0,.05);
    transition:     box-shadow var(--dur), transform var(--dur);
    display:        flex;
    flex-direction: column;
}
.a3-post-card:hover { box-shadow: 0 10px 32px rgba(0,0,0,.1); transform: translateY(-4px); }
.a3-post-card__img-wrap {
    display:      block;
    aspect-ratio: 3/2;
    overflow:     hidden;
}
.a3-post-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); display: block; }
.a3-post-card:hover .a3-post-card__img-wrap img { transform: scale(1.05); }
.a3-post-card__body {
    padding:        1.6rem 1.75rem 1.75rem;
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            .35rem;
}
.a3-post-card__cat {
    display:        inline-block;
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--clr-accent);
    margin-bottom:  .15rem;
}
.a3-post-card__cat:hover { color: var(--clr-accent-dk); }
.a3-post-card__title {
    font-family:  var(--ff-heading);
    font-size:    1.3rem;
    font-weight:  600;
    line-height:  1.3;
    margin:       .1rem 0;
}
.a3-post-card__title a { color: var(--clr-dark); }
.a3-post-card__title a:hover { color: var(--clr-accent-dk); }
.a3-post-card__meta {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            .3rem;
    font-size:      .75rem;
    color:          var(--clr-muted);
    letter-spacing: .03em;
}
.a3-meta-sep { opacity: .4; }
.a3-post-card__excerpt {
    font-size:  .9rem;
    color:      var(--clr-muted);
    line-height: 1.7;
    flex-grow:  1;
    margin-top: .25rem;
}
.a3-post-card__more {
    display:        inline-flex;
    align-items:    center;
    gap:            .3rem;
    font-size:      .78rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--clr-accent);
    margin-top:     .75rem;
    transition:     color var(--dur), gap var(--dur);
}
.a3-post-card__more:hover { color: var(--clr-accent-dk); gap: .55rem; }

/* ── No posts ───────────────────────────────────────────────── */
.a3-blog-empty {
    text-align:  center;
    padding:     5rem 0;
    color:       var(--clr-muted);
    font-size:   1.05rem;
}

/* ── Pagination ─────────────────────────────────────────────── */
.a3-pagination {
    margin-top: 3.5rem;
    display:    flex;
    justify-content: center;
}
.a3-pagination .nav-links { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.a3-pagination .page-numbers {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    min-width:      40px;
    height:         40px;
    padding:        0 .75rem;
    border:         1px solid var(--clr-border);
    border-radius:  var(--radius);
    font-size:      .85rem;
    font-weight:    600;
    color:          var(--clr-muted);
    transition:     background var(--dur), color var(--dur), border-color var(--dur);
}
.a3-pagination .page-numbers.current,
.a3-pagination .page-numbers:hover {
    background:   var(--clr-accent);
    border-color: var(--clr-accent);
    color:        #fff;
}
.a3-pagination .page-numbers.dots { border: none; background: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
    .a3-post-featured { grid-template-columns: 1fr; min-height: auto; }
    .a3-post-featured__img-wrap { aspect-ratio: 16/9; height: auto; }
    .a3-post-featured__body { padding: 2rem 1.75rem; }
}
@media (max-width: 720px) {
    .a3-posts-grid--2col { grid-template-columns: 1fr; }
    .a3-posts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .a3-blog-filter { position: static; }
    .a3-blog-filter__wrap { padding: .75rem 0; }
}

/* Single post */
.a3-single-hero {
    position:   relative;
    min-height: 55vh;
    display:    flex;
    align-items: flex-end;
    overflow:   hidden;
    background: var(--clr-dark);
}
.a3-single-hero__bg { position: absolute; inset: 0; }
.a3-single-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.a3-single-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 60%, transparent 100%); }
.a3-single-hero__inner {
    position: relative;
    z-index:  2;
    width:    100%;
    max-width: var(--max-w);
    margin:   0 auto;
    padding:  3rem 2rem;
    color:    #fff;
}
.a3-single-hero__cat { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--clr-gold); margin-bottom: .6rem; display: block; }
.a3-single-hero__title { font-family: var(--ff-heading); font-style: italic; font-size: clamp(2rem, 5vw, 4rem); color: #fff; margin-bottom: 1rem; font-weight: 400; }
.a3-single-hero__meta { font-size: .82rem; color: rgba(255,255,255,.7); display: flex; flex-wrap: wrap; gap: 1rem; }

.a3-single-content {
    max-width: 760px;
    margin:    0 auto;
    padding:   4rem 2rem;
}
.a3-single-content .entry-content p  { font-size: 1.05rem; line-height: 1.85; color: var(--clr-muted); margin-bottom: 1.5rem; }
.a3-single-content .entry-content h2,
.a3-single-content .entry-content h3 { font-family: var(--ff-heading); font-style: italic; color: var(--clr-dark); margin: 2rem 0 .8rem; }
.a3-single-content .entry-content h2 { font-size: 2rem; }
.a3-single-content .entry-content h3 { font-size: 1.5rem; }
.a3-single-content .entry-content blockquote {
    border-left:  3px solid var(--clr-rose);
    padding:      1rem 1.5rem;
    margin:       2rem 0;
    background:   rgba(247,156,131,.06);
    font-style:   italic;
    color:        var(--clr-dark);
    font-size:    1.1rem;
}
.a3-single-content .entry-content a { color: var(--clr-accent); border-bottom: 1px solid var(--clr-sage-light); transition: color var(--dur); }
.a3-single-content .entry-content a:hover { color: var(--clr-accent-dk); }
.a3-single-content .entry-content img { border-radius: 2px; margin: 1.5rem 0; }
.a3-single-content .entry-content ul li,
.a3-single-content .entry-content ol li { margin-bottom: .5rem; color: var(--clr-muted); }

.a3-single-author {
    background:   var(--clr-surface);
    border:       1px solid var(--clr-border);
    border-top:   3px solid var(--clr-accent);
    padding:      2rem;
    display:      grid;
    grid-template-columns: 80px 1fr;
    gap:          1.5rem;
    align-items:  center;
    margin:       3rem 0;
}
.a3-single-author__avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--clr-border);
}
.a3-single-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.a3-single-author__name { font-weight: 700; color: var(--clr-dark); margin-bottom: .3rem; }
.a3-single-author__bio  { font-size: .9rem; color: var(--clr-muted); }

/* ════════════════════════════════════════════════════════════════════
   COMMENTS  —  brand-styled comment section
   ════════════════════════════════════════════════════════════════════ */
.a3-comments {
    max-width: 760px;
    margin:    0 auto;
    padding:   0 2rem 4rem;
}
.a3-comments__title {
    font-family:   var(--ff-heading);
    font-style:    italic;
    font-size:     1.8rem;
    color:         var(--clr-dark);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}
.a3-comments-list { list-style: none; }
.a3-comment { padding: 1.5rem 0; border-bottom: 1px solid var(--clr-border); }
.a3-comment:last-child { border-bottom: none; }
.a3-comment--inner { padding-left: 2rem; border-left: 2px solid var(--clr-sage-light); margin-top: 1rem; }
.a3-comment__wrap  { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; }
.a3-comment__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--clr-border);
    overflow: hidden;
    flex-shrink: 0;
}
.a3-comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.a3-comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .5rem; }
.a3-comment__author { font-weight: 700; font-size: .9rem; color: var(--clr-dark); }
.a3-comment__author a { color: var(--clr-dark); }
.a3-comment__date   { font-size: .78rem; color: var(--clr-muted); }
.a3-comment__text   { font-size: .95rem; color: var(--clr-muted); line-height: 1.75; }
.a3-comment__text p { margin-bottom: .5rem; }
.a3-comment__reply a {
    font-size:    .72rem;
    font-weight:  700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:        var(--clr-accent);
    margin-top:   .7rem;
    display:      inline-block;
    transition:   color var(--dur);
}
.a3-comment__reply a:hover { color: var(--clr-accent-dk); }

/* Pingback / trackback */
.a3-comment.bypostauthor .a3-comment__author::after {
    content:      ' ✿';
    color:        var(--clr-gold);
    font-size:    .8em;
}

/* Comment form */
.a3-comment-form-wrap { margin-top: 3rem; }
.a3-comment-form-title {
    font-family:   var(--ff-heading);
    font-style:    italic;
    font-size:     1.5rem;
    color:         var(--clr-dark);
    margin-bottom: 1.5rem;
}
.a3-comment-form-wrap .comment-form { display: flex; flex-direction: column; gap: 1rem; }
.a3-comment-form-wrap .comment-form label {
    font-size:    .78rem;
    font-weight:  700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:        var(--clr-dark);
    display:      block;
    margin-bottom: .3rem;
}
.a3-comment-form-wrap .comment-form input[type="text"],
.a3-comment-form-wrap .comment-form input[type="email"],
.a3-comment-form-wrap .comment-form input[type="url"],
.a3-comment-form-wrap .comment-form textarea {
    width:        100%;
    padding:      13px 16px;
    border:       1.5px solid var(--clr-border);
    background:   var(--clr-bg);
    font-family:  var(--ff-body);
    font-size:    .95rem;
    color:        var(--clr-dark);
    outline:      none;
    border-radius: var(--radius-sm);
    transition:   border-color var(--dur), box-shadow var(--dur);
}
.a3-comment-form-wrap .comment-form input:focus,
.a3-comment-form-wrap .comment-form textarea:focus {
    border-color: var(--clr-accent);
    box-shadow:   0 0 0 3px rgba(127,149,124,.15);
}
.a3-comment-form-wrap .comment-form textarea { min-height: 130px; resize: vertical; }
.a3-comment-form-wrap .comment-form .form-submit { margin-top: .5rem; }
.a3-comment-form-wrap #submit {
    display:      inline-flex;
    padding:      .75rem 1.8rem;
    background:   var(--clr-cta);
    color:        var(--clr-dark);
    font-family:  var(--ff-body);
    font-size:    .8rem;
    font-weight:  700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border:       none;
    cursor:       pointer;
    transition:   background var(--dur);
}
.a3-comment-form-wrap #submit:hover { background: var(--clr-cta-dk); }
.a3-comment-form-wrap .comment-notes { font-size: .85rem; color: var(--clr-muted); margin-bottom: .5rem; }
.a3-comment-form-wrap .logged-in-as { font-size: .85rem; color: var(--clr-muted); }
.a3-comment-form-wrap .logged-in-as a { color: var(--clr-accent); }
.comment-reply-title { font-family: var(--ff-heading); font-style: italic; font-size: 1.5rem; margin-bottom: .5rem; color: var(--clr-dark); }
.comment-reply-title small a { font-size: .7rem; font-style: normal; color: var(--clr-muted); margin-left: 1rem; }

/* ════════════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════════════ */
.a3-pagination { display: flex; justify-content: center; gap: .5rem; padding: 3rem 0; flex-wrap: wrap; }
.a3-pagination a,
.a3-pagination span {
    display:  flex;
    align-items: center;
    justify-content: center;
    width:    44px; height: 44px;
    border:   1px solid var(--clr-border);
    font-size: .85rem;
    font-weight: 600;
    color:    var(--clr-muted);
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.a3-pagination a:hover,
.a3-pagination .current { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR  (blog, page with sidebar)
   ════════════════════════════════════════════════════════════════════ */
.a3-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    padding: 4rem 0;
    align-items: start;
}
.a3-sidebar { display: flex; flex-direction: column; gap: 2rem; }
.widget { background: var(--clr-surface); padding: 1.5rem; border: 1px solid var(--clr-border); }
.widget-title {
    font-family: var(--ff-heading);
    font-style:  italic;
    font-size:   1.2rem;
    color:       var(--clr-dark);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--clr-accent);
}
.widget ul { list-style: none; }
.widget ul li { padding: .4rem 0; border-bottom: 1px solid var(--clr-border); font-size: .9rem; }
.widget ul li a { color: var(--clr-muted); transition: color var(--dur); }
.widget ul li a:hover { color: var(--clr-accent); }
@media (max-width: 900px) { .a3-with-sidebar { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   UTILITIES
   ════════════════════════════════════════════════════════════════════ */
.a3-process-bg { background: rgba(127,149,124,.08); }
.mt-1  { margin-top: 1rem; }
.mt-2  { margin-top: 2rem; }
.gap-1 { gap: 1rem; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE HERO  (shared by galerija, kontakt, usluge templates)
   ════════════════════════════════════════════════════════════════════ */
.a3-page-hero {
    position:   relative;
    min-height: 60vh;
    display:    flex;
    align-items: flex-end;
    overflow:   hidden;
    background: var(--clr-dark);
    /* Pull hero up behind the fixed nav so dark bg shows through transparent nav */
    margin-top: calc(-1 * var(--nav-h));
}
.a3-page-hero__bg {
    position:   absolute;
    inset:      0;
    background-size:     cover;
    background-position: center;
}
.a3-page-hero__bg img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.a3-page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(65,64,66,.92) 0%,
        rgba(65,64,66,.68) 50%,
        rgba(65,64,66,.45) 100%
    );
}
.a3-page-hero__inner {
    position:    relative;
    z-index:     2;
    padding-bottom: 5rem;
    /* Push text below the fixed nav */
    padding-top: calc(var(--nav-h) + 2rem);
}
.a3-page-hero .eyebrow {
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.a3-page-hero .section-title {
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.a3-page-hero__lead {
    color:      rgba(255,255,255,.92);
    font-size:  1.1rem;
    max-width:  580px;
    margin-top: .75rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Subtitle — used on About hero for role/title below name */
.a3-page-hero__subtitle {
    color:          var(--clr-sage-light);
    font-size:      1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom:  .5rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* ── Title size variants (set via Hero meta box) ── */
.a3-page-hero__title--sm { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
.a3-page-hero__title--lg { font-size: clamp(2.5rem, 6vw, 4rem) !important; }
.a3-page-hero__title--xl { font-size: clamp(3rem, 8vw, 5.5rem) !important; }

/* ── Per-page variants ────────────────────────────── */
.a3-page-hero--gallery  { background: var(--clr-sage-dark); }
.a3-page-hero--contact  { background: var(--clr-dark); }
.a3-page-hero--usluge   { background: var(--clr-dark); }
.a3-page-hero--about    { background: var(--clr-dark); }
.a3-page-hero--blog     { background: var(--clr-sage); }

/* ── Cover Block Hero (block pattern approach) ────── */
.a3-hero-cover {
    margin-top: calc(-1 * var(--nav-h)) !important;
}
.a3-hero-cover .wp-block-cover__background {
    background: linear-gradient(
        to top,
        rgba(65,64,66,.92) 0%,
        rgba(65,64,66,.68) 50%,
        rgba(65,64,66,.45) 100%
    ) !important;
}
.a3-hero-cover .wp-block-cover__inner-container {
    width: 100%;
    max-width: var(--wp--style--global--content-size, 1000px);
    margin: 0 auto;
    padding-left: var(--wp--preset--spacing--40, 1.5rem);
    padding-right: var(--wp--preset--spacing--40, 1.5rem);
}
.a3-hero-cover .eyebrow {
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
    font-family: var(--ff-script, 'Dancing Script', cursive) !important;
}
.a3-hero-cover h1 {
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.a3-hero-cover .a3-hero-lead {
    max-width: 580px;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
    opacity: .92;
}
.a3-hero-cover .a3-hero-subtitle {
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
/* Projekt meta inline (datum · lokacija · kategorija) */
.a3-projekt-meta-inline {
    opacity: .85;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* ── Projekt patterns ─────────────────────────────── */
.a3-projekt-meta-card {
    border: 1px solid var(--clr-border, #e5e5e5);
}
.a3-projekt-citat-section {
    border-top:    1px solid var(--clr-border, #e5e5e5);
    border-bottom: 1px solid var(--clr-border, #e5e5e5);
}
.a3-projekt-gallery.wp-block-gallery {
    gap: 1rem !important;
}
.a3-projekt-gallery .wp-block-image img {
    border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   GALLERY PAGE  (template-galerija.php)
   ════════════════════════════════════════════════════════════════════ */
.a3-gallery-tabs {
    background:   var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    position:     sticky;
    top:          var(--nav-h);
    z-index:      40;
    padding:      .75rem 0;
}
.a3-gallery-tabs__list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem;
    align-items: center;
}
.a3-gallery-tab {
    padding:        .45rem 1.1rem;
    border:         1px solid var(--clr-border);
    background:     transparent;
    font-family:    var(--ff-body);
    font-size:      .8rem;
    font-weight:    600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--clr-muted);
    cursor:         pointer;
    transition:     background var(--dur), color var(--dur), border-color var(--dur);
    border-radius:  50px;
}
.a3-gallery-tab:hover,
.a3-gallery-tab.active {
    background:   var(--clr-accent);
    border-color: var(--clr-accent);
    color:        #fff;
}
.a3-gallery-section { padding: 4rem 0 6rem; }

/* ════════════════════════════════════════════════════════════════════
   CONTACT PAGE  (template-kontakt.php)
   ════════════════════════════════════════════════════════════════════ */
.a3-contact-page { padding: 6rem 0; }
.a3-contact-page__grid {
    display:               grid;
    grid-template-columns: 1fr 380px;
    gap:                   4rem;
    align-items:           start;
}
@media (max-width: 960px) {
    .a3-contact-page__grid { grid-template-columns: 1fr; }
}

/* Smart form */
.a3-contact-form--smart .a3-form-dynamic__group[hidden] { display: none; }

/* ── Form fields ──────────────────────────────────────────────── */
.a3-form-group {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
    margin-bottom:  1.25rem;
}
.a3-form-group label {
    font-size:      .78rem;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--clr-dark);
}
.a3-form-group label span[aria-hidden="true"] { color: var(--clr-rose); margin-left: .15em; }

.a3-contact-form input[type="text"],
.a3-contact-form input[type="email"],
.a3-contact-form input[type="tel"],
.a3-contact-form input[type="date"],
.a3-contact-form input[type="number"],
.a3-contact-form select,
.a3-contact-form textarea {
    width:              100%;
    padding:            .75rem 1rem;
    font-family:        var(--ff-body);
    font-size:          .95rem;
    color:              var(--clr-dark);
    background:         var(--clr-surface);
    border:             1.5px solid var(--clr-border);
    border-radius:      var(--radius-sm);
    outline:            none;
    transition:         border-color var(--dur), box-shadow var(--dur);
    appearance:         none;
    -webkit-appearance: none;
    box-sizing:         border-box;
    line-height:        1.5;
}
.a3-contact-form select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237f957c'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 1rem center;
    padding-right:       2.5rem;
    cursor:              pointer;
}
.a3-contact-form input:focus,
.a3-contact-form select:focus,
.a3-contact-form textarea:focus {
    border-color: var(--clr-sage);
    box-shadow:   0 0 0 3px rgba(127,149,124,.15);
}
.a3-contact-form input::placeholder,
.a3-contact-form textarea::placeholder { color: var(--clr-muted); opacity: 1; }
.a3-contact-form textarea { resize: vertical; min-height: 110px; }

/* Two-column row */
.a3-form-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
}
@media (max-width: 560px) { .a3-form-row { grid-template-columns: 1fr; } }

/* Privacy checkbox */
.a3-form-group--check { margin-bottom: 1.5rem; }
.a3-form-check {
    display:     flex;
    align-items: flex-start;
    gap:         .65rem;
    cursor:      pointer;
    font-size:   .85rem;
    color:       var(--clr-muted);
    line-height: 1.55;
}
.a3-form-check input[type="checkbox"] {
    width:              18px;
    height:             18px;
    min-width:          18px;
    border:             1.5px solid var(--clr-border);
    border-radius:      3px;
    background:         var(--clr-surface);
    appearance:         none;
    -webkit-appearance: none;
    cursor:             pointer;
    margin-top:         .2em;
    transition:         border-color var(--dur), background var(--dur);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    flex-shrink:        0;
}
.a3-form-check input[type="checkbox"]:checked {
    background:   var(--clr-sage);
    border-color: var(--clr-sage);
}
.a3-form-check input[type="checkbox"]:checked::after {
    content:     '';
    display:     block;
    width:       5px;
    height:      9px;
    border:      2px solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg) translate(-1px, -1px);
}
.a3-form-check a { color: var(--clr-sage); text-decoration: underline; }

/* Form response message */
#form-response { margin-bottom: 1rem; font-size: .9rem; padding: .75rem 1rem; border-radius: var(--radius-sm); }
#form-response.is-success { background: rgba(127,149,124,.1); border: 1px solid var(--clr-sage-light); color: var(--clr-sage-dark); }
#form-response.is-error   { background: rgba(247,156,131,.1); border: 1px solid var(--clr-rose);       color: #b8502e; }

/* Info card */
.a3-contact-info-card {
    background: var(--clr-surface);
    border:     1px solid var(--clr-border);
    padding:    2.5rem;
    position:   sticky;
    top:        calc(var(--nav-h) + 1.5rem);
}
.a3-contact-info-list {
    list-style: none;
    margin:     1.5rem 0;
    display:    flex;
    flex-direction: column;
    gap:        .9rem;
}
.a3-contact-info-list li {
    display:     flex;
    align-items: flex-start;
    gap:         .75rem;
    font-size:   .95rem;
}
.a3-contact-info-list__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           48px;
    height:          48px;
    background:      rgba(127,149,124,.12);
    border-radius:   50%;
    color:           var(--clr-sage);
    flex-shrink:     0;
}
.a3-contact-info-list__icon svg { width: 22px; height: 22px; }
.a3-contact-info-list__text strong {
    display:        block;
    font-size:      .8rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--clr-dark);
    margin-bottom:  .15rem;
}
.a3-contact-info-list__text a,
.a3-contact-info-list__text span {
    font-size: .9rem;
    color:     var(--clr-muted);
}
.a3-contact-social { margin-top: 1.5rem; border-top: 1px solid var(--clr-border); padding-top: 1.5rem; }
.a3-contact-social__label { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--clr-muted); margin-bottom: .6rem; }
.a3-contact-social__links { display: flex; gap: .75rem; flex-wrap: wrap; }
.a3-contact-social__link {
    display:      inline-flex;
    align-items:  center;
    padding:      .4rem 1rem;
    font-size:    .8rem;
    font-weight:  600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border:       1px solid var(--clr-border);
    color:        var(--clr-muted);
    transition:   all var(--dur);
}
.a3-contact-social__link:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

/* FAQ — contact page accordion */
.a3-contact-faq {
    margin-top:  2rem;
    border-top:  1px solid var(--clr-border);
    padding-top: 2rem;
}
.a3-contact-faq h3 {
    font-family:    var(--ff-heading);
    font-size:      1.25rem;
    margin-bottom:  1.25rem;
    color:          var(--clr-dark);
}

/* Each FAQ item */
.a3-contact-faq .a3-faq-item {
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-md, 8px);
    margin-bottom: .6rem;
    padding:       0;
    overflow:      hidden;
    background:    #fff;
    transition:    border-color .25s, box-shadow .25s;
}
.a3-contact-faq .a3-faq-item:last-child { margin-bottom: 0; }
.a3-contact-faq .a3-faq-item[open] {
    border-color: var(--clr-sage-light);
    box-shadow:   0 2px 12px rgba(127,149,124,.1);
}

/* Summary (question) */
.a3-contact-faq .a3-faq-item summary {
    cursor:          pointer;
    font-weight:     600;
    font-size:       .9rem;
    font-family:     var(--ff-body);
    color:           var(--clr-dark);
    list-style:      none;
    position:        relative;
    padding:         1rem 1.25rem;
    line-height:     1.4;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem;
    transition:      background .2s;
}
.a3-contact-faq .a3-faq-item summary:hover {
    background: rgba(127,149,124,.04);
}
.a3-contact-faq .a3-faq-item summary::-webkit-details-marker { display: none; }

/* + / × toggle icon — real span for perfect centering */
.a3-contact-faq .a3-faq-item summary::after { display: none; }

.a3-faq-toggle {
    position:        relative;
    flex-shrink:     0;
    width:           26px;
    height:          26px;
    border-radius:   50%;
    background:      rgba(127,149,124,.12);
    transition:      background .3s;
    pointer-events:  none;
}
/* Plus icon — two SVG lines centered */
.a3-faq-toggle::before,
.a3-faq-toggle::after {
    content:    '';
    position:   absolute;
    background: var(--clr-sage);
    border-radius: 1px;
    transition: transform .3s, background .3s;
}
/* horizontal bar */
.a3-faq-toggle::before {
    width:  10px;
    height: 1.5px;
    top:    50%;
    left:   50%;
    transform: translate(-50%, -50%);
}
/* vertical bar */
.a3-faq-toggle::after {
    width:  1.5px;
    height: 10px;
    top:    50%;
    left:   50%;
    transform: translate(-50%, -50%);
}
/* Open state — rotate to × and change colors */
.a3-faq-item[open] .a3-faq-toggle {
    background: var(--clr-sage);
}
.a3-faq-item[open] .a3-faq-toggle::before {
    background: #fff;
    transform:  translate(-50%, -50%) rotate(45deg);
}
.a3-faq-item[open] .a3-faq-toggle::after {
    background: #fff;
    transform:  translate(-50%, -50%) rotate(45deg);
}

/* Answer text */
.a3-contact-faq .a3-faq-item p {
    font-size:     .9rem;
    line-height:   1.65;
    color:         var(--clr-dark);
    opacity:       .75;
    margin:        0;
    padding:       0 1.25rem 1.15rem;
}

/* ════════════════════════════════════════════════════════════════════
   O MENI PAGE  (template-o-meni.php)
   ════════════════════════════════════════════════════════════════════ */
/* (Old .a3-about-hero removed — now uses unified .a3-page-hero--about) */

.a3-about-story { padding: 6rem 0; }
.a3-about-story__grid {
    display:               grid;
    grid-template-columns: 380px 1fr;
    gap:                   4rem;
    align-items:           center;
}
@media (max-width: 900px) { .a3-about-story__grid { grid-template-columns: 1fr; } }
.a3-about-story__img-wrap { position: relative; }
.a3-about-story__img-wrap img { width: 100%; display: block; }
.a3-about-story__text h2 { margin-bottom: 1.5rem; }
.a3-about-story__text p  { margin-bottom: 1rem; }

.a3-about-stats { background: var(--clr-accent); padding: 4rem 0; }
.a3-about-stats__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2rem;
    text-align:            center;
}
@media (max-width: 700px) { .a3-about-stats__grid { grid-template-columns: repeat(2, 1fr); } }
.a3-about-stat__num {
    display:     block;
    font-family: var(--ff-heading);
    font-size:   clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color:       #fff;
    line-height: 1;
}
.a3-about-stat__lbl {
    display:    block;
    color:      rgba(255,255,255,.8);
    font-size:  .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: .4rem;
}

.a3-about-values { padding: 6rem 0; }
.a3-values-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
}
@media (max-width: 700px) { .a3-values-grid { grid-template-columns: 1fr; } }
.a3-value-card {
    padding:    2.5rem 2rem;
    border:     1px solid var(--clr-border);
    background: var(--clr-surface);
    text-align: center;
}
.a3-value-card__icon { font-size: 2.5rem; color: var(--clr-accent); display: block; margin-bottom: 1rem; }
.a3-value-card h3,
.a3-value-card__heading { font-family: var(--ff-heading); font-size: 1.4rem; margin-bottom: .75rem; text-align: center; }
.a3-value-card p,
.a3-value-card__desc    { font-size: .9rem; color: var(--clr-muted); line-height: 1.7; text-align: center; margin: 0; }

.a3-about-studio { padding: 6rem 0; background: rgba(127,149,124,.06); }
.a3-about-studio__grid {
    display:               grid;
    grid-template-columns: 1fr 500px;
    gap:                   4rem;
    align-items:           center;
}
@media (max-width: 960px) { .a3-about-studio__grid { grid-template-columns: 1fr; } }
.a3-about-studio__list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.a3-about-studio__list li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.a3-about-studio__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--clr-accent); flex-shrink: 0; }
.a3-about-studio__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.a3-about-studio__img-main { grid-column: 1 / -1; }
.a3-about-studio__imgs img { width: 100%; display: block; }

.a3-about-quote { padding: 6rem 0; background: var(--clr-dark); }
.a3-about-quote__block { max-width: 720px; margin: 0 auto; text-align: center; }
.a3-about-quote__text  { font-family: var(--ff-heading); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); color: #fff; line-height: 1.4; margin-bottom: 1.5rem; }
.a3-about-quote__author { color: var(--clr-sage-light); font-size: .9rem; }
.a3-about-quote__author strong { display: block; font-size: 1rem; color: #fff; margin-bottom: .2rem; }

/* ════════════════════════════════════════════════════════════════════
   O MENI — BLOCK PATTERN  (akp/o-meni-sadrzaj)
   ════════════════════════════════════════════════════════════════════ */

/* 1. Story */
.a3-omeni-story__photo-col { position: relative; }
.a3-omeni-story__img-wrap  { position: relative; display: inline-block; width: 100%; }
.a3-omeni-portrait img     { width: 100%; display: block; border-radius: 2px; }

/* Badge — sits over portrait bottom-right */
.a3-omeni-story__img-wrap .a3-about__badge {
    position:         absolute;
    bottom:           -1.5rem;
    right:            -1.5rem;
    width:            130px;
    height:           130px;
    border-radius:    50%;
    background:       var(--clr-sage);
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    color:            #fff;
    text-align:       center;
    box-shadow:       0 8px 32px rgba(0,0,0,.15);
    border:           4px solid var(--clr-surface);
}
.a3-about__badge .a3-about__badge-num {
    font-family: var(--ff-heading);
    font-size:   2rem;
    font-weight: 700;
    line-height: 1;
    margin:      0;
}
.a3-about__badge .a3-about__badge-txt {
    font-size:      .65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity:        .9;
    margin:         .2rem 0 0;
    padding:        0 .5rem;
}

/* Signature */
.a3-about__signature {
    font-family: var(--ff-script);
    font-size:   2rem;
    color:       var(--clr-accent);
    line-height: 1.2;
    margin-top:  2rem !important;
}

/* 2. Stats */
.a3-omeni-stats .wp-block-columns { gap: 0 !important; }
.a3-omeni-stat {
    text-align:  center;
    padding:     2rem 1rem;
    border-right: 1px solid rgba(127,149,124,.2);
}
.a3-omeni-stat:last-child { border-right: none; }
.a3-omeni-stat__num {
    font-family: var(--ff-heading);
    font-size:   clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 700;
    color:       var(--clr-sage) !important;
    line-height: 1;
    margin:      0 0 .4rem !important;
}
.a3-omeni-stat__lbl {
    font-size:      .8rem !important;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--clr-muted) !important;
    margin:         0 !important;
}
@media (max-width: 700px) {
    .a3-omeni-stats .wp-block-columns { flex-wrap: wrap !important; }
    .a3-omeni-stats .wp-block-column  { flex-basis: 50% !important; }
    .a3-omeni-stat { border-right: none; border-bottom: 1px solid rgba(127,149,124,.2); }
}

/* 3. Values — reuse .a3-value-card (already defined) */
.a3-omeni-values .a3-value-card {
    padding:       2.5rem 2rem;
    border:        1px solid var(--clr-border);
    background:    var(--clr-surface);
    border-radius: 2px;
}
.a3-omeni-values .a3-value-card__icon {
    /* Circle bubble — matches .session-icon on front page */
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           60px;
    height:          60px;
    min-width:       60px;
    border-radius:   50%;
    background:      rgba(127,149,124,.12);
    margin:          0 auto 1.25rem !important;
    color:           var(--clr-accent);
}
.a3-omeni-values .a3-value-card__icon svg {
    width:  26px;
    height: 26px;
}

/* 4. Studio */
.a3-omeni-studio__imgs { display: flex; flex-direction: column; gap: 1rem; }
.a3-omeni-studio__img-main img,
.a3-omeni-studio__img-sm img   { width: 100%; display: block; border-radius: 2px; }
.a3-studio-list {
    margin-top: 1.5rem !important;
    display:    flex;
    flex-direction: column;
    gap:        .7rem;
}
.a3-studio-list li { font-size: .95rem; }
.a3-studio-list li::marker { color: var(--clr-accent); }

/* 5. CTA strip — light bg, sits after dark testimonials so there's no two dark blocks */
.a3-omeni-cta-strip {
    background: #fff;
    text-align: center;
    border-top: 1px solid var(--clr-border);
}
.a3-omeni-cta-strip h2   { margin-bottom: 1rem; }
.a3-omeni-cta-strip p    { color: var(--clr-muted); max-width: 520px; margin: 0 auto; }

/* 6. Featured quote (old template fallback) */
.a3-omeni-quote { background: var(--clr-dark); }
.a3-omeni-quote .a3-featured-quote {
    max-width:  720px;
    margin:     0 auto;
    text-align: center;
    border:     none !important;
    padding:    0 !important;
}
.a3-omeni-quote .a3-featured-quote p {
    font-family: var(--ff-heading);
    font-style:  italic;
    font-size:   clamp(1.4rem, 3vw, 2rem);
    color:       #fff;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.a3-omeni-quote .a3-featured-quote cite {
    font-style: normal;
    color:      var(--clr-sage-light);
    font-size:  .9rem;
}

/* ════════════════════════════════════════════════════════════════════
   USLUGE PAGE  (template-usluge.php)
   ════════════════════════════════════════════════════════════════════ */
.a3-usluge-benefiti { padding: 6rem 0; background: rgba(127,149,124,.06); }
.a3-benefiti-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2rem;
}
@media (max-width: 900px) { .a3-benefiti-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .a3-benefiti-grid { grid-template-columns: 1fr; } }
.a3-benefit { text-align: center; padding: 2rem 1rem; }
.a3-benefit__icon { font-size: 2rem; color: var(--clr-accent); display: block; margin-bottom: .75rem; }
.a3-benefit h3    { font-family: var(--ff-heading); font-size: 1.25rem; margin-bottom: .5rem; }
.a3-benefit p     { font-size: .9rem; color: var(--clr-muted); }

.a3-usluge-faq { padding: 6rem 0; }
.a3-usluge-faq__container { max-width: 780px; }
.a3-faq-list { display: flex; flex-direction: column; }

/* ════════════════════════════════════════════════════════════════════
   PROJEKT PAGE  (template-projekt.php)
   ════════════════════════════════════════════════════════════════════ */
.a3-projekt-hero {
    position:    relative;
    min-height:  85vh;
    display:     flex;
    align-items: flex-end;
    overflow:    hidden;
}
.a3-projekt-hero__bg {
    position: absolute;
    inset:    0;
}
.a3-projekt-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(65,64,66,.8) 0%, rgba(65,64,66,.15) 60%);
}
.a3-projekt-hero__inner {
    position:       relative;
    z-index:        2;
    padding-bottom: 6rem;
    padding-top:    3rem;
}
.a3-projekt-hero__content { max-width: 700px; }
.a3-projekt-hero__title {
    font-family: var(--ff-heading);
    font-size:   clamp(2.5rem, 6vw, 5rem);
    color:       #fff;
    line-height: 1.1;
    margin:      .5rem 0 1rem;
}
.a3-projekt-hero__meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem 1.5rem;
    color:      rgba(255,255,255,.75);
    font-size:  .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.a3-projekt-content { padding: 5rem 0; }
.a3-projekt-content > * + * { margin-top: 1.5rem; }

.a3-projekt-koncept { padding: 5rem 0; }
.a3-projekt-koncept__grid {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   3rem;
    align-items:           start;
}
@media (max-width: 768px) { .a3-projekt-koncept__grid { grid-template-columns: 1fr; } }
.a3-projekt-koncept__lead { font-size: 1.1rem; color: var(--clr-muted); margin-top: 1rem; line-height: 1.7; }
.a3-projekt-meta-list { display: flex; flex-direction: column; gap: .75rem; }
.a3-projekt-meta-list div { display: flex; flex-direction: column; }
.a3-projekt-meta-list dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--clr-muted); }
.a3-projekt-meta-list dd { font-weight: 600; color: var(--clr-dark); margin: 0; }

.a3-projekt-galerija { padding: 5rem 0; background: var(--clr-dark); }
.a3-projekt-galerija .section-title { color: #fff; }
.a3-projekt-galerija .eyebrow       { color: var(--clr-sage-light); }
.a3-projekt-galerija .a3-section-head { margin-bottom: 2rem; }

.a3-projekt-citat { padding: 6rem 0; background: var(--clr-accent); }
.a3-projekt-citat__block { max-width: 720px; margin: 0 auto; text-align: center; }
.a3-projekt-citat__tekst {
    font-family: var(--ff-heading);
    font-style:  italic;
    font-size:   clamp(1.4rem, 3vw, 2rem);
    color:       #fff;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.a3-projekt-citat__autor { color: rgba(255,255,255,.8); font-size: .9rem; }
.a3-projekt-citat__autor strong { color: #fff; display: block; margin-bottom: .2rem; }
.a3-projekt-citat__autor span   { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

.a3-projekt-slicni { padding: 6rem 0; }
.a3-projekt-slicni__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}
@media (max-width: 768px) { .a3-projekt-slicni__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .a3-projekt-slicni__grid { grid-template-columns: 1fr; } }
.a3-projekt-card__img-wrap { display: block; position: relative; overflow: hidden; aspect-ratio: 4/5; }
.a3-projekt-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.a3-projekt-card__img-wrap:hover img { transform: scale(1.04); }
.a3-projekt-card__body { padding: 1rem 0; }
.a3-projekt-card__tag {
    display:       inline-block;
    font-size:     .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:         var(--clr-accent);
    margin-bottom: .4rem;
}
.a3-projekt-card__body h3 { font-family: var(--ff-heading); font-size: 1.25rem; }
.a3-projekt-card__body h3 a { color: var(--clr-dark); }
.a3-projekt-card__body h3 a:hover { color: var(--clr-accent); }

/* ════════════════════════════════════════════════════════════════════
   REZERVIRAJ — extended btns variant
   ════════════════════════════════════════════════════════════════════ */
.a3-rezerviraj__btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.a3-rezerviraj__btns .btn-outline {
    border-color: rgba(255,255,255,.5);
    color:        #fff;
}
.a3-rezerviraj__btns .btn-outline:hover {
    background:   #fff;
    color:        var(--clr-dark);
}

/* ════════════════════════════════════════════════════════════════════
   PAGE CONTENT (generic content area for all page templates)
   ════════════════════════════════════════════════════════════════════ */
.a3-page-content {
    padding:   5rem 0;
    max-width: 780px;
}
.a3-page-content > * + * { margin-top: 1.25rem; }
.a3-page-content h2 { font-family: var(--ff-heading); font-size: 2rem; margin-top: 2.5rem; }
.a3-page-content h3 { font-family: var(--ff-heading); font-size: 1.5rem; margin-top: 2rem; }
.a3-page-content blockquote {
    border-left: 3px solid var(--clr-accent);
    padding-left: 1.5rem;
    font-style:  italic;
    color:       var(--clr-muted);
}

/* ════════════════════════════════════════════════════════════════════
   CUSTOM CURSOR  (desktop only, mix-blend-mode: difference)
   ════════════════════════════════════════════════════════════════════ */
.a3-cursor-dot,
.a3-cursor-ring {
    position:       fixed;
    top:            0;
    left:           0;
    border-radius:  50%;
    pointer-events: none;
    z-index:        10000;
    mix-blend-mode: difference;
    will-change:    transform;
    transition:     width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s;
}
.a3-cursor-dot {
    width:      8px;
    height:     8px;
    background: #fff;
    margin:     -4px;
}
.a3-cursor-ring {
    width:      38px;
    height:     38px;
    margin:     -19px;
    border:     1.5px solid rgba(255,255,255,.75);
    background: transparent;
}
/* Hover state: dot shrinks, ring grows */
.a3-cursor-dot.is-hover  { width: 0;   height: 0;   opacity: 0; }
.a3-cursor-ring.is-hover { width: 64px; height: 64px; margin: -32px; border-color: #fff; }
/* Hide on touch devices via JS; also hide natively */
@media (hover: none) {
    .a3-cursor-dot, .a3-cursor-ring { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SECTION TITLE REVEAL  (clip-path / translateY — JS wraps in .a3-title-wrap)
   ════════════════════════════════════════════════════════════════════ */
.a3-title-wrap {
    overflow: hidden;
    display:  block;
}
.a3-title-wrap .section-title {
    display:    block;
    transform:  translateY(110%) skewY(2.5deg);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    /* Override any existing reveal transition on section-title */
    opacity: 1 !important;
}
.a3-title-wrap.is-visible .section-title {
    transform: translateY(0) skewY(0);
}

/* ════════════════════════════════════════════════════════════════════
   TESTIMONIALS MARQUEE  (replaces carousel)
   ════════════════════════════════════════════════════════════════════ */
.a3-testi-marquee-section { overflow: hidden; }

.a3-testi-marquee-outer {
    position:   relative;
    overflow:   hidden;
    margin:     2.5rem -40px 0;  /* bleed past container */
    padding:    1rem 0 1.5rem;
}
/* Edge fades */
.a3-testi-marquee-outer::before,
.a3-testi-marquee-outer::after {
    content:    '';
    position:   absolute;
    top:        0; bottom: 0;
    width:      120px;
    z-index:    2;
    pointer-events: none;
}
.a3-testi-marquee-outer::before {
    left: 0;
    background: linear-gradient(to right, var(--clr-bg), transparent);
}
.a3-testi-marquee-outer::after {
    right: 0;
    background: linear-gradient(to left, var(--clr-bg), transparent);
}

.a3-testi-marquee__track {
    display:   flex;
    gap:       1.5rem;
    width:     max-content;
    animation: marquee-h 40s linear infinite;
}
/* Pause on hover anywhere over the outer */
.a3-testi-marquee-outer:hover .a3-testi-marquee__track {
    animation-play-state: paused;
}
@keyframes marquee-h {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.a3-testi-marquee-card {
    flex:          0 0 340px;
    background:    var(--clr-surface);
    border-top:    3px solid var(--clr-hi);
    border-radius: var(--radius-lg);
    padding:       2rem 1.75rem;
    position:      relative;
    transition:    box-shadow var(--dur), transform var(--dur);
    cursor:        default;
}
.a3-testi-marquee-card:hover {
    box-shadow: 0 12px 40px rgba(65,64,66,.1);
    transform:  translateY(-3px);
}
.a3-testi-marquee-card .a3-testi-quote {
    font-family: var(--ff-heading);
    font-size:   4rem;
    line-height: 1;
    color:       var(--clr-hi);
    opacity:     .35;
    position:    absolute;
    top:         .5rem;
    right:       1.25rem;
}
.a3-testi-marquee-card .a3-testi-text {
    font-size:   .92rem;
    line-height: 1.75;
    color:       var(--clr-muted);
    margin:      .5rem 0 1.25rem;
}
.a3-testi-marquee-card .a3-testi-author {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin-top:  auto;
}
.a3-testi-marquee-card .a3-testi-stars {
    color:       var(--clr-gold);
    font-size:   .8rem;
    margin-top:  .2rem;
    letter-spacing: .1em;
}
@media (max-width: 600px) {
    .a3-testi-marquee-card { flex-basis: 280px; padding: 1.5rem 1.25rem; }
}

/* ════════════════════════════════════════════════════════════════════
   BENTO GRID GALLERY  (editorial layout, replaces plain masonry where used)
   ════════════════════════════════════════════════════════════════════ */
.a3-bento {
    display:              grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows:        80px;
    gap:                   6px;
}
/* Pattern repeats every 12 items */
.a3-bento-item:nth-child(12n+1)  { grid-column: span 5; grid-row: span 6; }
.a3-bento-item:nth-child(12n+2)  { grid-column: span 4; grid-row: span 4; }
.a3-bento-item:nth-child(12n+3)  { grid-column: span 3; grid-row: span 5; }
.a3-bento-item:nth-child(12n+4)  { grid-column: span 4; grid-row: span 3; }
.a3-bento-item:nth-child(12n+5)  { grid-column: span 4; grid-row: span 5; }
.a3-bento-item:nth-child(12n+6)  { grid-column: span 4; grid-row: span 4; }
.a3-bento-item:nth-child(12n+7)  { grid-column: span 7; grid-row: span 5; }
.a3-bento-item:nth-child(12n+8)  { grid-column: span 5; grid-row: span 3; }
.a3-bento-item:nth-child(12n+9)  { grid-column: span 3; grid-row: span 5; }
.a3-bento-item:nth-child(12n+10) { grid-column: span 5; grid-row: span 4; }
.a3-bento-item:nth-child(12n+11) { grid-column: span 4; grid-row: span 3; }
.a3-bento-item:nth-child(12n+12) { grid-column: span 7; grid-row: span 4; }

.a3-bento-item { position: relative; overflow: hidden; }
.a3-bento-item a { display: block; width: 100%; height: 100%; }
.a3-bento-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .65s var(--ease);
}
.a3-bento-item:hover img { transform: scale(1.06); }

.a3-bento-item__overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(65, 64, 66, 0.58);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    opacity:         0;
    transition:      opacity .3s var(--ease);
    color:           #fff;
    text-align:      center;
    padding:         1rem;
}
.a3-bento-item:hover .a3-bento-item__overlay { opacity: 1; }
.a3-bento-item__overlay-icon  {
    width: 40px; height: 40px;
    border: 1.5px solid rgba(255,255,255,.7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; line-height: 1; flex-shrink: 0;
}
.a3-bento-item__overlay-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .a3-bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 60px; gap: 4px; }
    .a3-bento-item:nth-child(12n+1)  { grid-column: span 4; grid-row: span 5; }
    .a3-bento-item:nth-child(12n+2)  { grid-column: span 2; grid-row: span 3; }
    .a3-bento-item:nth-child(12n+3)  { grid-column: span 3; grid-row: span 4; }
    .a3-bento-item:nth-child(12n+4)  { grid-column: span 3; grid-row: span 3; }
    .a3-bento-item:nth-child(12n+5)  { grid-column: span 4; grid-row: span 4; }
    .a3-bento-item:nth-child(12n+6)  { grid-column: span 2; grid-row: span 3; }
    .a3-bento-item:nth-child(12n+7)  { grid-column: span 3; grid-row: span 4; }
    .a3-bento-item:nth-child(12n+8)  { grid-column: span 3; grid-row: span 3; }
    .a3-bento-item:nth-child(12n+9)  { grid-column: span 2; grid-row: span 4; }
    .a3-bento-item:nth-child(12n+10) { grid-column: span 4; grid-row: span 3; }
    .a3-bento-item:nth-child(12n+11) { grid-column: span 3; grid-row: span 3; }
    .a3-bento-item:nth-child(12n+12) { grid-column: span 3; grid-row: span 4; }
}
@media (max-width: 600px) {
    .a3-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 3px; }
    .a3-bento-item { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   SERVICES GRID  —  4 kartice u 2×2 rešetki
   ════════════════════════════════════════════════════════════════════ */
.a3-sesije-section { /* normal section-pad both sides */ }

/* ── Simetrična 2×2 rešetka za lagane kartice ───────────────────── */
.a3-services-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.5rem;
    margin-top:            3rem;
}

/* ── session-meta: mali info tekst uvijek vidljiv (lagani stil) ─── */
.session-meta {
    display:        block;
    font-size:      .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--clr-muted);
    margin-top:     .4rem;
    margin-bottom:  0;
}

@media (max-width: 1024px) {
    .a3-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .a3-services-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ════════════════════════════════════════════════════════════════════
   SERVICES GRID  —  .is-editorial modifier (tamni, full-bleed)
   Koristi se u block patternu sesije-editorial.
   ════════════════════════════════════════════════════════════════════ */
.a3-services-grid.is-editorial {
    grid-template-columns: 7fr 5fr;
    grid-template-rows:    auto auto;
    gap:                   6px;
    margin-top:            0;
}

/* Editorijalne kartice: tamne, full-bleed */
.a3-services-grid.is-editorial .session-card {
    aspect-ratio:   4 / 5;
    background:     var(--clr-dark);
    border-radius:  6px;
    box-shadow:     none;
    position:       relative;
    overflow:       hidden;
    display:        block; /* override flex */
    transform:      none;
}
.a3-services-grid.is-editorial .session-card:hover {
    transform:  none;
    box-shadow: none;
}

/* Slika ispunjava cijelu editorial karticu */
.a3-services-grid.is-editorial .session-img {
    position:     absolute;
    inset:        0;
    aspect-ratio: unset;
    flex-shrink:  unset;
}
.a3-services-grid.is-editorial .session-img::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(20,18,18,.92) 0%, rgba(20,18,18,.35) 50%, transparent 80%);
}

/* Body prilijepljeno uz dno */
.a3-services-grid.is-editorial .session-body {
    position:   absolute;
    bottom:     0; left: 0; right: 0;
    z-index:    3;
    padding:    2rem 1.75rem;
    flex:       unset;
}
.a3-services-grid.is-editorial .session-icon  { display: none; }
.a3-services-grid.is-editorial .session-eyebrow {
    color:     var(--clr-sage-light);
    opacity:   0; transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}
.a3-services-grid.is-editorial .session-card:hover .session-eyebrow { opacity: 1; transform: none; }
.a3-services-grid.is-editorial .session-body h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    color:     #fff;
}
.a3-services-grid.is-editorial .session-body p {
    color:     rgba(255,255,255,.8);
    flex:      unset;
    opacity:   0; transform: translateY(10px);
    transition: opacity .4s .08s, transform .4s .08s;
}
.a3-services-grid.is-editorial .session-card:hover .session-body p { opacity: 1; transform: none; }
.a3-services-grid.is-editorial .session-meta {
    color:     rgba(255,255,255,.5);
    opacity:   0; transform: translateY(6px);
    transition: opacity .35s .05s ease, transform .35s .05s ease;
}
.a3-services-grid.is-editorial .session-card:hover .session-meta { opacity: 1; transform: none; }
.a3-services-grid.is-editorial .session-includes { display: none; }
.a3-services-grid.is-editorial .session-cta {
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s .16s, transform .4s .16s;
}
.a3-services-grid.is-editorial .session-card:hover .session-cta { opacity: 1; transform: none; }
.a3-services-grid.is-editorial .session-cta .btn-primary {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.65);
    color: #fff;
    font-size: .75rem;
    padding: .5rem 1.3rem;
}
.a3-services-grid.is-editorial .session-cta .btn-primary:hover {
    background: #fff; border-color: #fff; color: var(--clr-dark);
}

/* Row 2 zigzag u editorial */
.a3-services-grid.is-editorial .session-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.a3-services-grid.is-editorial .session-card:nth-child(4) { grid-column: 1; grid-row: 2; }

@media (hover: none) {
    .a3-services-grid.is-editorial .session-eyebrow,
    .a3-services-grid.is-editorial .session-body p,
    .a3-services-grid.is-editorial .session-meta,
    .a3-services-grid.is-editorial .session-cta { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
    .a3-services-grid.is-editorial {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
    .a3-services-grid.is-editorial .session-card:nth-child(3),
    .a3-services-grid.is-editorial .session-card:nth-child(4) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 540px) {
    .a3-services-grid.is-editorial { grid-template-columns: 1fr; gap: 3px; }
}

/* ════════════════════════════════════════════════════════════════════
   GALLERY PREVIEW  —  front-page 6-photo uniform grid
   ════════════════════════════════════════════════════════════════════ */
.a3-gallery-preview-section {
    padding-top:    var(--section-pad, 5rem);
    padding-bottom: 0;
}
.a3-gallery-preview {
    /* JS grid masonry — same engine as gallery page */
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows:        4px;
    gap:                   6px;
    align-items:           start;
    width:                 100%;
}
.a3-gallery-preview__item {
    position:  relative;
    overflow:  hidden;
    margin:    0;
    /* Scroll reveal */
    opacity:   0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.a3-gallery-preview__item.visible {
    opacity:   1;
    transform: none;
}
.a3-gallery-preview__item a {
    display: block;
    width:   100%;
}
.a3-gallery-preview__item img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform .85s cubic-bezier(0.16, 1, 0.3, 1);
}
.a3-gallery-preview__item:hover img { transform: scale(1.04); }

.a3-gallery-preview__overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(65, 64, 66, 0.52);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .6rem;
    opacity:         0;
    transition:      opacity .35s ease;
    color:           #fff;
}
.a3-gallery-preview__item:hover .a3-gallery-preview__overlay { opacity: 1; }

.a3-gallery-preview__label {
    font-family:    var(--ff-body);
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.a3-gallery-preview__icon {
    width:           44px;
    height:          44px;
    border:          1.5px solid rgba(255,255,255,.72);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.5rem;
    line-height:     1;
}
.a3-gallery-preview__cta {
    padding: var(--section-pad, 5rem) 0;
}

/* Staggered reveal for the 6 preview items */
.a3-gallery-preview__item:nth-child(1) { transition-delay: .00s; }
.a3-gallery-preview__item:nth-child(2) { transition-delay: .06s; }
.a3-gallery-preview__item:nth-child(3) { transition-delay: .12s; }
.a3-gallery-preview__item:nth-child(4) { transition-delay: .18s; }
.a3-gallery-preview__item:nth-child(5) { transition-delay: .24s; }
.a3-gallery-preview__item:nth-child(6) { transition-delay: .30s; }

/* Tablet: keep 3-col */
@media (max-width: 700px) {
    .a3-gallery-preview { grid-template-columns: repeat(2, 1fr); }
    /* 6 items → 3 rows of 2 on mobile */
}

/* ── Gallery intro ─────────────────────────────────────────────── */
.a3-gallery-intro {
    background:  var(--clr-bg);
    padding:     2.5rem 0 .5rem;
    text-align:  center;
}
.a3-gallery-intro p {
    font-size:   1.05rem;
    font-style:  italic;
    color:       var(--clr-muted);
    max-width:   640px;
    margin:      0 auto;
    line-height: 1.7;
}

/* ── Usluge jump-to nav (reuses .a3-blog-filter styles) ────────── */
.a3-usluge-nav {
    position: static; /* override sticky from blog filter */
}
.a3-usluge-nav .a3-filter-pill {
    scroll-behavior: smooth;
}

/* ── Cross-link strip ──────────────────────────────────────────── */
.a3-crosslink {
    background:  var(--clr-bg);
    padding:     1.5rem 0;
    text-align:  center;
    border-top:  1px solid var(--clr-border);
}
.a3-crosslink p {
    font-size:  .95rem;
    color:      var(--clr-muted);
    margin:     0;
}
.a3-crosslink a {
    color:           var(--clr-accent);
    font-weight:     600;
    text-decoration: none;
    margin-left:     .4rem;
    transition:      color .2s;
}
.a3-crosslink a:hover { color: var(--clr-accent-dark); }

/* ════════════════════════════════════════════════════════════════════
   BENEFITI NATIVE  (wp:columns pattern)
   ════════════════════════════════════════════════════════════════════ */
.a3-benefiti-native .a3-benefit-col {
    text-align: center;
    padding: 1.5rem 1rem;
}
.a3-benefiti-native .a3-benefit-col h3 {
    font-family:   var(--ff-heading);
    font-size:     1.15rem;
    margin-bottom: .4rem;
    color:         var(--clr-dark);
}
.a3-benefiti-native .a3-benefit-col p {
    font-size:   .9rem;
    color:       var(--clr-muted);
    line-height: 1.6;
}
.a3-benefit-icon {
    margin-left:  auto;
    margin-right: auto;
    margin-bottom: .75rem;
}
.a3-benefit-icon img {
    width:  48px;
    height: 48px;
}

/* ════════════════════════════════════════════════════════════════════
   FAQ NATIVE  (wp:details pattern)
   ════════════════════════════════════════════════════════════════════ */
.a3-faq-native {
    width: 100%;
}
.a3-faq-item-native {
    border-bottom: 1px solid var(--clr-border);
    padding:       1.25rem 0;
}
.a3-faq-item-native summary {
    font-weight:   600;
    font-size:     1rem;
    color:         var(--clr-dark);
    cursor:        pointer;
    list-style:    none;
    padding-right: 2rem;
    position:      relative;
    line-height:   1.5;
}
.a3-faq-item-native summary::-webkit-details-marker { display: none; }
.a3-faq-item-native summary::after {
    content:    '+';
    position:   absolute;
    right:      0;
    top:        0;
    font-size:  1.4rem;
    font-weight: 300;
    color:      var(--clr-accent);
    line-height: 1;
    transition: transform .25s;
}
.a3-faq-item-native[open] summary::after {
    transform: rotate(45deg);
}
.a3-faq-item-native p {
    margin:      .75rem 0 0;
    font-size:   .93rem;
    color:       var(--clr-muted);
    line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════════════
   CTA NATIVE BUTTON
   ════════════════════════════════════════════════════════════════════ */
.a3-cta-btn .wp-block-button__link {
    background:      var(--clr-accent);
    color:           #fff;
    padding:         .8rem 2.25rem;
    border-radius:   50px;
    font-size:       .875rem;
    font-weight:     600;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          2px solid var(--clr-accent);
    transition:      background .25s, border-color .25s, transform .2s;
}
.a3-cta-btn .wp-block-button__link:hover {
    background:   var(--clr-accent-dk);
    border-color: var(--clr-accent-dk);
    transform:    translateY(-2px);
}

/* ════════════════════════════════════════════════════════════════════
   GALLERY NATIVE  (wp:gallery inside a3-galerija-content)
   ════════════════════════════════════════════════════════════════════ */

/* Anchor nav pills */
.a3-gallery-anchornav .wp-block-buttons {
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.a3-gallery-pill .wp-block-button__link {
    background:      transparent;
    color:           var(--clr-dark);
    border:          1.5px solid var(--clr-border);
    border-radius:   50px;
    padding:         .4rem 1.2rem;
    font-size:       .8rem;
    font-weight:     500;
    letter-spacing:  .05em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      background .2s, color .2s, border-color .2s;
}
.a3-gallery-pill .wp-block-button__link:hover {
    background:   var(--clr-accent);
    border-color: var(--clr-accent);
    color:        #fff;
}

/* Gallery section headings */
.a3-gallery-section .eyebrow { margin-bottom: .25rem; }
.a3-gallery-section h3.wp-block-heading {
    font-family: var(--ff-heading);
    font-size:   clamp(1.4rem, 3vw, 2rem);
    margin:      0 0 1.5rem;
}

/* wp:gallery — JS grid masonry (grid-auto-rows + span trick) */
/* Kill WP flex layout — must target every selector WP might add */
.a3-gallery-masonry,
.a3-gallery-masonry.has-nested-images,
.a3-gallery-masonry.is-layout-flex,
.wp-block-gallery.a3-gallery-masonry {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows:        4px !important;
    gap:                   6px !important;
    align-items:           start !important;
    flex-wrap:             unset !important;
}
/* Each wp:image item must fill its grid cell fully */
.a3-gallery-masonry .wp-block-image {
    width:     100% !important;
    max-width: none !important;
    flex:      unset !important;
    margin:    0 !important;
    padding:   0;
    display:   block;
    overflow:  hidden;
    border-radius: 4px;
}
.a3-gallery-masonry .wp-block-image figure,
.a3-gallery-masonry .wp-block-image a   { margin: 0; display: block; width: 100%; }
.a3-gallery-masonry .wp-block-image img {
    width:     100% !important;
    height:    auto !important;
    max-width: none !important;
    display:   block;
    cursor:    zoom-in;
    border-radius: 4px;
    transition: transform .45s var(--ease), opacity .3s;
}
.a3-gallery-masonry .wp-block-image:hover img {
    transform: scale(1.02);
    opacity:   .92;
}
@media (max-width: 768px) {
    .a3-gallery-masonry,
    .a3-gallery-masonry.has-nested-images { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .a3-gallery-masonry,
    .a3-gallery-masonry.has-nested-images { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════
   NATIVE BLOCK PATTERNS
   Styling for wp:media-text and wp:columns used as service sections
   and process steps.
   ════════════════════════════════════════════════════════════════════ */

/* ── Sesija split — wp:media-text ───────────────────────────────── */
.a3-sesija-mt {
    min-height:   520px;
    align-items:  stretch !important;
}
/* Make the figure a positioned container that fills the grid cell */
.a3-sesija-mt figure.wp-block-media-text__media {
    position:   relative;
    overflow:   hidden;
    height:     100%;
    min-height: 520px;
}
/* Image fills the figure — works for both new (no imageFill) and old
   database content that still has is-image-fill class */
.a3-sesija-mt figure.wp-block-media-text__media img {
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    clip:       auto !important;
    margin:     0 !important;
    transition: transform .8s var(--ease);
}
.a3-sesija-mt:hover figure.wp-block-media-text__media img {
    transform: scale(1.03);
}
.a3-sesija-mt .wp-block-media-text__content {
    padding:         4rem clamp(2rem, 5vw, 5rem) !important;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             .6rem;
    background:      var(--clr-bg);
    align-self:      stretch;
}
/* eyebrow inside content — matches global .eyebrow but scoped */
.a3-sesija-mt .wp-block-media-text__content .eyebrow {
    margin: 0;
}
/* Remove default WP paragraph margin inside content */
.a3-sesija-mt .wp-block-media-text__content > p,
.a3-sesija-mt .wp-block-media-text__content .wp-block-paragraph {
    margin-bottom: 0;
}
/* Price typography */
.a3-split__price {
    font-family: var(--ff-heading);
    font-size:   clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color:       var(--clr-dark);
    margin:      0;
    line-height: 1.2;
}
/* Rezerviraj button — native WP button inside sessions */
.a3-sesija-btn .wp-block-button__link {
    background:      var(--clr-accent);
    color:           #fff;
    padding:         .7rem 1.8rem;
    border-radius:   50px;
    font-size:       .875rem;
    font-weight:     600;
    letter-spacing:  .05em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    transition:      background .25s var(--ease), transform .2s;
}
.a3-sesija-btn .wp-block-button__link:hover {
    background:  var(--clr-accent-dk);
    transform:   translateY(-2px);
}
/* Mobile: stack image on top of content */
@media (max-width: 860px) {
    .a3-sesija-mt {
        min-height: auto;
    }
    .a3-sesija-mt .wp-block-media-text__content {
        padding: 2.5rem 1.5rem !important;
    }
}

/* ── Process pattern section — same look as front-page #proces ───── */
/* .a3-process-native = alias for old database content before re-insertion */
.a3-process-section,
.a3-process-native {
    background: var(--clr-accent);
    width:      100%;
}
.a3-process-section .eyebrow,
.a3-process-native .eyebrow         { color: rgba(255,255,255,.65); }
.a3-process-section h2,
.a3-process-native h2               { color: #fff; }

/* Connector line through circle centres */
.a3-process-cols {
    position: relative;
}
.a3-process-cols::before {
    content:    '';
    position:   absolute;
    top:        26px;
    left:       calc(12.5% + 1rem);
    right:      calc(12.5% + 1rem);
    height:     1px;
    background: rgba(255,255,255,.3);
    z-index:    0;
}
.a3-process-section .wp-block-column,
.a3-process-native .wp-block-column {
    text-align: center;
    position:   relative;
    z-index:    1;
}

/* White circle with sage number */
.a3-step-num {
    display:         flex;
    width:           52px;
    height:          52px;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      #fff;
    color:           var(--clr-accent);
    font-family:     var(--ff-heading);
    font-size:       1.3rem;
    font-weight:     700;
    line-height:     1;
    margin:          0 auto 1.25rem;
    box-shadow:      0 4px 16px rgba(0,0,0,.1);
}

/* Step headings and body — white */
.a3-process-section .wp-block-column h3,
.a3-process-native .wp-block-column h3 {
    font-family:   var(--ff-heading);
    font-size:     1.1rem;
    font-weight:   600;
    margin-bottom: .5rem;
    color:         #fff;
}
.a3-process-section .wp-block-column p:not(.a3-step-num),
.a3-process-native .wp-block-column p:not(.a3-step-num) {
    font-size:  .9rem;
    color:      rgba(255,255,255,.75);
    line-height: 1.7;
    margin:     0;
}

@media (max-width: 860px) {
    .a3-process-cols::before { display: none; }
}
@media (max-width: 600px) {
    .a3-process-cols { flex-direction: column; }
    .a3-process-section .wp-block-column,
    .a3-process-native .wp-block-column { flex-basis: 100% !important; }
}