/**
 * MP Blocks - MP CTA Block styles
 *
 * @author    Maxime Potier <contact@maximepotier.fr>
 * @copyright 2026 Maxime Potier
 * @license   Commercial - All rights reserved
 */

.mpcta-block {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #0f172a;
}

/* "Layout: contained" setting - boxes the whole block (background image
   included, not just the content) within the site's standard container
   width, instead of the default edge-to-edge full-bleed background. Mirrors
   the theme's .container max-width (capped at 1400px above 1420px) - same
   convention as MP Video Slider's own contained layout, so both blocks line
   up consistently on the page. No left/right padding/gutter: the block
   itself fills the full 1400px width edge-to-edge (any breathing room is up
   to the border/box-shadow settings, not a fixed gutter here). */
.mpcta-block--contained {
  box-sizing: border-box;
}

@media (min-width: 1420px) {
  .mpcta-block--contained {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.mpcta-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mpcta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mpcta-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  padding: 3rem 1.5rem;
  color: #fff;
}

.mpcta-content--left {
  justify-content: flex-start;
  text-align: left;
}

.mpcta-content--center {
  justify-content: center;
  text-align: center;
}

.mpcta-content--right {
  justify-content: flex-end;
  text-align: right;
}

.mpcta-inner {
  max-width: 720px;
}

.mpcta-subtitle {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.mpcta-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

@media (min-width: 992px) {
  .mpcta-title {
    font-size: 1.5rem;
  }
}

.mpcta-description {
  font-size: 1rem;
  opacity: 0.95;
  margin-bottom: 1.25rem;
}

.mpcta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.mpcta-content--center .mpcta-buttons {
  justify-content: center;
}

.mpcta-content--right .mpcta-buttons {
  justify-content: flex-end;
}

/* MP fix (2026-08-07, client request "design system pour les boutons
   mpcta-block") - this block's buttons used to be bespoke (solid red
   primary, white-outline-on-image secondary); replaced by the LFDP design
   system (`lfdp-btn lfdp-btn-primary` / `lfdp-btn lfdp-btn-outline`, added
   on the markup in mp_cta_block.tpl). Every property that would have
   conflicted (padding, border, border-radius, font-weight, colors, hover)
   removed here rather than fought with a compound selector - `.mpcta-btn`/
   `--primary`/`--secondary` are single-class selectors, same specificity as
   `.lfdp-btn`/`.lfdp-btn-primary`/`.lfdp-btn-outline`, so leaving stale
   properties would make the result depend on stylesheet load order. Only
   `text-decoration: none` is kept (the design system doesn't reset it, and
   `<button>` doesn't need it but `<a>` does - both markups share this same
   class). Selectors kept empty (not deleted) as layout/JS hooks - `.mpcta-
   btn--primary`/`--secondary` still exist for a11y/testing/future overrides
   even though they carry no visual rule of their own anymore. */
.mpcta-btn {
  text-decoration: none;
}

/* "Display mode: split" - image and text sit side by side in two
   equal-height columns instead of text overlaid on a full-bleed background.
   The image column width is admin-configurable via --mpcta-split-img-width
   (40/50/60%); the text column takes the remaining space. */
.mpcta-block--split {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: transparent;
}

.mpcta-split-media {
  position: relative;
  overflow: hidden;
  flex: 0 0 100%;
  max-width: 100%;
  min-height: 220px;
}

.mpcta-split-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mpcta-split-content {
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  padding: 2.5rem 1.5rem;
  color: #fff;
}

.mpcta-split-content .mpcta-inner {
  max-width: 560px;
  margin: auto 0;
}

@media (min-width: 768px) {
  .mpcta-split-media {
    flex-basis: var(--mpcta-split-img-width, 50%);
    max-width: var(--mpcta-split-img-width, 50%);
    min-height: 100%;
  }

  .mpcta-split-content {
    flex-basis: calc(100% - var(--mpcta-split-img-width, 50%));
    max-width: calc(100% - var(--mpcta-split-img-width, 50%));
    padding: 3rem 4rem;
  }

  /* Image on the right: swap the visual order of the two columns while
     keeping the image first in the DOM (better for LCP - it stays the
     first meaningful element downloaded/painted regardless of position). */
  .mpcta-block--split-right .mpcta-split-media {
    order: 2;
  }

  .mpcta-block--split-right .mpcta-split-content {
    order: 1;
  }
}