/* ============================================================
   ACCREDO — sections of the four content pages
   Ported from the <style> blocks of design-reference/warm/
   index.html, o-nama.html, paintball.html and teambuilding.html.

   Merged, because the same classes were defined on several pages
   with slightly different values:
   - .phero  — based on the values of paintball.html, height per page
               through .phero--sm (O nama) and .phero--lg (Team building).
   - .cta    — based on Naslovna, the green gradient of the paintball
               page as .cta--forest.
   - .quote  — based on Naslovna (the team building values differed
               by 1–2 px).
   - .form-* — based on O nama (padding 40 instead of 42 px).
   ============================================================ */

/* ----------  HERO (Naslovna)  ---------- */
.hero{ padding-top:96px; }
.hero__card{ position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:clamp(560px, 80vh, 760px);
  display:flex; align-items:flex-end; box-shadow:var(--shadow-lg); }
.hero__slides{ position:absolute; inset:0; z-index:0; background:var(--forest-deep); }
.hero__slide{ position:absolute; inset:-7% 0; background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; will-change:transform,opacity; transform:scale(1.06);
  animation:heroFade 24s linear infinite, heroKen 24s ease-in-out infinite; }
.hero__slide:nth-child(2){ animation-delay:8s; }
.hero__slide:nth-child(3){ animation-delay:16s; }
@keyframes heroFade{ 0%{opacity:0} 3%{opacity:1} 33%{opacity:1} 40%{opacity:0} 100%{opacity:0} }
@keyframes heroKen{ 0%{transform:scale(1.05)} 40%{transform:scale(1.15) translate(-1.4%,-1.2%)} 100%{transform:scale(1.15) translate(-1.4%,-1.2%)} }
@media (prefers-reduced-motion:reduce){ .hero__slide{ animation:none; opacity:0; transform:none; } .hero__slide:first-child{ opacity:1; } }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(102deg, oklch(0.24 0.04 50 / .74) 0%, oklch(0.26 0.04 55 / .42) 40%, transparent 72%),
             linear-gradient(0deg, oklch(0.22 0.04 50 / .55) 0%, transparent 42%); }
.hero__inner{ position:relative; z-index:2; padding:clamp(28px,4vw,60px); max-width:780px; color:var(--on-dark); }
.hero__inner .eyebrow{ color:oklch(0.92 0.05 70); }
.hero__inner .eyebrow::before{ background:var(--clay-hi); }
.hero h1{ color:var(--on-dark); line-height:1.04; margin:16px 0 28px; font-size:clamp(44px,6.6vw,90px); text-shadow:0 2px 30px oklch(0.2 0.03 50 / .4); }
.hero h1 em{ font-style:italic; font-weight:600; color:oklch(0.90 0.08 70); }
.hero__lead{ color:var(--on-dark-dim); font-size:clamp(17px,1.5vw,21px); max-width:600px; line-height:1.55; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero__rating{ position:absolute; top:clamp(24px,3vw,40px); right:clamp(24px,3vw,40px); z-index:2;
  background:oklch(0.99 0.006 85 / .92); backdrop-filter:blur(8px); border-radius:var(--r);
  padding:14px 18px; display:flex; align-items:center; gap:13px; box-shadow:var(--shadow); }
.hero__rating b,.hero__rating-score{ font-family:var(--font-display); font-size:30px; line-height:1; color:var(--ink); }
.hero__rating .stars{ font-size:13px; }
.hero__rating span,.hero__rating-note{ font-size:12px; color:var(--ink-3); display:block; }
@media(max-width:560px){ .hero__rating{ display:none; } }

/* trust strip under hero */
.trust{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; align-items:center; }

/* intro + stats */
.intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; }

/* section heading row */
.shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:58px; }

/* ----------  PAGE HEADER (O nama, Paintball, Team building)  ---------- */
.phero{ padding-top:96px; }
.phero__card{ position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:clamp(440px,62vh,580px);
  display:flex; align-items:flex-end; background:var(--forest-deep) center/cover no-repeat; box-shadow:var(--shadow-lg); color:var(--on-dark); }
.phero__card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(95deg, oklch(0.22 0.04 152 / .8) 0%, oklch(0.24 0.04 152 / .4) 45%, transparent 78%),
             linear-gradient(0deg, oklch(0.2 0.03 152 / .6) 0%, transparent 45%); }
