/*!
 * Oyolloo Elements — J10 Boards widget.
 *
 * Scoped to .oo-boards-sec and its own .oo-lb: no element selector, no :root,
 * nothing leaks. The lightbox is a child of the section, so it carries the
 * same tokens.
 */

.oo-boards-sec{
  --ood-maxw:1220px;
  --ood-pad:clamp(18px,4.5vw,44px);
  --ood-r:12px;

  --ood-yellow:#F7BE27;
  --ood-red:#E3000E;
  --ood-brown:#642F21;
  --ood-ink:#212121;
  --ood-muted:#757575;
  --ood-faint:#A1A1A1;
  --ood-surface:#FFFFFF;
  --ood-alt:#F7F7F7;
  --ood-dark:#0A0908;
  --ood-dark-2:#141210;
  --ood-on-dark:#F4F1E9;
  --ood-on-dark-mut:#A9A296;
  --ood-border:#EAEAEA;
  --ood-border-2:#D9D9D9;

  --ood-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ood-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ood-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  --ood-sh:0 2px 8px rgba(100,47,33,.06), 0 18px 40px -24px rgba(100,47,33,.34);
  --ood-shape:1 / 1.414;

  position:relative;
  padding:clamp(50px,6.5vw,92px) 0;
  background:var(--ood-surface); color:var(--ood-ink);
  font-family:var(--ood-f-body); font-size:16px; line-height:1.7; font-weight:400;
}

/* box-sizing is set on the widget's own subtree, never globally */
.oo-boards-sec,.oo-boards-sec *,.oo-boards-sec *::before,.oo-boards-sec *::after{ box-sizing:border-box; }

.oo-boards-sec--white{ background:var(--ood-surface); }
.oo-boards-sec--alt{ background:var(--ood-alt); }
.oo-boards-sec--cool{ background:#EFF6F8; }
.oo-boards-sec--alt::before,.oo-boards-sec--cool::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ood-border-2),transparent);
}

.oo-boards-sec__in{ max-width:var(--ood-maxw); margin-inline:auto; padding-inline:var(--ood-pad); }

/* ================= section head ================= */
.oo-boards-sec__head{ margin-bottom:34px; text-align:center; }
.oo-boards-sec__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-family:var(--ood-f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ood-brown);
}
.oo-boards-sec__eyebrow::before{ content:""; flex:none; width:22px; height:2px; background:currentColor; opacity:.5; }
.oo-boards-sec__title{
  position:relative; margin:14px 0 0; padding-bottom:18px;
  font-family:var(--ood-f-display); font-weight:700;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1;
  letter-spacing:.012em; text-transform:uppercase; color:var(--ood-red);
}
.oo-boards-sec__title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:58px; height:3px; border-radius:3px; background:var(--ood-yellow);
}
.oo-boards-sec__lede{ margin:14px auto 0; max-width:64ch; color:var(--ood-muted); font-size:1rem; }
@media (max-width:620px){ .oo-boards-sec__eyebrow::before{ display:none; } }

/* ================= the slider ================= */
.oo-boards{ position:relative; }
.oo-boards--a4{ --ood-shape:1 / 1.414; }
.oo-boards--square{ --ood-shape:1 / 1; }
.oo-boards--photo{ --ood-shape:3 / 2; }

.oo-boards__track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(180px,21vw,244px);
  gap:18px; padding:4px 2px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* the rail below replaces the native scrollbar */
  scrollbar-width:none; -ms-overflow-style:none;
}
.oo-boards__track::-webkit-scrollbar{ display:none; }

.oo-board{ margin:0; scroll-snap-align:start; }
.oo-board__btn{
  display:block; width:100%; padding:0; cursor:zoom-in;
  background:var(--ood-dark-2); border:1px solid var(--ood-border);
  border-radius:var(--ood-r); overflow:hidden;
  transition:border-color .25s ease, transform .35s ease, box-shadow .35s ease;
}
.oo-board__btn img{
  display:block; width:100%; aspect-ratio:var(--ood-shape);
  object-fit:cover; object-position:top center;
  opacity:.9; transition:opacity .35s ease;
}
.oo-board__btn:hover,.oo-board__btn:focus-visible{
  border-color:var(--ood-yellow); transform:translateY(-3px); box-shadow:var(--ood-sh);
}
.oo-board__btn:hover img,.oo-board__btn:focus-visible img{ opacity:1; }
.oo-board figcaption{
  margin-top:11px; font-family:var(--ood-f-head); font-weight:500; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ood-muted);
}

