/* Big Image Text Block — Plugin Styles
   Uses CSS custom properties (--bitb-*) set via inline style on the wrapper.
   All var() calls include fallbacks matching the theme defaults, so blocks
   without any style configuration render identically to the original.
   Uses the legacy typo class .big-imgage-text-block (preserved for backwards compat). */

/* ── Wrapper (groups large-title + card as one flex child) ──── */

.big-image-text-wrapper {
  flex: 1 1 500px;
  min-width: 0;
  width: 100%;
}

/* Vertical alignment within flex row (frontend — wrapper is direct flex child) */
.big-image-text-wrapper.bitb-valign--top    { align-self: flex-start; }
.big-image-text-wrapper.bitb-valign--bottom { align-self: flex-end; }

/* Vertical alignment within flex row (editor — propagate to Gutenberg block wrapper) */
.is-layout-flex > [data-type="atmp/big-image-text-block"]:has(.bitb-valign--top) {
  align-self: flex-start !important;
}
.is-layout-flex > [data-type="atmp/big-image-text-block"]:has(.bitb-valign--bottom) {
  align-self: flex-end !important;
}

/* When inside a flex Row, the inner card should fill the wrapper */
.big-image-text-wrapper .big-imgage-text-block {
  max-width: 100%;
}

/* Override Gutenberg's flex-wrap: nowrap on Row groups containing this block */
.is-layout-flex:has(> .big-image-text-wrapper),
.is-layout-flex:has(.big-imgage-text-block),
.is-nowrap:has(> .big-image-text-wrapper),
.is-nowrap:has(.big-imgage-text-block) {
  flex-wrap: wrap !important;
}

/* ── Desktop ─────────────────────────────────────────────────── */

.big-imgage-text-block {
  display: flex;
  flex-direction: row;
  width: var(--bitb-width, 100%);
  background-color: var(--bitb-bg, var(--color-white));
  color: var(--bitb-text-color, inherit);
  margin-top: var(--bitb-margin-top, 30px);
  margin-bottom: var(--bitb-margin-bottom, 30px);
  max-width: var(--bitb-max-width, none);
  min-width: var(--bitb-min-width, 0);
  border-radius: var(--bitb-radius, var(--radius-md));
  box-shadow: var(--bitb-shadow, 0 4px 20px rgba(0, 0, 0, 0.1));
  border-width: var(--bitb-border-width, 0);
  border-style: solid;
  border-color: var(--bitb-border-color, transparent);
  overflow: hidden;
}

.big-imgage-text-block .image {
  position: relative;
  width: var(--bitb-img-width, 45%);
  min-height: var(--bitb-img-min-height, 280px);
  background-color: var(--bitb-img-bg, var(--color-bg-alt));
  overflow: hidden;
}

.big-imgage-text-block .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--bitb-img-fit, contain);
}

.big-imgage-text-block .content {
  width: var(--bitb-content-width, 55%);
  padding: var(--bitb-content-padding, 30px) var(--bitb-content-padding, 40px);
  justify-content: var(--bitb-content-valign, center);
  background-color: var(--bitb-content-bg, transparent);
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  box-sizing: border-box;
}

.big-imgage-text-block .content h2,
.big-imgage-text-block .content h3,
.big-imgage-text-block .content h4 {
  max-width: none;
  margin: 0;
}

.big-imgage-text-block .content p {
  max-width: none;
  margin: 0;
}

.big-imgage-text-block .content p,
.big-imgage-text-block .content span {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* CTA link — shrink to button width, don't stretch in flex column */
.big-imgage-text-block .content > a {
  margin-top: 15px;
  align-self: var(--bitb-content-self, flex-start);
  text-decoration: none;
}

.big-imgage-text-block .content .cta.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 8px);
  padding: 0 var(--spacing-lg, 24px);
  height: 36px;
  font-size: var(--font-size-base, 14px);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  line-height: normal;
  margin-left: 0;
}

.big-imgage-text-block .content .cta.button:hover {
  background-color: var(--color-accent-hover);
}

/* When content is highlighted yellow, button switches to primary color */
.big-imgage-text-block.bitb--highlight .content .cta.button {
  background-color: var(--color-primary);
  color: #fff;
}

.big-imgage-text-block.bitb--highlight .content .cta.button:hover {
  opacity: 0.9;
}

/* Image position: right */
.big-imgage-text-block.bitb--image-right {
  flex-direction: row-reverse;
}

/* Card alignment when max-width is set — 0-4-0 beats the 0-3-0 base override */
.big-imgage-text-block.big-image-text-block.outer-wrapper.bitb--align-left {
  margin-left: 0;
  margin-right: auto;
}

