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

.mprs-block {
  width: 100%;
  box-sizing: border-box;
  padding: 1.5rem 15px;
}

/* "Layout: contained" setting - boxes the block within the site's standard
   container width, same convention as MP Video Slider / MP CTA Block /
   MP Category Products' own "layout" field. */
.mprs-block--contained {
  padding-left: 15px;
  padding-right: 15px;
}

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

.mprs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Item column: icon+text row on top, button pinned to the bottom (via
   .mprs-link-wrap's flex-grow below) so buttons line up across items
   regardless of description length - all items are already stretched to
   equal height by .mprs-list's default flex "align-items: stretch". */
.mprs-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 220px;
  min-width: 0;
}

.mprs-link-wrap {
  display: flex;
  /* Grow to fill the item's full height, pushing .mprs-item-btn (its
     sibling below) to the bottom of the item. */
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

a.mprs-link-wrap:hover .mprs-title,
a.mprs-link-wrap:focus .mprs-title {
  text-decoration: underline;
}

.mprs-item-head {
  display: flex;
  /* "Icon vs text vertical alignment" setting - default is flex-start (top);
     the .mprs-item--valign-* modifier classes below switch it to center or
     bottom. Only applies in the default (icon-left) layout - the icon-top
     rule right below re-declares align-items for the stacked layout. */
  align-items: flex-start;
  /* "Space between the icon and the title/description" setting - --mprs-icon-gap
     is set inline on .mprs-block by the template (falls back to the original
     0.75rem when the setting is empty). */
  gap: var(--mprs-icon-gap, 0.75rem);
}

/* "Icon vs text vertical alignment" setting - vertical position of the
   title/description column next to the icon. Scoped to :not(.mprs-item--icon-top)
   so it never fights the stacked ("icon top") layout, whose own align-items is
   driven by the "Content alignment" setting instead. */
.mprs-item:not(.mprs-item--icon-top).mprs-item--valign-center .mprs-item-head {
  align-items: center;
}

.mprs-item:not(.mprs-item--icon-top).mprs-item--valign-bottom .mprs-item-head {
  align-items: flex-end;
}

/* "Icon position: top" setting - icon stacked above the title/description
   instead of beside them. */
.mprs-item--icon-top .mprs-item-head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mprs-icon-gap, 0.5rem);
}

/* "Content alignment" setting - horizontal position of the icon+title+
   description block within the item's own width. .mprs-link-wrap is the
   flex container item-head sits in (row axis = horizontal), so
   justify-content moves it left/center/right; in "icon top" mode
   item-head itself becomes the column, so align-items is used instead. */
.mprs-item--align-center .mprs-link-wrap {
  justify-content: center;
}

.mprs-item--align-right .mprs-link-wrap {
  justify-content: flex-end;
}

.mprs-item--icon-top.mprs-item--align-center .mprs-item-head {
  align-items: center;
}

.mprs-item--icon-top.mprs-item--align-right .mprs-item-head {
  align-items: flex-end;
}

.mprs-item--align-center .mprs-text-col {
  text-align: center;
}

.mprs-item--align-right .mprs-text-col {
  text-align: right;
}

/* The button is right-aligned by default (see base .mprs-item-btn rule
   below) regardless of the icon/text "Content alignment" setting - only
   "center" needs its own override here. */
.mprs-item--align-center .mprs-item-btn {
  align-self: center;
}