.oo-boards__nav{
  position:absolute; top:calc(50% - 22px); transform:translateY(-50%); z-index:3;
  display:grid; place-items:center; width:46px; height:46px; padding:0;
  border:1px solid var(--ood-border-2); border-radius:50%;
  background:var(--ood-surface); color:var(--ood-ink); cursor:pointer;
  box-shadow:var(--ood-sh); font-size:1.4rem; line-height:1;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease, opacity .22s ease;
}
.oo-boards__nav--prev{ left:-14px; }
.oo-boards__nav--next{ right:-14px; }
.oo-boards__nav:hover{ background:var(--ood-yellow); border-color:var(--ood-yellow); color:#211A05; }
.oo-boards__nav:disabled{ opacity:0; pointer-events:none; }

.oo-boards__rail{
  position:relative; height:3px; margin-top:26px; border-radius:3px;
  background:var(--ood-border); overflow:hidden;
}
.oo-boards__bar{
  position:absolute; top:0; left:0; height:100%; width:30%; border-radius:3px;
  background:var(--ood-yellow); transition:left .12s linear, width .2s ease;
}

@media (max-width:900px){
  .oo-boards__nav{ display:none; }
  .oo-boards__track{ grid-auto-columns:clamp(158px,44vw,210px); gap:14px; }
}

/* ================= lightbox =================
   Fixed, so it sits over the whole page rather than inside the section box. */
.oo-boards-sec .oo-lb{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:clamp(14px,4vw,40px);
  background:rgba(6,5,4,.94);
  opacity:0; transition:opacity .25s ease;
}
.oo-boards-sec .oo-lb[hidden]{ display:none; }
.oo-boards-sec .oo-lb.oo-is-on{ opacity:1; }

.oo-lb__fig{ display:flex; flex-direction:column; gap:14px; margin:0; max-height:100%; }
/* Elementor's frontend stylesheet resets the radius on every img it can
   reach; naming the section as well as the image clears it. */
.oo-boards-sec .oo-lb__fig img{
  width:auto; max-width:min(720px,100%); max-height:calc(100vh - 140px);
  margin-inline:auto; object-fit:contain; border-radius:var(--ood-r);
}
.oo-lb__cap{
  text-align:center; font-family:var(--ood-f-head); font-weight:500; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ood-on-dark-mut);
}
.oo-lb__close,.oo-lb__nav{
  position:absolute; display:grid; place-items:center; width:48px; height:48px; padding:0;
  border:1px solid rgba(244,241,233,.28); border-radius:50%;
  background:rgba(10,9,8,.6); color:var(--ood-on-dark); cursor:pointer;
  font-size:1.6rem; line-height:1;
  transition:border-color .22s ease, color .22s ease;
}
.oo-lb__close:hover,.oo-lb__nav:hover{ border-color:var(--ood-yellow); color:var(--ood-yellow); }
.oo-lb__close{ top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); font-size:1.4rem; }
.oo-lb__nav{ top:50%; transform:translateY(-50%); }
.oo-lb__nav--prev{ left:clamp(8px,2vw,26px); }
.oo-lb__nav--next{ right:clamp(8px,2vw,26px); }

.oo-boards-sec :focus-visible{ outline:3px solid var(--ood-yellow); outline-offset:2px; border-radius:2px; }

/* ================= reveal ================= */
.oo-js .oo-boards-sec .oo-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.oo-js .oo-boards-sec .oo-reveal.oo-is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .oo-board__btn,.oo-boards__bar,.oo-boards-sec .oo-lb{ transition:none; }
  .oo-js .oo-boards-sec .oo-reveal{ opacity:1; transform:none; transition:none; }
}

/* ================= theme hardening =================
   A theme styles bare h2, p, figure, figcaption and button; those rules beat
   inheritance however low their specificity. */
.oo-boards-sec__eyebrow,.oo-boards-sec__title,.oo-boards-sec__lede{ margin-block-end:0; }
.oo-board,.oo-lb__fig{ margin-inline:0; }
.oo-board figcaption,.oo-lb__cap{ margin-block:0; }
.oo-board figcaption{ margin-block-start:11px; }

body.elementor-editor-active .oo-boards-sec .oo-reveal{ opacity:1; transform:none; }

/* The only rule outside the section: the page behind an open lightbox must not
   scroll, and the class is added by this widget's script alone. */
body.oo-lb-open{ overflow:hidden; }