.phero--sm .phero__card{ min-height:clamp(400px,54vh,520px); }
.phero--lg .phero__card{ min-height:clamp(460px,64vh,600px); }
.phero__in{ position:relative; z-index:2; padding:clamp(28px,4vw,56px); max-width:720px; }
.phero__in .eyebrow{ color:oklch(0.88 0.08 130); }
.phero h1{ color:var(--on-dark); margin:14px 0 18px; }
.phero p{ color:var(--on-dark-dim); font-size:clamp(16px,1.4vw,20px); max-width:560px; }
.crumb{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--on-dark-faint); margin-bottom:6px; }
.crumb a:hover{ color:var(--on-dark); }
.facts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.fact{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--on-dark); white-space:nowrap;
  background:oklch(1 0 0 / .12); border:1px solid oklch(1 0 0 / .2); padding:9px 15px; border-radius:var(--r-pill); }
.fact svg{ width:16px; height:16px; }

/* ----------  SUB-BRANDS (Naslovna)  ---------- */
/* auto-fit, not a fixed three: the section holds two panels now, and a hard
   repeat(3,1fr) left the second one two thirds of the way across with a hole
   beside it. This lays out two, three or four the same way, so the client can
   add a panel in the editor without the grid needing a change. */
.fam{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:22px; }
.fam__card{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:340px; display:flex;
  flex-direction:column; justify-content:flex-end; padding:28px; color:var(--on-dark); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); isolation:isolate;
  background:var(--forest-deep) center/cover no-repeat; }
.fam__card::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, oklch(0.22 0.04 152 / .9) 6%, oklch(0.24 0.04 152 / .35) 50%, oklch(0.24 0.04 152 / .15) 100%); }
.fam__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.fam__kicker{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:oklch(0.9 0.06 70); margin-bottom:8px; }
.fam__card h3{ color:var(--on-dark); margin-bottom:8px; }
.fam__card p{ color:var(--on-dark-dim); font-size:14.5px; max-width:34ch; }
.fam__card .link-arrow{ margin-top:16px; color:oklch(0.92 0.07 72); }
@media(max-width:820px){ .fam{ grid-template-columns:1fr; } .intro-grid{ grid-template-columns:1fr; } }

/* ----------  B2B BLOCK (Naslovna)  ---------- */
.b2b{ background:var(--forest); color:var(--on-dark); border-radius:var(--r-xl); overflow:hidden;
  display:grid; grid-template-columns:1.05fr .95fr; }
.b2b__text{ padding:clamp(34px,4.5vw,64px); }
.b2b__text .eyebrow{ color:oklch(0.88 0.08 130); } .b2b__text .eyebrow::before{ background:var(--clay-hi); }
.b2b__text h2{ color:var(--on-dark); margin:16px 0 18px; }
.b2b__text p{ color:var(--on-dark-dim); }
.b2b__media{ position:relative; min-height:380px; background:var(--forest-deep) center/cover no-repeat; }
.b2b__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.b2b__points{ display:flex; flex-direction:column; gap:14px; margin:26px 0 30px; }
.b2b__pt{ display:flex; gap:12px; align-items:flex-start; color:var(--on-dark-dim); font-size:15.5px; }
.b2b__pt svg{ width:22px; height:22px; flex:none; color:oklch(0.9 0.1 128); margin-top:1px; }
@media(max-width:820px){ .b2b{ grid-template-columns:1fr; } .b2b__media{ min-height:280px; order:-1; } }

