/* ============================================================
   External sponsored ads  (findamasterplumber "famp" component)
   Styles the generated .famp-external-ads markup.
   Handles up to 2 ads from the same structure.

   Behaviour:
     2 ads -> halves, centred
     1 ad  -> keeps its 728px width, centred (no stretch/upscale)
     narrower than two 360px cards -> stacks 1 per row
   ============================================================ */

/* Section wrapper — spacing around the ad row */
.section-ads,
.section.external-ad {
  padding: 28px 0;
}

/* Ad block */
.famp-external-ads {
  /* max-width: 1430px;
  margin: 0px auto;
  padding: 0px 16px; */
}

/* Row of ad items */
.famp-external-ads__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* centres the row -> 1 ad sits centred */
  align-items: center;
  gap: 16px;
}

/*
   Two banners share the row when each has at least 360px. Flex wrapping then
   moves to one banner per row instead of compressing the creative further.
*/
.famp-external-ads__item {
  flex: 1 1 360px;
  max-width: 728px;
}

/* A lone banner retains its native width rather than stretching. */
.famp-external-ads__item:only-child {
  flex: 0 1 728px;
  max-width: 728px;
}

/* Link + image scale down proportionally, preserving the 728x90 ratio */
.famp-external-ads__link { display: block; }

.famp-external-ads__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* On phones, use the whole available row. */
@media (max-width: 480px) {
  .famp-external-ads__item { flex-basis: 100%; }
}


.famp-ads-label {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: #8a93a0;
}
.famp-ads-info {
  position: relative;
  width: 15px; height: 15px; padding: 0; border: 0; cursor: help;
  border-radius: 50%; background: #8a93a0; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px;
}
.famp-ads-tip {
  position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%);
  width: 200px; padding: 10px 12px; border-radius: 7px;
  background: #2b3038; color: #f3f5f8;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 10;
}
.famp-ads-info:hover .famp-ads-tip,
.famp-ads-info:focus-visible .famp-ads-tip,
.famp-ads-info[aria-expanded="true"] .famp-ads-tip { opacity: 1; visibility: visible; }

/* Keep the tooltip on-screen when there is not enough room to its right. */
@media (max-width: 640px) {
  .famp-ads-tip {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: min(230px, calc(100vw - 32px));
  }
}