.mprs-icon {
  /* "Icon / custom image size" setting - --mprs-icon-size is set inline on
     .mprs-block by the template (falls back to the original 84px default
     when the setting is empty). A bit of breathing room (+12px) is kept
     around the icon/image itself so it doesn't look cramped against the
     title/description column. */
  flex: 0 0 calc(var(--mprs-icon-size, 84px) + 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mprs-icon i {
  font-size: var(--mprs-icon-size, 84px);
  line-height: 1;
}

.mprs-icon img {
  width: var(--mprs-icon-size, 84px);
  height: var(--mprs-icon-size, 84px);
  object-fit: contain;
}

/* Title + description, tightly stacked next to the icon (rather than
   description sitting below a row whose height is dictated by the icon). */
.mprs-text-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* Title / description font sizes come from --mprs-title-fs / --mprs-desc-fs,
   set inline per item by the template. They are custom properties rather than
   a plain inline "font-size" so the mobile sizes below can override them
   without !important. Unset = inherit, i.e. the pre-setting behaviour. */
.mprs-title {
  font-size: var(--mprs-title-fs, inherit);
  font-weight: 600;
  line-height: 1.3;
}

.mprs-description {
  display: block;
  font-size: var(--mprs-desc-fs, inherit);
  line-height: 1.3;
}

.mprs-item-btn {
  display: inline-block;
  align-self: flex-end;
  margin-left: 0;
  margin-top: 0.6rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  background-color: #E31E24;
  color: #fff;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mprs-item-btn:hover,
.mprs-item-btn:focus {
  background-color: #dc2626;
  color: #fff;
}

@media (max-width: 767px) {
  .mprs-list {
    justify-content: flex-start;
    /* Client request: reduce both row AND column gap on mobile (desktop is
       1.5rem 1rem). Note the column gap also feeds the "items per row" grid
       math in the .mprs-item flex-basis calc() below, which subtracts this
       same 0.25rem per extra column. */
    gap: 0.25rem;
  }

  /* "Items per row on mobile" setting (1 to 4) - --mprs-mobile-cols is set
     inline on .mprs-block by the template (defaults to 1, i.e. the
     original one-item-per-row mobile layout). Column gap (0.25rem, see
     .mprs-list above) is subtracted so N columns fit exactly on one row. */
  .mprs-item {
    flex: 1 1 calc((100% - (var(--mprs-mobile-cols, 1) - 1) * 0.25rem) / var(--mprs-mobile-cols, 1));
  }

  /* Mobile overrides. --mprs-m-* are set inline on .mprs-block by the
     template, which already resolved the "inherit" choices into the desktop
     values - so these rules are safe to apply unconditionally. They are
     deliberately more specific than the desktop .mprs-item--* modifier
     classes they have to beat (up to 4 classes for the "icon vs text
     vertical alignment" rule). */
  .mprs-block .mprs-list .mprs-item .mprs-item-head {
    flex-direction: var(--mprs-m-icon-dir, row);
    align-items: var(--mprs-m-head-align, flex-start);
  }

  .mprs-block .mprs-item .mprs-link-wrap {
    justify-content: var(--mprs-m-justify, flex-start);
  }

  /* --mprs-m-textcol-self is "stretch" only in the stacked (icon on top)
     layout, so the per-element alignments below are measured against the
     item's full width rather than the column's shrink-to-fit box. */
  .mprs-block .mprs-item .mprs-text-col {
    align-self: var(--mprs-m-textcol-self, auto);
    text-align: var(--mprs-m-text-align, left);
  }

  .mprs-block .mprs-item .mprs-item-btn {
    align-self: var(--mprs-m-btn-self, flex-end);
  }

  /* "MOBILE - Icon / custom image size" setting - falls back to the desktop
     size when left empty. */
  .mprs-icon {
    flex-basis: calc(var(--mprs-m-icon-size, var(--mprs-icon-size, 84px)) + 12px);
  }

  .mprs-icon i {
    font-size: var(--mprs-m-icon-size, var(--mprs-icon-size, 84px));
  }

  .mprs-icon img {
    width: var(--mprs-m-icon-size, var(--mprs-icon-size, 84px));
    height: var(--mprs-m-icon-size, var(--mprs-icon-size, 84px));
  }

  /* Font size: per-item settings, same fallback logic as the desktop sizes.
     Alignment: block-level settings, each falling back to the content
     alignment (already resolved by the template). */
  .mprs-block .mprs-item .mprs-title {
    font-size: var(--mprs-m-title-fs, var(--mprs-title-fs, inherit));
    text-align: var(--mprs-m-title-align, inherit);
  }

  .mprs-block .mprs-item .mprs-description {
    font-size: var(--mprs-m-desc-fs, var(--mprs-desc-fs, inherit));
    text-align: var(--mprs-m-desc-align, inherit);
  }
}