/* ----------  QUOTES & GOOGLE REVIEWS  ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.quote p,.quote__text{ font-size:16.5px; line-height:1.6; color:var(--ink); flex:1; }
.quote__by{ display:flex; align-items:center; gap:13px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.quote__av{ width:46px; height:46px; border-radius:var(--r-pill); flex:none; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--on-dark); background:var(--forest); }
.quote__by b,.quote__name{ font-size:15px; display:block; } .quote__by span,.quote__role{ font-size:13px; color:var(--ink-3); }
.quote__head{ display:flex; align-items:center; margin-bottom:16px; }
.quote__date{ margin-left:auto; font-size:12.5px; color:var(--ink-3); }
@media(max-width:860px){ .quotes{ grid-template-columns:1fr; } }
.grev__head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.grev__badge{ width:46px; height:46px; border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.grev__head b{ font-family:var(--font-display); font-size:17px; display:block; }
.grev__meta{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); }
.grev__ctrls{ margin-left:auto; display:flex; gap:8px; }
.grev__btn{ width:42px; height:42px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; color:var(--ink); cursor:pointer; transition:.25s; }
.grev__btn:hover{ background:var(--forest); color:var(--on-dark); border-color:var(--forest); }
.grev__btn svg{ width:18px; height:18px; }
.grev__viewport{ overflow:hidden; }
.grev__track{ transition:opacity .3s ease, transform .3s ease; }
.grev__track.is-out{ opacity:0; transform:translateX(-14px); }
.grev__dots{ display:flex; justify-content:center; gap:7px; margin-top:24px; }
.grev__dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--line-2,var(--line)); cursor:pointer; transition:.25s; }
.grev__dot.on{ background:var(--forest); transform:scale(1.25); }

/* ----------  CLOSING CTA  ---------- */
.cta{ position:relative; border-radius:var(--r-xl); overflow:hidden; padding:clamp(48px,7vw,96px) clamp(28px,5vw,64px); text-align:center; color:var(--on-dark); box-shadow:var(--shadow-lg); background:var(--forest-deep) center/cover no-repeat; }
.cta::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, oklch(0.24 0.04 50 / .82), oklch(0.26 0.04 152 / .6)); }
.cta--forest::after{ background:linear-gradient(0deg, oklch(0.22 0.04 152 / .85), oklch(0.24 0.04 152 / .55)); }
.cta__in{ position:relative; z-index:2; }
.cta h2{ color:var(--on-dark); }
.cta .eyebrow{ color:oklch(0.9 0.06 70); }
.cta .lead{ color:var(--on-dark-dim); }

/* ----------  STORY (O nama)  ---------- */
.story{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.story__media{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/4.6; background:var(--forest-deep) center/cover no-repeat; box-shadow:var(--shadow); position:relative; }
.story__badge{ position:absolute; left:18px; bottom:18px; right:18px; background:oklch(0.99 0.006 85 / .94); backdrop-filter:blur(8px);
  border-radius:var(--r); padding:16px 18px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm); }
.story__badge b,.story__badge-year{ font-family:var(--font-display); font-size:34px; color:var(--forest); line-height:1; }
.story__badge span,.story__badge-text{ font-size:13px; color:var(--ink-2); }
@media(max-width:860px){ .story{ grid-template-columns:1fr; } .story__media{ aspect-ratio:16/12; } }

/* The story of the old site is far longer than the two paragraphs of the
   prototype. The first three paragraphs stay in the right column next to the
   picture, the rest continues below in one readable measure. */
.story-more{ max-width:860px; margin-inline:auto; }
/* The wide picture of the old page, between the reservation notice and the
   paragraph on the events — the one place where a picture breaks the measure. */
.story__banner{ margin:0; }
.story__banner img{ width:100%; aspect-ratio:9/4; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }

/* The one sentence the client insists on: booking a slot in advance is
   mandatory. Bold and coloured on the old page, here a clay-tinted card. */
.notice{ background:var(--clay-tint); border-radius:var(--r-lg); text-align:center;
  padding:clamp(20px,3vw,28px) clamp(22px,3.4vw,34px); box-shadow:var(--shadow-sm); }
.notice p{ margin:0; font-family:var(--font-display); font-weight:700; line-height:1.45;
  font-size:clamp(17px,1.5vw,21px); color:var(--clay-deep); }

/* ----------  THEN AND NOW (O nama)  ---------- */
.tnow__row + .tnow__row{ margin-top:clamp(38px,4.5vw,60px); }
.tnow__label{ font-size:clamp(20px,2vw,26px); }
/* Three tiles per row, as a grid. The core gallery is a flex row that sizes
   its tiles from the intrinsic width of the pictures — its columns-N classes
   only ever styled the legacy markup, and a fixed crop takes the intrinsic
   width away. A grid states the three columns instead of deriving them from a
   percentage of a flex container. The crop keeps the two rows comparable; the
   pool mixes portrait and landscape shots. */
