/* Start of CSS to style the Current Trends and Projections content on city and neighborhood pages */
.market-trend-chart-legend {
    text-transform: uppercase;
    font-family: 'Poppins', arial, helvetica, sans-serif;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .15px;
    margin-top: .25rem;
}

.market-trend-box-wrapper {
background:#D2E5F4;
padding-left: 340px;
}



@media only screen and (max-width: 767px){
.market-trend-box-wrapper {
padding-left: 1rem;
}
}

.market-trend-box {
/* Reset to standard display so text flows naturally */
display: block; 
font-family: Poppins, arial, helvetica, sans-serif;
font-size: 1rem;
margin: 0 0 0 0;
padding: 1rem 1rem 0rem 0rem;
border: none;
}

.market-trend-box::before {
content: "“ "; 
margin-left: -10px;
font-weight: bold;
}

.market-trend-box::after {
content: " ”"; 
font-weight: bold;
}

.price-change-negative {
color:#0b6623;
font-weight:800;
}
.price-change-positive {
color:#a70000;
font-weight:800;
}

/* 
CRITICAL FIX: 
If the JSON injects a <p> or <div> tag, the following forces it 
to behave like a sentence rather than a block. 
This prevents the quote marks from breaking onto new lines.
*/
.market-trend-box > * {
display: inline;
margin: 0;
padding: 0;
}

.market-trend-box-footer {
text-align:right;
margin: 1rem 1rem -1rem 0;
}
.signature-line-1 {
margin-bottom:-.5rem;
font-size: 14px;
font-weight: 500;
}
.signature-line-2 {
font-size: 14px;
font-weight: 500;
}
.signature-line-3 {
margin-bottom:-.5rem;
line-height:22px;
}   
.sidebar-text{
position:relative;
top:1.3rem;
margin: 0 .5rem;
color:#ffffff
}


.combined-market-block-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  position: relative;
  width: 100%;
}

/* ===== DESKTOP & TABLET (768px and above) ===== */
@media (min-width: 768px) {
  .combined-market-block-container {
    /* Create a grid with 2 columns to allow overlap */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    align-items: start;
  }

  /* Code Block 1: Market Trend Box */
  .combined-market-block-container [data-block="code-block-1"] {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
  }

  /* Code Block 2: Sidebar Image */
  .combined-market-block-container [data-block="code-block-2"] {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    margin-left: 50px;
    margin-top: -50px;
    width: 240px;
    background-size: cover;
    display: flex;
    align-items: start;
    justify-content: start;
    background-image: url('https://images.squarespace-cdn.com/content/5db1a8c2af0b1a1c3004a035/8e645f5e-e4a6-4f54-8518-cdcd295e010e/sideBarImage074.png?content-type=image%2Fpng');
  }
}

/* ===== MOBILE (below 768px) ===== */
@media (max-width: 767px) {
  .combined-market-block-container {
    /* Stack vertically: Code Block 2 on top, Code Block 1 below */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
  }
.sidebar-text {
    color:#404040;
    border-bottom: 1px solid #5C7184;
}
  /* Code Block 1: Market Trend Box */
  .combined-market-block-container [data-block="code-block-1"] {
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
}
  
  /* Code Block 2: Sidebar Image */

@media (max-width: 767px) {
    .combined-market-block-container [data-block="code-block-2"] {
        grid-column: 1;
        grid-row: 1;
        z-index: 1;
        margin-left: 0;
        margin-top: 0;
        width: 100%;
        height: 125px !important;
        background-color: #D2E5F4;
        background-size: cover;
        display: flex;
        align-items: start;
        justify-content: start;
        background-image: none;
    }

}

/* ===== Sidebar Image Styling (All Breakpoints) ===== */
.sidebar-image {
  position: relative;
  overflow: hidden;
}

.signature-logo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0rem;
    margin-bottom:1rem;
}
.signature-logo img {
    width: 136px;
    margin-right: 1rem;
}


/* ===== MOBILE (below 768px) ===== */
@media (max-width: 767px) {
  .signature-logo {
  justify-content: center;
  margin-top: .75rem;
  }
.signature-logo img {
    margin-right: 0;
}
}

/* End of CSS to style the Current Trends and Projections content on city and neighborhood pages */







/* Start of CSS to style modal trigger links */

.feature a.modal-trigger {
  font-weight: 700;
  cursor: help;
  display: inline; 
  white-space: normal;
  text-decoration: none;
}

.feature a.modal-trigger::after {
    content: '\f0d8';
    font-family: FontAwesome;
    font-size: 0.75rem;
    margin-left: 4px;
    /* vertical-align: super; */
    position: relative;
    bottom:6px;
}

/* End of CSS to style modal trigger links */


.portfolio-grid-basic .grid-item .portfolio-title { 
   margin-top: -3rem !important;
   color: #fff;
}.portfolio-grid-basic .grid-item .portfolio-title a:hover {
    color: #404040;
}
.portfolio-grid-basic .grid-item .portfolio-title a:hover {
    color: #404040!important;
}


  #welcomeText {text-align:left;}