/* Minimal photo hero for plain guide pages (includes/page-hero.php).
   Banner art sits on the right of the image; the copy sits on the empty left side.
   The hero stays navy in both themes because it is drawn over the photo. */
.dbph{
  --dbph-gold:var(--ui-accent,#f5b82e);
  --dbph-blue:var(--ui-primary,#2f7bff);
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  min-height:clamp(340px,30vw,430px);margin:28px 0 44px;border-radius:20px;overflow:hidden;
  background:#071331;isolation:isolate;
  box-shadow:0 18px 40px rgba(3,10,30,.28);
}
.dbph-media{position:absolute;inset:0;z-index:-1}
.dbph-media .dbph-img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center;border-radius:0}
.dbph-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(5,13,36,.94) 0%,rgba(5,13,36,.82) 34%,rgba(5,13,36,.25) 58%,rgba(5,13,36,0) 72%);
}
.dbph-copy{width:min(560px,52%);margin-right:auto;padding:44px 48px;text-align:right}

.dbph .dbph-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  color:var(--dbph-gold);font-size:14px;font-weight:800;line-height:1.6;
}
.dbph .dbph-eyebrow::before{content:"";width:16px;height:4px;background:var(--dbph-gold);transform:skewX(-19deg)}

.dbph .dbph-title{
  margin:0 0 14px!important;padding:0;color:#fff!important;
  font-size:clamp(26px,2.6vw,38px)!important;font-weight:900!important;line-height:1.55!important;
}
.dbph .dbph-lead{margin:0 0 24px!important;color:rgba(232,239,255,.8)!important;font-size:15.5px;line-height:2.05}
.dbph .dbph-lead strong{color:#fff!important}
.dbph .dbph-lead a{color:var(--dbph-gold)!important}

.dbph-actions{display:flex;flex-wrap:wrap;gap:12px}
.dbph .dbph-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:12px;
  font-size:15px;font-weight:800;text-decoration:none!important;transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.dbph .dbph-btn:hover{transform:translateY(-2px)}
.dbph .dbph-btn--main{background:linear-gradient(135deg,#ffd15c,var(--dbph-gold));color:#0b1630!important;box-shadow:0 8px 22px rgba(245,184,46,.28)}
.dbph .dbph-btn--ghost{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff!important}
.dbph .dbph-btn--ghost:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}

/* tablet: copy wider, image dims more */
@media (max-width:1024px){
  .dbph-copy{width:min(560px,62%);padding:36px}
  .dbph-media::after{background:linear-gradient(to right,rgba(5,13,36,.95) 0%,rgba(5,13,36,.85) 45%,rgba(5,13,36,.3) 75%,rgba(5,13,36,.1) 100%)}
}

/* phone: image becomes a top band, copy below on navy */
@media (max-width:767px){
  .dbph{display:block;min-height:0;margin:16px 0 28px;border-radius:16px}
  .dbph-media{position:relative;inset:auto;z-index:0;aspect-ratio:12/5}
  .dbph-media .dbph-img{object-position:90% center}
  .dbph-media::after{background:linear-gradient(to bottom,rgba(7,19,49,0) 45%,#071331 100%)}
  .dbph-copy{width:auto;margin:-28px 0 0;padding:0 20px 24px;position:relative}
  .dbph .dbph-title{font-size:24px!important}
  .dbph .dbph-lead{font-size:14.5px;margin-bottom:20px!important}
  .dbph .dbph-btn{flex:1 1 140px}
}