/* =========================================================
   MPR SYNDICATION / MARKETING EXPOSURE
   Reusable for sales, rentals and other listing pages
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.mpr-syndication-section {
  width: 100%;
  margin: 2rem 0;
}


/* =========================================================
   SECTION HEADING BAR
   Alternate heading style
   ========================================================= */

.mpr-syndication-heading {
  width: 100%;
  margin: 0;
  padding: 12px 18px;
  background: var(--mp-blue);
  color: #ffffff;
  font-family: Roboto, Arial, "Open Sans", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  border-radius: 4px 4px 0 0;
}

.mpr-syndication-heading::before {
  content: "\f0ac";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.5em;
  color: #ffffff;
}


/* =========================================================
   MAIN CONTENT AREA
   ========================================================= */

.mpr-syndication-orbit {
  width: 100%;
  margin: 0;
  padding: clamp(16px, 4vw, 2.5rem);

  background: var(--light-background-color5);

  border: 0;
  border-radius: 0;
  box-shadow: none;

  box-sizing: border-box;
}

.mpr-syndication-orbit *,
.mpr-syndication-orbit *::before,
.mpr-syndication-orbit *::after {
  box-sizing: border-box;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.mpr-syndication-intro {
  margin: 0 auto 2rem;
  text-align: center;
  line-height: 1.5;
}


/* =========================================================
   RESPONSIVE LAYOUT - MOBILE FIRST
   ========================================================= */

.mpr-syndication-orbit-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}


/* =========================================================
   CENTER MARKETING MESSAGE
   ========================================================= */

.mpr-syndication-orbit-center {
  position: relative;
  z-index: 2;

  padding: clamp(1.5rem, 5vw, 2rem);

  border-radius: 1.25rem;
  background: var(--mp-blue);
  color: #ffffff;

  text-align: center;

  box-shadow: 0 0.75rem 1.5rem rgba(0, 45, 75, 0.18);
}

.mpr-syndication-orbit-center h3 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(1.8rem, 5.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.2;
}

.mpr-syndication-orbit-center p {
  margin: 0.65rem 0 0;

  color: #ffffff;

  font-size: 1.5rem;
  line-height: 1.5;
}


/* =========================================================
   LOGO CARDS
   ========================================================= */

.mpr-syndication-logo {
  position: relative;
  z-index: 2;

  display: grid;
  gap: 0.65rem;
  align-items: center;

  margin: 0;
  padding: 1rem;

  border: 1px solid #d9e8ec;
  border-radius: 1rem;

  background: #ffffff;

  box-shadow: 0 0.35rem 1rem rgba(0, 45, 75, 0.08);

  text-align: center;
}


/* =========================================================
   LOGO IMAGE FRAME
   ========================================================= */

.mpr-syndication-logo-frame {
  display: grid;
  place-items: center;

  width: 100%;
  height: clamp(4.5rem, 18vw, 7rem);

  padding: 0.75rem;

  overflow: hidden;
}

.mpr-syndication-logo-frame img {
  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain;

  margin: 0 auto;
}


/* =========================================================
   LOGO CAPTION
   ========================================================= */

.mpr-syndication-logo-caption {
  color: #0b2f55;

  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.25;

  text-align: center;
}


/* =========================================================
   SMALL TABLETS
   TWO-COLUMN GRID
   ========================================================= */

