/* ==========================================================================
   Oakridge — Hero Section
   Ported from the static site's sections.css by wp-build/tools/port_css.py
   (token + class rename only), with the additions a full-width WordPress
   block needs: it paints its own background and owns its container.
   ========================================================================== */

.oak-hero {
  background-color: var(--oak-surface-page);
}

/* The block is alignfull inside post content, which core constrains. Core's
   negative root-padding margins do the bleeding; `width` must stay `auto` so
   the box stretches to the padding box — a literal `width: 100%` re-measures
   against the 1200px content box and the section stops short of the edges. */
.oak-hero.alignfull {
  max-width: none;
  width: auto;
}

.oak-hero {
  position: relative;
  padding-block: clamp(var(--oak-space-xl), 5vw, var(--oak-space-3xl)) clamp(var(--oak-space-2xl), 6vw, var(--oak-space-3xl));
  overflow: hidden;
}

.oak-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 46%;
  background-color: var(--oak-color-forest-50);
  background-image: var(--oak-pattern-dot);
  background-size: var(--oak-pattern-dot-size) var(--oak-pattern-dot-size);
  z-index: 0;
}

.oak-hero__inner {
  position: relative;
  z-index: var(--oak-z-base);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(var(--oak-space-lg), 5vw, var(--oak-space-3xl));
  align-items: center;
}

.oak-hero__content { max-width: 34rem; }

.oak-hero__title { margin-bottom: var(--oak-space-md); }

.oak-hero__title em {
  font-style: normal;
  color: var(--oak-color-forest-700);
  position: relative;
  white-space: nowrap;
}

.oak-hero__lead { margin-bottom: var(--oak-space-lg); }

.oak-hero__call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oak-space-sm) var(--oak-space-md);
  padding: var(--oak-space-md);
  margin-bottom: var(--oak-space-md);
  background-color: var(--oak-surface-page);
  border: 1px solid var(--oak-border-subtle);
  border-radius: var(--oak-radius-md);
  box-shadow: var(--oak-shadow-sm);
}

.oak-hero__call-text { display: flex; flex-direction: column; gap: 2px; }

.oak-hero__call-label {
  font-size: var(--oak-text-3xs);
  font-weight: var(--oak-weight-bold);
  letter-spacing: var(--oak-tracking-widest);
  text-transform: uppercase;
  color: var(--oak-text-muted);
}

.oak-hero__call .oak-btn { margin-left: auto; }

.oak-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oak-space-2xs) var(--oak-space-md);
  align-items: center;
  margin-bottom: var(--oak-space-lg);
}

.oak-hero__media { position: relative; }

.oak-hero__figure {
  position: relative;
  border-radius: var(--oak-radius-lg);
  overflow: hidden;
  box-shadow: var(--oak-shadow-lg);
}

.oak-hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3.35;
  object-fit: cover;
}

.oak-hero__proof {
  position: absolute;
  left: clamp(-2.5rem, -2vw, -1rem);
  bottom: clamp(-1.75rem, -2vw, -1.25rem);
  display: flex;
  gap: var(--oak-space-md);
  padding: var(--oak-space-sm) var(--oak-space-md);
  background-color: var(--oak-surface-page);
  border-radius: var(--oak-radius-md);
  box-shadow: var(--oak-shadow-lg);
  border: 1px solid var(--oak-border-subtle);
}

.oak-hero__proof .oak-stat__value { font-size: var(--oak-text-xl); }
.oak-hero__proof .oak-stat__label { font-size: var(--oak-text-3xs); margin-top: 0; }

.oak-hero__divider { width: 1px; background-color: var(--oak-border-subtle); flex: none; }

@media (max-width: 980px) {
  .oak-hero::before { inset: 0; opacity: 0.55; }
  .oak-hero__inner { grid-template-columns: 1fr; gap: var(--oak-space-2xl); }
  .oak-hero__content { max-width: 40rem; }
  .oak-hero__figure img { aspect-ratio: 16 / 10; }
  .oak-hero__proof { left: var(--oak-space-sm); bottom: var(--oak-space-sm); }
}

@media (max-width: 560px) {
  .oak-hero__call { flex-direction: column; align-items: stretch; }
  .oak-hero__call .oak-btn { margin-left: 0; }
  .oak-hero__proof { position: static; margin-top: var(--oak-space-sm); justify-content: space-between; }
}