/*
 * Independent clean-room implementation from a written spec.
 * Component: closing call-to-action band (`#contact`, `.ocf-cta`).
 * Markup source: parts/cta-section.php. Dark tone is the only tone this
 * theme ever renders; the light-tone branch below exists for forward
 * compatibility but is not reachable from any current template.
 */

/* -- base surface + local custom properties ------------------------- */
.ocf-cta {
  padding-block: 0;
  color: var(--cta-body-color);
  background: var(--section-background, var(--cta-background));
  isolation: isolate;
  min-height: clamp(17rem, 27vw, 24rem);
  align-items: center;
  display: grid;
  overflow: hidden;
  position: relative;
  --cta-image-overlay-opacity: 1;
  --cta-overlay-opacity: max(0.55, var(--media-overlay-opacity));
  --cta-gradient: var(--gradient-media-dark);
  --cta-panel-border-color: var(--ocf-border-alt);
  --cta-panel-color: var(--ocf-body-alt);
  --cta-panel-background: var(--ocf-bg-dark);
  --cta-background: var(--ocf-bg-dark);
  --cta-body-color: var(--ocf-body-alt);
  --cta-headline-color: var(--ocf-heading-alt);
  --cta-headline-size: var(--font-h2-size);
  --cta-eyebrow-color: var(--ocf-primary);
}

/* Reachable only if a template ever sets data-ocf-tone="light" on the
   section (none does today) — kept for spec fidelity. */
.ocf-cta[data-ocf-tone="light"] {
  --cta-panel-border-color: color-mix(in srgb, var(--card-border-color) 72%, transparent);
  --cta-panel-color: var(--ocf-body);
  --cta-panel-background: color-mix(in srgb, var(--ocf-bg) 12%, transparent);
  --cta-background: var(--ocf-bg);
  --cta-body-color: var(--ocf-body);
  --cta-headline-color: var(--ocf-heading);
  --cta-eyebrow-color: var(--ocf-primary);
}

/* dark-tone panel background/border reset (tone is always "dark") */
.ocf-cta[data-ocf-tone="dark"] .ocf-cta__panel {
  --cta-panel-border-color: transparent;
  --cta-panel-background: transparent;
}

/* -- panel / grid shell ----------------------------------------------- */
.ocf-cta__panel,
.ocf-cta__grid {
  color: var(--cta-panel-color);
  background: var(--cta-panel-background);
  border-radius: var(--card-radius-lg);
  border: var(--card-border-width) solid var(--cta-panel-border-color);
  overflow: hidden;
  min-height: clamp(14rem, 28vw, 22rem);
  gap: 2rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
  position: relative;
}

.ocf-cta .ocf-cta__panel {
  backdrop-filter: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  border: 0;
  overflow: visible;
  width: min(100%, 72rem);
  min-height: 0;
}

/* -- background photo + gradient shade -------------------------------- */
.ocf-cta__image,
.ocf-cta__shade {
  inset: 0;
  position: absolute;
}

.ocf-cta__image {
  opacity: 0.18;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
}

.ocf-cta__shade {
  opacity: var(--section-overlay-opacity, var(--cta-overlay-opacity));
  background: var(--section-gradient, var(--cta-gradient));
}

/* direct-child variants win via child-combinator specificity — this is
   what actually paints on the live markup */
.ocf-cta > .ocf-cta__image,
.ocf-cta > .ocf-cta__shade {
  inset: 0;
  position: absolute;
}

.ocf-cta > .ocf-cta__image {
  filter: saturate(0.94) contrast(0.96);
  opacity: 1;
  object-position: 64% center;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
}

.ocf-cta > .ocf-cta__shade {
  opacity: 1;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ocf-bg-dark) 76%, transparent) 0%,
      color-mix(in srgb, var(--ocf-bg-dark) 58%, transparent) 37%,
      color-mix(in srgb, var(--ocf-bg-dark) 28%, transparent) 68%,
      color-mix(in srgb, var(--ocf-bg-dark) 14%, transparent) 100%
    ),
    var(--section-gradient, var(--cta-gradient));
}

/* -- content layer ------------------------------------------------------ */
.ocf-cta .container-global {
  z-index: 1;
  position: relative;
}

.ocf-cta__inner {
  padding: clamp(1.5rem, 5vw, 3rem);
  width: 100%;
  gap: 2rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
  z-index: 1;
  position: relative;
}

.ocf-cta .ocf-cta__inner {
  padding: clamp(2rem, 5vw, 4rem) 0;
  gap: clamp(1.25rem, 2.8vw, 2rem);
  grid-template-columns: minmax(0, 42rem);
}

.ocf-cta__copy {
  max-width: 720px;
}

.ocf-cta .ocf-cta__copy {
  max-width: 45rem;
}

