/** TOP BREAKING NEWS POST (static article block, not the slider) **/
#breaking-news {
  height:100%;
  & > div { height:100%;
    & article {
      display:flex; flex-direction: column; height:100%;
      @media (max-width:767px) { margin-bottom: 0 !important; }
      & h2.entry-title { order:-1;
        & a:hover { text-decoration:underline; text-decoration-thickness: 2px; }
      }
      & a.entry-featured-image-url {
        height:100%; overflow:hidden;
        & img { height:100%; object-fit:cover; transition:.2s ease all; }
      }
      & a:hover img { transform: scale(1.035); transition: .2s ease all; }
    }
  }
}

/** MUST READS grid **/
.must-reads > div {
  display:grid; grid-template-columns:1fr 1fr; grid-gap:20px;
}
.must-reads article {
  display:flex; flex-direction:column; margin-bottom:0;
  & a.entry-featured-image-url {
    order:-1; overflow:hidden; margin-bottom:10px;
    & img { transition:.2s ease all; }
  }
  & h2.entry-title { order:2;
    & a:hover { text-decoration:underline; text-decoration-color: var(--blue); }
  }
  & p.post-meta { order:1; }
  & .post-content { display:none; }
  & a:hover img { transform: scale(1.1); transition:.2s ease all; }

  /* numeric badges 1–4 */
  &::before {
    content:'1'; display:flex; justify-content:center; align-items:center;
    width:60px; height:60px; background-color:var(--red); color:white;
    font-size:42px; font-weight:900; text-align:center; position:absolute; left:0; top:0; z-index:1;
  }
  &:nth-child(2)::before { content:'2'; }
  &:nth-child(3)::before { content:'3'; }
  &:nth-child(4)::before { content:'4'; }
}
.must-reads .entry-featured-image-url img { object-fit:cover; height:180px; }

/** RECENT ARTICLES cards **/
#recent_articles {
  & article.et_pb_post {
    & a.entry-featured-image-url {
      height:180px; order:1; margin-bottom:10px; overflow:hidden;
      & img { height:100%; object-fit:cover; transition:.2s ease all; }
      &:hover img { transform: scale(1.1); transition:.2s ease all; }
    }
    & p.post-meta { order:2; }
    & h3.entry-title {
      padding-top:5px; text-transform:none; order:3;
      &:hover { text-decoration: underline; }
    }
  }
}

/** DESTINATIONS & CAREERS HUB ACCORDION **/
.destinations-menu,
.careers-menu {
  & .et_pb_toggle_title { padding:20px 50px 0 0; }
  & .et_pb_toggle_content h4 { color:white; text-transform:none; }
  /* destinations grid inside accordion */
  & .et_pb_toggle_content .toggle-wrap {
    display:grid !important; grid-template-columns:1fr 1fr 1fr 1fr; gap:30px 20px;
    @media(max-width:800px){ grid-template-columns:1fr 1fr; }
  }
}
/* override for careers layout */
.careers-menu {
  & .et_pb_toggle_content .toggle-wrap {
    display:grid !important; grid-template-columns:240px 1fr 1fr; gap:30px 20px;
    & h6 { color: var(--yellow); }
    @media(max-width:800px){ grid-template-columns:1fr; }
  }
}

/*** Adjustments to Blog Grid 3 col (related area) ***/
.related-articles-col {
  @media (min-width: 981px) {
    & .column.size-1of3 {
      width:31.667% !important; margin-right:2.5% !important;
      &:last-child { margin-right:0 !important; }
    }
  }
}

/**** Swap Divi 3-col blog to 4 columns when flagged ****/
@media (min-width: 981px) {
  .dt-4-columns-blog .et_pb_salvattore_content[data-columns]::before {
    content: '4 .column.size-1of4' !important;
  }
  .dt-4-columns-blog .column.size-1of4 {
    width:24% !important; margin-right:1%;
  }
  .dt-4-columns-blog .et_pb_post { margin-bottom:11px; }
}
.dt-4-columns-blog {
  & article.et_pb_post:hover a img { filter:brightness(1.3); transition:.2s ease all; }
  & .entry-title {
    text-transform:none;
    &:hover a { text-decoration:underline; }
  }
}

/*** CAREER ADVICE PAGE grid & recent articles multi-column helper ***/
.career-post-col {
  & .et_pb_ajax_pagination_container {
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    @media(max-width:500px){ grid-template-columns:1fr; }
    & article.et_pb_post {
      background:#f3f3f3; display:flex; flex-direction:column; padding-bottom:20px; margin:0;
      & a.entry-featured-image-url { order:1; margin:0; & img { height:200px; object-fit:cover; } }
      & .entry-title { order:3; text-transform:none; padding:0 16px; }
      & .post-meta { order:2; padding:8px 16px 4px 16px; }
    }
  }
}
.recent-articles {
  @media(min-width:600px) and (max-width:980px) {
    & .et_pb_ajax_pagination_container { column-count:2; }
  }
}



/*** Related Articles ***/
.related-articles-col {
	& .related-title-col {
		margin-bottom:0 !important;
	}
    & .ig-related.grid {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        @media (max-width: 980px) {
            & {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 550px) {
            & {
                grid-template-columns: 1fr;
            }
        }

        & article.ig-related__item {
            border-width: 0;
            border-color: var(--red);
            border-style: solid;
            background-color: var(--red);
            overflow: hidden;
            display: flex;
            flex-direction: column;

            & a.ig-related-img-wrap  {
                overflow: hidden;
				height: 240px;

                & img.wp-post-image {
                    height:240px;
                    width: 100%;
                    object-fit: cover;
                    transition: transform .2s ease;
                }
				@media (min-width: 551px) and (max-width: 900px) {
					& {
						height: 160px;

						& img.wp-post-image {
							height:160px;
						}
					}		
				}
            }

            &:hover>a.ig-related-img-wrap img.wp-post-image {
                transform: scale(1.05);
            }

            & h4.ig-related__title {
				font-weight:bold;
				color:white;
                text-transform: none;
				padding:4px 12px 20px 12px;
                order: 2;
            }
			& .ig-related__meta {
				font-size:14px;
				text-transform:uppercase;
				padding:12px 12px 4px 12px;
				order: 1;
				& a {
					color:var(--yellow);
				}
			}
        }
    }
}