/* The ":not(#individual-image)" is not a filter, it is specificity: the core
   gallery styles carry it so a theme cannot override them by class alone. Its
   width rule for columns-3 resolves 33.33% against the grid column instead of
   the row and shrinks every tile to a third of a third — the tiles need to win
   that cascade, so they use the same trick. */
.tnow .wp-block-gallery.has-nested-images{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tnow .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
  width:100%; height:auto; align-self:start; aspect-ratio:4/3; }
.tnow .wp-block-gallery.has-nested-images figure.wp-block-image img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:640px){
  .tnow .wp-block-gallery.has-nested-images{ grid-template-columns:1fr; }
  .tnow .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){ aspect-ratio:16/11; } }

/* ----------  VALUES (O nama)  ---------- */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.val{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.val__ic{ width:46px; height:46px; border-radius:var(--r); background:var(--clay-tint); display:grid; place-items:center; color:var(--clay-deep); margin-bottom:16px; }
.val__ic svg{ width:23px; height:23px; }
/* h3 and h4 both, on purpose: the patterns emit h3 so the heading order
   stays valid, while pages whose content was inserted before that change
   still hold h4 in the database. */
.val h3,.val h4{ font-family:var(--font-display); font-weight:700; font-size:18px; margin-bottom:6px; }
.val p{ font-size:14.5px; color:var(--ink-2); }
@media(max-width:860px){ .values{ grid-template-columns:1fr 1fr; } }

/* ----------  LOCATION & CONTACT (O nama)  ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,52px); align-items:start; }
@media(max-width:860px){ .contact{ grid-template-columns:1fr; } }
.info{ display:flex; flex-direction:column; gap:14px; }
.info__row{ display:flex; gap:15px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; }
.info__ic{ width:42px; height:42px; flex:none; border-radius:var(--r-sm); background:var(--forest-tint); display:grid; place-items:center; color:var(--forest); }
.info__ic svg{ width:21px; height:21px; }
.info__row b,.info__label{ font-family:var(--font-display); font-weight:700; font-size:16px; display:block; margin-bottom:3px; }
.info__row p,.info__text, .info__row a{ font-size:15px; color:var(--ink-2); line-height:1.5; }
.info__row a:hover{ color:var(--forest); }

/* stylized map panel */
.mapcard{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:300px; border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 42%, oklch(0.42 0.07 152 / .18), transparent 60%),
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 46px),
    var(--forest-tint); }
.mapcard__road{ position:absolute; height:6px; background:var(--sand-deep); border-radius:4px; }
.mapcard__road.r1{ width:140%; top:54%; left:-20%; transform:rotate(-12deg); }
.mapcard__road.r2{ width:120%; top:30%; left:-10%; transform:rotate(8deg); background:var(--sand); height:4px; }
.mapcard__pin{ position:absolute; left:50%; top:42%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; }
.mapcard__pin .dot{ width:22px; height:22px; border-radius:var(--r-pill) var(--r-pill) var(--r-pill) 0; background:var(--clay);
  transform:rotate(45deg); box-shadow:0 6px 14px -4px oklch(0.628 0.146 46 / .7); border:3px solid var(--paper); }
.mapcard__label{ position:absolute; left:50%; top:calc(42% + 14px); transform:translateX(-50%); white-space:nowrap;
  background:var(--paper); padding:7px 13px; border-radius:var(--r-pill); font-weight:700; font-size:13px; box-shadow:var(--shadow-sm); }
.mapcard__btn{ position:absolute; bottom:16px; right:16px; }

.travel{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.travel .pill{ background:var(--cream-2); }

/* ----------  GALLERY (Paintball)  ---------- */
.gal{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,1fr); gap:16px; height:clamp(360px,46vw,520px); }
.gal__i{ border-radius:var(--r-lg); background:var(--forest-deep) center/cover no-repeat; box-shadow:var(--shadow-sm); }
.gal__i:nth-child(1){ grid-row:1/3; }
@media(max-width:740px){ .gal{ grid-template-columns:1fr 1fr; height:auto; grid-auto-rows:160px; } .gal__i:nth-child(1){ grid-row:1/3; grid-column:1/3; height:auto; } }

/* ----------  DAY FLOW (Paintball)  ---------- */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.flow__step{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; position:relative; transition:.4s var(--ease); }
.flow__step:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.flow__n{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--on-dark);
  width:44px; height:44px; border-radius:var(--r-pill); background:var(--clay); display:grid; place-items:center; margin-bottom:18px; }
