/*!
 * Oyolloo Elements - J10 Promos widget.
 * Scoped to .oo-promos-sec: no element selector, no :root, nothing leaks.
 */
.oo-promos-sec{
  --oom-maxw:1220px;
  --oom-pad:clamp(18px,4.5vw,44px);
  --oom-r:12px;
  --oom-yellow:#F7BE27;
  --oom-red:#E3000E;
  --oom-red-dk:#BE0009;
  --oom-border-2:#D9D9D9;
  --oom-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oom-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oom-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  position:relative;
  padding:clamp(50px,6.5vw,92px) 0;
  background:#FFFFFF;
  font-family:var(--oom-f-body); font-size:16px; line-height:1.7; font-weight:400;
}
.oo-promos-sec,.oo-promos-sec *,.oo-promos-sec *::before,.oo-promos-sec *::after{ box-sizing:border-box; }

.oo-promos-sec--alt{ background:#F7F7F7; }
.oo-promos-sec--cool{ background:#EFF6F8; }
/* the design runs the tiles straight into the section below, with no gap */
.oo-promos-sec--flush{ padding-bottom:0; }
.oo-promos-sec--alt::before,.oo-promos-sec--cool::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--oom-border-2),transparent);
}

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

.oo-promos{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:820px){ .oo-promos{ grid-template-columns:1fr; } }

.oo-promo{
  position:relative; display:flex; align-items:center;
  min-height:240px; overflow:hidden;
  border-radius:var(--oom-r); background:#0E0E0E;
}
.oo-promo img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; display:block; border:0; border-radius:0;
}
/* darkened from the left so the copy stays readable over any photo */
.oo-promo__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,9,8,.9) 8%,rgba(10,9,8,.55) 55%,rgba(10,9,8,.12));
}
.oo-promo__body{ position:relative; padding:30px 32px; max-width:70%; }
.oo-promo__t{
  margin:0;
  font-family:var(--oom-f-display); font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.05;
  letter-spacing:.012em; text-transform:uppercase; color:#FFF;
}
.oo-promo__p{ margin:8px 0 18px; color:#D8D2C6; font-size:.9rem; }
.oo-promo__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:6px; border:2px solid transparent;
  background:var(--oom-red); color:#fff; text-decoration:none;
  font-family:var(--oom-f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 6px 18px -9px rgba(227,0,14,.6);
  transition:background-color .2s ease, transform .12s ease;
}
.oo-promo__btn:hover{ background:var(--oom-red-dk); color:#fff; transform:translateY(-1px); }
.oo-promo__btn:active{ transform:translateY(1px); }

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

.oo-js .oo-promos-sec .oo-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.oo-js .oo-promos-sec .oo-reveal.oo-is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .oo-js .oo-promos-sec .oo-reveal{ opacity:1; transform:none; transition:none; }
}

/* theme hardening: a theme styles bare h3/p/a, and those rules beat inheritance */
.oo-promo__t,.oo-promo__p{ margin-block-end:0; }
.oo-promo__p{ margin-block-end:18px; }
body.elementor-editor-active .oo-promos-sec .oo-reveal{ opacity:1; transform:none; }