.ocf-cta__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: var(--field-font-weight, var(--font-weight-bold));
  font-size: var(--field-font-size, var(--font-label-size));
  color: var(--cta-eyebrow-color);
  margin: 0 0 0.75rem;
  display: inline-flex;
}

.ocf-cta .ocf-cta__eyebrow {
  color: var(--field-color, var(--ocf-primary));
  margin-bottom: 0.65rem;
}

.ocf-cta__headline {
  text-decoration: var(--field-text-decoration, none);
  letter-spacing: 0;
  line-height: 1.08;
  font-style: var(--field-font-style, normal);
  font-weight: var(--field-font-weight, var(--font-weight-bold));
  font-size: var(--field-font-size, var(--cta-headline-size));
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  color: var(--field-color, var(--cta-headline-color));
  margin: 0;
}

.ocf-cta__description,
.ocf-cta__body {
  text-decoration: var(--field-text-decoration, none);
  font-style: var(--field-font-style, normal);
  font-weight: var(--field-font-weight, inherit);
  font-size: var(--field-font-size, inherit);
  color: var(--field-color, var(--cta-body-color));
  max-width: 62ch;
  margin: 1rem 0 0;
}

.ocf-cta .ocf-cta__body {
  color: color-mix(in srgb, var(--cta-body-color) 88%, transparent);
  margin-top: 0.85rem;
  max-width: 48rem;
}

/* -- actions: primary button + phone link ------------------------------ */
.ocf-cta__actions {
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
}

.ocf-cta .ocf-cta__actions {
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 0;
}

.ocf-cta__actions svg,
.ocf-cta .btn-primary svg,
.ocf-cta .btn-secondary svg {
  flex: 0 0 auto;
  height: 1rem;
  width: 1rem;
}

.ocf-cta__phone {
  line-height: 1.2;
  font-size: var(--font-label-size);
  color: inherit;
  min-height: 2.75rem;
  gap: 0.45rem;
  align-items: center;
  display: inline-flex;
}

.ocf-cta .ocf-cta__phone {
  color: color-mix(in srgb, var(--cta-body-color) 90%, transparent);
  border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  padding-left: clamp(1rem, 2vw, 1.35rem);
  min-height: 3rem;
}

.ocf-cta .ocf-cta__phone svg {
  height: 1.25rem;
  width: 1.25rem;
}

.ocf-cta__phone-text {
  gap: 0.15rem;
  display: grid;
}

.ocf-cta__phone strong {
  font-weight: var(--font-weight-bold);
  color: var(--cta-headline-color);
  display: block;
}

.ocf-cta .ocf-cta__phone strong {
  color: var(--cta-headline-color);
}

/* -- legacy banner/media variants (no current markup emits these) ------ */
.ocf-cta__banner-image,
.ocf-cta__banner-shade {
  inset: 0;
  position: absolute;
}

.ocf-cta__banner-image {
  filter: saturate(0.9) contrast(0.94);
  opacity: 1;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
}

.ocf-cta__banner-shade {
  opacity: 1;
  background: color-mix(in srgb, var(--ocf-bg-dark) 85%, transparent);
}

.ocf-cta__bg-image {
  filter: saturate(0.92) contrast(0.96);
  opacity: 1;
  object-fit: cover;
  max-width: none;
  height: 100%;
  width: 100%;
  inset: 0;
  position: absolute;
}

.ocf-cta__media {
  box-shadow: var(--image-shadow);
  background: var(--ocf-bg);
  border-radius: var(--image-radius);
  border: var(--card-border-width) solid var(--card-border-color);
  overflow: hidden;
  grid-row: 1 / span 2;
  grid-column: 2;
}

.ocf-cta__media img {
  object-fit: cover;
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* -- narrow viewport ----------------------------------------------------- */
@media (max-width: 760px) {
  .ocf-cta {
  padding-block: 0;
  min-height: clamp(23rem, 92vw, 30rem);
}

  .ocf-cta__grid,
  .ocf-cta__inner {
    grid-template-columns: 1fr;
  }

  .ocf-cta__panel,
  .ocf-cta__grid {
    min-height: 0;
  }

  .ocf-cta .ocf-cta__panel {
    width: 100%;
  }

  .ocf-cta .ocf-cta__inner {
  padding-block: clamp(2rem, 10vw, 3rem);
  min-height: inherit;
}

  .ocf-cta .ocf-cta__actions {
  flex-direction: column;
  align-items: flex-start;
}

  .ocf-cta__media {
  grid-row: auto;
  grid-column: 1;
}

  .ocf-cta > .ocf-cta__image {
    object-position: 68% center;
  }

  .ocf-cta > .ocf-cta__shade {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--ocf-bg-dark) 76%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 58%, transparent) 58%,
        color-mix(in srgb, var(--ocf-bg-dark) 34%, transparent) 100%
      ),
      var(--section-gradient, var(--cta-gradient));
  }

  .ocf-cta__phone {
    width: 100%;
  }

  .ocf-cta .ocf-cta__phone {
  border-left: 0;
  padding-left: 0;
}
}