.big-imgage-text-block.big-image-text-block.outer-wrapper.bitb--align-center {
  margin-left: auto;
  margin-right: auto;
}

.big-imgage-text-block.big-image-text-block.outer-wrapper.bitb--align-right {
  margin-left: auto;
  margin-right: 0;
}

/* Override theme rules — 0-3-0 beats .front-page .big-imgage-text-block (0-2-0) */
.big-imgage-text-block.big-image-text-block.outer-wrapper {
  width: var(--bitb-width, 100%);
  max-width: var(--bitb-max-width, none);
  min-width: var(--bitb-min-width, 0);
  background-color: var(--bitb-bg, var(--color-white));
  margin-top: var(--bitb-margin-top, 30px);
  margin-bottom: var(--bitb-margin-bottom, 30px);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--bitb-radius, var(--radius-md));
  box-shadow: var(--bitb-shadow, 0 4px 20px rgba(0, 0, 0, 0.1));
}

.big-imgage-text-block.big-image-text-block.outer-wrapper .image {
  position: relative;
  width: var(--bitb-img-width, 45%);
  min-height: var(--bitb-img-min-height, 280px);
  background-color: var(--bitb-img-bg, var(--color-bg-alt));
  overflow: hidden;
}

.big-imgage-text-block.big-image-text-block.outer-wrapper .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--bitb-img-fit, contain);
}

.big-imgage-text-block.big-image-text-block.outer-wrapper .content {
  width: var(--bitb-content-width, 55%);
  padding: var(--bitb-content-padding, 30px) var(--bitb-content-padding, 40px);
  justify-content: var(--bitb-content-valign, center);
  text-align: var(--bitb-content-align, left);
}

/* ── Editor: block wrapper as flex child ── */
.is-layout-flex > [data-type="atmp/big-image-text-block"] {
  flex: 1 0 200px !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ── Mobile / Tablet (≤ 1140px) ──────────────────────────────── */

@media (max-width: 1140px) {
  /* Default: stack vertically (theme handles this on frontend, but not in editor iframe) */
  .big-imgage-text-block {
    flex-direction: column;
  }

  /* Content-first flips the stack order — 0-3-0 beats theme's 0-2-0 on .outer-wrapper */
  .big-imgage-text-block.outer-wrapper.bitb--mobile-content-first {
    flex-direction: column-reverse;
  }

  .big-imgage-text-block.big-image-text-block.outer-wrapper .image {
    position: relative;
    width: var(--bitb-mobile-img-width, 100%);
    height: var(--bitb-mobile-img-height, 300px);
    min-height: 0;
    max-height: none;
    align-self: var(--bitb-mobile-img-align, center);
    overflow: hidden;
  }

  .big-imgage-text-block.big-image-text-block.outer-wrapper .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--bitb-img-fit, contain);
    display: block;
  }

  .big-imgage-text-block.big-image-text-block.outer-wrapper .content {
    width: 100%;
    max-width: none;
    padding: 15px;
    margin: 0;
    background-color: var(--bitb-content-bg, transparent);
    text-align: var(--bitb-mobile-content-align, center);
  }

  .big-imgage-text-block.big-image-text-block.outer-wrapper .content > a {
    margin-top: 20px;
    align-self: var(--bitb-mobile-content-self, center);
  }

  /* Override theme's .outer-wrapper .content .button { display: inline-block } */
  .big-imgage-text-block.big-image-text-block.outer-wrapper .content .cta.button {
    display: inline-flex;
  }

  /* Override theme's mobile .outer-wrapper rules — 0-3-0 beats theme's 0-2-0 */
  .big-imgage-text-block.big-image-text-block.outer-wrapper {
    background-color: var(--bitb-bg, var(--color-white));
    border-radius: var(--bitb-radius, var(--radius-md));
    box-shadow: var(--bitb-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
  }

  /* Override theme's h2/h3/p text-align: center — 0-4-1 beats theme's 0-3-1 */
  .big-imgage-text-block.big-image-text-block.outer-wrapper .content h2,
  .big-imgage-text-block.big-image-text-block.outer-wrapper .content h3,
  .big-imgage-text-block.big-image-text-block.outer-wrapper .content p {
    text-align: var(--bitb-mobile-content-align, center);
  }

  /* Mobile card width & alignment — reset desktop max/min-width */
  .big-imgage-text-block {
    width: var(--bitb-mobile-block-width, 100%) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: var(--bitb-mobile-ml, auto) !important;
    margin-right: var(--bitb-mobile-mr, auto) !important;
  }
}