/* ================================
   DRG Block: Two Panel CTA
   ================================ */

.drg-tpc{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Full-bleed helper (front end) */
.drg-tpc.alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Editor: avoid 100vw hack */
.block-editor-page .drg-tpc.alignfull,
.editor-styles-wrapper .drg-tpc.alignfull{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.drg-tpc__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(420px, 42vw, 520px);
}

.drg-tpc__panel{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 3rem);

  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.drg-tpc__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(0,0,0,0.10), rgba(0,0,0,0.60)),
    linear-gradient(0deg, rgba(0,0,0,var(--drg-tpc-overlay, .45)), rgba(0,0,0,var(--drg-tpc-overlay, .45)));
  z-index: 0;
}

.drg-tpc__content{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  margin-top: 1rem;
  max-width: 520px;
}

/* -------------------------------
   IMPORTANT:
   The wrapper is still .drg-reveal (so JS triggers .is-in),
   BUT we DO NOT want the wrapper to animate as one unit.
   So we neutralize the base reveal styles for this block only.
-------------------------------- */

/* override global .drg-reveal base styles for this block only */
.drg-tpc__content.drg-reveal{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  transition: none !important;
}

/* -------------------------------
   Individual content styles
-------------------------------- */

.drg-tpc__logo{
  display: block;
  max-width: 150px;
  width: auto;
  height: auto;
  margin: 0 auto clamp(1rem, 2vw, 1.4rem);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

.drg-tpc__title{
  margin: 0 0 .6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: .95;
  text-shadow: 5px 4px 8px rgba(0,0,0,.15);
}
.drg-tpc__title h2{
  margin-bottom: .1rem;
}

.drg-tpc__text{
  margin: 0 0 1.4rem;
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  line-height: 1.35;
  opacity: .95;
  text-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.drg-tpc__actions{
  margin-top: .25rem;
  display: flex;
  justify-content: center;
}

/* -------------------------------
   FORCED STAGGER (works with existing reveal.js)
   reveal.js adds:
     - .drg-stagger class to each selected child
     - --delay on each child
-------------------------------- */

/* base state for staggered children */
.drg-tpc__content[data-reveal-stagger] .drg-stagger{
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 520ms var(--reveal-ease, cubic-bezier(.2,.9,.2,1)) var(--delay, 0ms),
    transform 520ms var(--reveal-ease, cubic-bezier(.2,.9,.2,1)) var(--delay, 0ms);
  will-change: opacity, transform;
}

/* animate in once wrapper becomes visible */
.drg-tpc__content.is-in[data-reveal-stagger] .drg-stagger{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Mobile stack */
@media (max-width: 900px){
  .drg-tpc__grid{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .drg-tpc__panel{
    min-height: 360px;
  }
}
/* -----------------------------------------
   Two Panel CTA — keep DRG reveal, but only fade the wrapper
   (prevents the whole panel doing blur/transform)
------------------------------------------ */

/* Wrapper starts hidden (so reveal works) but no big transform/blur */
.drg-tpc__content.drg-reveal{
  opacity: 0;                 /* IMPORTANT: keep hidden initially */
  transform: none !important; /* stop big panel motion */
  filter: none !important;    /* stop big panel blur */
  clip-path: none !important; /* stop any mask wipe on wrapper */
  transition:
    opacity var(--dur, 700ms) var(--ease, cubic-bezier(.2,.9,.2,1)) var(--delay, 0ms);
}

/* When revealed, wrapper just fades in */
.drg-tpc__content.drg-reveal.is-in{
  opacity: 1;
}

/* -----------------------------------------
   Child stagger (your reveal.js adds .drg-stagger + --delay on each child)
------------------------------------------ */

.drg-tpc__content[data-reveal-stagger] .drg-stagger{
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 520ms var(--reveal-ease, cubic-bezier(.2,.9,.2,1)) var(--delay, 0ms),
    transform 520ms var(--reveal-ease, cubic-bezier(.2,.9,.2,1)) var(--delay, 0ms);
  will-change: opacity, transform;
}

.drg-tpc__content.is-in[data-reveal-stagger] .drg-stagger{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.page-id-512 .drg-tpc__title h2 {
  margin-bottom:1.6rem;}