/* ---------------------------------------------------------------------
 * Floating-card redesign — 2026-09-08.
 * Hannah 9/8 on the bottom CTA: "it looks stark next to the black footer
 * and the call us button is messy" -> picked a floating card on a soft
 * band, phone as a second outlined button (see brief-cta-floating-card.md).
 * Reference measured: temphost024 Cedar Grove Family Dentistry home page,
 * `.footer-cta` card (numbers in the PR body). Colors below are all our
 * own tokens so every site palette still works — no reference CSS text
 * was copied, only the shapes (band, card, two aligned buttons) were
 * measured and rebuilt with our own values.
 * ------------------------------------------------------------------- */
.ocf-cta {
  --cta-background: var(--ocf-bg);
  --cta-body-color: var(--ocf-body);
  --cta-headline-color: var(--ocf-heading);
  --cta-eyebrow-color: var(--ocf-primary);
  --cta-card-background: color-mix(in srgb, var(--ocf-bg-alt) 65%, var(--ocf-bg));
  --cta-card-border-color: color-mix(in srgb, var(--ocf-primary) 20%, transparent);
  --cta-card-radius: 20px;
  --cta-card-shadow:
    0 12px 32px color-mix(in srgb, var(--ocf-primary) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--ocf-bg) 68%, transparent);
  background: var(--cta-background);
  padding-block: clamp(4.5rem, 8vw, 6rem);
  min-height: 0;
}

/* the dark photo + shade this section ships with belonged to the old
   dark band; the floating card is a flat light surface instead. */
.ocf-cta > .ocf-cta__image,
.ocf-cta > .ocf-cta__shade {
  display: none;
}

.ocf-cta .ocf-cta__panel {
  width: min(100%, var(--container-max, 72rem));
  background: var(--cta-card-background);
  border: 1px solid var(--cta-card-border-color);
  border-radius: var(--cta-card-radius);
  box-shadow: var(--cta-card-shadow);
  padding: clamp(2rem, 4vw, 3rem);
}

.ocf-cta .ocf-cta__inner {
  padding: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ocf-cta .ocf-cta__actions {
  gap: 1rem;
}

/* phone becomes a second, outlined button — same height/radius as the
   primary, icon + number on one line, no divider. */
.ocf-cta .ocf-cta__phone {
  border-left: 0;
  padding-left: 0;
  padding-inline: 1.25rem;
  min-height: 3rem;
  border-radius: var(--button-radius);
  border: 1px solid var(--ocf-primary);
  color: var(--ocf-primary);
  background: transparent;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.ocf-cta .ocf-cta__phone:hover {
  background: color-mix(in srgb, var(--ocf-primary) 8%, transparent);
}

/* drop the "Or call us now:" label so the button reads as one line;
   restore a short lead-in via generated content so it still says what
   the number is for. */
.ocf-cta .ocf-cta__phone-text > span:first-child {
  display: none;
}

.ocf-cta .ocf-cta__phone strong::before {
  content: "Call ";
  font-weight: inherit;
}

@media (max-width: 760px) {
  .ocf-cta {
    padding-block: clamp(3rem, 10vw, 4rem);
  }

  .ocf-cta .ocf-cta__panel {
    border-radius: 16px;
    padding: clamp(1.5rem, 6vw, 2rem);
  }

  .ocf-cta .ocf-cta__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/*
 * CTA fields (parity 2026-09-09): cta_gradient options -- mirrors the
 * reference product's own gradient token set (schema.json). The section's
 * own inline `--section-gradient` style (parts/cta-section.php) already
 * sets one of these per-request and wins via specificity; this attribute
 * block is the CSS-only fallback for the same five named options, in case
 * the inline style is ever dropped by a future template. Every value
 * already exists as a design token (assets/ocf-global.css) -- no new
 * gradient is invented here, only the selector that picks one.
 */
.ocf-cta[data-ocf-gradient="hero_dark"] { --section-gradient: var(--gradient-hero-dark); }
.ocf-cta[data-ocf-gradient="primary_fade"] { --section-gradient: var(--gradient-primary-fade); }
.ocf-cta[data-ocf-gradient="media_dark"] { --section-gradient: var(--gradient-media-dark); }
.ocf-cta[data-ocf-gradient="primary_secondary"] { --section-gradient: var(--gradient-primary-secondary); }
.ocf-cta[data-ocf-gradient="surface"] { --section-gradient: var(--gradient-surface); }