@media (min-width: 36rem) {

  .mpr-syndication-orbit-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mpr-syndication-orbit-center {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   LARGE TABLETS
   THREE-COLUMN GRID
   ========================================================= */

@media (min-width: 52rem) {

  .mpr-syndication-orbit-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* =========================================================
   DESKTOP ORBITAL LAYOUT
   12 LOGO NODES
   ========================================================= */

@media (min-width: 72rem) {

  .mpr-syndication-orbit-layout {
    display: block;
    min-height: 58rem;
  }


  /* ---------------------------------------------------------
     OUTER ORBIT LINE
     --------------------------------------------------------- */

  .mpr-syndication-orbit-layout::before {
    content: "";

    position: absolute;
    inset: 5rem 7rem;

    border: 2px dashed rgba(36, 143, 143, 0.30);
    border-radius: 50%;

    z-index: 1;
  }


  /* ---------------------------------------------------------
     SUBTLE CENTER GLOW
     --------------------------------------------------------- */

  .mpr-syndication-orbit-layout::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 27rem;
    height: 27rem;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
      radial-gradient(
        circle,
        rgba(127, 209, 206, 0.22),
        rgba(127, 209, 206, 0.05) 58%,
        transparent 60%
      );

    z-index: 0;
  }


  /* ---------------------------------------------------------
     CENTER CIRCLE
     --------------------------------------------------------- */

  .mpr-syndication-orbit-center {
    position: absolute;

    left: 50%;
    top: 50%;

    display: grid;
    align-content: center;

    width: 26rem;
    min-height: 26rem;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    padding: 2rem;
  }


  /* ---------------------------------------------------------
     DESKTOP LOGO CARD SIZE
     --------------------------------------------------------- */

  .mpr-syndication-logo {
    position: absolute;

    width: 15.25rem;
    min-height: 9.5rem;

    padding: 0.8rem;
  }

  .mpr-syndication-logo-frame {
    height: 5rem;
    padding: 0.45rem;
  }


  /* ---------------------------------------------------------
     1 - TOP CENTER
     --------------------------------------------------------- */

  .mpr-syndication-logo--1 {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }


  /* ---------------------------------------------------------
     2-3 - UPPER RIGHT
     --------------------------------------------------------- */

  .mpr-syndication-logo--2 {
    right: 24%;
    top: 3%;
  }

  .mpr-syndication-logo--3 {
    right: 7%;
    top: 14%;
  }


  /* ---------------------------------------------------------
     4 - RIGHT CENTER
     --------------------------------------------------------- */

  .mpr-syndication-logo--4 {
    right: 0;
    top: 36%;
  }


  /* ---------------------------------------------------------
     5-6 - LOWER RIGHT
     --------------------------------------------------------- */

  .mpr-syndication-logo--5 {
    right: 5%;
    bottom: 24%;
  }

  .mpr-syndication-logo--6 {
    right: 21%;
    bottom: 6%;
  }


  /* ---------------------------------------------------------
     7 - BOTTOM CENTER
     --------------------------------------------------------- */

  .mpr-syndication-logo--7 {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }


  /* ---------------------------------------------------------
     8-9 - LOWER LEFT
     --------------------------------------------------------- */

  .mpr-syndication-logo--8 {
    left: 21%;
    bottom: 6%;
  }

  .mpr-syndication-logo--9 {
    left: 5%;
    bottom: 24%;
  }


  /* ---------------------------------------------------------
     10 - LEFT CENTER
     --------------------------------------------------------- */

  .mpr-syndication-logo--10 {
    left: 0;
    top: 36%;
  }


  /* ---------------------------------------------------------
     11-12 - UPPER LEFT
     --------------------------------------------------------- */

  .mpr-syndication-logo--11 {
    left: 7%;
    top: 14%;
  }

  .mpr-syndication-logo--12 {
    left: 24%;
    top: 3%;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 35.99rem) {

  .mpr-syndication-heading {
    padding: 10px 14px;
    font-size: 1.9rem;
  }

  .mpr-syndication-orbit {
    padding: 16px;
  }

  .mpr-syndication-logo-caption {
    font-size: 1.6rem;
  }
}


/* =========================================================
   MPR SYNDICATION - HTML USAGE

   <section class="mpr-syndication-section">

     <h2 class="mpr-syndication-heading">
       Section Heading
     </h2>

     <div class="mpr-syndication-orbit">

       <p class="mpr-syndication-intro">
         Introductory text...
       </p>

       <div class="mpr-syndication-orbit-layout">

         <div class="mpr-syndication-orbit-center">
           <h3>Center Heading</h3>
           <p>Center description...</p>
         </div>

         <div class="mpr-syndication-logo mpr-syndication-logo--1">
           <div class="mpr-syndication-logo-frame">
             <img src="..." alt="...">
           </div>
           <div class="mpr-syndication-logo-caption">
             Logo Name
           </div>
         </div>

       </div>
     </div>

   </section>

   ========================================================= */