/* Small Image Text Card — Plugin Styles */

/* ── Force the parent Row to wrap (overrides Gutenberg's nowrap) ── */
.is-layout-flex:has(> .small-image-text-card),
.is-layout-flex:has(.small-image-text-card),
.is-nowrap:has(> .small-image-text-card),
.is-nowrap:has(.small-image-text-card) {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

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

/* ── Card base styles ── */
.small-image-text-card {
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  margin: var(--sitb-gap, 0);
}

/* Image container — driven by CSS custom properties from render.php */
.small-image-text-card .sitb-image {
  width: 100%;
  height: var(--sitb-img-height, 180px);
  display: flex;
  align-items: center;
  justify-content: var(--sitb-img-align, center);
  overflow: hidden;
}

.small-image-text-card .sitb-image img {
  display: block;
}

/* Text content */
.small-image-text-card .sitb-content {
  padding: var(--sitb-text-padding, 5px);
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-align: var(--sitb-text-align, left);
}

.small-image-text-card .sitb-content a {
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.small-image-text-card .sitb-content a::before {
  transition: all 0.3s ease;
}

.small-image-text-card .sitb-content a::after {
  content: none !important;
}

.small-image-text-card .sitb-content a i {
  font-size: 14px;
  margin-left: 4px;
}

.small-image-text-card .sitb-content .card-title {
  font-weight: 700;
  display: block;
}

.small-image-text-card .sitb-content p {
  margin-top: 10px;
  margin-bottom: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.small-image-text-card .sitb-content p span {
  display: inline;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Color variants */
.small-image-text-card.blue {
  background-color: var(--color-white);
}

.small-image-text-card.blue .sitb-content a {
  color: var(--color-primary);
}

.small-image-text-card.yellow {
  background-color: var(--sitb-highlight-color, var(--color-accent));
}

.small-image-text-card.yellow .sitb-content a {
  color: var(--color-text);
}

/* ── Mobile & Tablet (≤ 1140px) ── */
@media (max-width: 1140px) {
  /*
   * Override the Row's layout on mobile.
   * - Frontend: :has(> .small-image-text-card) matches direct child
   * - Editor:   :has(.small-image-text-card) matches nested descendant
   * - is-content-justification-* overrides Gutenberg's justify-content
   */
  .is-layout-flex:has(> .small-image-text-card),
  .is-layout-flex:has(.small-image-text-card),
  .is-content-justification-left:has(.small-image-text-card),
  .is-content-justification-center:has(.small-image-text-card),
  .is-content-justification-right:has(.small-image-text-card) {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Frontend: card as direct flex child */
  .is-layout-flex > .small-image-text-card {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* Editor: block wrapper + its inner div take full width */
  [data-type="atmp/small-image-text-block"] {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  [data-type="atmp/small-image-text-block"] > div {
    width: 100% !important;
  }

  /* Block wrapper mobile overrides */
  .sitb-block-wrapper {
    width: var(--sitb-mobile-block-width, auto) !important;
    margin-left: var(--sitb-mobile-block-ml, 0) !important;
    margin-right: var(--sitb-mobile-block-mr, auto) !important;
  }

  /* Card mobile overrides */
  .small-image-text-card {
    width: var(--sitb-mobile-card-width, auto) !important;
    max-width: var(--sitb-mobile-card-max-width, none) !important;
    min-width: var(--sitb-mobile-card-min-width, 0) !important;
    margin-left: var(--sitb-mobile-card-ml, auto) !important;
    margin-right: var(--sitb-mobile-card-mr, auto) !important;
    margin-top: var(--sitb-mobile-gap, var(--sitb-gap, 0)) !important;
    margin-bottom: var(--sitb-mobile-gap, var(--sitb-gap, 0)) !important;
  }
}