.flow__step:nth-child(even) .flow__n{ background:var(--forest); }
.flow__step h3,.flow__step h4{ font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:8px; }
.flow__step p{ color:var(--ink-2); font-size:15px; }
.flow__time{ position:absolute; top:30px; right:26px; font-size:12.5px; font-weight:600; color:var(--ink-3); }
@media(max-width:820px){ .flow{ grid-template-columns:1fr; } }

/* battlefields */
.fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.bf{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; gap:14px; align-items:flex-start; }
.bf svg{ width:24px; height:24px; color:var(--forest); flex:none; margin-top:2px; }
.bf b,.bf__title{ display:block; font-family:var(--font-display); font-size:18px; margin-bottom:3px; }
.bf span,.bf__text{ font-size:14px; color:var(--ink-2); }

.split2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
@media(max-width:820px){ .split2{ grid-template-columns:1fr; } }

.faqwrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,64px); align-items:start; }
@media(max-width:820px){ .faqwrap{ grid-template-columns:1fr; } }

/* ----------  TEAM BUILDING  ---------- */
.trustband{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media(max-width:860px){ .trustband{ grid-template-columns:1fr; } }

.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pg{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:300px; display:flex; flex-direction:column;
  justify-content:flex-end; padding:26px; color:var(--on-dark); box-shadow:var(--shadow-sm); isolation:isolate;
  background:var(--forest-deep) center/cover no-repeat; transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.pg::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, oklch(0.2 0.035 152 / .92) 8%, oklch(0.22 0.04 152 / .3) 60%, oklch(0.22 0.04 152 / .1) 100%); }
.pg:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pg h3{ color:var(--on-dark); margin-bottom:6px; }
.pg p{ color:var(--on-dark-dim); font-size:14.5px; }
.pg__tag{ align-self:flex-start; margin-bottom:auto; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:oklch(0.92 0.07 72); }
@media(max-width:860px){ .pgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pgrid{ grid-template-columns:1fr; } }

.proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.proc__s{ position:relative; padding-top:30px; }
/* The step number: ::before with attr(data-n) for content inserted before the
   conversion, .proc__n for what the pattern renders now — no core block can
   emit a data attribute. Same circle either way. */
.proc__s::before{ content:attr(data-n); }
.proc__s::before,
.proc__n{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--on-dark);
  width:38px; height:38px; border-radius:var(--r-pill); background:var(--clay); display:grid; place-items:center; margin-bottom:16px; }
/* Without data-n there is nothing to show, so the pseudo element stays empty. */
.proc__s:not([data-n])::before{ display:none; }
.proc__s h3,.proc__s h4{ font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:7px; }
.proc__s p{ color:var(--ink-2); font-size:15px; }
@media(max-width:860px){ .proc{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .proc{ grid-template-columns:1fr; } }

.signals{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sig{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.sig__ic{ width:48px; height:48px; border-radius:var(--r); background:var(--forest-tint); display:grid; place-items:center; color:var(--forest); margin-bottom:16px; }
.sig__ic svg{ width:24px; height:24px; }
.sig h3,.sig h4{ font-family:var(--font-display); font-weight:700; font-size:18px; margin-bottom:6px; }
.sig p{ font-size:14.5px; color:var(--ink-2); }
@media(max-width:860px){ .signals{ grid-template-columns:1fr 1fr; } }

/* ----------  FORMS (O nama, Team building — handler lives in the plugin)  ---------- */
.reqform{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:start; }
@media(max-width:860px){ .reqform{ grid-template-columns:1fr; } }
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-row--1{ grid-template-columns:1fr; }
.form-note{ background:var(--forest-tint); border-radius:var(--r); padding:16px 18px; color:var(--forest-deep); font-weight:600; margin-bottom:18px; }
.field .opt{ font-weight:500; color:var(--ink-3); font-size:12px; }
.daterange{ display:flex; align-items:center; gap:8px; }
.daterange input{ flex:1; min-width:0; }
.daterange__sep{ color:var(--ink-3); font-weight:600; }
@media(max-width:520px){ .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   BRIDGE TO THE CORE BLOCKS
   The prototype was hand written markup, the sections are block
   patterns now. These rules absorb the extra wrappers that group,
   image and button blocks bring along.
   ============================================================ */
/* The variant neutral half of this bridge (the --arrow token, the button
   layout, .is-block and the arrow pseudo elements) lives in blocks.css,
   which both variants load. What follows is the warm look. */

/* Images in cards: the image block inserts a <figure> in between. */
/* Images live in core image blocks so the client can swap them by clicking,
   rather than as CSS backgrounds nobody can reach from the editor. Every
   media slot fills itself with object-fit, so the crop stays as designed
   whatever the editor uploads. */
.exp__media .wp-block-image,
.b2b__media .wp-block-image,
.story__media .wp-block-image,
.phero__card .wp-block-image,
.gal__i .wp-block-image,
.pg .wp-block-image,
.fam__card .wp-block-image,
.hero__slide .wp-block-image{ margin:0; }

.exp__media .wp-block-image{ height:100%; }
.exp__media .wp-block-image img{ width:100%; height:100%; object-fit:cover; }

.b2b__media .wp-block-image{ position:absolute; inset:0; }
.b2b__media .wp-block-image img{ width:100%; height:100%; object-fit:cover; }

.story__media .wp-block-image{ position:absolute; inset:0; }
.story__media .wp-block-image img{ width:100%; height:100%; object-fit:cover; }

/* The page hero: the image sits behind the copy, so it goes under the
   gradient overlay (z-index 1) that ::after paints. */
.phero__card .wp-block-image{ position:absolute; inset:0; z-index:0; }
.phero__card .wp-block-image img{ width:100%; height:100%; object-fit:cover; }

.gal__i{ position:relative; overflow:hidden; }
.gal__i .wp-block-image{ position:absolute; inset:0; }
.gal__i .wp-block-image img{ width:100%; height:100%; object-fit:cover; }

/* Home hero slides keep their Ken Burns animation; the image just replaces
   the background-image the prototype used. */
.hero__slide .wp-block-image{ position:absolute; inset:0; }
.hero__slide .wp-block-image img{ width:100%; height:100%; object-fit:cover; }

/* Program cards: the prototype painted the photo as a background of .pg. As a
   block it is an image like every other media slot, so it carries its own alt
   text. .pg::after is the dark gradient and follows the figure in the source,
   so at the same z-index it keeps painting on top of the photo. */
.pg .wp-block-image{ position:absolute; inset:0; z-index:-1; }
.pg .wp-block-image img{ width:100%; height:100%; object-fit:cover; }

/* Sub-brand cards work exactly like the program cards. They carry kicker,
   heading, description and a link on 340 px, so the copy reaches into the
   bright part of the picture — the gradient stays dark further up than the
   prototype needed with its dark stock photos. */
.fam__card .wp-block-image{ position:absolute; inset:0; z-index:-1; }
.fam__card .wp-block-image img{ width:100%; height:100%; object-fit:cover; }
.fam__card::after{ background:linear-gradient(0deg, oklch(0.19 0.035 152 / .95) 28%, oklch(0.21 0.04 152 / .64) 62%, oklch(0.22 0.04 152 / .2) 100%); }

/* Linked variant for the program overview: the arrow link inside the card is
   the real link, site.js makes the whole card follow it. Those cards carry
   more copy than the team building ones — tag, heading, description and link —
   so the gradient has to stay dark higher up for the text to keep its
   contrast over a bright photo. */
.pg--link{ cursor:pointer; }
.pg--link::after{ background:linear-gradient(0deg, oklch(0.19 0.035 152 / .95) 34%, oklch(0.21 0.04 152 / .66) 66%, oklch(0.22 0.04 152 / .22) 100%); }
.pg--link .link-arrow-p{ margin-top:14px; }
.pg--link .link-arrow-p a{ color:oklch(0.92 0.07 72); }
.pg--link .link-arrow-p a:hover{ color:var(--on-dark); }

/* Button blocks in the look of .btn. The base values (colour, radius,
   padding) come from theme.json; variants, sizes and the arrow the prototype
   carried as an inline SVG follow here. The variants are named is-* on
   purpose, so they do not collide with the .btn--* rules of the prototype. */
.wp-block-button.is-primary > .wp-block-button__link{ background:var(--clay); color:var(--on-dark); box-shadow:0 10px 24px -10px oklch(0.628 0.146 46 / .7); }
.wp-block-button.is-primary > .wp-block-button__link:hover{ background:var(--clay-hi); transform:translateY(-2px); }
.wp-block-button.is-forest > .wp-block-button__link{ background:var(--forest); color:var(--on-dark); }
.wp-block-button.is-forest > .wp-block-button__link:hover{ background:var(--forest-deep); transform:translateY(-2px); }
.wp-block-button.is-ghost > .wp-block-button__link{ background:transparent; border:1.5px solid var(--line-strong); color:var(--ink); }
.wp-block-button.is-ghost > .wp-block-button__link:hover{ border-color:var(--forest); color:var(--forest); transform:translateY(-2px); }
.wp-block-button.is-on-dark > .wp-block-button__link{ background:transparent; border:1.5px solid oklch(1 0 0 / .35); color:var(--on-dark); }
.wp-block-button.is-on-dark > .wp-block-button__link:hover{ border-color:var(--on-dark); background:oklch(1 0 0 / .08); transform:translateY(-2px); }
.wp-block-button.is-lg > .wp-block-button__link{ padding:18px 32px; font-size:16px; }

.link-arrow-p a{ color:var(--forest); }
.link-arrow-p a:hover{ color:var(--clay-deep); }
.fam__card .link-arrow-p a{ color:oklch(0.92 0.07 72); margin-top:16px; }

/* Cards */
/* The prototype's .exp__cta held an inline SVG, so warm.css styles
   ".exp__cta svg" — a selector that matches nothing now that the CTA is an
   editable link. Same mask arrow as .link-arrow-p, so all six cards get their
   arrow and hover shift back. */
.exp__cta::after{ content:""; width:16px; height:16px; flex:none; background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat; mask:var(--arrow) center/contain no-repeat;
  transition:transform .3s var(--ease); }
.exp:hover .exp__cta::after{ transform:translateX(3px); }

.exp{ cursor:pointer; }
.exp__body > *{ margin:0; }

/* The CTA sits at the right edge of the card footer, opposite the price.
   warm.css gives ".exp__body p" flex:1 so the description pushes the footer
   down — but the CTA is a paragraph in the same body, so it inherited the
   growth, filled the space left of the card edge and rendered its text hard
   against the price. Hugging its own content and pushing itself right is what
   the design shows. */
.exp__body .exp__cta{ flex:none; margin-left:auto; justify-content:flex-end; text-align:right; }
.pcard .wp-block-button.is-block{ margin-top:auto; }
.pcard--feature .wp-block-button.is-ghost > .wp-block-button__link{ border-color:oklch(1 0 0 / .35); color:var(--on-dark); }

/* ----------  GALLERY: photo tiles and videos  ----------
   Two galleries, so two tiles to a row: the .pg card of the programme
   overview, wider and a little taller. */
.pgrid--2{ grid-template-columns:1fr 1fr; }
.pgrid--2 .pg{ min-height:clamp(280px,32vw,400px); }
@media(max-width:560px){ .pgrid--2{ grid-template-columns:1fr; } }

/* One tile to a row — the "Teambuilding na vašoj lokaciji" category on the
   programme overview. Wide picture, so the card is taller than the grid ones
   and the copy sits in a readable measure instead of running the full width. */
.pgrid--1{ grid-template-columns:1fr; }
.pgrid--1 .pg{ min-height:clamp(300px,34vw,440px); }
.pgrid--1 .pg p:not(.pg__tag):not(.link-arrow-p){ max-width:560px; }

/* Two links in one card — "Detalji programa" and "Katalog" on the programme
   cards. Side by side, wrapping on narrow cards. */
.pg__links{ display:flex; flex-wrap:wrap; gap:8px 22px; }

.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.vgrid > .wp-block-embed{ margin:0; }
/* A single video — the programme pages — sits wide and centred; two share
   the width. The sizes stay the same on the way down. */
.vgrid--1{ grid-template-columns:1fr; max-width:960px; margin-inline:auto; }
.vgrid--2{ grid-template-columns:1fr 1fr; }
@media(max-width:860px){ .vgrid{ grid-template-columns:1fr 1fr; } .vgrid--1{ grid-template-columns:1fr; } }
@media(max-width:560px){ .vgrid, .vgrid--2{ grid-template-columns:1fr; } }

/* The click-to-play facade inc/embeds.php renders in place of a YouTube
   player: poster, play button, title. With responsive embeds on, the core
   wrapper already draws the 16:9 box (::before), so inside it the facade
   just fills the box; on its own it brings the ratio itself. */
.yt{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:var(--forest-deep);
  box-shadow:var(--shadow-sm); cursor:pointer; isolation:isolate; }
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper .yt{ position:absolute; inset:0; aspect-ratio:auto; }
.yt__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.yt:hover .yt__poster{ transform:scale(1.04); }
.yt::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, oklch(0.2 0.035 152 / .85) 0%, oklch(0.2 0.035 152 / .18) 45%, transparent 72%); }
.yt__play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; width:100%; height:100%;
  background:none; border:0; padding:0; margin:0; cursor:pointer; color:inherit; }
.yt__btn{ width:64px; height:64px; border-radius:var(--r-pill); background:var(--clay); box-shadow:var(--shadow);
  display:grid; place-items:center; transition:transform .3s var(--ease), background .3s; }
.yt__btn::before{ content:""; width:0; height:0; margin-left:5px; border-style:solid; border-width:11px 0 11px 20px;
  border-color:transparent transparent transparent var(--on-dark); }
.yt:hover .yt__btn{ transform:scale(1.08); background:var(--clay-deep); }
.yt__play:focus-visible{ outline:none; }
.yt__play:focus-visible .yt__btn{ outline:3px solid var(--on-dark); outline-offset:3px; }
.yt__title{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; pointer-events:none; color:var(--on-dark);
  font-weight:600; font-size:14.5px; line-height:1.35; text-shadow:0 1px 2px oklch(0 0 0 / .4); }
.yt iframe{ position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0; }
.yt.is-playing .yt__poster, .yt.is-playing .yt__play, .yt.is-playing .yt__title, .yt.is-playing::after{ display:none; }

/* ----------  REVEAL FOR PATTERNS  ----------
   Core blocks cannot carry data attributes. Instead of the [data-reveal] of
   the prototype, patterns get the class .reveal; grids additionally get
   .reveal-stagger for the staggered entrance of their children. */
.reveal, .reveal-stagger > *{ opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in, .reveal-stagger > *.in{ opacity:1; transform:none; }

/* Pages built from patterns keep their own distance to the fixed
   navigation (.hero and .phero carry padding-top:96px). */
.site-main--sections{ padding-top:0; }

/* Centred section headings: the prototype had an inline margin-bottom
   between 36 and 52 px here, unified to 46. */
.accredo-shead-center{ margin-bottom:46px; }

/* Newsletter signup in the footer (rendered by the plugin). */
.footer__nl{ position:relative; z-index:1; max-width:520px; margin-top:44px; padding-top:28px;
  border-top:1px solid oklch(1 0 0 / .14); }

/* ----------  WRAPPERS FROM THE BLOCK CONVERSION  ----------
   Converting the Custom HTML sections to core blocks introduced a few grouping
   divs where the old markup had an unclassed <div>. They carry no design of
   their own — these rules only keep them from adding a box. */
.info__body,
.bf__body,
.hero__rating-meta,
.quote__who,
.reqform__phone{ display:contents; }

/* The phone block in the team building form is a real column, not a pass
   through: it sits next to its icon. */
.reqform__phone{ display:block; }

/* ----------  NOVO U PONUDI (home)  ---------- */
/* The client's text on the left, a mosaic of location pictures on the
   right: one wide picture over two small ones. Each is a core image block,
   so the client swaps pictures by clicking them. */
.newoffer{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.newoffer__text .h2{ margin:14px 0 16px; }
.newoffer__text p{ color:var(--ink-2); }
.newoffer__text p+p{ margin-top:12px; }
.newoffer__text .lead{ font-weight:700; color:var(--ink); }
.newoffer__text .newoffer__claim{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--forest); margin-top:20px; }
.newoffer__text .newoffer__motto{ margin-top:6px; }
.newoffer__mosaic{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.newoffer__mosaic .wp-block-image{ margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; }
.newoffer__mosaic .wp-block-image:first-child{ grid-column:1/-1; aspect-ratio:16/10; }
.newoffer__mosaic .wp-block-image img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:820px){ .newoffer{ grid-template-columns:1fr; } .newoffer__mosaic{ order:-1; } }